Angular source Learning the first Setupmoduleloader method _angularjs

Source: Internet
Author: User
Tags closure

Angular source code In fact, the structure is very clear, divided into the orderly, presumably this is the way:

(function (window,document,jquery,undefined) {
 //Some tool functions
 //expr the compiler to execute
 the//setupmoduleloader method. The internal framework of the company is the Vxsetup method (just defined, not called)
 //moduler method ()
 //angular initialization method, the internal framework of the company is Vxinit method
 //bootstrap
 // Createinjector
 //A series of instructions, services, filters, etc.
) (window,document,window.$)

In fact, reading angular source code is important angular the entire framework of ideas, as for service filters and instructions can be thrown away first.

Setupmoduleloader method write a bit complex, especially direct three-layer closure, if the reverse look, easy to confuse, or follow the idea to go more easily.

First of all, I hope that when I run ANGUALR, I can create a angular property under window. This angualr is an object that can be used to create a module. The following code is generated:

function Setupmoduleloader (window) {
     
    //ensure method is easy to understand, and there are many explanations on the Internet. In this view, the Window.angular object is a single example.
   
  var ensure=function (obj,name,factory) {return
    obj[name]| | (Obj[name]=factory ())
  }
    
  var angular = ensure (window, ' angular ', Object);
     
    The Createmodule method is used to create a module instance.
  var createmodule = function (name,requires) {
    var moduleinstance = {
      Name:name,
            requires:requires
    };
    return moduleinstance;
  }
    The Window.angular.module method actually runs the Createmodule method, which is just to protect the variable (now the simplified version, the variable is not added).
    //In fact, to add a method to an object, often use the ensure function in angular, pass a factory function, the advantage is neat and protect the scope.
  ensure (angular, ' module ', function () {return
    function (name,requires) {return
      createmodule (name, Requires)}}
  )
 
}

Now it looks like this is the Angular.module method. This is the registration method.

It is well known that angular.module (' MyApp ', []) is registering a module, or retrieving an app if it does not pass the second argument later.

However, the code written above does not retrieve the functionality of a module. So it needs to be perfected:

function Setupmoduleloader (window) {var ensure=function (obj,name,factory) {return obj[name]| |
    (Obj[name]=factory ())} Add an object to store each registered module, in fact, in angular, this object is also present//Of course, this modules object is located in the following ensure (angular, ' module ', fn) of the FN factory function, This in the closure can eliminate the outside access//If you change the angular source code, the object forcibly acquired, such as setting Window.modulebox = Modules, and then to print this modulebox to see,
    You will find that all registered modules can be seen. I put it here because it's convenient to debug later. I can always see what's inside the modules.
    But it doesn't really matter.
 
  var modules={} var angular = ensure (window, ' angular ', Object);
        var createmodule = function (name,requires,modules) {var moduleinstance = {Name:name};
    modules[name]=moduleinstance;//the module is stored in the modules object according to the corresponding name every time a module is registered.
  return moduleinstance; } ensure (angular, ' module ', function () {return function (name,requires) {if (requires) {return Createmod
      Ule (Name,requires,modules)//Added a parameter, that is modules this object. }else{return GetModule (name,modules); The GetModule method is not yet defined, but this piece of code does seem quite clear.
 g}}})}

Now OK, you can register a module can also get a module. As for GetModules, a module is removed from the modules object by name and is not written.

In fact, the simplification of the setupmoduleloader is so, very clear.

The Setupmoduleloader method really begins to become complicated by its cooperation with injector.

The Setupmoduleloader method is put here first, the next article analyzes the injector method. And then turn around and get setupmoduleloader.

Let's see how they fit in.

The important thing is that injector must be understood first, and $provider I want to see this blog you (and of course, me) can understand it thoroughly.

This will make it easy to understand Angularjs.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

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.