Module angularjs
Le module définit une application.
Un module est un conteneur pour différentes parties d'une application.
Un module est un conteneur pour le contrôleur d'application.
Le contrôleur appartient généralement à un module.
Créer des modules
Vous pouvez créer des modules à travers la fonction angulaire.
<div ng-app = "myApp"> ... </div> <script> var app = angular.module ("myApp", []); </cript>Le paramètre "MyApp" correspond à l'élément HTML qui exécute l'application.
Vous pouvez maintenant ajouter des contrôleurs, des instructions, des filtres, etc. dans votre application AngularJS.
Ajouter un contrôleur
Vous pouvez utiliser la directive NG-contrôleur pour ajouter le contrôleur de l'application:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controlller = "myctrl"> {{FirstName + "" + LastName}} </div> <script> var app = angular.module ("myApp", []); app.Controller ("myctrl", fonction ($ scope) {$ scope.firstName = "John"; $ scope.lastname = "Doe";}); </cript> </ody> </html>Effet de course:
John Doe
Vous pouvez en savoir plus sur les contrôleurs du chapitre du contrôleur AngularJS.
Ajouter la commande
AngularJS fournit de nombreuses instructions intégrées que vous pouvez utiliser pour ajouter des fonctionnalités à votre application.
Pour des instructions complètes, veuillez vous référer au manuel de référence AngularJS.
De plus, vous pouvez utiliser des modules pour ajouter vos propres instructions pour votre application:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ head> </ body> <div ng-App = "myApp" Runoob> </ head> </ body> <ving> = angular.module ("myApp", []); app.Directive ("runoobDirective", function () {return {template: "Je l'ai créé dans le constructeur directif!"};}); </ script> </ body> </html>Résultats en cours:
Je l'ai créé dans le constructeur directif!
Vous pouvez en savoir plus sur les directives du chapitre des directives AngularJS.
Les modules et les contrôleurs sont inclus dans les fichiers JS
En règle générale, les applications AngularJS incluent des modules et des contrôleurs dans les fichiers JavaScript.
Dans l'exemple suivant, "MyApp.js" contient le définitif du module d'application, et le fichier "myctrl.js" contient le contrôleur:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controller = "myctrl"> {{premierName + "" + LastName}} </ div> <script src = "myApp.js"> </ script> <script src = "myctrl.js"> </ script> </ body> </ html>Résultats en cours:
John Doe
myApp.js
var app = angular.module ("myApp", []);
Remarque Dans la définition du module, le paramètre [] est utilisé pour définir les dépendances du module.
Les supports [] indiquent que le module n'a pas de dépendances. S'il y a une dépendance, le nom de la dépendance sera écrit entre crochets.
myctrl.js
app.Controller ("myctrl", fonction ($ scope) {$ scope.firstname = "John"; $ scope.lastname = "DOE";});Les fonctions affectent l'espace de noms global
Les fonctions globales doivent être évitées en JavaScript. Parce qu'ils sont facilement écrasés par d'autres fichiers de script.
Le module AngularJS permet à toutes les fonctions d'être portée sous ce module, en évitant ce problème.
Quand la bibliothèque sera-t-elle chargée?
Remarque: Dans notre cas, toutes les bibliothèques AngularJS sont chargées à la tête du document HTML.
Pour les applications HTML, il est généralement recommandé de placer tous les scripts au bas de l'élément <body>.
Cela augmentera la vitesse de chargement des pages Web, car le chargement HTML n'est pas soumis au chargement du script.
Dans nos multiples instances AngularJS, vous verrez que la bibliothèque AngularJS est chargée dans la zone <adread> du document.
Dans notre cas, AngularJS est chargé dans l'élément <adhead>, car l'appel à Angular.Module ne peut être fait qu'après charger la bibliothèque.
Une autre solution consiste à charger la bibliothèque AngularJS dans l'élément <body>, mais il doit être placé devant votre script AngularJS:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controlller = "myctrl"> {{FirstName + "" + LastName}} </div> <script> var app = angular.module ("myApp", []); app.Controller ("myctrl", fonction ($ scope) {$ scope.firstName = "John"; $ scope.lastname = "Doe";}); </cript> </ody> </html>Résultats en cours:
John Doe
Ce qui précède est une compilation d'informations sur les modules AngularJS, et nous continuerons à l'ajouter plus tard. J'espère que cela peut aider à programmer des amis.