解读AngularJS的setupModuleLoader函数

http://www.cnblogs.com/whitewolf/p/angular-module-declare-and-get.html

看了上面这篇文章,自己读了一下代码,以下是个人理解,如有请指正

/**
 * Created by Administrator on 2016/10/15.
 */
function setupModuleLoader(window) {
    //...省略部分代码

    //注意angular.module(‘name‘,[require])为定义并获取一个新的模块
    //而anguular.module(‘name‘)为获取一个已存在的模块

    //判断对象obj是否存在name属性,存在则直接返回name,否则调用函数factory设置该属性,并返回该属性
    function ensure(obj, name, factory) {
        return obj[name] || (obj[name] = factory());
    }
    //确保window对象下存在angular属性
    var angular = ensure(window, ‘angular‘, Object);
    //确保angular下存在module属性
    return ensure(angular, ‘module‘, function() {
        var modules = {};
        return function module(name, requires, configFn) {
            //如果模块名为hasOwnProperty,报错:不是有效的名字
            var assertNotHasOwnProperty = function(name, context) {
                if (name === ‘hasOwnProperty‘) {
                    throw ngMinErr(‘badname‘, ‘hasOwnProperty is not a valid {0} name‘, context);
                }
            };
            //保证模块名不是‘module’
            assertNotHasOwnProperty(name, ‘module‘);
            //若为模块的定义,并且name与已存在的模块名重复,将原有的模块置空,即同名的模块将被后面定义的模块覆盖
            if (requires && modules.hasOwnProperty(name)) {
                modules[name] = null;
            }
            //若模块名已存在,则直接返回模块的实例,否则定义一个新模块
            return ensure(modules, name, function() {
                //要定义一个新的模块,却没有require参数,报错;注意require为[]表示定义,没有该参数表示获取
                if (!requires) {
                    throw $injectorMinErr(‘nomod‘, "Module ‘{0}‘ is not available! You either misspelled " +
                        "the module name or forgot to load it. If registering a module ensure that you " +
                        "specify the dependencies as the second argument.", name);
                }
                var invokeQueue = [];
                var runBlocks = [];
                var config = invokeLater(‘$injector‘, ‘invoke‘);
                //模块实例
                var moduleInstance = {
                    _invokeQueue: invokeQueue,
                    _runBlocks: runBlocks,
                    requires: requires,
                    name: name,
                    provider: invokeLater(‘$provide‘, ‘provider‘),
                    factory: invokeLater(‘$provide‘, ‘factory‘),
                    service: invokeLater(‘$provide‘, ‘service‘),
                    value: invokeLater(‘$provide‘, ‘value‘),
                    constant: invokeLater(‘$provide‘, ‘constant‘, ‘unshift‘),
                    animation: invokeLater(‘$animateProvider‘, ‘register‘),
                    filter: invokeLater(‘$filterProvider‘, ‘register‘),
                    controller: invokeLater(‘$controllerProvider‘, ‘register‘),
                    directive: invokeLater(‘$compileProvider‘, ‘directive‘),
                    config: config,
                    run: function(block) {
                        runBlocks.push(block);
                        return this;
                    }
                };
                if (configFn) {
                    config(configFn);
                }
                return moduleInstance;
                //invokeLater返回一个函数,该函数在利用module创建控制器、服务等时调用,向invokeQueue中推入数据,并返回模块的实例
                //这就是为什么我们可以在angularJS中这样写
                //angular.module(‘someMoudule‘,[‘require1‘])
                //.controller(...)
                //.directive(...)
                //而不用每次都写上模块名对应的变量名,就像下面这样
                //var myapp=angular.module(...);
                //myapp.controller(...);
                //myaap.directive(...);
                function invokeLater(provider, method, insertMethod) {
                    return function() {
                        invokeQueue[insertMethod || ‘push‘]([provider, method, arguments]);
                        return moduleInstance;
                    };
                }
            });
        };
    });
}
时间: 2024-11-01 11:54:43

解读AngularJS的setupModuleLoader函数的相关文章

angularjs $routeProvider template 函数及参数解惑

在angularjs官方文档关于$routeProvider的配置中,对template和templateUrl的配置有这么一段话 if it is a function, it will be called with the following parameters: {Array.<Object>} - route parameters extracted from the current$location.path() by applying the current route 读起来相

详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数.而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明. 1 $.get("data.php",$("#firstName.val()")

详细解读Jquery各Ajax函数

$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 $.get("data.php",$("#firstName

h5移动端flexible源码适配终端解读以及常用sass函数

;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]');//这样的

angularjs学习之五(angularjs中一般函数参数的传递)

1.模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl"> <input type="text" ng-model=&qu

angularjs 遇见$scope,xxx=function()报错为该函数未定义

本包子今天遇见一个问题,就是明明写了$scope,xx=function()但是报错了,报错显示是该函数未定义,我就很着急的先将函数写成一个全局函数,就没问题,等下午有空的时候寻思了一下,为什么全局就行呢,后来尝试将之前写的$scope.xxx=function()放在最上面,发现就没有报错了,才明白过来,这个angularjs中的函数原来是有执行的顺序的,写调用方法的时候,最好写在上面,so de si nei! 自己基本功还是很不扎实,得多多锻炼啊

angularjs-判断类型函数

#angularjs判断类型函数 <!DOCTYPE html> <html>  <head>   <meta charset="utf-8" />   <title></title>   <script src="js/angular.min.js"></script>  </head>  <body>   <div ng-app=&quo

C++中虚函数

本文为博主学习虚函数时,结合网上博客和相关书籍所写.主要分为两部分:虚函数的定义要遵循的规则,虚函数表. 一.虚函数的定义要遵循的规则 1.如果虚函数在基类与派生类中出现,仅仅是名字相同,而形式参数不同,或者是返回类型不同,那么即使加上了virtual关键字,也是不会进行滞后联编的. 解读:派生类中根据需要对虚函数进行重定义是,格式要求有三点: (1)与基类的虚函数有相同的参数个数: (2)与基类的虚函数有相同的参数类型: (3)与基类的虚函数有相同的返回类型:或者与基类虚函数的相同,或者都返回

AngularJS 模块加载

AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段应用不同的逻辑组.在模块的加载阶段, AngularJS会在提供者注册和配置的过程中对模块进行配置.在整个AngularJS的工作流中,这个阶段是唯一能够在应用启动前进行修改的部分. angular.module('myApp', []) .config(function($provide) {}); 使用config()函数的语法糖,并在配置阶段执行.例如,我们在某个模块之上创建一个服务或指令时: angul