Angular Module declaration and get Overloads

Module is an important modular organization in angular, which provides a set of cohesive business components (Controller, service, filter, directive ... The ability to encapsulate together. This allows the code to be packaged in modules according to business domain issues and then inject its associated module content with the dependency of module, allowing us to better "isolate concerns" and achieve better "high cohesion and low coupling". "High cohesion and low coupling" comes from the principle of object-oriented design. Cohesion refers to the integrity of a module or an object, a set of tightly connected logic should be encapsulated in the same module, object and other code units, rather than scattered everywhere; coupling refers to the degree of dependency between modules, objects, and other code units, and if one module changes, it affects the other. This means that the two modules are tightly coupled to each other.

At the same time module is the entrance to our angular code, we first need to declare the module before we can define other component elements in angular, such as controller, service, filter, Directive, Config code block, Run code block, and so on.

The definition of module is: Angular.module (' Com.ngbook.demo ', []). About the module function can pass 3 parameters, respectively:

1. Name: module definition, it should be a unique required parameter, it will be injected in the back by other modules or the Application Master module is declared in the Ngapp Directive;
2. Requires: A dependency of a module, which is a parameter that declares the other modules that this module needs to rely on. Special Note: If the dependency of the module is not declared here, then we cannot use any component of the dependent module in the module; it is an optional parameter.
3. CONFIGFN: The startup configuration function of the module, which is called during the angular config phase, to instantiate the specific configuration of the component in the module before instantiating the object instance, such as our common routing information to the $routeprovider configuration application. It is equivalent to the "module.config" function and is recommended to replace it with the "module.config" function. This is also an optional parameter.

For the Angular.module method, we have a common way of angular.module (' Com.ngbook.demo ', [optional dependency]) and Angular.module (' Com.ngbook.demo '), respectively. Note that it is a completely different way of declaring a module, while the other is getting the module that has already been declared. In an application, the declaration of the module should be one and only once, and there can be multiple times for the module to be obtained. It is recommended to separate the angular components in different files, the module file declares the module, the other components introduce module, it is important to note that when packaging or script introduced, we need to load the module declaration file first, The other component modules can then be loaded.

In the angular Chinese community, some students are sometimes heard to ask about "ng:areq" errors:

 [ng:areq] Argument ‘DemoCtrl‘ is not a function, got undefined！

This is often caused by forgetting to define a controller or declaring multiple modules, and declaring the module multiple times to cause the module definition information to be emptied before the program can find the defined component. This we can also learn from the angular source (from Loader.js):

function Setupmoduleloader (window) {... function ensure (obj, name, factory) {return Obj[name] | |            (Obj[name] = Factory ());            } var angular = ensure (window, ' angular ', Object);                return ensure (angular, ' module ', function () {var modules = {}; return function module (name, requires, CONFIGFN) {var assertnothasownproperty = function (name, context {if (name = = = ' hasOwnProperty ') {throw ngminerr (' badname ', ' HASOWNPR                        Operty is not a valid {0} name ', context);                    }                    };                    Assertnothasownproperty (Name, ' module ');                    If (Requires && Modules.hasownproperty (name)) {Modules[name] = null;                          } return ensure (modules, name, function () {if (!requires) {  Throw $injectorMinErr (' Nomod ', "Module ' {0} ' is not available! You either misspelled "+" of the module name or forgot to load it. If registering a module ensure that you "+" Specify the dependencies as the second argumen                        T. ", name);                        } var invokequeue = [];                        var runblocks = [];                        var config = invokelater (' $injector ', ' invoke '); var moduleinstance = {_invokequeue:invokequeue, _runblocks:runblo Cks, Requires:requires, Name:name, Prov                            Ider:invokelater (' $provide ', ' provider '), Factory:invokelater (' $provide ', ' factory '),  Service:invokelater (' $provide ', ' service '), Value:invokelater (' $provide ', ' Value '), Constant:invokelater (' $provide ', ' constant ', ' unshift '), Animatio N:invokelater (' $animateProvider ', ' Register '), Filter:invokelater (' $filterProvider ', ' registe R '), Controller:invokelater (' $controllerProvider ', ' Register '), dir                            Ective:invokelater (' $compileProvider ', ' directive '), Config:config,                                Run:function (block) {Runblocks.push (block);                            return this;                        }                        };                        if (CONFIGFN) {config (CONFIGFN);                        } return moduleinstance;                                function Invokelater (provider, method, InsertMethod) {return function () { Invokequeue[insertmethoD | |                                ' Push '] ([Provider, method, arguments]);                            return moduleinstance;                        };                }                    });            };        }); }

In the code, we can see that angular sets the global angular object at startup, and then publishes the module API on the angular object. About module API code, can clearly see the first line predicate statement, module name can not be named hasOwnProperty, otherwise will throw "Badname" error message. Then, if you pass in the name parameter, which means that the module is declared, the existing module information is deleted and set to NULL.

From the definition of moduleinstance, we can see that the API Angular.module exposes to us are:invokequeue,runblocks, requires, name, provider, Factory, Servic, value, constant, animation, filter, controller, Directive, Config, run. where Invokequeue and runblocks are private properties by name, please do not feel free to use, other APIs are our common angular component definition method, It is possible to see from the Invokelater code that the return of such angular component definitions is still an moduleinstance instance, which creates a fluent API, and it is recommended to define these components using chaining instead of declaring a global module variable.

Finally, if the third parameter CONFIGFN is passed in, it will be configured in the config information, and when angular enters the config phase, they will be executed sequentially for the configuration of the angular application or the pre-instantiation of the angular component such as service.

Angular Module declaration and get Overloads