Différences

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

--- slam4:richclient:angularjs:elements [2015/01/03 19:52] – [Injection de dépendance (dependency injection)] jcheron
+++ slam4:richclient:angularjs:elements [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 71: / Ligne 71: @@
         controllerAs:'alliasForController'
     };
+});
+</sxh>
+Directive complète :
+<sxh javascript>
+myApp.directive( 'myDirective', function () {
+    return {
+        restrict: 'EA',
+        controller: function( $scope, $element, $attrs, $transclude ) {
+            // Controller code goes here.
+        },
+        compile: function compile( tElement, tAttributes, transcludeFn ) {
+            // Compile code goes here.
+            return {
+                pre: function preLink( scope, element, attributes, controller, transcludeFn ) {
+                    // Pre-link code goes here
+                },
+                post: function postLink( scope, element, attributes, controller, transcludeFn ) {
+                    // Post-link code goes here
+                }
+            };
+        }
+    };
 });
 </sxh>
@@ Ligne 79: / Ligne 103: @@
 Injection avec tableau (conseillé)
 <sxh javascript;gutter:false>
-someModule.controller("MyController", ["$scope', "greeter", function($scope, greeter) {
+angular.module("MyModule").controller("MyController", ["$scope", "greeter", function($scope, greeter) {
   // ...
 }]);
 </sxh>
+Injection avec la propriété **$inject**
+<sxh javascript;gutter:false>
+var MyController = function($scope, greeter) {
+  // ...
+}
+MyController.$inject = ["$scope", "greeter"];
+angular.module("MyModule").controller("MyController", MyController);
+</sxh>
+<html><div class="note">Quelque soit la méthode utilisée, veillez à faire en sorte que les paramètres de la fonction controller soient définis dans le même ordre que les services injectés</div></html>
+**<fc #FF0000>A éviter : l'injection implicite</fc>**
+<sxh javascript;gutter:false>
+angular.module("MyModule").controller("MyController", function($scope, greeter) {
+  // ...
+});
+</sxh>
@@ Ligne 100: / Ligne 144: @@
 </html>
 </sxh>
+===== Création d'objets injectables =====
+==== Factory ====
+<sxh javascript>
+monApp.factory('maFactory', function() {
+    return {
+        "member": "value",
+        "method": function(){
+            // faire qqchose
+        }
+    }
+});
+</sxh>
+**maFactory** est un singleton (une seule instance), et devient injectable :
+Injection dans un contrôleur :
+<sxh javascript>
+app.controller("monController",["$scope","maFactory",function($scope,maFactory){
+    //Utilisation de maFactory
+    $scope.member=maFactory.member;
+    maFactory.method();
+    ...
+}]);
+</sxh>
+==== Service ====
+Le service permet également de créer un objet injectable, mais d'une autre façon :
+<sxh javascript>
+monApp.service('monService', function() {
+    this.name = "Anonymous";
+    this.id = null;
+    this.login = function(){
+        // faire un truc pour se connecter
+    }
+    this.logout = function(){
+        // faire un truc pour se déconnecter
+    }
+});
+</sxh>