AngularJSModule _ AngularJS

The Module class in AngularJS defines how the application starts. It can also define each segment of the application through declaration. Let's take a look at how it implements these functions. What is AngularJS?

AngularJs (ng for short) is a structural framework used to design dynamic web applications. First, it is a framework, not a class library. It provides a complete set of solutions like EXT for designing web applications. It is not just a javascript framework, because its core is actually an enhancement of HTML tags.

What is HTML Tag enhancement? In fact, you can use tags to complete Part of the page logic. The specific method is to use custom tags, custom attributes, and so on. These native HTML tags/attributes have a name in ng: directive (directive ). It will be detailed later. So what is a dynamic web application? Unlike traditional web systems, web applications can provide users with a wide range of operations, allowing users to constantly update views without redirecting URLs. Ng officially stated that it is more suitable for developing CRUD applications, that is, applications with many data operations, rather than game or image processing applications.

To achieve this, ng has introduced some outstanding features, including the template mechanism, data binding, modules, commands, dependency injection, and routing. By binding data to templates, we can get rid of tedious DOM operations and focus on the business logic.

Another question is, is ng a MVC framework? Or MVVM framework? The official website has mentioned that ng's design adopts the basic idea of MVC, but not completely MVC, because we are using the ng-controller command when writing code (at least from the name, it's MVC ), however, the Services processed by the controller basically interact with the view, which seems very similar to MVVM. Let's move our eyes to the non-conspicuous title on the official website: "AngularJS-Superheroic JavaScript MVW Framework ".

The Module class in AngularJS defines how the application starts. It can also define each segment of the application through declaration. Let's see how it implements these functions.

I. Where is the Main method?

If you are switching from Java or Python programming language, you may be wondering where the main method in AngularJS is? This starts everything and where is the first method to be executed? In JavaScript code, where is the method used to instantiate and combine all things and then run the command application?

In fact, AngularJS does not have the main method. AngularJS uses the module concept to replace the main method. The module allows us to describe the dependencies in the application and how to assemble and start the application. The reasons for using this method are as follows:

1. The module is declarative. This means that it is easier to write and understand. Reading It is just like reading ordinary English!

2. It is modular. This forces you to think about how to define your components and dependencies to make them clearer.

3. It makes testing easier. In unit test Lu, you can selectively add modules and avoid code content that cannot be used for unit test. At the same time, in the scenario test, you can load other additional modules to better work with other components.

For example, there is a module called "MyAwesomeApp" in our application. In HTML, you only need to add the following contentTag (or technically, it can be added to any tag ):

The Code is as follows:

The ng-app Command tells AngularJS to use the MyAwesomeApp module to start your application. So how should we define modules? For example, we recommend that you define different modules for services, commands, and filters. Then, your main module can declare that it depends on these modules.

This makes module management easier, because they are both good and complete code blocks, and each module has only one function. At the same time, unit tests can only load the modules they are concerned with, which can reduce the number of initialization times, and unit tests will become more refined and focused.

Ii. Loading and dependency

The module loading action takes place in two different stages, which can be reflected in the function name. They are the Config code block and the Run code block (or stage ).

1. Config code block

In this phase, AngularJS connects and registers all data sources. Therefore, only data sources and constants can be injected into the Config code block. Services that are not sure whether they have been initialized cannot be injected in.

2. Run code block

The Run code block is used to start your application and Run after the syringe is created. To avoid System Configuration after this, only instances and constants can be injected into the Run code block. In AngularJS, the Run code block is the most similar to the main method.

3. shortcuts

What can a module do? We can use it to instantiate controllers, commands, filters, and services, but we can do more with the module class. The API method configured in the following module:

1. config (configFn)

This method can be used for some registration work, which needs to be completed during module loading.

2. constant (name, object)

This method will run first, so you can use it to declare constants within the entire application range, and make them in all configurations (config method) and instances (all subsequent methods, such as controller and service.

3. controller (name, constructor)

Its basic function is to configure the Controller for later use.

4. directive (name, directiveFactory)

You can use this method to create commands in the application.

5. filter (name, filterFactory)

Allow you to create named AngularJS filters, as discussed in the previous chapter.

6. run (initializationFn)

You can use this method if you want to perform some operations after the syringe is started and these operations need to be performed before the page is available to users.

7. value (name, object)

Allow injection of values throughout the application.

8. factory (name, factoryFn)

If you have a class or object, you need to provide some logic or parameters for it before initialization, then you can use the factory interface here. Factory is a function that creates specific values (or objects ). Let's take a look at an instance of the greeter function. This function requires a greeting to initialize:

function Greeter(salutation) { this.greet = function(name) { return salutation + ' ' + name;};}

Greeter function example:

myApp.factory('greeter', function(salut) { return new Greeter(salut);});

Then you can call it like this:

var myGreeter = greeter('Halo');

9. service (name, object)

The difference between factory and service is that factory directly calls the function passed to it and then returns the execution result; the service will use the "new" keyword to call the constructor passed to it, and then return the result. Therefore, the previous greeter Factory can be replaced with the following greeter Service:

myApp.service('greeter', Greeter);

Whenever we need a greeter instance, AngularJS calls a new Greeter () to return an instance.

10. provider (name, providerFn)

Provider is the most complex part of these methods (obviously, it is also the most configurable part ). Provider is bound with both the factory and service, and you can also enjoy the benefits of configuring the provider function (that is, the config block) before the injection system is ready ).

Let's take a look at what the greeter Service looks like after being transformed using the provider:

myApp.provider('greeter', function() { var salutation = 'Hello'; this.setSalutation = function(s) { salutation = s;} function Greeter(a) { this.greet = function() { return salutation + ' ' + a;}} this.$get = function(a) { return new Greeter(a);};});

In this way, you can dynamically set greetings at runtime (for example, you can set greetings in different languages ).

var myApp = angular.module(myApp, []).config(function(greeterProvider) {greeterProvider.setSalutation('Namaste');});