1. Qu'est-ce qu'un module?
De nombreuses applications ont une méthode principale d'initialisation, de chargement (les fils signifient-ils?) Et le lancement des applications. L'application angulaire ne nécessite pas la méthode principale. Au lieu de cela, le module fournit un formulaire déclaratif avec un objectif spécifié, description descriptive de la façon dont l'application est démarrée. Il y a plusieurs avantages à procéder:
2. Les bases
Nous sommes impatients de savoir comment faire fonctionner Hello World Module. Voici quelques éléments clés auxquels faire attention:
API du module (http://code.angularjs.org/1.0.2/docs/api/angular.module)
Remarquez le module MyApp mentionné dans <html ng-app = "MyApp">, qui permet au lanceur de démarrer le module MyApp que nous avons défini.
<! Doctype html> <html lang = "zh-cn" ng-app = "myapp"> <éadf> <meta charset = "utf-8"> <itle> basics </ title> <style type = "text / css"> .ng-col {affiche: aucun; } </ style> </ head> <body> <div> {{'kitty' | saluer}} </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> var simpleModule = angular.module ("myApp", []); SimpleModule.Filter ("saluer", function () {return function (name) {return "Hello" + name + "!";}}); </cript> </ body> </html>3. (Configuration recommandée) Configuration recommandée
Bien que l'exemple ci-dessus soit simple, ce n'est pas une application à grande échelle. Nous vous recommandons de diviser votre application en plusieurs modules comme suit:
La raison de cette division est que lorsque nous testons, nous devons souvent ignorer le code d'initialisation qui rend le test difficile. En divisant le code en modules distincts, il est facile d'ignorer ce code dans les tests. De cette façon, nous pouvons nous concentrer davantage sur le chargement du module correspondant pour les tests.
Ce qui précède n'est qu'une suggestion, vous pouvez le faire comme vous le souhaitez.
4. Chargement et dépendances du module (chargement des modules et dépendances)
Un module est une collection de configurations qui exécutent des blocs appliqués dans le processus de démarrage de l'application. Dans sa forme la plus simple, il se compose de deux types de blocs:
1. Blocs de configuration: exécutés pendant le processus d'enregistrement et de configuration du fournisseur. Seul le fournisseur et constant (constant?) Peut être injecté en blocs de configuration. Il s'agit d'éviter l'accident que le service est exécuté avant la configuration du service.
2. Exécuter les blocs: 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'éviter une nouvelle exécution de configuration du système pendant le fonctionnement du programme.
angular.module ('mymodule', []). config (function (injectables) {// Provider-Injector // Voici un exemple de config Block // Nous pouvons obtenir n tels choses que nécessaire // Nous pouvons injecter des fournisseurs (pas des instances, pas des instances) dans le bloc de configuration}). run (function (injectables) {// instance-injector // voici un exemple de bloc d'exécution // nous pouvons obtenir n tels choses selon les besoins // Nous ne pouvons injecter que des instances (instances) (pas des fournisseurs) dans le bloc d'exécution});a) Blocs de configuration
Il existe un moyen pratique de le faire dans le module, ce qui équivaut au bloc de configuration. Par exemple:
angular.module ('mymodule', []). Valeur ('A', 123). factory ('a', fonction () {return 123;}). Directive ('DiredivenName', ...). Filter ('filterame', ...); // équivaut à angular.module ('mymodule', []). config (function ($ fournis, $ compileprovider, $ filterProvider) {$ fournis.value ('a', 123) $ fournis.factory ('a', function () {return 123;}) $ compileprovider.directive ('DiredivenName', ...). $ filterprovider.register ('filterrective', ...);}););L'ordre dans lequel les blocs de configuration sont appliqués est cohérent avec l'ordre dans lequel ils sont enregistrés. Pour les définitions constantes, il s'agit d'un cas supplémentaire, c'est-à-dire la définition constante placée au début des blocs de configuration.
b) Exécuter des blocs (bloc d'application)
Le bloc d'exécution est la chose la plus proche de la méthode principale d'Angular. Le bloc d'exécution est le code qui doit être exécuté pour démarrer l'application. Il sera exécuté après que toutes les configurations de service et les injecteurs seront créées. Les blocs d'exécution contiennent généralement du code plus difficile à tester unitaire. Pour cette raison, ces codes doivent être définis dans un module séparé afin qu'ils puissent être ignorés dans les tests unitaires.
c) Dépendances (dépendances)
Un module peut répertorier d'autres modules dont il dépend. Le fait de s'appuyer sur un module signifie que le module demandé (fiable) doit être chargé avant de demander le module (le module qui doit dépendre d'autres modules, le demandeur) est chargé. En d'autres termes, le bloc de configuration du module demandé sera exécuté avant les blocs de configuration ou le module nécessitant, comment expliquer le ou ici?). Il en va de même pour le bloc Run. Chaque module ne peut être chargé qu'une seule fois, même s'il existe plusieurs autres modules qui le nécessitent.
d) chargement asynchrone (chargement asynchrone)
Le module est l'une des façons de gérer la configuration de l'injecteur $, sans rien faire avec des scripts de chargement à la machine virtuelle. Il existe désormais des projets prêts à l'emploi qui sont spécialement conçus pour le chargement des scripts et peuvent également être utilisés dans Angular. Parce que les modules ne font rien pendant le chargement, ils peuvent être chargés dans la machine virtuelle dans n'importe quel ordre. Les chargeurs de script peuvent utiliser cette fonctionnalité pour effectuer un chargement parallèle.
5. Test unitaire
Dans la forme la plus simple des tests unitaires, on consiste à instancier un sous-ensemble d'une application dans le test, puis à les exécuter. Surtout, nous devons réaliser que pour chaque injecteur, chaque module ne sera chargé qu'une seule fois. Habituellement, une application n'a qu'un seul injecteur. Mais dans les tests, chaque cas de test a son injecteur, ce qui signifie que dans chaque machine virtuelle, le module sera chargé plusieurs fois. La construction du module aidera correctement les tests unitaires, comme dans l'exemple suivant:
Dans cet exemple, nous nous préparons à supposer que le module suivant est défini:
Angular.module ('GreallMod', []). Factory ('alert', fonction ($ window) {return function (text) {$ window.alert (text);};}). Value ('Saluting', 'Hello'). Factory ('Greall', fonction (alert, Saluting) {return function (name) {alert (Saltiting + '' '+ nom +');Écrivons quelques cas de test:
décrire ('myApp', function () {// Chargez le module de la réponse de l'application, puis chargez le module de test spécifié qui réécrit $ fenêtre sur la version simulée. // Faites-le, lorsque Windows.Alert () est effectué, le testeur ne s'arrêtera pas car il est bloqué par la véritable fenêtre d'alerte // ici un exemple de configuration de l'allumage. La fenêtre réelle est de remplacer $ Fournisse. $ window) {saluer (monde '); $ fournit.value ('alert', alertSpy);});