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:10] – [Hello world modifié] 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 65: Ligne 65:
     <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 179: 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 229: 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 254: 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 313: 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 322: 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.1453306227.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)