AngularJS Module
Module définit une application.
Le module est un conteneur dans différentes parties de l'application.
Module de contrôleur est une application de conteneur.
Le dispositif de commande appartiennent généralement à un module.
Créer un module
Vous pouvez créer un module par AngularJS de la fonctionangular.module:
<Script>
var app = de angular.module ( "myApp" , []);
le paramètre "MonAppli" correspond à l'exécution de l'application des éléments de HTML.
Maintenant, vous pouvez ajouter un contrôleur des instructions, des filtres, etc., dans des applications AngularJS.
Ajouter Controller
Vous pouvez utiliser des instructionsng-contrôleur pour ajouter contrôleur d'applications:
AngularJS exemples
{{FirstName + "" + lastName }}
</ Div>
<Script>
app.controller ( "myCtrl", function ( $ portée) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
Essayez »
Vous pouvez AngularJS Contrôleurs apprendre plus de connaissances sur la section du contrôleur.
Ajouter des instructions
AngularJS fournit de nombreuses commandes intégrées, vous pouvez les utiliser pour ajouter des fonctionnalités à votre application.
Des instructions complètes peuvent être trouvées dans le contenu du manuel de référence AngularJS .
En outre, vous pouvez utiliser le module pour ajouter vos propres applications d'instruction:
AngularJS exemples
<Script>
app.directive ( "w3bigDirective", function ( ) {
retour {
modèle: «J'ai créé le constructeur d'instruction!"
};
});
Essayez »
Vous pouvez AngularJS directives en apprendre plus de connaissances sur la section d'instruction.
Modules et contrôleurs inclus dans le fichier JS
AngularJS Typiquement module d'application et le contrôleur est inclus dans le fichier JavaScript.
Dans les exemples suivants, "myApp.js" contient la définition des modules d'application du programme, "myCtrl.js" fichier contient le contrôleur:
AngularJS exemples
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<Div ng-app = "myApp ng-contrôleur" = "myCtrl">
{{FirstName + "" + lastName }}
</ Div>
<Script src = "myApp.js"> </ script>
<Script src = "myCtrl.js"> </ script>
</ Body>
</ Html>
Essayez »
myApp.js
 | Dans la définition du module [] paramètre est utilisé pour définir des dépendances de module. Les crochets [] indique que le module ne repose pas sur, s'il y a la dépendance, alors dépendra du nom du module écrit entre parenthèses. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Fonction affectera l'espace de noms global
JavaScript doit éviter d'utiliser des fonctions globales. Parce qu'ils peuvent facilement être recouverts d'un autre fichier de script.
AngularJS module de portée, de sorte que toutes les fonctions du module, afin d'éviter le problème.
Lors du chargement de la bibliothèque?
| Dans notre exemple, toutes les bibliothèques de documents AngularJS HTML sont chargés dans la tête. |
|---|
Pour les applications HTML est généralement recommandé à tous les scripts sont placés dans la partie inférieure de élément <body>.
Cela permettra d'accroître la page vitesse de chargement, parce que le HTML ne sont pas soumis à une charge de script à charger.
Dans notre exemple multiples AngularJS, vous verrez la bibliothèque AngularJS est chargé dans le <head> du document.
Dans notre exemple, AngularJS dans l'élément <head> est chargé, parce que l'appel à angular.module seulement être effectuée après l'achèvement du chargement de la bibliothèque.
Une autre solution est de charger la bibliothèque AngularJS élément <body>, mais il doit être placé en face de votre script AngularJS:
AngularJS exemples
<Html>
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>
<Div ng-app = "myApp ng-contrôleur" = "myCtrl">
{{FirstName + "" + lastName }}
</ Div>
<Script>
var app = de angular.module ( "myApp", []);
app.controller ( "myCtrl", function ($ portée) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>
</ Body>
</ Html>
Essayez »