1、angularJS的实现原理是什么
angularJS通过在html文件里加入特定的标签来进行相应事件绑定等各种动作,简化了前端程序的开发。
2、angularJS是怎样运行起来的?
angularJS脚本执行时进行了三步操作
1、绑定jquery,可以使用jquery方便的操作页面元素。
2、发布angular API函数,可以调用然后进行不同的操作。
3、渲染页面,识别页面的特定标签,调用相关API 进行事件注册等动作。
3、绑定jquery 这一步做了什么
如果已有JQuery则使用JQuery,同时扩展JQuery,使之拥有
scope、isolateScope、controller、injector、inheritedData 五个jqLite的属性
如果木有jquery,就使用jqLite充当jquery。
修改jquery的remove、empty、html 函数,也就是在用query修改html的时候,会进行相应的angularJS的事件绑定等操作的移除。
4、发布API 做了什么
使angular成为window的对象,这样我们就可以直接使用angular调用函数,
扩展angular的函数,使用angular.function的方式,可以调用以下常用的js方法。
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
},
$$minErr: minErr,
$$csp: csp
注册angularJS 提供的指令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,
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,
$interval: $IntervalProvider,
$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
5、最后一步渲染页面做了什么
首先是搜索页面中的 ["ng:app", "ng-app", "x-ng-app", "data-ng-app”] 这几个元素。我们一般使他们成为属性。其实class什么的也是会搜索的。
得到ng-app 和其后module名字之后,angularJS调用bootstrap函数对ng-app的范围的内的html进行解析。
angularJS通过在html文件里加入特定的标签来进行相应事件绑定等各种动作,简化了前端程序的开发。
2、angularJS是怎样运行起来的?
angularJS脚本执行时进行了三步操作
1、绑定jquery,可以使用jquery方便的操作页面元素。
2、发布angular API函数,可以调用然后进行不同的操作。
3、渲染页面,识别页面的特定标签,调用相关API 进行事件注册等动作。
3、绑定jquery 这一步做了什么
如果已有JQuery则使用JQuery,同时扩展JQuery,使之拥有
scope、isolateScope、controller、injector、inheritedData 五个jqLite的属性
如果木有jquery,就使用jqLite充当jquery。
修改jquery的remove、empty、html 函数,也就是在用query修改html的时候,会进行相应的angularJS的事件绑定等操作的移除。
4、发布API 做了什么
使angular成为window的对象,这样我们就可以直接使用angular调用函数,
扩展angular的函数,使用angular.function的方式,可以调用以下常用的js方法。
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
},
$$minErr: minErr,
$$csp: csp
注册angularJS 提供的指令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,
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,
$interval: $IntervalProvider,
$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
5、最后一步渲染页面做了什么
首先是搜索页面中的 ["ng:app", "ng-app", "x-ng-app", "data-ng-app”] 这几个元素。我们一般使他们成为属性。其实class什么的也是会搜索的。
得到ng-app 和其后module名字之后,angularJS调用bootstrap函数对ng-app的范围的内的html进行解析。