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

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

<hml>

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

</html>

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