刚开始看angularjs时,总是云里雾里的,出现了很多新的理念。最后硬着头皮看源码,还真发现许多奇妙处,记录下来:
注入器Injector:
anguarjs的注入器主要是用来将provider作为参数注入到被注入的函数中。
其包合:
1.invoke(fn, self, locals):通过fn的参数列表(获取[]方式指定,或$inject)得到需要注入的provider作为fn的参数调用fn。
注:如果提供了locals,系统会先通过locals查找注入列表,只有找不到时,才找provider
args.push( locals && locals.hasOwnProperty(key) ? locals[key]: getService(key) );
2.annotate(fn),获得注入列表
有三种方式:
A.通过推测来注释:通过函数参数推断
B.显式注释:在函数中指定$inject
C.内联注释:通过数组方式,最后一个元素为函数
3.instantiate(Type, locals):通过Type创建一个实力化对象,Type函数默认支持DI
其实他的原理是通过Type创建对象,再通过invoke函数实现DI,此时第二个参数self为创创建的对象。
4.get(serviceName):调用getService,根据serviceName获取provider,此时很重要的是provider的cache,和获取的方式。
有两种注入器,一种是ProviderInjector,另外是InstanceInjector
他们的cache分别是providerCache和instanceCache
而且获取方式分别为:
function () { throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- ')); } 和 function (servicename) { var provider = providerInjector.get(servicename + providerSuffix); return instanceInjector.invoke(provider.$get, provider); }
从上可以看出,providerCache一定存在指定的provider,否则会报错。
InstanceInjector获取时,会先从providerCache中获得provider,再通过instanceInjector的invoke,对获得的provider的$get函数做DI,所以这就是为何provider必须体供$get的函数的原因。
那DI是什么时间发生的呢?
1.在module的config中
module中的config ==>providerCache中的$injector的invoke,
此时$injector为providerInjector,所以config函数注入的将是providerCache中的Provider.
2.在module的runBlocks中
此时调用的是instanceInjector的invoke,所以被注入的都是instanceCache的Provider
以下是module体供的方法:
provider ==>providerCache中的$provide的provider,
factory ==>providerCache中的$provide的factory,
service ==>providerCache中的$provide的service,
value ==>providerCache中的$provide的value,
constant ==>providerCache中的$provide的constant
相关推荐
AngularJS是一个流行的前端框架,它的核心特性之一就是依赖注入(Dependency Injection,简称DI)。依赖注入是设计模式的一种,它实现了控制反转(Inversion of Control,简称IoC),使得代码之间的耦合度降低,提高...
【描述】:“注入器注入器注入器注入器注入器注入器注入器注入器注入器注入器” 这个描述反复提到了“注入器”,暗示了其在软件开发中的核心地位和重要性。万能注入器可能具有广泛的功能,能够处理各种类型的依赖...
每个Angular应用都有一个根注入器,而组件树中每个组件有自己的注入器。 3. **装饰器(Decorators)**: `@Injectable()`装饰器标记一个类为可注入,而`@Inject`装饰器用于指定要注入的依赖。例如: ```...
AngularJS 是一款强大的前端JavaScript框架,由Google维护,主要用于构建单页应用(SPA,Single ..."Hello World"只是AngularJS之旅的第一步,随着学习的深入,你会发现它能帮助你构建出功能强大、响应迅速的Web应用。
- angular.injector():在angular中,可以通过这个方法获得注入器。 - $injector.get('serviceName'):通过这个方法可以获得依赖的服务名字。 - $injector.annotate('xxx'):这个方法可以获得xxx的所有依赖项。 - $...
4. 注入器(Injector):注入器是实际处理依赖注入的核心组件。它负责解析依赖并创建服务实例。 5. 模块(Module):模块用于组织和封装应用程序的代码,并通过注入器将依赖项的集合提供给应用程序。 在AngularJS中...
AngularJS的核心特性包括双向数据绑定、依赖注入、指令系统、过滤器和服务等。例如,双向数据绑定使得视图与模型之间的数据同步变得极其简单,而依赖注入则允许开发者轻松管理组件间的依赖关系,提高代码的可测试性...
在当今前端开发领域,AngularJS作为一个流行的JavaScript框架,它的依赖注入系统是核心特性之一。依赖注入(Dependency Injection,简称DI)是一种设计模式,它的目的是降低程序组件之间的耦合度。AngularJS中的依赖...
首先,《AngularJS_权威教程》可能涵盖了AngularJS的基础概念和核心特性,包括双向数据绑定、依赖注入、指令系统、服务、过滤器等。双向数据绑定是AngularJS的核心特性之一,它使得模型和视图之间的数据同步变得极其...
AngularJS,作为一款由Google维护的前端JavaScript框架,自2010年发布以来,一直在Web开发领域占据着重要的地位。它以其强大的双向数据绑定、依赖注入和模块化设计,极大地提高了开发效率,使得构建复杂的单页应用...
AngularJS 1.5.8 是一个非常重要的版本,它是Google开发的JavaScript框架AngularJS的稳定版本之一。这个框架主要用于构建动态web应用,通过MVC(Model-View-Controller)架构模式来简化前端开发,提供了丰富的特性以...
3. **依赖注入**:AngularJS 的依赖注入(Dependency Injection, DI)机制可以自动管理对象之间的依赖关系,使得代码更加模块化,易于测试和维护。 4. **服务**:AngularJS 提供了一系列内置服务,如$http服务用于...
AngularJS由Google维护,它引入了MVVM(Model-View-ViewModel)设计模式,使得数据绑定和依赖注入成为可能,从而简化了Web应用的开发。AngularJS的核心特性包括双Way数据绑定、指令系统、服务、过滤器和路由等。这些...
- **依赖注入(Dependency Injection)**:AngularJS的依赖注入机制使得开发者可以更容易地管理对象间的依赖关系,提高了代码的可测试性和可维护性。 #### 如何在ASP.NET MVC项目中引入AngularJS 要在ASP.NET MVC...
AngularJS的核心特性之一是双向数据绑定,它使得模型(model)和视图(view)之间的数据同步变得极其简单。通过`ng-model`指令,可以在HTML元素上直接绑定到应用程序的数据,任何一方的改变都会自动反映到另一方。 2. ...
通过在控制器或其他服务中声明依赖,AngularJS会自动注入所需的服务实例,降低了代码间的耦合度,提高了可测试性。 **4. 指令** AngularJS的指令扩展了HTML,使其能够表达更多的业务逻辑。例如,`ngRepeat`用于...
3. **依赖注入(Dependency Injection)**: AngularJS 自带的依赖注入系统可以方便地管理对象之间的依赖关系,使代码更加模块化和可测试。 4. **服务(Services)**: 服务是可复用的组件,如$http用于发送HTTP请求...
总结,AngularJS的控制器是实现动态数据绑定和业务逻辑的核心组件,通过 `$scope` 对象与视图进行数据交互,并能借助依赖注入来使用各种服务。在实际开发中,遵循最佳实践,合理设计控制器,可以使应用更加健壮和...
7. **控制器**:在 MVC 架构中,控制器处理用户输入并更新模型,但现代 AngularJS 开发推荐使用组件驱动的方式,减少对控制器的依赖。 ### Bootstrap 知识点 1. **响应式布局**:Bootstrap 提供了一套预定义的 CSS...
在"angularJs demo 各种基本用法"中,我们可以深入探讨以下几个关键概念:路由(router)、过滤器(filter)、服务(service)以及指令(diractive)。 **路由(Router)**: AngularJS的路由功能允许我们根据URL来...