Detailed explanation of AngularJS Module methods_AngularJS

What is AngularJS?

AngularJs (hereinafter referred to as ng) is a structural framework for designing dynamic web applications. First of all, it is a framework, not a class library. Like EXT, it provides a complete set of solutions for designing web applications. It is more than just a javascript framework, because its core is actually an enhancement of HTML tags.

What is HTML tag enhancement? In fact, it allows you to use tags to complete part of the page logic. The specific method is through custom tags, custom attributes, etc. These tags/attributes that are not native to HTML have a name in ng: directive. More on this later. So, what is a dynamic web application? Different from traditional web systems, web applications can provide users with rich operations and can continuously update views with user operations without url jumps. ng official also states that it is more suitable for developing CRUD applications, that is, applications with more data operations, rather than games or image processing applications.

In order to achieve this, ng has introduced some great features, including template mechanism, data binding, modules, directives, dependency injection, and routing. Through the binding of data and templates, we can get rid of tedious DOM operations and focus on business logic.

Another question, is ng an MVC framework? Or MVVM framework? The official website mentioned that the design of ng adopts the basic idea of ​​MVC, but it is not entirely MVC, because when writing the code, we are indeed using the ng-controller instruction (at least from the name, it is MVC), but this The business handled by the controller is basically interacting with the view, which seems to be very close to MVVM. Let us turn our attention to the non-eye-catching title of the official website: "AngularJS — Superheroic JavaScript MVW Framework".

The Module class in AngularJS is responsible for defining how the application is started. It can also define various fragments in the application through declarations. Let's take a look at how it implements these functions.

1. Where is the Main method

If you are coming from Java or Python programming language, then you may want to know where is the main method in AngularJS? Where is the method that starts everything up and is executed first? Where is the method in the JavaScript code that instantiates and puts everything together and then instructs the application to start running?

In fact, AngularJS does not have a main method. AngularJS uses the concept of modules to replace the main method. Modules allow us to declaratively describe the dependencies in an application and how to assemble and start it. The reasons for using this method are as follows:

1. Modules are declarative. This means it's easier to write and easier to understand - reading it is just like reading regular English!

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

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

For example, there is a module called "MyAwesomeApp" in our application. In HTML, just add the following to the tag (or technically, to any tag):

The ng-app directive will tell AngularJS to use the MyAwesomeApp module to launch your application. So, how should modules be defined? For example, we recommend that you define separate modules for services, directives, and filters. Your main module can then declare dependencies on these modules.

This makes module management easier, because they are all good, complete blocks of code, and each module has one and only one function. At the same time, unit tests can only load the modules they focus on, so the number of initializations can be reduced, and unit tests will become more refined and focused.

2. Loading and dependencies

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

1.Config code block

In this stage, AngularJS will connect and register all data sources. Therefore, only data sources and constants can be injected into Config blocks. Services that are not sure whether they have been initialized cannot be injected.

2.Run code block

The Run code block is used to start your application and start execution after the injector is created. To avoid having to configure the system after this point, only instances and constants can be injected into the Run block. You will find that in AngularJS, the Run block is the most similar thing to the main method.

3. Quick method

What can you do with modules? We can use it to instantiate controllers, directives, filters, and services, but there's much more you can do with module classes. API methods configured as follows:

1.config(configFn)

You can use this method to do some registration work, which needs to be completed when the module is loaded.

2.constant(name, object)

This method will run first, so you can use it to declare application-wide constants and make them available in all configuration (config method) and instance (all subsequent methods, such as controller, service, etc.) methods .

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 directives in your app.

5.filter(name,filterFactory)

Allows you to create named AngularJS filters, as discussed in the previous section.

6.run(initializationFn)

You can use this method if you want to perform some actions after the injector is started, but these actions need to be performed before the page is available to the user.

7.value(name,object)

                                                                                                                                                                                   --  allowing values ​​to be injected throughout the application.

8.factory(name,factoryFn)

If you have a class or object and need to provide it with some logic or parameters before it can be initialized, then you can use the factory interface here. A factory is a function that is responsible for creating some specific values ​​(or objects). Let’s look at an example of the greeter function. This function requires a greeting to initialize:

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

An example of greeter function is as follows:

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 will directly call the function passed to it, and then return the execution result; while service will use the "new" keyword to call the constructor passed to it, and then Return results. Therefore, the previous greeter Factory can be replaced by the following greeter Service:

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

我们来看看使用provider改造之后的greeter Service是什么样子：

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);
};
});

这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。

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