ANGULARJS Study Notes--modules

Original address: Http://code.angularjs.org/1.0.2/docs/guide/module

First, what is module?

Many applications have one for initialization, loading (wires is this the meaning?). ) and the main method that launches the app. The angular application does not require the main method, as an alternative, the module provides a declarative declaration with the specified purpose, describing how the application starts. There are several advantages to doing so:

• This process is described in a statement and is easier to read.
• In unit tests, it is not necessary to load all module modules, which is helpful for writing unit tests.
• The additional module can be loaded into the scenario test and can override some settings to help with the end-to-end testing of the application (End-to-end test).
• Third-party code can be packaged into angular as a reusable module.
• The module can be loaded in any order or in parallel (depending on the delay of the module execution, due to delayed nature of module execution).

Second, the Basics (foundation)

We are eager to know how to get Hello World module to work. Here are a few key things to note:

• Module API (http://code.angularjs.org/1.0.2/docs/api/angular.Module)
• Note the MyApp module mentioned in

<! DOCTYPE html>
C. (Recommended Setup) recommended settings
Although the above example is simple, it is not a large-scale application. We recommend that you split your application into multiple module types as follows:

 
 

  
  
 
   
Service module, which declares the service.
 
   
Directive module, used to declare directive.
 
   
Filter module, which declares the filter.
 
   
The application-level module, which relies on the module above, and contains the initialized code.
 
  
 
 
The reason for this division is that when we are testing, we often need to ignore the initialization code that makes testing difficult. By dividing the code into separate module, the code can be easily ignored in the test. In this way, we can focus more on loading the appropriate module for testing.
The above is just a suggestion that can be arbitrarily set according to your own needs.
Module Loading & Dependencies (modules loading and dependencies)
The module is a collection of configuration (config) that executes the block (blocks) that is applied in the process that launches the app. In its simplest form, it consists of a class of block two:
1. config block (configuration blocks): Executed during provider registration and configuration. Only provider and constant (constants?) ) can be injected (injected) into the configuration blocks. This is to avoid unexpected occurrences of the service being executed before the service configuration is complete.
2. Running block (run blocks): Executes after the injector creation is complete to launch the app. Only instances (instances) and constants (constants) can be injected into the run block. This is to avoid further system configuration execution during program run.
Angular.module (' MyModule ', []).    Config (function (injectables) {///Provider-injector///    Here is an example of Config block    //We can make N such a thing as needed    Here we can inject providers (not an instance, not instances) into Config block    }).    Run (function (injectables) {///Instance-injector///    Here is an example of a run block//    we can make N such a thing as needed    We can only inject an instance (instances) (not providers) into the Run Block});
A) configuration Blocks (configuration block)
There is a convenient way to do this in module, which is equivalent to config block. For example:
 
Angular.module (' MyModule ', []).  Value (' A ', 123).    Factory (' A ', function () {return 123;}).    directive (' directivename ', ...).    Filter (' FilterName ', ...); /equivalent to Angular.module (' MyModule ', []).  Config (function ($provide, $compileProvider, $filterProvider) {    $provide. Value (' A ', 123)    $provide. Factory (' A ', function () {return 123;})    $compileProvider. directive (' directivename ', ...).    $filterProvider. Register (' FilterName ', ...);});
The order in which the configuration blocks are applied is consistent with the order in which they are registered. For a constant definition, it is an extra case, the constant definition that is placed at the beginning of the configuration blocks.
b) Run Blocks (Application Block)
Run block is the closest thing to the main method in angular. Run block is the code that must be executed to launch the app. It will be executed after all service configurations and injector have been created. The run block typically contains code that is more difficult to unit test, which is why the code should be defined in a separate module so that the code can be ignored in the unit test.
c) Dependencies (dependent)
A module can list the other module on which it depends. Depending on a module, it means that the requested (required) module (dependent) must be loaded before the request (requiring) module (the module that relies on other module, requester) is loaded. In other words, the configuration block of the requested module will be executed before the configuration block of the requested module is executed (before the configuration blocks or the Requiring module, where or how to explain it? ）。 This is also true for run block. Each module can only be loaded once, even if there are multiple other module needs (require) it.
d) Asynchronous Loading (asynchronous loading)
Module is one of the ways to manage $injector configuration without doing anything to load the script to the VM. There are now ready-made projects dedicated to handling script loading or angular. Because the module does nothing during the loading process, they can be loaded into the VM in any order. The script loader can take advantage of this feature for parallel loading.
V. Unit testing (Units test)
In the simplest form of unit testing, one of them is to instantiate a subset of an application in the test and then run them. It is important to realize that for each injector, each module will only be loaded once. Usually an application will have only one injector. But in the test, each test case has its injector, which means that in each VM, the module is loaded multiple times. Building the module correctly will help with unit testing, as in the following example:
In this example, we are prepared to assume that the following module is defined:
Angular.module (' Greetmod ', []). Factory (' Alert ', function ($window) {     return function (text) {     $window. Alert ( Text),     };}). Value (' Salutation ', ' Hello '). Factory (' Greet ', function (alert, salutation) {     return function (name) {     alert ( Salutation + "+ name + '! ');     };});
Let's write some test cases:
 
Describe (' myApp ', function () {    //) loads the module of the application response, and then loads the specified $window rewrite as a mock version of the test module,//To    do so when the Window.alert ( ), the tester will not stop being blocked by a real alert window//    Here is an example of overwriting configuration information in a test    Beforeeach (module (' Greetmod ', function ($provide) {// This seems to replace the real $window with the following    $provide. Value (' $window ', {    alert:jasmine.createSpy (' Alert ')    })    );         //inject () creates a injector and injects greet and $window into the test.    //testing does not need to be concerned with how to write an application, just focus on how to test it.　　    it (' should alert on $window ', inject (function (greet, $window) {    greet (' World ');    Expect ($window. alert). Tohavebeencalledwith (' Hello world! ');    });        Here is the method of overwriting the configuration through the inline module and the inject method in the test    it (' should alert using the Alert service ', function () {    var alertspy = j　　Asmine.createspy (' alert ');    Module (function ($provide) {    $provide. Value (' Alert ', alertspy);    });    Inject (function (greet) {    greet (' World ');    Expect (Alertspy). Tohavebeencalledwith (' Hello world! ');    });    });});
 
 Angularjs Learning Note--modules