Angularjs Module Method Detailed _angularjs

What is Angularjs?

Angularjs (ng for short) is a structural framework for designing Dynamic Web applications. First, it is a framework, not a class library, that provides a complete set of scenarios like ext for designing Web applications. It's not just a JavaScript framework, because its core is actually the enhancement of HTML tags.

What is HTML tag enhancement? In fact, you can use the tag to complete a part of the page logic, the specific way is through the custom tags, custom attributes, and so on, these HTML raw tags/attributes have a name in NG: Directive (Directive). will be described in detail later. So what is a dynamic Web application? Unlike traditional web systems, Web applications can provide users with a wealth of operations that can be constantly updated with user actions without URL jumps. Ng has also stated that it is more suitable for developing CRUD applications, which are more applications of data manipulation than games or image-processing applications.

To do this, Ng introduces some great features, including template mechanisms, data binding, modules, directives, dependency injection, and routing. By binding data to templates, we can get rid of tedious DOM operations and focus on business logic.

Another question, is ng an MVC framework? Or the MVVM frame? The official website mentions that Ng's design incorporates the basic idea of MVC, not just MVC, because we do use the Ng-controller directive (at least from the name of MVC) to write code. But this controller business is basically interacting with the view, so it looks very close to MVVM. Let us move our eyes to the official website that is not eye-catching title: "Angularjs-superheroic JavaScript MVW Framework."

The module class in ANGULARJS is responsible for defining how the application starts, and it can also define individual fragments in the application declaratively. Let's take a look at how it implements these functions.

A. Where is the Main method

If you're turning from a Java or Python programming language, you might be wondering where the main method in Angularjs is? Where does this start up all things and the first one to be executed? The JavaScript code is responsible for instantiating and combining everything together, and then ordering the application to start running the method where?

In fact, Angularjs does not have a main method, Angularjs uses the concept of a module instead of the main method. The module allows us to describe the dependencies in the application declaratively, and how to assemble and launch them. The reasons for using this method are as follows:

1. The module is declarative. This means that it is easier to write and it is easy to understand, and reading it is like reading a common English!

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

3. It makes testing easier. In unit Test Lu, you can selectively add modules and avoid content in your code that cannot be tested in a unit. Also, in scenario testing, you can load additional modules so that you can use them better with other components.

For example, there is a module called "Myawesomeapp" in our application. In HTML, just add the following to the

Copy Code code as follows:

The Ng-app command tells Angularjs to use the Myawesomeapp module to start your application. So how do you define a module? For example, we recommend that you define separate modules for services, directives, and filters. Your main module can then be declared dependent on these modules.

This makes it easier to manage the modules because they are good, complete blocks of code, and each module has and has only one function. At the same time, unit tests can load only the modules they care about, thus reducing the number of initialization and unit tests becoming more refined and focused.

Two. Loading and Reliance

The module load action occurs at two different stages, which can be reflected from the function name, which is the Config block and the run code block (or phase).

1.Config code block

In this phase, ANGULARJS will connect and register all the data sources. Therefore, only data sources and constants can be injected into the Config code block. Services that are not sure if they have been initialized are not injected in.

2.Run code block

The run code block is used to start your application and start execution after the syringe is created. To avoid configuring the system after this point is started, only instances and constants can be injected into the run code block. You'll find that in Angularjs, the run code block is the most similar thing to the Main method.

Three. Quick Method

What can I do with modules? We can use it to instantiate controllers, instructions, filters, and services, but there are more things you can do with module classes. The API methods configured in the following modules are:

1.config (CONFIGFN)

This method allows you to do some registration work that needs to be done when the module is loaded.

2.constant (name, object)

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

3.controller (Name,constructor)

Its basic function is to configure a good controller to facilitate the use of the following.

4.directive (Name,directivefactory)

You can use this method to create directives in your application.

5.filter (Name,filterfactory)

Allows you to create named Angularjs filters, as discussed in the previous chapters.

6.run (INITIALIZATIONFN)

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

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 first give it some logic or parameters before you can initialize it, then you will be able to use the factory interface here. Factory is a function that is responsible for creating certain values (or objects). Let's take a look at an example of a greeter function that requires a greeting to initialize:

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

The Greeter function example is as follows:

Myapp.factory (' greeter ', function (Salut) {return
 new greeter (Salut);
});

You can then invoke it like this:

var mygreeter = greeter (' Halo ');

9.service (Name,object)

The difference between factory and service is that the factory directly invokes the function passed to it, and then returns the result of the execution, and the service will use the "new" keyword to invoke the constructor passed to it, and then return the result. Therefore, the front of the Greeter factory can replace the following greeter Service:

Myapp.service (' greeter ', greeter);

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

10.provider (NAME,PROVIDERFN)

Provider is the most complex part of these methods (obviously, the most configurable part). Provider bind both factory and service, and enjoy the benefits of configuring the provider function (that is, the Config block) before the injection system is ready to be completed.

Let's see what the Greeter service looks like with the provider makeover:

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

This allows us to set up the greeting dynamically at run time (for example, it can be set according to the different languages the user uses).

var myApp = Angular.module (myApp, []). config (function (greeterprovider) {
greeterprovider.setsalutation (' Namaste ');