AngularJSProviders详解葡萄城技术团队

Eachwebapplicationyoubuildiscomposedofobjectsthatcollaboratetogetstuffdone.Theseobjectsneedtobeinstantiatedandwiredtogetherfortheapptowork.InAngularappsmostoftheseobjectsareinstantiatedandwiredtogetherautomaticallybytheinjectorservice.

你创建的任何Web应用都是一些互相依赖的对象组合。这些对象需要被实例化并被绑定在一起工作。在Angular应用中，这些对象通过注入器服务自动完成实例化和绑定。

Theinjectorcreatestwotypesofobjects,servicesandspecializedobjects.

注入器创建了两种类型的对象，services（服务）和specializedobjects（特殊对象）。

ServicesareobjectswhoseAPIisdefinedbythedeveloperwritingtheservice.

服务等同于对象，它的API由编写服务的开发者定义。

SpecializedobjectsconformtoaspecificAngularframeworkAPI.Theseobjectsareoneofcontrollers,directives,filtersoranimations.

特殊对象服从一套专门的Angular框架API。这些对象是控制器、指令、过滤器或动画效果中的一个。

Theinjectorneedstoknowhowtocreatetheseobjects.Youtellitbyregisteringa"recipe"forcreatingyourobjectwiththeinjector.Therearefiverecipetypes.

注入器需要知晓如何去创建这些对象。你通过注册一个“recipe（配方）”来告诉注入器去创建你的对象。共有五种类型的配方。

Themostverbose,butalsothemostcomprehensiveoneisaProviderrecipe.Theremainingfourrecipetypes—Value,Factory,ServiceandConstant—arejustsyntacticsugarontopofaProviderrecipe.

最繁琐，也是功能最全面的是Providerrecipe。剩下的四种类型——Value，Factory，Service和Constant——仅仅是Providerrecipe的语法糖。

Let'stakealookatthedifferentscenariosforcreatingandusingservicesviavariousrecipetypes.We'llstartwiththesimplestcasepossiblewherevariousplacesinyourcodeneedasharedstringandwe'llaccomplishthisviaValuerecipe.

接下来，我们看看如何在不同场景下通过不同的recipetypes创建和使用services。我们将从最简单的例子开始，通过Valuerecipe在代码中共享一个字符串。

Note:AWordonModules

注意：模块概要

Inorderfortheinjectortoknowhowtocreateandwiretogetheralloftheseobjects,itneedsaregistryof"recipes".Eachrecipehasanidentifieroftheobjectandthedescriptionofhowtocreatethisobject.

为了让注入器知晓如何创建和绑定所有的对象，它需要一个"recipes"的注册表。每个recipe都有唯一的对象标识符和以及何创建这个对象的描述。

EachrecipebelongstoanAngularmodule.AnAngularmoduleisabagthatholdsoneormorerecipes.Andsincemanuallykeepingtrackofmoduledependenciesisnofun,amodulecancontaininformationaboutdependenciesonothermodulesaswell.

WhenanAngularapplicationstartswithagivenapplicationmodule,Angularcreatesanewinstanceofinjector,whichinturncreatesaregistryofrecipesasaunionofallrecipesdefinedinthecore"ng"module,applicationmoduleanditsdependencies.Theinjectorthenconsultsthereciperegistrywhenitneedstocreateanobjectforyourapplication.

一个Angular应用开始于一个给定的应用模块时，Angular会创建一个新的注入器实例，进而按照所有核心"ng"模块、应用模块和在它的依赖中统一定义的recipes来创建一个recipes的注册表。然后，注入器通过查询recipes注册表来创建应用所需的对象。

Let'ssaythatwewanttohaveaverysimpleservicecalled"clientId"thatprovidesastringrepresentinganauthenticationidusedforsomeremoteAPI.Youwoulddefineitlikethis:

假定我们想要获得一个非常简单的service叫做"clientId"，它提供一个字符串用于表示某些远程API的认证id。你可以这样去定义它：

varmyApp=angular.module('myApp',[]);myApp.value('clientId','a12345654321x');NoticehowwecreatedanAngularmodulecalledmyApp,andspecifiedthatthismoduledefinitioncontainsa"recipe"forconstructingtheclientIdservice,whichisasimplestringinthiscase.

注意，我们创建一个名为myApp的Angular模块，然后指定了一个包含构建clientIdservice的配方，这只是一个字符串的简单例子。

AndthisishowyouwoulddisplayitviaAngular'sdata-binding:

以下是如何通过Angular数据绑定来显示它：

myApp.controller('DemoController',['clientId',functionDemoController(clientId){this.clientId=clientId;}]);ClientID:{{demo.clientId}}Inthisexample,we'veusedtheValuerecipetodefinethevaluetoprovidewhenDemoControllerasksfortheservicewithid"clientId".

在这个例子中，我们使用了Valuerecipe去定义这个value，提供给DemoController请求这个服务的id"clientId"。

Ontomorecomplexexamples!

更复杂的例子！

TheValuerecipeisverysimpletowrite,butlackssomeimportantfeaturesweoftenneedwhencreatingservices.Let'snowlookattheValuerecipe'smorepowerfulsibling,theFactory.TheFactoryrecipeaddsthefollowingabilities:

这个Valuerecipe写起来非常简单，但缺乏创建service时经常用到的一些重要特征。现在让我们看看Valuerecipe更强大的兄弟——Factory。Factoryrecipe增加了以下能力：

abilitytouseotherservices(havedependencies)

能够使用其它的services（依赖）

serviceinitialization

service初始化

delayed/lazyinitialization

延迟/懒惰初始化

TheFactoryrecipeconstructsanewserviceusingafunctionwithzeroormorearguments(thesearedependenciesonotherservices).Thereturnvalueofthisfunctionistheserviceinstancecreatedbythisrecipe.

Factoryrecipe通过一个包含有零个或多个参数（它所依赖的其它services）的方法构造一个新的service。这个方法的返回值是由recipe创建的这个服务的实例。

Note:AllservicesinAngulararesingletons.Thatmeansthattheinjectoruseseachrecipeatmostoncetocreatetheobject.Theinjectorthencachesthereferenceforallfutureneeds.

注意：Angular中所有的服务都是单例模式。这意味着注入器创建这个对象时，仅使用一次recipe。然后注入器缓存所有将来需要的引用。

SinceFactoryismorepowerfulversionoftheValuerecipe,youcanconstructthesameservicewithit.UsingourpreviousclientIdValuerecipeexample,wecanrewriteitasaFactoryrecipelikethis:

因为Factory是Valuerecipe更强大的版本，你可以构造和它一样的服务。使用我们之前的clientIdValuerecipe的例子，可以采用Factoryrecipe这样重写：

myApp.factory('clientId',functionclientIdFactory(){return'a12345654321x';});Butgiventhatthetokenisjustastringliteral,stickingwiththeValuerecipeisstillmoreappropriateasitmakesthecodeeasiertofollow.

但考虑到令牌仅仅是一个字符串常量，使用Valuerecipe更恰当，也更易于代码的阅读。

Let'ssay,however,thatwewouldalsoliketocreateaservicethatcomputesatokenusedforauthenticationagainstaremoteAPI.ThistokenwillbecalledapiTokenandwillbecomputedbasedontheclientIdvalueandasecretstoredinthebrowser'slocalstorage:

比如说，我们想创建一个用于计算远程API认证令牌的服务。这个令牌将被称做apiToken，并计算基于clientId的值，然后加密存储于浏览器LocalStorage中：

myApp.factory('apiToken',['clientId',functionapiTokenFactory(clientId){varencrypt=function(data1,data2){//NSA-proofencryptionalgorithm:return(data1+':'+data2).toUpperCase();};varsecret=window.localStorage.getItem('myApp.secret');varapiToken=encrypt(clientId,secret);returnapiToken;}]);Inthecodeabove,weseehowtheapiTokenserviceisdefinedviatheFactoryrecipethatdependsonclientIdservice.ThefactoryservicethenusesNSA-proofencryptiontoproduceanauthenticationtoken.

在上面的代码中，我们看到了如何通过工厂方法定义这个依赖于clientId服务的apiToken服务。这个工厂服务使用NSA-proof加密去产生一个认证令牌。

Note:ItisbestpracticetonamethefactoryfunctionsasFactory(e.g.apiTokenFactory).Whilethisnamingconventionisnotrequired,ithelpswhennavigatingthecodebaseorlookingatstacktracesinthedebugger.

注意：工厂方法命名的最佳实践类似于Factory(e.g.apiTokenFactory)。虽然这种命名习惯不是必须的，但它有助于代码库导航或查看调试器的堆栈跟踪。

JustlikewithValuerecipe,Factoryrecipecancreateaserviceofanytype,whetheritbeaprimitive,objectliteral,function,orevenaninstanceofacustomtype.

与Valuerecipe一样，Factoryrecipe能够创建任何类型的服务，对象常量，方法，甚至一个自定义类型的实例。

JavaScriptdevelopersoftenusecustomtypestowriteobject-orientedcode.Let'sexplorehowwecouldlaunchaunicornintospaceviaourunicornLauncherservicewhichisaninstanceofacustomtype:

JavaScript开发者常常使用自定义的类型去编写面向对象的代码。让我们探究如何通过unicornLauncher服务发射一个unicorn（独角兽）进入太空，这是一个自定义类型的实例：

functionUnicornLauncher(apiToken){this.launchedCount=0;this.launch=function(){//makearequesttotheremoteapiandincludetheapiToken...this.launchedCount++;}}Wearenowreadytolaunchunicorns,butnoticethatUnicornLauncherdependsonourapiToken.WecansatisfythisdependencyonapiTokenusingtheFactoryrecipe:

我们现在来准备发射unicorn，但请注意UnicornLauncher依赖了我们的apiToken。我们可以使用Factoryrecipe来满足这个apiToken的依赖：

myApp.factory('unicornLauncher',["apiToken",function(apiToken){returnnewUnicornLauncher(apiToken);}]);Thisis,however,exactlytheuse-casethatServicerecipeisthemostsuitablefor.

就是这样。不过，使用Servicerecipe才是最为恰当的例子。

TheServicerecipeproducesaservicejustliketheValueorFactoryrecipes,butitdoessobyinvokingaconstructorwiththenewoperator.Theconstructorcantakezeroormorearguments,whichrepresentdependenciesneededbytheinstanceofthistype.

这个Servicerecipe产生一个类似于Value和Factoryrecipes，但它通过调用构造函数去执行new操作。这个构造函数可以接受零或多个参数，表示这个类型实例所需的依赖项。

Note:Servicerecipesfollowadesignpatterncalledconstructorinjection.

注意：Servicerecipes的设计模式被称之为构造函数注入。

SincewealreadyhaveaconstructorforourUnicornLaunchertype,wecanreplacetheFactoryrecipeabovewithaServicerecipelikethis:

因为我们已经有了一个UnicornLauncher类型的构造函数，就能够像这样去用Servicerecipe替换Factoryrecipe：

myApp.service('unicornLauncher',["apiToken",UnicornLauncher]);Muchsimpler!

多么简单！

Note:Yes,wehavecalledoneofourservicerecipes'Service'.Weregretthisandknowthatwe'llbesomehowpunishedforourmis-deed.It'slikewenamedoneofouroffspring'Child'.Boy,thatwouldmesswiththeteachers.

注意：是的，我们有一个被称为“Service”的servicerecipes。很遗憾我们将因为mis-deed而遭到报应。这就像是给我们某一个后代起名叫“小盆友”。这么搞会让老师们困惑。

Therearetwomorerecipetypeslefttocover.Theyarebothfairlyspecializedandareusedinfrequently.Asalreadymentionedintheintro,theProviderrecipeisthecorerecipetypeandalltheotherrecipetypesarejustsyntacticsugarontopofit.Itisthemostverboserecipewiththemostabilities,butformostservicesit'soverkill.

还有两个recipe类型。它们都相当特殊，很少使用。如前述，Providerrecipe是核心recipe类型，所有其他的配方类型只是基于它的语法糖。它是最详细功能最多的recipe，但对于大多数服务来说，它是多余的。

Providerrecipeissyntacticallydefinedasacustomtypethatimplementsa$getmethod.ThismethodisafactoryfunctionjustliketheoneweuseinFactoryrecipe.Infact,ifyoudefineaFactoryrecipe,anemptyProvidertypewiththe$getmethodsettoyourfactoryfunctionisautomaticallycreatedunderthehood.

Providerrecipe是语法定义为一个自定义类型，实现$get的方法。这个方法是一个工厂方法，就像我们在Factoryrecipe中使用的一样。事实上，如果你定义一个Factoryrecipe，钩子会自动创建一个包含空Provider类型$get方法的工厂方法。

YoushouldusetheProviderrecipeonlywhenyouwanttoexposeanAPIforapplication-wideconfigurationthatmustbemadebeforetheapplicationstarts.Thisisusuallyinterestingonlyforreusableserviceswhosebehaviormightneedtovaryslightlybetweenapplications.

Let'ssaythatourunicornLauncherserviceissoawesomethatmanyappsuseit.Bydefaultthelaunchershootsunicornsintospacewithoutanyprotectiveshielding.Butonsomeplanetstheatmosphereissothickthatwemustwrapeveryunicornintinfoilbeforesendingitonitsintergalactictrip,otherwisetheywouldburnwhilepassingthroughtheatmosphere.Itwouldthenbegreatifwecouldconfigurethelaunchertousethetinfoilshieldingforeachlaunchinappsthatneedit.Wecanmakeitconfigurablelikeso:

我们假设unicornLauncher是个很不错的服务，许多应用程序都在使用它。默认情况下，launcher发射unicorns进入太空时没有任何防护屏蔽。但某些行星的大气层实在是太厚了，以至于我们在星际旅行发射之前，必须用锡纸包住每一个unicorns，否则它们将会在穿越大气层时烧毁。如果我们可以按照应用程序的需要去为launcher的每次发射配置使用锡箔屏蔽罩，那就再好不过了。我们可做如下配置：

myApp.provider('unicornLauncher',functionUnicornLauncherProvider(){varuseTinfoilShielding=false;this.useTinfoilShielding=function(value){useTinfoilShielding=!!value;};this.$get=["apiToken",functionunicornLauncherFactory(apiToken){//let'sassumethattheUnicornLauncherconstructorwasalsochangedto//acceptandusetheuseTinfoilShieldingargumentreturnnewUnicornLauncher(apiToken,useTinfoilShielding);}];});Toturnthetinfoilshieldingoninourapp,weneedtocreateaconfigfunctionviathemoduleAPIandhavetheUnicornLauncherProviderinjectedintoit:

为了在我们的应用程序中启用锡纸屏蔽罩，我们需要通过模块的API创建一个含有注入UnicornLauncherProvider的配置方法：

myApp.config(["unicornLauncherProvider",function(unicornLauncherProvider){unicornLauncherProvider.useTinfoilShielding(true);}]);

Noticethattheunicornproviderisinjectedintotheconfigfunction.Thisinjectionisdonebyaproviderinjectorwhichisdifferentfromtheregularinstanceinjector,inthatitinstantiatesandwires(injects)allproviderinstancesonly.

请注意unicornprovider被注入的配置方法，这种注入是通过provider的注入器完成的，不同于普通的实例注入器只是由provider实例进行实例化和绑定（注入）。

Duringapplicationbootstrap,beforeAngulargoesoffcreatingallservices,itconfiguresandinstantiatesallproviders.Wecallthistheconfigurationphaseoftheapplicationlife-cycle.Duringthisphaseservicesaren'taccessiblebecausetheyhaven'tbeencreatedyet.

在应用程序启动期间，Angular创建的所有服务前，配置和实例化所有的providers。我们称之为应用程序生命周期中的配置阶段。在此阶段服务还不可用，因为它们还没有被创建。

Oncetheconfigurationphaseisover,interactionwithprovidersisdisallowedandtheprocessofcreatingservicesstarts.Wecallthispartoftheapplicationlife-cycletherunphase.

配置阶段结束，providers交互被禁止，开始创建services。我们称这一阶段为应用程序生命周期的运行阶段。

We'vejustlearnedhowAngularsplitsthelife-cycleintoconfigurationphaseandrunphaseandhowyoucanprovideconfigurationtoyourapplicationviatheconfigfunction.Sincetheconfigfunctionrunsintheconfigurationphasewhennoservicesareavailable,itdoesn'thaveaccesseventosimplevalueobjectscreatedviaValuerecipe.我们已经学会了如何区分应用程序生命周期中的配置阶段和运行阶段，如何通过配置方法向您的应用程序提供配置。由于配置方法运行在配置阶段，此时尚无服务可用，因此它不能访问任何对象，哪怕是通过Valuerecipe创建的value对象。

Sincesimplevalues,likeurlprefix,don'thavedependenciesorconfiguration,itisoftenhandytomakethemavailableinboththeconfigurationandrunphases.ThisiswhattheConstantrecipeisfor.

而简单的值，比如url的前缀，没有依赖或配置，需要在配置和运行阶段皆可使用。这就是Constantrecipe。

Let'ssaythatourunicornLauncherservicecanstampaunicornwiththeplanetnameit'sbeinglaunchedfromifthisnamewasprovidedduringtheconfigurationphase.Theplanetnameisapplicationspecificandisusedalsobyvariouscontrollersduringtheruntimeoftheapplication.Wecanthendefinetheplanetnameasaconstantlikethis:

假设unicornLauncher服务可以标出unicorn发射自哪颗行星，而且这个行星的名字需要在配置阶段提供。同时，星球的名字会由应用程序指定，并且被多个控制器在运行阶段使用。

Wecanthendefinetheplanetnameasaconstantlikethis:

我们可以按照如下方式定义这个星球的名字为一个常量:

myApp.constant('planetName','GreasyGiant');

WecouldthenconfiguretheunicornLauncherProviderlikethis:

我们这样可以配置unicornLauncherProvider：

myApp.config(['unicornLauncherProvider','planetName',function(unicornLauncherProvider,planetName){unicornLauncherProvider.useTinfoilShielding(true);unicornLauncherProvider.stampText(planetName);}]);AndsinceConstantrecipemakesthevaluealsoavailableatruntimejustliketheValuerecipe,wecanalsouseitinourcontrollerandtemplate:

由于在运行阶段，Constantrecipe创建的值和valuerecipe一样，所以我们也可以在控制器和模板中使用它：

myApp.controller('DemoController',["clientId","planetName",functionDemoController(clientId,planetName){this.clientId=clientId;this.planetName=planetName;}]);ClientID:{{demo.clientId}}
PlanetName:{{demo.planetName}}

Earlierwementionedthatwealsohavespecialpurposeobjectsthataredifferentfromservices.TheseobjectsextendtheframeworkaspluginsandthereforemustimplementinterfacesspecifiedbyAngular.TheseinterfacesareController,Directive,FilterandAnimation.

如上所述，我还有不同于services，用于特殊目的对象。这些扩展作为框架的插件，因此必须实现Angular指定的接口。这些接口是：控制器、指令、过滤器和动画效果。

Theinstructionsfortheinjectortocreatethesespecialobjects(withtheexceptionoftheControllerobjects)usetheFactoryrecipebehindthescenes.

举例说明注入器创建特殊对象（控制器对象除外）使用Factoryrecipe。

Let'stakealookathowwewouldcreateaverysimplecomponentviathedirectiveapithatdependsontheplanetNameconstantwe'vejustdefinedanddisplaystheplanetname,inourcase:"PlanetName:GreasyGiant".

让我们看一下如何通过指令api创建一个非常简单的组件，取决于我们刚才planetName定义的常量和行星的名字，在我们的例子中：“行星名称：GreasyGiant”（油腻巨人）。

SincethedirectivesareregisteredviaFactoryrecipe,wecanusethesamesyntaxaswithfactories.

自从通过工厂方法注册指令之后，我们就可以使用与factory相同的语法。

myApp.directive('myPlanet',['planetName',functionmyPlanetDirectiveFactory(planetName){//directivedefinitionobjectreturn{restrict:'E',scope:{},link:function($scope,$element){$element.text('Planet:'+planetName);}}}]);Wecanthenusethecomponentlikethis:

然后，这样使用组件：

UsingFactoryrecipesyoucanalsodefineAngular'sfiltersandanimations,butthecontrollersareabitspecial.Youcreateacontrollerasacustomtypethatdeclaresitsdependenciesasargumentsforitsconstructorfunction.Thisconstructoristhenregisteredwithamodule.Let'stakealookattheDemoController,createdinoneoftheearlyexamples:

myApp.controller('DemoController',['clientId',functionDemoController(clientId){this.clientId=clientId;}]);TheDemoControllerisinstantiatedviaitsconstructoreverytimetheappneedsaninstanceofDemoController(inoursimpleappit'sjustonce).Sounlikeservices,controllersarenotsingletons.Theconstructoriscalledwithalltherequestedservices,inourcasetheclientIdservice.

DemoController是根据应用程序的需要，通过其构造函数实例化的（在我们的简单应用中只有一次）。与服务不同，控制器并不是单例的。构造函数被所有请求的服务调用，在我们的案例中是clientIdservice。

Towrapitup,let'ssummarizethemostimportantpoints:

概括上述内容，让我来总结一下最重要的几点：

Theinjectorusesrecipestocreatetwotypesofobjects:servicesandspecialpurposeobjects.

注入器通过使用recipes来创建两种类型的对象：服务和特殊目的对象。

Therearefiverecipetypesthatdefinehowtocreateobjects:Value,Factory,Service,ProviderandConstant.

一共有五种类型的recipe用于定义如何创建对象：变量、工厂、服务、供应者和常量。

FactoryandServicearethemostcommonlyusedrecipes.TheonlydifferencebetweenthemisthatServicerecipeworksbetterforobjectsofcustomtype,whileFactorycanproduceJavaScriptprimitivesandfunctions.

工厂和服务是最常用的方式。两者仅有的不同是服务方式对于自定义类型对象效果更好，而工厂方式可以提供JavaScript基元和方法。

TheProviderrecipeisthecorerecipetypeandalltheotheronesarejustsyntacticsugaronit.

供应者方式是核心方式，所有其它方式都是它的语法糖。

Provideristhemostcomplexrecipetype.Youdon'tneeditunlessyouarebuildingareusablepieceofcodethatneedsglobalconfiguration.

供应者是最复杂的方式类型。除非你正在构建一段需要全局配置的可重用代码，否则不要使用它。

AllspecialpurposeobjectsexceptforControlleraredefinedviaFactoryrecipes.

所有特殊目的对象都通过工厂方式来定义，除了控制器。

Features/Recipetype

Factory

Service

Value

Constant

Provider

canhavedependencies支持依赖注入

yes

no

usestypefriendlyinjection使用友好的注入方式

yes*

objectavailableinconfigphase配置阶段可用

yes**

cancreatefunctions/primitives可以创建方法/基元

*atthecostofeagerinitializationbyusingnewoperatordirectly

以使用new操作符初始化为代价。

**theserviceobjectisnotavailableduringtheconfigphase,buttheproviderinstanceis(seetheunicornLauncherProviderexampleabove).

**服务对象在配置阶段不可用，除了供应者实例（参见上面的unicornLauncherProvider示例）