Javascript Elements pour Angular JS

Ceci est une ancienne révision du document !

(function() {

})();

Définir un module

angular.module("MyModule",[]);

Définir un module et le stocker dans une variable

var myModule=angular.module("MyModule",[]);

Définir un module avec une dépendance

angular.module("MyModule",["anotherModule"]);

Faire référence à un module existant

var myModule=angular.module("MyModule");

Faire référence à un module dans une vue html

<div ng-app="MyModule">
...
</div>

Créer un contrôleur dans MyModule

angular.module("MyModule").controller("MyController",function(){
...
});

Créer un contrôleur dans MyModule utilisant le service $http

angular.module("MyModule").controller("MyController",["$http",function($http){
...
}]);

Faire référence à un contrôleur dans une vue html

<div ng-controller="MyController">
...
</div>

Créer une directive de type Element dans MyModule

angular.module("MyModule").directive("MyDirective",function(){
    return {
        restrict:'E',
        template:'<html>....',
        templateUrl:'urlForTemplate',
        controller:function(){
        //Controller code
        },
        controllerAs:'alliasForController'
    };
});

Directive complète :

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
                }
            };
        }
    };  
});

Elle permet d'utiliser des services ou des modules existants à l'intérieur d'un autre (controller, service…)

Injection avec tableau (conseillé)

angular.module("MyModule").controller("MyController", ["$scope", "greeter", function($scope, greeter) {
  // ...
}]);

Injection avec la propriété $inject

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ["$scope", "greeter"];
angular.module("MyModule").controller("MyController", MyController);

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

<fc #FF0000>A éviter : l'injection implicite</fc>

angular.module("MyModule").controller("MyController", function($scope, greeter) {
  // ...
});

<!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>

Javascript Elements pour Angular JS

Closure

Module

Controller

Directive

Injection de dépendance (dependency injection)

Vue (HTML File)