`

angularjs源码分析(AngularJS v1.3.0)

阅读更多
0---1402行

概要描述
   这一部分主要定义了一些通用的函数,例如常用的字符串处理trim、lowercase、uppercase、foreach、copy、extends等等

关键分析
  1、shallowCopy与copy
         shallowCopy是浅copy
         copy是深度copy
  2、从1263--1275行代码定义了getNgAttribute方法,可以看出所以与angular相关的属性名称都是以['ng-', 'data-ng-', 'ng:', 'x-ng-']其中的一个为前缀,否则无效

  3、从1277-- 1381行的注释中,可以清晰的了解到四方面的信息
      1)、如何定义一个模块
             var ngAppDemo = angular.module('ngAppDemo', []);
             打开1734行代码
              return function module(name, requires, configFn)
             我们可以看到module方法的有三个参数:
                    name: 模块名称
                    requires:依赖模块列表
                    configFn:主要用来配置关联的模块
             具体调用如下:
                        var ngAppDemo = angular.module('ngAppDemo', ['aaa', 'bbbb'], function($xxService, $xxprovider){
                              //angular会根据function函数的参数名称自动注入对应的服务,之后我们可以通过参拿到相关
                              //服务的对象,接下来我们就可以配置这些对象喽
                              $xxService.xxMethod();
                              ......
                         });
        2)、如何创建Controller,以及如果将controller.$scope中的属性绑定到你的html template中。
                 例如:
                         <div ng-controller="ngAppDemoController">
                             I can add: {{a}} + {{b}} =  {{ a+b }}
                         </div>

                   1)、{{}}就是传说中的绑定神器,可以在{{}}写表达式、调用controller.$scope函数和属性
                   2)、创建一个controller,在angular思想当中有两个概念“模块”、“服务”。“模块“中可以包含很多
                        “服务”controller就是服务中的一种。
                              angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
                                              $scope.a = 1;
                                              $scope.b = 2;
                                   });   
                             很神奇吧? 当这段代码执行时,上面的html 模板就会自动生成为:i can add 1 + 2 = 3。
              
       3)、 ng-app是什么作用。
            简单点说就是标识angular root scope的Dom作用域
       4)、ng-strict-di是什么? 从字面上理解:“严格执行依赖”,注释中给出的解释如下:(我会继续认证下面的结论)
                angular.module('ngAppStrictDemo', [])
                //BadController的定义方式在ng-strict-di模式下是错误的,因为在ng-strict-di的任何依赖都需要提前声明
                //如果仅仅通过函数参数字面量上标记 需要依赖的服务是错误的,所以必须要提前声明
               .controller('BadController', function($scope) {
                    $scope.a = 1;
                    $scope.b = 2;
                })
               //正确的
               .controller('GoodController1', ['$scope', function($scope) {
                     $scope.a = 1;
                     $scope.b = 2;
               }])
               //正确的。 因为下面多了一行GoodController2.$inject = ['$scope'];
               .controller('GoodController2', GoodController2);
               function GoodController2($scope) {
                     $scope.name = "World";
               }
              GoodController2.$inject = ['$scope'];
 
            

1404~ 行
 
  1、1404~1431行
           定义了一个angularInit方法,从方法名称可以看出是用来初始化angular app的,该方法会有两个参数element, bootstrap,接下来会首先查找
       ng-app Dom,如果element不存在ng-app,就会从childElement查找,之后会调用如下方法启动app应用:
            bootstrap(appElement, module ? [module] : [], config);

  2、1655~1970行
           采用闭包的方式定义了angular.module方法, module方法内部的逻辑是:当我们创建一个module对象时,对象内部会创建三个数组
        /** @type {!Array.<Array.<*>>} */
var invokeQueue = [];

/** @type {!Array.<Function>} */
var configBlocks = [];

/** @type {!Array.<Function>} */
var runBlocks = [];
例如invokeQueue中存储了模块初始化话时的调用顺序队列,也就是说,它把模块中每一个服务的初始化步骤变成队列来表示,当真正执行初始化,会自动遍历
队列执行每一个方法。
除此之外module包含了模块的名称(name)、依赖信息(requires)
  3、1072~2053行
           从这些注释中,可以知道接下来的代码主要是定义一些XXDirective、XXProvider,接下来的代码是angular的核心,如果我们不知道该怎么定义自己的指令Directive
或者其他服务:filter、service等等,这时可以参考下面的代码

  4、2080~2109行
           这些代码将会告诉你,为什么可以直接用angular.noop、angular.forEach这样的调用方式,因为继承了嘛
  5、2080~2206行
           这里定义一个publishExternalAPI方法,该方法业务逻辑是: 创建了ngLocale、ng两个模块。ng模块依赖于nglocale,并且在ng模块中定义一个configFn:ngModule(2119行)
。哇塞!在ngModule方法内部,我们可以看到很多内置的XXDirective、XXProvider:
           $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,
$timeout: $TimeoutProvider,
$window: $WindowProvider,
$$rAF: $$RAFProvider,
$$asyncCallback : $$AsyncCallbackProvider
  });
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics