Différences

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

--- slam4:richclient:angularjs:elements [2015/01/01 14:03] – [Controller] jcheron
+++ slam4:richclient:angularjs:elements [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 57: / Ligne 57: @@
 </div>
 </sxh>
+===== Directive =====
+Créer une directive de type Element dans MyModule
+<sxh javascript;gutter:false>
+angular.module("MyModule").directive("MyDirective",function(){
+    return {
+        restrict:'E',
+        template:'<html>....',
+        templateUrl:'urlForTemplate',
+        controller:function(){
+        //Controller code
+        },
+        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>
+===== Injection de dépendance (dependency injection)  =====
+Elle permet d'utiliser des services ou des modules existants à l'intérieur d'un autre (controller, service...)
+Injection avec tableau (conseillé)
+<sxh javascript;gutter:false>
+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>
+===== Vue (HTML File) =====
+<sxh html;gutter:false>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Angular JS view</title>
+<script	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
+</head>
+<body data-ng-app>
+</body>
+</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>