Method of AngularJS Module class

Source: Internet
Author: User

Method of AngularJS Module classthe module class in ANGULARJS is responsible for defining how the app starts, and it can also define individual fragments in the app declaratively. Let's take a look at how it implements these features.

One. Where is the Main method

If you're coming from Java or the Python programming language, you might be wondering where the main method is in Angularjs. This starts everything up, and the first way to be executed is where? The JavaScript code is responsible for instantiating and assembling everything together, and then where is the method that commands the application to start running?

In fact, Angularjs does not have a main method, and 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 easy to understand, and reading it is 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 LV, you can selectively add modules, and you can avoid content in your code that cannot be unit tested. Also, in the scenario test, you can load additional modules so that you can better work with other components.

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

The ng-app instruction will tell Angularjs to use the Myawesomeapp module to launch your app. 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 declare dependencies on these modules.

This makes module management easier because they are good, complete blocks of code, each with only one function. At the same time, unit tests can load only the modules they care about, which reduces the number of initializations, and the unit tests become more refined and focused.

Two. Loading and dependency

The module loading action takes place at two different stages, which can be reflected from the function name, which is the Config code block and the run code block (or stage), respectively.

1.Config code block

In this phase, ANGULARJS will connect and register 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 are not injected.

2.Run code block

The run code block is used to start your app and start execution after the syringe is created. To avoid configuration of the system at this point, only instances and constants can be injected into the run code block. You will find that in Angularjs, the run code block is the most similar to the Main method.

Three. Quick Method

What can be done with modules? We can use it to instantiate controllers, directives, filters, and services, but there are many more things we can do with module classes. The following module configures the API method:

1.config (CONFIGFN)

With this approach, you can 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 constants throughout the application, and make them available in all Configurations (config methods) and instances (all subsequent methods, such as controller, service, and so on).

3.controller (Name,constructor)

Its basic function is to configure the controller conveniently 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 a named Angularjs filter, as discussed in the previous section.

6.run (INITIALIZATIONFN)

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

7.value (Name,object)

Allows the injection of values throughout the application.

8.factory (NAME,FACTORYFN)

If you have a class or object, you need to 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 some specific 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;};}

An example of the Greeter function is as follows:

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

You can then call it this way:

var mygreeter = greeter (' Halo ');

9.service (Name,object)

The difference between factory and service is that factory invokes the function passed to it directly and returns the result of execution, and the service uses the "new" keyword to invoke the constructor passed to it, and then returns the result. So, the front 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, it is also the best configurable part). Provider binds both the factory and the service, and you can also enjoy the benefits of configuring the provider function (that is, the Config block) before the injection system is ready to complete.

Let's take a look at what the Greeter service looks like after using the provider makeover:

Myapp.provider (' greeter ', function () {var salutation = ' Hello '; this.setsalutation = function (s) {salutation = s;} funct Ion Greeter (a) {This.greet = function () {return salutation + ' + A;}} this. $get = function (a) {return new Greeter (a); };});

This allows us to dynamically set the greeting 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 ');});

Each time someone needs a greeter instance, Angularjs calls the $get method internally.

Attached: angular.module (' MyApp ', [...]) There is a small but important difference between angular.module (' MyApp ').

Angular.module (' MyApp ', [...]) A new angular module is created and then the square brackets ([...] ), and Angular.module (' MyApp ') uses the existing module defined by the first call.

So, for the following code, you need to make sure that it is used only once throughout the application:

Angular.module (' MyApp ', [...])//If your application is modular, this may be mymodule

If you are not going to save a module reference to a variable and then use that variable to refer to the module throughout the application, then using Angular.module (MYAPP) in other files guarantees that the correct ANGULARJS module reference will be obtained. Everything on the module must be defined by accessing the module reference, or by adding the necessary content where the module is defined.

Method of AngularJS Module class

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.