

首页  思维导图  详情



AngularJS源码解析浅显

2017-08-01 12:06:23   6  举报





AI智能生成

angularJS源码分析，学习angular内部实现

模版推荐

作者其他创作

大纲/内容

预备知识

User.name等价于User['name']

bindJQuery()

内部定义了jqlite的各种方法

如果引用了jQuery的js文件，使用完整版jquery

函数绑定主要使用forEach循环完成

publishExternalAPI()

定义全局angular对象

拓展angular对象的属性

setupModuleLoader

使用ensure方法确保对象存在，如果对象存在直接返回，如果对象不存在则创建一个

angular=ensure(window,'angular',Object)等价于angular=window.angular

return ensure(angular,'module',function())等价于return window.angular.module()

return function module(name,requires,configFn)

return ensure(modules,name,funtion())

modules负责保存所有的模块

定义moduleInstance

_invokeQueue

各种服务

_configBlocks

.config()

_runBlocks

.run()

使用invokeLater函数将各种服务放到该模块调用队列中

总结上面：返回一个拥有三个队列以及各种服务的模块实例

angularModule=setupModuleLoader(window)等价于angularModule=window.angular.module()，也就是说angularModule是一个函数

尝试获取ngLocale服务，没有的话就自己加载一个

加载ng模块

angularInit()

先判断当前元素是否是ng-app

如果不是判断子元素是否是ng-app

只要有一个是，就调用bootstrap函数启动appElement对应的module

doBootstrap()

判断元素是否已经拥有注入器

压入$rootElement，也就是包含ng-app的元素

压入ng模块

createinjector()

providerCache

包含各种服务的原型

instanceCache

通过各种服务的$get方法获取的服务实例

调用createInternalInjector

return{}

invoke:invoke

通过annotate方法获取需要注入的服务

将各种服务压入参数表

获取函数

执行函数

instantiate:instantiate

创建实例

get:getService

如果缓存中有，就从缓存中直接返回

否则注册一个，放到缓存中并返回

annotate:createInjector.$$annotate

如果是函数，则通过正则表达式获取参数

如果是数组，则除了最后一项是函数，其他都是函数依赖

has:function()

判断是否包含某个服务

加载模块

总结

angularJS通过缓存保存创建出来的服务实例

通过正则表达式或者解析数组获取函数的依赖

 Collect

Get Started

Vue源码解析

 Collect

Get Started

feign 源码解析

 Collect

Get Started

基础源码构建

 Collect

Get Started

angularjs + gulpjs





0 条评论

下一页