angularJS 学习笔记1

学习angularJS,使用分支1.3.15。
根据使用，记录下学习过程。

1， window.angular变量初始化

1.1 publishExternalAPI （AngularPublic.js 文件)

function publishExternalAPI(angular) {  extend(angular, {    'bootstrap': bootstrap,    'copy': copy,    'extend': extend,    'equals': equals,    'element': jqLite,    'forEach': forEach,    'injector': createInjector,    'noop': noop,    'bind': bind,    'toJson': toJson,    'fromJson': fromJson,    'identity': identity,    'isUndefined': isUndefined,    'isDefined': isDefined,    'isString': isString,    'isFunction': isFunction,    'isObject': isObject,    'isNumber': isNumber,    'isElement': isElement,    'isArray': isArray,    'version': version,    'isDate': isDate,    'lowercase': lowercase,    'uppercase': uppercase,    'callbacks': {counter: 0},    'getTestability': getTestability,    '$$minErr': minErr,    '$$csp': csp,    'reloadWithDebugInfo': reloadWithDebugInfo  });  angularModule = setupModuleLoader(window);  try {    angularModule('ngLocale');  } catch (e) {    angularModule('ngLocale', []).provider('$locale', $LocaleProvider);  }  angularModule('ng', ['ngLocale'], ['$provide',    function ngModule($provide) {      // $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.      $provide.provider({        $$sanitizeUri: $$SanitizeUriProvider      });      $provide.provider('$compile', $CompileProvider).        directive({            a: htmlAnchorDirective,            input: inputDirective,            textarea: inputDirective,            form: formDirective,            script: scriptDirective,            select: selectDirective,            style: styleDirective,            option: optionDirective,            ngBind: ngBindDirective,            ngBindHtml: ngBindHtmlDirective,            ngBindTemplate: ngBindTemplateDirective,            ngClass: ngClassDirective,            ngClassEven: ngClassEvenDirective,            ngClassOdd: ngClassOddDirective,            ngCloak: ngCloakDirective,            ngController: ngControllerDirective,            ngForm: ngFormDirective,            ngHide: ngHideDirective,            ngIf: ngIfDirective,            ngInclude: ngIncludeDirective,            ngInit: ngInitDirective,            ngNonBindable: ngNonBindableDirective,            ngPluralize: ngPluralizeDirective,            ngRepeat: ngRepeatDirective,            ngShow: ngShowDirective,            ngStyle: ngStyleDirective,            ngSwitch: ngSwitchDirective,            ngSwitchWhen: ngSwitchWhenDirective,            ngSwitchDefault: ngSwitchDefaultDirective,            ngOptions: ngOptionsDirective,            ngTransclude: ngTranscludeDirective,            ngModel: ngModelDirective,            ngList: ngListDirective,            ngChange: ngChangeDirective,            pattern: patternDirective,            ngPattern: patternDirective,            required: requiredDirective,            ngRequired: requiredDirective,            minlength: minlengthDirective,            ngMinlength: minlengthDirective,            maxlength: maxlengthDirective,            ngMaxlength: maxlengthDirective,            ngValue: ngValueDirective,            ngModelOptions: ngModelOptionsDirective        }).        directive({          ngInclude: ngIncludeFillContentDirective        }).        directive(ngAttributeAliasDirectives).        directive(ngEventDirectives);      $provide.provider({        $anchorScroll: $AnchorScrollProvider,        $animate: $AnimateProvider,        $browser: $BrowserProvider,        $cacheFactory: $CacheFactoryProvider,        $controller: $ControllerProvider,        $document: $DocumentProvider,        $exceptionHandler: $ExceptionHandlerProvider,        $filter: $FilterProvider,        $interpolate: $InterpolateProvider,        $interval: $IntervalProvider,        $http: $HttpProvider,        $httpBackend: $HttpBackendProvider,        $location: $LocationProvider,        $log: $LogProvider,        $parse: $ParseProvider,        $rootScope: $RootScopeProvider,        $q: $QProvider,        $$q: $$QProvider,        $sce: $SceProvider,        $sceDelegate: $SceDelegateProvider,        $sniffer: $SnifferProvider,        $templateCache: $TemplateCacheProvider,        $templateRequest: $TemplateRequestProvider,        $$testability: $$TestabilityProvider,        $timeout: $TimeoutProvider,        $window: $WindowProvider,        $$rAF: $$RAFProvider,        $$asyncCallback: $$AsyncCallbackProvider,        $$jqLite: $$jqLiteProvider      });    }  ]);}

首先，通过extend（angular, {…}), 扩展angulr对象的方法，譬如常用的angular.element()方法等价于jqLite(); 如果应用依赖于jquery, 则初始化的bindQuery()会把jqLite等价于jQuery.

然后，setupModuleLoader（window)则提供给angular对象的module()方法,即 angular.module = 此处的angularModule函数。

最后，初始化了两个重要的内部的module;
其中 angularModule(‘ngLocale’, []).provider(‘$locale’, $LocaleProvider), 等价于:

    var mymod = angular.mdule('ngLocale',[]);    mymod.provider('locale', $LocalProvider); //其中$LocalProvider在 locale.js文件中定义

此时执行的provider方法，仅仅是把this invoke action 存储在一个queue中，等待执行(waiting to invoke);
另外一个内部module就是

angularModule('ng', ['ngLocale'], ['$provide',function($provide..){...}]

1.2 setupModuleLoader() 函数

'use strict';/** * @ngdoc type * @name angular.Module * @module ng * @description * * Interface for configuring angular {@link angular.module modules}. */function setupModuleLoader(window) {  var $injectorMinErr = minErr('$injector');  var ngMinErr = minErr('ng');  function ensure(obj, name, factory) {    return obj[name] || (obj[name] = factory());  }  var angular = ensure(window, 'angular', Object);  // We need to expose `angular.$$minErr` to modules such as `ngResource` that reference it during bootstrap  angular.$$minErr = angular.$$minErr || minErr;  return ensure(angular, 'module', function() {    /** @type {Object.<string, angular.Module>} */    var modules = {};    /**     * @ngdoc function     * @name angular.module     * @module ng     * @description     *     * The `angular.module` is a global place for creating, registering and retrieving Angular     * modules.     * All modules (angular core or 3rd party) that should be available to an application must be     * registered using this mechanism.     *     * When passed two or more arguments, a new module is created.  If passed only one argument, an     * existing module (the name passed as the first argument to `module`) is retrieved.     *     *     * # Module     *     * A module is a collection of services, directives, controllers, filters, and configuration information.     * `angular.module` is used to configure the {@link auto.$injector $injector}.     *     * ```js     * // Create a new module     * var myModule = angular.module('myModule', []);     *     * // register a new service     * myModule.value('appName', 'MyCoolApp');     *     * // configure existing services inside initialization blocks.     * myModule.config(['$locationProvider', function($locationProvider) {     *   // Configure existing providers     *   $locationProvider.hashPrefix('!');     * }]);     * ```     *     * Then you can create an injector and load your modules like this:     *     * ```js     * var injector = angular.injector(['ng', 'myModule'])     * ```     *     * However it's more likely that you'll just use     * {@link ng.directive:ngApp ngApp} or     * {@link angular.bootstrap} to simplify this process for you.     *     * @param {!string} name The name of the module to create or retrieve.     * @param {!Array.<string>=} requires If specified then new module is being created. If     *        unspecified then the module is being retrieved for further configuration.     * @param {Function=} configFn Optional configuration function for the module. Same as     *        {@link angular.Module#config Module#config()}.     * @returns {module} new module with the {@link angular.Module} api.     */    return function module(name, requires, configFn) {      var assertNotHasOwnProperty = function(name, context) {        if (name === 'hasOwnProperty') {          throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);        }      };      assertNotHasOwnProperty(name, 'module');      if (requires && modules.hasOwnProperty(name)) {        modules[name] = null;      }      return ensure(modules, name, function() {        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);        }        /** @type {!Array.<Array.<*>>} */        var invokeQueue = [];        /** @type {!Array.<Function>} */        var configBlocks = [];        /** @type {!Array.<Function>} */        var runBlocks = [];        var config = invokeLater('$injector', 'invoke', 'push', configBlocks);        /** @type {angular.Module} */        var moduleInstance = {          // Private state          _invokeQueue: invokeQueue,          _configBlocks: configBlocks,          _runBlocks: runBlocks,          /**           * @ngdoc property           * @name angular.Module#requires           * @module ng           *           * @description           * Holds the list of modules which the injector will load before the current module is           * loaded.           */          requires: requires,          /**           * @ngdoc property           * @name angular.Module#name           * @module ng           *           * @description           * Name of the module.           */          name: name,          /**           * @ngdoc method           * @name angular.Module#provider           * @module ng           * @param {string} name service name           * @param {Function} providerType Construction function for creating new instance of the           *                                service.           * @description           * See {@link auto.$provide#provider $provide.provider()}.           */          provider: invokeLater('$provide', 'provider'),          /**           * @ngdoc method           * @name angular.Module#factory           * @module ng           * @param {string} name service name           * @param {Function} providerFunction Function for creating new instance of the service.           * @description           * See {@link auto.$provide#factory $provide.factory()}.           */          factory: invokeLater('$provide', 'factory'),          /**           * @ngdoc method           * @name angular.Module#service           * @module ng           * @param {string} name service name           * @param {Function} constructor A constructor function that will be instantiated.           * @description           * See {@link auto.$provide#service $provide.service()}.           */          service: invokeLater('$provide', 'service'),          /**           * @ngdoc method           * @name angular.Module#value           * @module ng           * @param {string} name service name           * @param {*} object Service instance object.           * @description           * See {@link auto.$provide#value $provide.value()}.           */          value: invokeLater('$provide', 'value'),          /**           * @ngdoc method           * @name angular.Module#constant           * @module ng           * @param {string} name constant name           * @param {*} object Constant value.           * @description           * Because the constant are fixed, they get applied before other provide methods.           * See {@link auto.$provide#constant $provide.constant()}.           */          constant: invokeLater('$provide', 'constant', 'unshift'),          /**           * @ngdoc method           * @name angular.Module#animation           * @module ng           * @param {string} name animation name           * @param {Function} animationFactory Factory function for creating new instance of an           *                                    animation.           * @description           *           * **NOTE**: animations take effect only if the **ngAnimate** module is loaded.           *           *           * Defines an animation hook that can be later used with           * {@link ngAnimate.$animate $animate} service and directives that use this service.           *           * ```js           * module.animation('.animation-name', function($inject1, $inject2) {           *   return {           *     eventName : function(element, done) {           *       //code to run the animation           *       //once complete, then run done()           *       return function cancellationFunction(element) {           *         //code to cancel the animation           *       }           *     }           *   }           * })           * ```           *           * See {@link ng.$animateProvider#register $animateProvider.register()} and           * {@link ngAnimate ngAnimate module} for more information.           */          animation: invokeLater('$animateProvider', 'register'),          /**           * @ngdoc method           * @name angular.Module#filter           * @module ng           * @param {string} name Filter name.           * @param {Function} filterFactory Factory function for creating new instance of filter.           * @description           * See {@link ng.$filterProvider#register $filterProvider.register()}.           */          filter: invokeLater('$filterProvider', 'register'),          /**           * @ngdoc method           * @name angular.Module#controller           * @module ng           * @param {string|Object} name Controller name, or an object map of controllers where the           *    keys are the names and the values are the constructors.           * @param {Function} constructor Controller constructor function.           * @description           * See {@link ng.$controllerProvider#register $controllerProvider.register()}.           */          controller: invokeLater('$controllerProvider', 'register'),          /**           * @ngdoc method           * @name angular.Module#directive           * @module ng           * @param {string|Object} name Directive name, or an object map of directives where the           *    keys are the names and the values are the factories.           * @param {Function} directiveFactory Factory function for creating new instance of           * directives.           * @description           * See {@link ng.$compileProvider#directive $compileProvider.directive()}.           */          directive: invokeLater('$compileProvider', 'directive'),          /**           * @ngdoc method           * @name angular.Module#config           * @module ng           * @param {Function} configFn Execute this function on module load. Useful for service           *    configuration.           * @description           * Use this method to register work which needs to be performed on module loading.           * For more about how to configure services, see           * {@link providers#provider-recipe Provider Recipe}.           */          config: config,          /**           * @ngdoc method           * @name angular.Module#run           * @module ng           * @param {Function} initializationFn Execute this function after injector creation.           *    Useful for application initialization.           * @description           * Use this method to register work which should be performed when the injector is done           * loading all modules.           */          run: function(block) {            runBlocks.push(block);            return this;          }        };        if (configFn) {          config(configFn);        }        return moduleInstance;        /**         * @param {string} provider         * @param {string} method         * @param {String=} insertMethod         * @returns {angular.Module}         */        function invokeLater(provider, method, insertMethod, queue) {          if (!queue) queue = invokeQueue;          return function() {            queue[insertMethod || 'push']([provider, method, arguments]);            return moduleInstance;          };        }      });    };  });}

其中重要的工具方法(util function)是ensure(obj, name, factory), 如果对象obj中存在name字段，则直接返回，否则执行工厂方法factory(),来赋予值，即 obj[name]=facotry();

其中，angular.modulel()方法返回的是个 moduleInstance，它的方法都是invokeLater() 进行封装，即把invoke action封装成一个缓存(其closuer中的invokeQueue 内存中).