slam4:richclient:angularjs:bases

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

slam4:richclient:angularjs:bases [2015/01/28 08:13] – [3- Intégration] jcheronslam4:richclient:angularjs:bases [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 6: Ligne 6:
 Installer AngularJS Eclipse Plugin ([[https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started|AngularJS Eclipse]]) Installer AngularJS Eclipse Plugin ([[https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started|AngularJS Eclipse]])
  
-**Avec PhpStorm :**+**Avec PhpStorm ou WebStorm:**
 voir [[http://blog.jetbrains.com/phpstorm/2014/05/angularjs-support-in-phpstorm/|PhpStorm AngularJS]] voir [[http://blog.jetbrains.com/phpstorm/2014/05/angularjs-support-in-phpstorm/|PhpStorm AngularJS]]
 ===== -- Téléchargement ===== ===== -- Téléchargement =====
Ligne 23: Ligne 23:
  
 <sxh html;title:Juste avant la fermeture du head de la page> <sxh html;title:Juste avant la fermeture du head de la page>
-<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 </head> </head>
 </sxh> </sxh>
  
-Quoi qu'en disent certains, il est préférable d'intégrer AngularJS le plus tôt possible dans la page, pour ne pas voir apparaître la page avant l'exécution des scripts Angular présents. +Quoi qu'en disent certains, il est préférable d'intégrer AngularJS le plus tôt possible dans la page, pour ne pas voir apparaître la page avant l'exécution des scripts Angular présents (même avec la directive [[https://docs.angularjs.org/api/ng/directive/ngCloak|ng-cloak]]). 
 ===== -- Premiers pas ===== ===== -- Premiers pas =====
 ==== Traditionnel Hello world : ==== ==== Traditionnel Hello world : ====
Ligne 33: Ligne 33:
 <sxh html;title:v_hello.html> <sxh html;title:v_hello.html>
 <!DOCTYPE html> <!DOCTYPE html>
-<html>+<html lang="en" ng-app="HelloApp">
 <head> <head>
-<meta charset="UTF-8"> +    <meta charset="UTF-8"> 
-<title></title> +    <title>Hello</title> 
-<script +    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>+
 </head> </head>
 <body> <body>
- <div ng-app="" ng-controller="hello"> +    <div ng-controller="HelloController as hello"> 
- <br> Message : {{message}} +        <br> Message : {{hello.message}} 
- </div>+    </div>
  
- <script> +    <script> 
- function hello($scope) { +        angular.module("HelloApp",[]).controller("HelloController",function(){this.message="Hello world";}); 
- $scope.message = "Hello world"; +    </script>
- } +
- </script>+
 </body> </body>
 </html> </html>
 </sxh> </sxh>
  
-  * **ng-app** ou **data-ng-app** définit l'application (vide pour l'instant)+  * **ng-app** ou **data-ng-app** définit l'application (HelloApp)
   * **ng-controller** ou **data-ng-controller** définit la zone d'action (la div dans l'exemple) d'un contrôleur   * **ng-controller** ou **data-ng-controller** définit la zone d'action (la div dans l'exemple) d'un contrôleur
   * Les accolades **<nowiki>{{ et }}</nowiki>** définissent une expression et mettent en oeuvre le data-binding entre vue (HTML) et contrôleur (fonction javascript)   * Les accolades **<nowiki>{{ et }}</nowiki>** définissent une expression et mettent en oeuvre le data-binding entre vue (HTML) et contrôleur (fonction javascript)
Ligne 60: Ligne 57:
 ==== Hello world modifié ==== ==== Hello world modifié ====
  
-On change maintenant la portée du contrôleur (sur balise html de la page), et on ajoute de quoi modifier le destinataire du Hello **aQui** via un champ input, pour illustrer la notion de data-binding (avec la directive **ng-model**)+On ajoute de quoi modifier le message via un champ input, pour illustrer la notion de data-binding (avec la directive **ng-model**)
  
-<sxh html>+<sxh html;title:index.html;highlight:[10]>
 <!DOCTYPE html> <!DOCTYPE html>
-<html ng-app="" ng-controller="hello">+<html lang="en" ng-app="HelloApp">
 <head> <head>
-<meta charset="UTF-8"> +    <meta charset="UTF-8"> 
-<title>{{message}}</title> +    <title>Hello</title> 
-<script +    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>+
 </head> </head>
 <body> <body>
- <div> +    <div ng-controller="HelloController as hello"> 
- Message : <input type="text" ng-model="aQui"><br> +        <input type="text" ng-model="hello.message"> 
- <br> Hello {{aQui}} +        <br> Message : {{hello.message}} 
- </div>+    </div>
  
- <script> +    <script> 
- function hello($scope) { +        angular.module("HelloApp",[]).controller("HelloController",function(){this.message="Hello world";}); 
- $scope.aQui= "world"; +    </script>
- } +
- </script>+
 </body> </body>
 </html> </html>
Ligne 161: Ligne 155:
 </sxh> </sxh>
  
-==== -- Modules ====+==== -- Modules ou application ====
 Un module est un conteneur d'éléments pour une application : services, directives, filtres, contrôleurs. Un module est un conteneur d'éléments pour une application : services, directives, filtres, contrôleurs.
 Chaque module d'une application correspond logiquement à une fonctionnalité. Chaque module d'une application correspond logiquement à une fonctionnalité.
Ligne 185: Ligne 179:
 Un contrôleur est défini par un constructeur permettant d'augmenter la portée (le scope) d'AngularJs, il peut utiliser des services, par injection de dépendance. Un contrôleur est défini par un constructeur permettant d'augmenter la portée (le scope) d'AngularJs, il peut utiliser des services, par injection de dépendance.
  
- 
-Exemple en dehors d'un module : 
-<sxh html> 
-<div ng-app="" ng-controller="personneController"> 
- 
-Nom : <input type="text" ng-model="nom"><br> 
-Prénom : <input type="text" ng-model="prenom"><br> 
-<br> 
-Nom et prénom : {{nomComplet()}} 
- 
-</div> 
- 
-<script> 
-function personneController($scope) { 
-    $scope.prenom = "David", 
-    $scope.nom = "Beckam", 
-    $scope.fullName = function() { 
-        return $scope.nom + " " + $scope.prenom; 
-    } 
-} 
-</script> 
-</sxh> 
  
 Exemple de contrôleur dans un module : Exemple de contrôleur dans un module :
Ligne 235: Ligne 207:
  
 voir [[https://docs.angularjs.org/guide/controller]] voir [[https://docs.angularjs.org/guide/controller]]
 +
 +
 +==== ControllerAs et $scope ====
 +L'utilisation de controllerAs permet d'éviter l'injection de $scope :
 +
 +<sxh javascript;title:apps.js>
 +var myApp = angular.module('myApp',[]);
 +
 +myApp.controller('CarreController', [function() {
 + this.value=0;
 + this.carre = function(value) { return value * value; };
 +}]);
 +
 +</sxh>
 +
 +La vue associée est la suivante :
 +<sxh html>
 +<fieldset data-ng-app="myApp" data-ng-controller="CarreController as ctrl">
 + <legend>Carré</legend>
 + <input type="text" data-ng-model="ctrl.value">
 + <div>Carré : {{ctrl.carre(ctrl.value)}}</div>
 +</fieldset>
 +</sxh>
  
 ==== -- $scope ==== ==== -- $scope ====
Ligne 260: Ligne 255:
 </style> </style>
 <script <script
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>+ src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 <script src="app.js"></script> <script src="app.js"></script>
 </head> </head>
Ligne 319: Ligne 314:
 <title></title> <title></title>
 <script <script
- src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>+ src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
     <script src="app/app.js"></script>     <script src="app/app.js"></script>
 </head> </head>
Ligne 328: Ligne 323:
 </html> </html>
 </sxh> </sxh>
 +
 +=== Utilisation du service ngCookies ===
 +
 +Le service **ngCookie** n'est pas intégré par défaut à angular, il est donc nécessaire d'inclure le fichier js correspondant :
 +<sxh html;title:index.html>
 +<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.min.js"></script>
 +</sxh>
 +
 +Il faut ensuite intégrer ngCookies en tant que dépendance dans l'application :
 +
 +<sxh javascript;title:js/app.js>
 +var App = angular.module('appName', ['ngCookies']);
 +</sxh>
 +
 +nbCookies peut ensuite être injecté dans les contrôleur le nécessitant :
 +
 +<sxh javascript;title:js/ctrl.js>
 +app.controller("ctrlName",["$cookies",function($cookies){
 +    // Retrieving a cookie
 +  var favoriteCookie = $cookies.get('myFavorite');
 +  // Setting a cookie
 +  $cookies.put('myFavorite', 'oatmeal');
 +}]);
 +</sxh>
 +
  
 === Création d'un service === === Création d'un service ===
  • slam4/richclient/angularjs/bases.1422429184.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)