Angular Module declares and gets overloaded instance code

module is an important way of organizing modules in angular. It provides the ability to encapsulate a set of cohesive business components (controller, service, filter, directive...). Doing so can separate the code into modules according to business domain problems, and then use the module's dependence to inject its associated module content, so that we can better "separate the focus" 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 the module or object. A set of closely related logic should be encapsulated in the same module, object and other code units, rather than scattered everywhere; coupling refers to the degree of dependence between modules, objects and other code units. If the modification of one module will affect the other module, it means that the two modules are interdependent and tightly coupled.

At the same time, module is also the entrance to our angular code. First, you need to declare the module, and then you can define other component elements in angular, such as controller, service, filter, directive, config code block, run code block, etc.

The definition of module is: angular.module('com.ngbook.demo', []). Regarding the module function, three parameters can be passed, and they are:

1. name: The name defined by the module, it should be a unique required parameter, it will be injected by other modules later or declare the application main module in the ngAPP directive;
2. requires: The dependency of the module, which is a parameter that declares the other modules that this module needs to depend on. Special note: If the dependency of the module is not declared here, we cannot use any component of the dependent module in the module; it is an optional parameter.
3. configFn: The module's startup configuration function, which will be called in the angular config stage to instantiate the specific configuration before the component in the module instantiates the object instance, such as the common routing information for the $routeProvider configuration application. It is equivalent to the "module.config" function, and it is recommended to replace it with the "module.config" function. This is also an optional parameter.

For the angular.module method, we have common methods, namely angular.module('com.ngbook.demo', [optional dependency]) and angular.module('com.ngbook.demo'). Note that it is a completely different way, one is to declare the creation module, and the other is to obtain the declared module. In the application, the declaration of the module should be and only once; for obtaining the module, it can be multiple times. It is recommended to separate the angular components in different files, declare module in module file, and other components introduce module. It should be noted that when introducing it in packaging or script, we need to load the module declaration file first, and then load other component modules.

In the angular Chinese community group, sometimes I hear some students asking about "ng:areq" errors:

[ng:areq] Argument 'DemoCtrl' is not a function, got undefined!

This is often because you forget to define the controller or declare the module multiple times. Declaring the module multiple times will cause the previous module definition information to be cleared, so the program will not find the defined components. We can also learn this from the angular source code (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', 'hasOwnProperty 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 " + "the module name or forgot to load it. If registering a module ensure that you " + "specify the dependencies as the second argument.", name); } var invokeQueue = []; var runBlocks = []; var config = invokeLater('$injector', 'invoke'); var moduleInstance = { _invokeQueue: invokeQueue, _runBlocks: runBlocks, requires: requires, name: name, provider: invokeLater('$provide', 'provider'), factory: invokeLater('$provide', 'factory'), service: invokeLater('$provide', 'service'), value: invokeLater('$provide', 'value'), constant: invokeLater('$provide', 'constant', 'unshift'), animation: invokeLater('$animateProvider', 'register'), filter: invokeLater('$filterProvider', 'register'), controller: invokeLater('$controllerProvider', 'register'), directive: 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 understand that when angular is started, it will set up a global angular object, and then publish the module API on the angular object. Regarding the module API code, you can clearly see the first line of predicate statement. The module name cannot be named after hasOwnProperty, otherwise an error message of "badname" will be thrown. Immediately afterwards, if a name parameter is passed in, which indicates that a module is declared, the existing module information will be deleted and set to null.

From the definition of moduleInstance, we can see that the APIs exposed by angular.module are: invokeQueue, runBlocks, requires, name, provider, factory, service, value, constant, animation, filter, controller, directive, config, and run. Among them, invokeQueue and runBlocks are private attributes agreed by name. Please do not use them at will. Other APIs are the commonly used angular component definition methods. From the invokeLater code, you can see that the return of such angular component definitions is still a moduleInstance instance, which forms a smooth API. It is recommended to use chain definitions to define these components instead of declaring a global module variable.

Finally, if the third parameter configFn is passed in, it will be configured into the config information. When the angular enters the config stage, they will be executed in turn to configure the angular application or angular components such as service before instantiation.

The above is a compilation of Angular Module statement and the information obtained overloaded. We will continue to add relevant information in the future. Thank you for your support for this website!