[size=medium][b]angular资源:[/b][/size]
angular文档:[url]http://docs.angularjs.org/api[/url]
angular官网:[url]http://angularjs.org/[/url]
angular源码:[url]https://github.com/angular/angular.js[/url]
angular下载:[url]http://code.angularjs.org/[/url]
[size=medium][b]学习版本:[/b][/size]
1.2.0-rc.2
[size=medium][b]流程简述:[/b][/size]
angular初始化大致上有2部分:
1.初始化angular框架,模块等
2.解析document
[color=red]1.读取angular.js脚本,执行angular框架上下文脚本[/color]
[color=red]2.初始化angular框架,配置模块,挂载angular对象[/color]
[color=red]3.使用angular框架,初始化(扫描)document中,相应的节点[/color]
[size=medium][b]angular源码,加载启动部分:[/b][/size]
[size=medium][b]angular源码,初始化angular框架部分[/b][/size]
[size=medium][b]angular源码,装载angular及module部分[/b][/size]
[size=medium][b]angular源码,入口(angularInit)部分:[/b][/size]
[size=medium][b]学习膜拜:[/b][/size]
1.把javascript写出了oop的范,设计模式,设计原则很好的体现了出来。
2.angular的结构,已经不是为了实现的页面功能,而是成为了一个应用框架。
[size=medium][b]学习吐槽:[/b][/size]
setupModuleLoader的时候,死绑定的属性为'angular',我要copy装b改名字,让我咋弄?
angularInit的时候,为毛最初是elements,最后却用一个element去引导,module也只能是最后一个element上的,并且module只能为单模块名。
angular文档:[url]http://docs.angularjs.org/api[/url]
angular官网:[url]http://angularjs.org/[/url]
angular源码:[url]https://github.com/angular/angular.js[/url]
angular下载:[url]http://code.angularjs.org/[/url]
[size=medium][b]学习版本:[/b][/size]
1.2.0-rc.2
[size=medium][b]流程简述:[/b][/size]
angular初始化大致上有2部分:
1.初始化angular框架,模块等
2.解析document
[color=red]1.读取angular.js脚本,执行angular框架上下文脚本[/color]
(function(window, document, undefined) {
...
})(window, document);
[color=red]2.初始化angular框架,配置模块,挂载angular对象[/color]
publishExternalAPI(angular);
[color=red]3.使用angular框架,初始化(扫描)document中,相应的节点[/color]
angularInit(document, bootstrap);
[size=medium][b]angular源码,加载启动部分:[/b][/size]
(function(window, document, undefined) {
//设置严格模式
'use strict';
/*********
省略代码
*********/
//尝试绑定使用jquery对象
bindJQuery();
//公布angular扩展api函数(初始化angular环境)
publishExternalAPI(angular);
//document加载完成后,加载angular
jqLite(document).ready(function() {
//加载angular入口
angularInit(document, bootstrap);
});
})(window, document);
[size=medium][b]angular源码,初始化angular框架部分[/b][/size]
function publishExternalAPI(angular){
/********************************
设置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,
'$$minErr': minErr,
'version': version,
'isDate': isDate,
'lowercase': lowercase,
'uppercase': uppercase,
'callbacks': {counter: 0}
});
/********************************
创建angular默认模块
********************************/
angularModule = setupModuleLoader(window);
/********************************
尝试挂载ngLocale模块
********************************/
try {
angularModule('ngLocale');
} catch (e) {
angularModule('ngLocale', []).provider('$locale', $LocaleProvider);
}
/********************************
配置ng模块
********************************/
angularModule('ng', ['ngLocale'], ['$provide',
function ngModule($provide) {
$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,
ngCsp: ngCspDirective,
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,
required: requiredDirective,
ngRequired: requiredDirective,
ngValue: ngValueDirective
}).
directive(ngAttributeAliasDirectives).
directive(ngEventDirectives);
$provide.provider({
$anchorScroll: $AnchorScrollProvider,
$animate: $AnimateProvider,
$browser: $BrowserProvider,
$cacheFactory: $CacheFactoryProvider,
$controller: $ControllerProvider,
$document: $DocumentProvider,
$exceptionHandler: $ExceptionHandlerProvider,
$filter: $FilterProvider,
$interpolate: $InterpolateProvider,
$http: $HttpProvider,
$httpBackend: $HttpBackendProvider,
$location: $LocationProvider,
$log: $LogProvider,
$parse: $ParseProvider,
$rootScope: $RootScopeProvider,
$q: $QProvider,
$sce: $SceProvider,
$sceDelegate: $SceDelegateProvider,
$sniffer: $SnifferProvider,
$templateCache: $TemplateCacheProvider,
$timeout: $TimeoutProvider,
$window: $WindowProvider,
$$urlUtils: $$UrlUtilsProvider
});
}
]);
}
[size=medium][b]angular源码,装载angular及module部分[/b][/size]
function setupModuleLoader(window) {
function ensure(obj, name, factory) {
return obj[name] || (obj[name] = factory());
}
/**********************************
声明window的angular属性
声明angular的module属性
注:angular.module设置为return的module函数
*********************************/
return ensure(ensure(window, 'angular', Object), 'module', function() {
var modules = {};
/**********************************
module函数
*********************************/
return function module(name, requires, configFn) {
/*******.
省略代码
*******/
});
});
}
[size=medium][b]angular源码,入口(angularInit)部分:[/b][/size]
function angularInit(element, bootstrap) {
//检索加载angular的dom元素列表
var elements = [element],
//加载angular的dom元素
appElement,
//加载的模块
module,
//检索angular加载的关键字
names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],
//提取angular加载模块的正则表达式
NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/;
//追加加载angular的dom元素
function append(element) {
element && elements.push(element);
}
/**********************************************************************
遍历angular加载的关键字
检索分为两种方式:
1.使用document.getElementById,检索id中关键字
2.使用element.querySelectorAll,参考:http://www.w3.org/TR/selectors-api/]
**********************************************************************/
forEach(names, function(name) {
names[name] = true;
append(document.getElementById(name));
name = name.replace(':', '\\:');
if (element.querySelectorAll) {
forEach(element.querySelectorAll('.' + name), append);
forEach(element.querySelectorAll('.' + name + '\\:'), append);
forEach(element.querySelectorAll('[' + name + ']'), append);
}
});
/**********************************************************************
解析加载angular的dom元素及module
解析分为两种方式:
1.获取element.className,提取元素class属性内容,作为module名
2.获取names中存在于dom元素上的属性,提取属性内容,作为module
**********************************************************************/
forEach(elements, function(element) {
if (!appElement) {
var className = ' ' + element.className + ' ';
var match = NG_APP_CLASS_REGEXP.exec(className);
if (match) {
appElement = element;
module = (match[2] || '').replace(/\s+/g, ',');
} else {
forEach(element.attributes, function(attr) {
if (!appElement && names[attr.name]) {
appElement = element;
module = attr.value;
}
});
}
}
});
//如果存在需要加载angular的dom元素,调用bootstrap引导加载appElement,module
if (appElement) {
bootstrap(appElement, module ? [module] : []);
}
}
[size=medium][b]学习膜拜:[/b][/size]
1.把javascript写出了oop的范,设计模式,设计原则很好的体现了出来。
2.angular的结构,已经不是为了实现的页面功能,而是成为了一个应用框架。
[size=medium][b]学习吐槽:[/b][/size]
setupModuleLoader的时候,死绑定的属性为'angular',我要copy装b改名字,让我咋弄?
angularInit的时候,为毛最初是elements,最后却用一个element去引导,module也只能是最后一个element上的,并且module只能为单模块名。