找不到的API?AngularJS提供了一些函数的封装,但是当您尝试通过全局对象Angular访问这些函数时,您会发现它与过去遇到的库有很大的不同。
$http例如,在jQuery中,我们知道它的API是通过一个全局对象公开的:$。当您需要进行ajax调用时,只需使用$。ajax()。这个API符合思维的预期。
AngularJS还公开了一个全局对象:Angular,并封装了ajax调用,提供了一个$http对象。然而,当你试图按照旧的经验来访问angular。$http,你发现事实并非如此!
仔细看$http文档,却找不到线索。我在哪里可以得到这个$http?
依赖注入/DI事实上,AngularJS以依赖注入的方式组织所有功能组件:
在依赖注入模式下,所有组件必须通过容器相互访问,这就导致了在AngularJS中,必须使用中介来获取组件的实例对象:
var喷油器=angular . injector([' ng ']);injector . invoke(function($ http){//do某事。带$ http });这个中介是依赖注入模式下的容器,在AngularJS中称为注入器。
在 _ 的例子中,我们可以看到我们得到了$http对象,它实际上是一个函数。
注入器/注入器是AngularJS框架实现和应用开发的关键,是阿迪/IoC容器的实现。
AngularJS将函数分成不同类型的组件,并分别实现它们。这些组件统称为-provider /provider。下图列出了AngularJS的几种常用内置服务:
AngularJS的组件不能直接相互调用,一个组件只能通过注入器调用另一个组件。这样做的好处是组件之间是解耦的,对象整个生命周期的管理都留给了注入器。
注射器实现了两个重要功能:
用于集中存储所有提供程序的公式公式实际上是一个名称类构造函数。当AngularJS启动时,这些提供者首先用他们的公式在注入器中注册。例如,http请求服务组件封装在$httpProvider类中,该类在注入器中以名称“$ http”注册。
按需提供功能组件的实例。其他组件,如用户的控制器,如果需要使用http函数并使用名称“$http”向注入器请求,可以获得http服务实例。
尝试修改 _ 的代码,看看$compile服务是什么。
注册服务组件从注入器的角度来看,组件是一个功能提供者,因此它被称为提供者/提供者。在AngularJS中,提供者被封装为一个JavaScript类(构造函数)。
服务名称通常由字符串标识,例如,' $http '代表http调用服务,' $rootScope '代表根作用域对象,' $compile '代表编译服务.
Provider类需要一个$get函数(类工厂),注入器可以通过调用这个函数来获取服务组件的实例。
名字和类函数的组合信息称为公式。在注射器中维护一个集中的配方库,以根据需要创建不同的组分。这个配方库实际上是一个Hash对象,key是服务名,value是类定义。
在 _ 的例子中,我们定义了一个简单的服务类,这个服务类的例子是一个字符串:“你好,世界!”。我们使用“ezHello”作为它的服务名在注入器中注册,并通过注入器显示这个实例。
获取注射器对象要使用AngularJS的功能,必须先获取注射器。有两种方法可以得到注射器。
创建新的注射器您可以使用angular.injector()创建新的注射器:
angular.injector(模块,[StritDi]);获取创建的注入器如果AngularJS框架已经启动,可以使用DOM对象的injector()方法获取创建的注入器:
var元素=angular . element(DOM _ element);var喷油器=element . injector();
通过注入器调用API注入器有两种方法:invoke()和get()。
Invoke()使用注入器的invoke()方法,可以直接调用用户定义的函数体,通过函数参数注入依赖的服务对象。这是AngularJS的推荐和习惯用法:
angular.injector(['ng'])。invoke(function($http){//do某事。带$ http });Get()也可以使用注入器的get()方法来获取具有指定名称的服务实例:
var my $ http=angular . injector([' ng '])。get(' $ http ');//做某事。使用my$http_这次,我们使用get()方法直接获取一个服务实例,感受一下!
有两种方法可以通知注入者要注入的服务对象:参数名注入和依赖数组注入。
参数名注入AngularJS在执行invoke()函数时,将待注入的函数定义转换为字符串,并通过正则表达式检查其参数表,查找并注入依赖的服务对象:
//myfunc声明此函数依赖于' $ http ' service var my func=function($ http){//dost h。带$ http };injector . invoke(my func);//myfunc的定义将被转换为字符串,用于参数名称检查。有一个问题是我们压缩JavaScript代码时$http可能会被改成其他名称,这会导致注入失败。
依赖数组注入AngularJS采用依赖数组的方法来解决代码压缩混乱带来的问题。此时,传入一个数组来调用(),数组的最后一项是要执行的实际函数,其他项指示要注入函数的服务名。注入器将按照数组中的顺序向函数注入相关对象。
这样,要注入的函数的参数表的名称就无关紧要了:
//myfunc依赖于' $http '和' $compile '服务var myfunc=['$ http ',' $ compile ',函数(p1,p2) {//dosth。用p1 ($ http)、p2($ compile)}];injector . invoke(my func);通过依赖数组的方式将 _ 的实例注入到ezHello服务实例中。您可以更改参数名称,看看它是否会影响结果。
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。