`

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
  });
分享到:
评论

相关推荐

    angularJs 1.3.0最新

    AngularJS 1.3.0 是 AngularJS 框架的一个重要版本,它在功能、性能和稳定性上都有显著的提升。AngularJS 是一个由 Google 主导开发的前端JavaScript框架,用于构建动态Web应用程序。其核心特性包括数据绑定、依赖...

    AngularJS 1.3.0

    AngularJS源码 AngularJS 1.3.0

    angularjs-1.3.0-rc.0.zip

    【标题】"AngularJS 1.3.0-rc.0" AngularJS 是一个流行的、开源的前端JavaScript框架,由Google维护,用于构建动态Web应用。版本1.3.0-rc.0(Release Candidate 0)是1.3.x系列的一个候选发布版本,它在1.2.x稳定版...

    最新angularjs 1.3.0中文API,中文教程

    angularjs API文档,指令部分大部分汉化

    AngularJS 1.2.19&1.3.0

    在本案例中,我们有两个版本的AngularJS,分别是1.2.19和1.3.0-beta4。 AngularJS 1.2.x 系列是AngularJS的一个稳定版本,特别是1.2.19,它可能包含了自1.2.0发布以来的各种bug修复和性能优化。这个版本强调了对旧...

    ASP网站整站程序PHP源码-MyTopix v1.3.0简体中文版-mytopix-v-130整站打包程序-毕设源码实例

    ASP网站整站程序PHP源码_MyTopix v1.3.0简体中文版_mytopix_v_130整站打包程序_毕设源码实例ASP网站整站程序PHP源码_MyTopix v1.3.0简体中文版_mytopix_v_130整站打包程序_毕设源码实例ASP网站整站程序PHP源码_...

    STM32Cube_FW_F4_V1.3.0

    ### STM32Cube_FW_F4_V1.3.0 相关知识点 #### STM32Cube_FW_F4_V1.3.0 概述 STM32Cube_FW_F4_V1.3.0 是针对STM32F4系列微控制器的一套软件库和示例程序。该版本为开发者提供了丰富的软件资源,包括外设驱动、...

    libvpx-v1.3.0.tar.xz

    libvpx-v1.3.0.tar.xz,依赖包,编译安装

    迷你SQL2000v1.3.0

    迷你SQL2000v1.3.0是一款小巧而实用的数据库管理系统,适用于那些对数据库性能要求不高的场景或者需要轻量级解决方案的用户。它以其精简的体积和易于操作的特点,成为了许多初学者和小型项目开发者的首选工具。 SQL...

    angularjs1.3

    AngularJS 1.3 是一个历史悠久且广泛使用的前端JavaScript框架,由Google开发并维护,用于构建动态Web应用程序。这个框架以其MVC(Model-View-Controller)架构模式、数据绑定和依赖注入等特性而著名,极大地提高了...

    seata-1.3.0 源码包

    通过对Seata-1.3.0源码的学习,开发者可以深入了解分布式事务的原理,理解其内部机制,并根据业务需求进行定制化开发。源码包中的`incubator-seata-1.3.0`目录包含了所有源代码、测试用例、文档以及构建脚本,是深入...

    AngularJS1.2.19&1.3.0完整版

    上次上传的不完整只是angularjs的核心部分。文件内容包括angular,js,angular-animate.js,angular-cookie.js,angular-loader.js,angular-mock.js,angular-resource.js,angular-route.js,angular-sanitize.js,angular-...

    chosen_v1.3.0

    chosen_v1.3.0

    Meshlab v1.3.0a源码

    《Meshlab v1.3.0a源码详解与编译指南》 Meshlab是一款开源的三维几何模型处理系统,其v1.3.0a版本的源码为我们提供了深入理解与自定义Meshlab功能的可能。源码的获取与编译是软件开发中的重要环节,本文将详细阐述...

    FanySkill4AD_V1.3.0.rar

    综合以上分析,这个"FanySkill4AD_V1.3.0.rar"压缩包提供了一系列针对Altium Designer的增强功能,包括但不限于差分对管理、网络分类、过孔添加、元件位置调整以及多边形网络分配等。通过使用这些脚本,用户可以更加...

    cni-plugins-linux-amd64-v1.3.0.tgz

    cni-plugins-linux-amd64-v1.3.0.tgz

    DDKWizard-v1.3.0a

    《DDKWizard-v1.3.0a:VS2008驱动开发的高效助手》 在计算机软件开发领域,驱动程序开发是一项至关重要的任务,它连接着硬件设备与操作系统,确保系统的正常运行。DDKWizard-v1.3.0a是一款专为Visual Studio 2008...

    FlaUInspect 网上最新版 flauinspect v1.3.0

    它的最新版本为v1.3.0,这款工具以其高效、安全的特性赢得了广大开发者和测试人员的青睐。在确保无木马、无病毒的前提下,FlaUInspect v1.3.0提供了更稳定、更全面的功能,为用户带来更加便捷的使用体验。 首先,...

    Altium Designer 自动铺铜脚本 FanySkill4AD_V1.3.0.zip

    自动铺铜脚本是提高设计效率的重要工具,FanySkill4AD_V1.3.0.zip文件中的内容就是针对Altium Designer的自动铺铜功能的定制化脚本。 自动铺铜是PCB设计中的一个重要环节,它的主要作用是填充电路板上未被元件占用...

Global site tag (gtag.js) - Google Analytics