Avant de parler du module AngularJS, introduisons d'abord quelques points de connaissance d'Angular:
AngularJS est une technologie de client pure, entièrement écrite en JavaScript. Il utilise des technologies conventionnelles de développement Web (HTML, CSS, JavaScript) pour rendre le développement d'applications Web plus rapide et plus facile.
AngularJS simplifie le développement d'applications consiste à emballer certaines opérations de développement de bas niveau courantes pour les fournir aux développeurs. AngularJS gérera automatiquement ces opérations de bas niveau. Ils incluent:
1. opération de dom
2. Configurer l'écoute des événements
3. Vérification d'entrée, car AngularJS gérera la plupart de ces opérations, les développeurs peuvent se concentrer davantage sur la logique métier de l'application et écrire un code moins répétitif, sujet aux erreurs et de bas niveau.
Alors qu'AngularJS simplifie le développement, il apporte également des technologies exquises au client, notamment:
1. Séparation des données, logique métier et vues
2. Liaison automatique des données et des vues
3. Services généraux
4. Injection de dépendance (principalement utilisée pour les services d'agrégation)
5. Compiler HTML extensible (écrit entièrement par JavaScript)
6. Facile à tester
7. La demande du client pour ces technologies existe depuis longtemps.
Dans le même temps, vous pouvez également utiliser AngularJS pour développer des applications à une page ou plusieurs pages, mais elle est principalement utilisée pour développer des applications à une page. AngularJS prend en charge les opérations d'historique du navigateur, les boutons avant et arrière et les opérations préférées dans des applications à une seule page.
Ensuite, expliquons en détail le module d'AngularJS.
La plupart des applications ont une méthode principale pour instancier, organiser et lancer des applications. Les applications AngularJS n'ont pas de méthode principale, mais utilisent des modules pour déclarer comment l'application doit être démarrée. Cette méthode présente les avantages suivants:
1. Le processus de démarrage est déclaratif, il est donc plus facile à comprendre.
2. Dans les tests unitaires, il n'est pas nécessaire de charger tous les modules, donc cette méthode aide à écrire des tests unitaires.
3. Des modules supplémentaires peuvent être ajoutés aux tests dans des situations spécifiques. Ces modules peuvent modifier les configurations et peuvent aider à des tests de bout en bout.
4. Le code tiers peut être emballé en modules réutilisables.
5. Les modules peuvent être chargés dans n'importe quel ordre de séquence ou de parallélisme (car l'exécution du module lui-même est retardée).
Par exemple:
<! doctype html> <html ng-app = "myApp"> <éad> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </ script> <cript> var myappModule = angular.module ('myapp', []); // Configurez le module. // Dans cet exemple, nous créerons un filtre de salutation myAppModule.filter ('saluer', function () {return function (name) {return 'hello,' + name + '!';};}); </cript> </ head> <body> <div> {{'world' | saluer}} </div> </ body> </html>Dans l'exemple ci-dessus, nous utilisons le module MyApp pour démarrer l'application en le spécifiant dans <html ng-app = "myApp">.
L'exemple ci-dessus est très simple à écrire, mais il ne convient pas à l'écriture de grandes applications de la même manière. Notre recommandation est de diviser votre application en modules suivants:
1. Un module de service utilisé pour faire des déclarations de service.
2. Un module d'instructions utilisé pour faire des déclarations d'instructions.
3. Un module de filtre utilisé pour faire des déclarations de filtre.
4. Un module au niveau de l'application qui repose sur les modules ci-dessus, qui contient le code d'initialisation.
Par exemple:
<! doctype html> <html ng-app = "xmpl"> <éad> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </ script> <script src = "script.js"> </ script> </dired> {{ salutation }}! </div> </ body> </ html> [/ code] script.js: [code] angular.module ('xmpl.service', []). // Valeur du module de service ('Greeter', {// Salation de l'objet Greeter personnalisé: 'Hello', localize: function (localisation) {this.salutation = localisation.salutation;}, saluer: function (name) {return this.saluty + '' + name + '!';}}). Value ('User', {// User d'objet User Charge: fonction (name) {this.name = name;}}); angular.module ('xmppl.directive', []); // Module d'instructions angular.module ('xmpl.filter', []); // Module filtrant angular.module ('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). // Module XMPL dépend de l'exécution du module (fonction (greeter, utilisateur) dans le tableau {// initialiser le code. Lorsque l'application démarre, Greeter.localize ({Saluting: 'BonJour'}); user.load ('world');}) // un contrôleur pour votre appvar xMPlController = fonction ($ Scope, Greeter, user) {$ Scope. greeter.greet (user.name);}La raison de cette scission est que vous devez souvent ignorer le code d'initialisation dans vos tests, car ces codes sont plus difficiles à tester. En le divisant, il peut être facilement ignoré lors des tests. Le test peut également être plus spécifique en chargeant uniquement des modules liés au test actuel. Ce qui précède n'est qu'une suggestion, vous pouvez être assuré de l'ajuster en fonction de votre situation spécifique.
Un module est une collection d'une série de configurations et de blocs de code qui sont joints à l'application à l'étape de démarrage. Un module le plus simple se compose de deux ensembles de blocs de code:
Bloc de code de configuration - Exécuter pendant la phase d'injection et de configuration du fournisseur d'injection. Seul le fournisseur et les constantes d'injection peuvent être injectés dans le bloc de configuration. Il s'agit d'empêcher l'initialisation du service d'être initialisé avant sa configuration.
Exécuter le bloc de code - exécuter une fois l'injecteur créé et utilisé pour démarrer l'application. Seules les instances et les constantes peuvent être injectées dans le bloc d'exécution. Il s'agit d'empêcher que la configuration du système ne se produise après le fonctionnement.
Implémentation du code:
angular.module ('mymodule', []). config (fonction (injectables) {// fournisseur-injector config code block // Ceci est un exemple de bloc de configuration. // Vous pouvez en avoir autant que vous le souhaitez. // Vous pouvez uniquement injecter des fournisseurs (pas des instances) // dans les blocs de configuration.}). Exécuter (fonction (injectables) {// instance-injector config code block // Ceci est un exemple d'un bloc d'exécution. // Vous pouvez en avoir autant que vous le souhaitez. // Vous pouvez uniquement injecter des instances (pas des fournisseurs) // dans les blocs d'exécution});Les modules ont également des moyens faciles de configurer et les utiliser équivaut à utiliser des blocs de code. Par exemple:
angular.module ('mymodule', []). Valeur ('A', 123). factory ('a', fonction () {return 123;}). Directive ('DiredivenName', ...). Filter ('filterName', ...); // est le même asangular.module ('mymodule', []). config (function ($ fournis, $ compileprovider, $ filterProvider) {$ fournis.value ('a', 123) $ fournis.factory ('a', function () {return 123;}) $ compileprovider.directive ('DiredivenName', ...). $ filterprovider.register ('filterrective', ...);}););Les blocs de configuration seront appliqués dans l'ordre d'enregistrement dans $ fournis, $ compileprovider, $ filterprovider et $ filterprovider. La seule exception est la définition des constantes, qui doivent toujours être placées au début du bloc de configuration.
Les blocs d'exécution sont les plus comme la méthode principale d'AngularJS. Un bloc d'exécution est un morceau de code utilisé pour démarrer l'application. Il est exécuté après la configuration de tous les services et que tous les injecteurs sont créés. Les blocs d'exécution contiennent généralement un code difficile à tester, ils doivent donc être écrits dans des modules distincts afin qu'ils puissent être ignorés lors des tests unitaires.
Un module peut répertorier d'autres modules comme dépendances. "Dépenser sur un certain module" signifie que le module dépendant doit être chargé avant le module. En d'autres termes, le bloc de configuration du module dépendant sera exécuté avant le bloc de configuration de ce module. Il en va de même pour l'exécution de blocs. Tout module ne peut être chargé qu'une seule fois, même s'il dépend de plusieurs modules.
Un module est une méthode utilisée pour gérer la configuration de l'injecteur $ et n'a rien à voir avec le chargement du script. Il existe de nombreuses bibliothèques pour charger des modules de contrôle sur Internet, qui peuvent être utilisés avec AngularJS. Parce que les modules ne font rien pendant le chargement, ils peuvent être chargés dans n'importe quel ordre ou en parallèle