Angular JS's module dependency

Last Update:2015-08-02 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

ANGULARJS is purely client-side technology and is written entirely in JavaScript. It uses the general Technology of Web Development (Html,css,javascript) to make Web application development faster and easier.

Angularjs an important way to simplify application development is to package a few common low-level development operations with the developer. Angularjs will automatically handle these low-level operations. They include:

1.DOM operation
2. Setting up monitoring of events
3. Enter validation, because ANGULARJS handles most of these operations, so developers can focus more on the application's business logic and less on repetitive, error-prone, low-level code.

While Angularjs simplifies development, it also brings a number of sophisticated technologies to clients, including:

1. Separation of data, business logic, and views
2. Automatic binding of data and views
3. General Service
4. Dependency injection (primarily for aggregation services)
5. Extensible HTML Compiler (written entirely by JavaScript)
6. Easy to test
7. The client's need for these technologies has been in existence for a long time.

At the same time, you can use ANGULARJS to develop single-page or multi-page applications, but it is mainly used to develop a single page. ANGULARJS supports the browser's historical operations, forward, back buttons, and favorites in a single page app.

Next, let's explain the Angularjs module in detail.

Most applications have a main method for instantiating, organizing, and launching applications. The ANGULARJS application does not have a main method, but instead uses the module to declare how the app should start. This approach has several advantages:

1. The start-up process is declarative, so it's easier to understand.
2. In unit testing, it is not necessary to load all modules, so this approach helps write unit tests.
3. Additional modules can be added to the test for specific situations, which can change the configuration to help with end-to-end testing.
4. Third-party code can be packaged into reusable modules.
5. Modules can be loaded in any order or in parallel (because the execution of the module itself is delayed).

As an example:

123456789101112131415161718192021 <!doctype html><html ng-app="myApp"> <head> <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> <script> var myAppModule = angular.module(‘myApp‘, []);　　　　　　// configure the module.　　　　　　// in this example we will create a greeting filter　　　　　　myAppModule.filter(‘greet‘, function() { 　　　　　　　　return function(name) { 　　　　　　　　　　return ‘Hello, ‘ + name + ‘!‘; 　　　　　　　　};　　　　　　}); </script> </head> <body> <div> {{ ‘World‘ | greet }} </div> </body></html>

In the example above, we implemented the application using the MyApp module by specifying it in the

The above example is simple to write, but not suitable for writing large applications. Our recommendation is to split your application into the following modules:

1. A service module, used to make a statement of service.
2. An instruction module, which is used to make the declaration of the instruction.
3. A filter module, used to make a filter declaration.
4. An application-level module that relies on the above module, which contains initialization code.

As an example:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546 <!doctype html>"xmpl"> <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script> <script src="script.js"></script> <body> <div ng-controller="XmplController"> {{ greeting }}! </div> </body>[/code]script.js:[code]angular.module(‘xmpl.service‘, []). //服务模块 value(‘greeter‘, { //自定义greeter对象 salutation: ‘Hello‘, localize: function(localization) { this.salutation = localization.salutation; }, greet: function(name) { return this.salutation + ‘ ‘ + name + ‘!‘; } }). value(‘user‘, { //自定义user对象 load: function(name) { this.name = name; } });angular.module(‘xmpl.directive‘, []); //指令模块angular.module(‘xmpl.filter‘, []); //过滤器模块angular.module(‘xmpl‘, [‘xmpl.service‘, ‘xmpl.directive‘, ‘xmpl.filter‘]). //模块xmpl依赖于数组中的模块 run(function(greeter, user) { // 初始化代码，应用启动时，会自动执行 greeter.localize({ salutation: ‘Bonjour‘ }); user.load(‘World‘); })// A Controller for your appvar XmplController = function($scope, greeter, user) { $scope.greeting = greeter.greet(user.name);}

The reason for this splitting is that you often need to ignore the initialization code in your tests because it is difficult to test. By splitting it out, you can easily ignore it in the test. You can also make testing more specific by loading only the modules that are relevant to the current test. The above is just a suggestion, you can rest assured according to your specific situation to adjust.

A module is a collection of configurations and blocks of code that are attached to the application at the start-up phase. One of the simplest modules consists of a collection of two blocks of code:

Configuration code block-executes during the injection provider injection and configuration phase. Only injected providers and constants can be injected into the configuration block. This is to prevent the service from being pre-initialized before it is configured properly.
Run code block-executes after the injector is created and is used to start the application. Only instances and constants can be injected into the running block. This is to prevent the configuration of the system from appearing after it has been run.

Code implementation:

123456789101112 angular.module(‘myModule‘, []). 　　config(function(injectables) { // provider-injector 配置代码块　　　　// This is an example of config block.　　　　// You can have as many of these as you want.　　　　// You can only inject Providers (not instances)　　　　// into the config blocks.　　}). run(function(injectables) { // instance-injector 运行代码块　　　　// This is an example of a run block.　　　　// You can have as many of these as you want.　　　　// You can only inject instances (not Providers)　　　　// into the run blocks　　});

Modules also have a few easy-to-configure methods that use them as equivalent to using code blocks. As an example:

12345678910111213 angular.module(‘myModule‘, []). value(‘a‘, 123). factory(‘a‘, function() { return 123; }). directive(‘directiveName‘, ...). filter(‘filterName‘, ...);// is same asangular.module(‘myModule‘, []). config(function($provide, $compileProvider, $filterProvider) { $provide.value(‘a‘, 123) $provide.factory(‘a‘, function() { return 123; }) $compileProvider.directive(‘directiveName‘, ...). $filterProvider.register(‘filterName‘, ...); });

The configuration blocks are applied in order of $provide, $compileProvider, $filterProvider, registration, and so on. The only exception is the definition of constants, which should always be placed at the beginning of the configuration block.

Running blocks is the most angularjs of the main method. A running block is a piece of code to start the app. It is executed after all the services have been configured and all the injectors have been created. Running blocks often contain code that is difficult to test, so they should be written in separate modules so that they can be ignored during unit testing.

The module can list other modules as its dependencies. "Dependent on a module" means that the dependent module needs to be loaded before this block. In other words, the configuration block of the dependent module is executed before the module configuration block. The same is true for running blocks. Any module can only be loaded once, even if it is dependent on multiple modules.

A module is a way to manage the $injector configuration, and it has nothing to do with the loading of the script. Now there are many libraries on the web that are loaded with control modules that can be used with ANGULARJS. Because modules do not do anything during load, they can be loaded in any order or in parallel

Angular JS's module dependency

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Angular JS's module dependency

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support