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 [2016/01/20 17:04] – [Traditionnel Hello world :] 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.3.11/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 37: Ligne 37:
     <meta charset="UTF-8">     <meta charset="UTF-8">
     <title>Hello</title>     <title>Hello</title>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
 </head> </head>
 <body> <body>
Ligne 57: 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 182: 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 232: 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 257: 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 316: 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 325: 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.1453305895.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)