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源码 AngularJS 1.3.0
angularJs 1.3.0最新,在网上找了很多没找到合适的,这个算是不错的
angularjs API文档,指令部分大部分汉化
seata-1.3.0 源码包
gradle-groovysh-plugin.zip,允许启动命令行shell的nullgradle插件
ASP网站整站程序PHP源码_MyTopix v1.3.0简体中文版_mytopix_v_130整站打包程序_毕设源码实例ASP网站整站程序PHP源码_MyTopix v1.3.0简体中文版_mytopix_v_130整站打包程序_毕设源码实例ASP网站整站程序PHP源码_...
libvpx-v1.3.0.tar.xz,依赖包,编译安装
上次上传的不完整只是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
从官网下载的AngualrJS,包括压缩和未压缩的部分,留做备用。
angularjs 1.3的js文件,包括ui-router,亲测可用。
cni-plugins-linux-amd64-v1.3.0.tgz
meshlabv1.3.0a的源码,可用于Meshlab的编译
更新内容: 1. 增加一套可爱皮肤2. Flash播放器增加手柄支持3. 增加软件菜单软件介绍:花儿世界是一款为儿童开发的浏览器,它可以引导小朋友们上网学知识、听儿歌、看动画片、玩益智游戏等,是小朋友的必备工具。...
Altium Designer 自动铺铜脚本 FanySkill4AD_V1.3.0.zip
自己在学习STM32F4xx的开发板的过程中,卡在找相应例程这里了,因为官网上下载的是V1.16版,根本就太老了,好不容易从朋友那拷贝到了好用的例程包,亲测好用之后,赶紧分享给大家,免得走太多弯路。
v1.3.0更新内容 新增 侧边栏新增时间转换功能 优化 时间插件功能改版优化 插件详细介绍地址 https://plugin.csdn.net/idea.html
unity音乐游戏插件Koreographer v1.3.0,这个还是相当的不错的。可以做节奏大师等音乐游戏哦
FlaUInspect 最新版flauinspect v1.3.0 没有木马,没有病毒,请放心下载使用