provider () 函数允许我们创建一个可配置的服务,我们可以为使用provider () 创建的服务设置每个应用程序的输入。例如,如果我们需要设置API密钥来访问应用程序级别的服务,我们可以在模块配置中设置,并使用 $ provider服务将输入传递给提供者。所有其他在内部创建服务的方法都使用 $ 提供服务。
创建一个服务使用 $ 提供服务在module.config
让我们首先使用provider() 函数创建一个非常简单的服务。
app.config( 函数 ($ profine) {$ provider.provider( 'globalsetting',函数 () { 这个 .$ get = 函数 () { var appname =; “律师应用程序” 返回 {appName: appname};}})});
让我们探索上面的代码片段中发生了什么。要使用provider创建服务,我们需要使用 $ provider服务。$ provider服务的provider函数有两个参数: 服务名称和函数。提供程序函数必须具有 $ get函数。要使用provider() 创建一个简单的服务,我们需要执行以下五个步骤:
- 注入 $ 提供服务在应用程序配置方法
- 创建一个提供程序使用provider() 函数
- 传递两个参数给provider() 函数: 服务名称和函数
- 提供程序函数必须包含 $ get函数
- 返回一个对象文字从 $ get函数
我们可以使用使用提供程序创建的globalseting服务,方法是将其注入控制器中,如下面的清单所示:
app.controller( “ProductController”,函数 ($ scope,globalsetting) {$ scope.name = globalsetting.appName;});
最终,我们可以通过使用ng-controller指令在视图上显示来自globalseting设置服务的数据,如下面的代码片段所示:
< div ng-controller = "ProductController" >{{name}} < 第 /div>
创建一个服务使用provider () 作为一个函数的模块对象
我们使用模块的配置内的提供者创建了一个服务。还有另一种使用提供程序创建服务的方法: AngularJS还公开了模块对象上的provider() 函数。为了简单起见,我们可以直接使用module.provider() 来创建服务,并在module的config中注册创建的服务。
要在module对象上使用provider() 函数创建服务,我们需要:
- 创建一个服务使用模块.provider()
- 注册服务在module.config()
- 在注册服务时,我们需要将服务名称附加到提供者。因此,如果服务名称是globalsetting,我们将在module.config中注册为globalsettingProvider
让我们使用module.provider() 函数重新创建globalsetting服务:
app.provider( 'globalsetting',function () { 这个 .$ get = 函数 () { var appname =; “律师应用程序” 返回 {appName: appname};}});
在步骤2中,我们需要将服务注入到应用程序配置中。你还记得注入 $ routeProvider?同样,我们需要在应用程序配置中注入globalsettingProvider,如下面的代码片段所示:
app.config( 函数 (globalsettingProvider) { });
globalsetting服务中没有setter,因此我们不会将任何值传递给使用提供程序创建的服务。我们可以使用globalservice的方式与使用配置中的 $ provider服务创建时相同:
app.controller( “ProductController”,函数 ($ scope,globalsetting) {$ scope.name = globalsetting.appName;});
正在创建提供程序的Setter ()
让我们看看globalseting服务。现在我们正在对应用程序的名称进行硬编码,但在现实场景中,我们可能希望从主模块app传递应用程序的名称。为此,我们需要为提供者创建一个setter。Setter只不过是提供程序中的 $ get之类的函数。我们可以为globalsetting服务提供者创建一个setter,如下面的清单所示:
app.provider( 'globalsetting',function () { var appname =; “律师应用程序” 这个 .setAppName = 函数 (value) {appname = value;} 这个 .$ get = 函数 () { 返回 {appName: appname};}});
让我们看看这里发生了什么:
- 我们创建了一个setter函数。
- 我们在setter函数中传递一个参数。
- 我们还设置了appname与参数传递
现在,在将globalserviceprovider注入到应用程序配置时,我们可以传递应用程序的名称。
app.config( 函数 (globalsettingProvider) {globalsettingProvider.setAppName( "Infragistics App" );});
最终,可以在控制器中使用globalservice,如下面的清单所示:
app.controller( “ProductController”,函数 ($ scope,globalsetting) {$ scope.name = globalsetting.appName;});
重构工厂 () 使用 $ 提供服务
正如我们前面所讨论的,service() 和factory() 函数只是 $ 提供上的语法糖,内部使用 $ 提供。让我们看看如何重构使用factory() 创建的服务以使用 $ 提供。在这里,我们使用factory() 创建了一个名为greet的服务,如下面的清单所示:
app.factory( 'greet',function () { 返回 {“你好到我的应用程序” 消息:}});
在内部,factory() 函数使用 $ 提供服务。因此,我们可以创建以下服务,而不是在模块对象上使用factory() 方法:
app.config( 函数 ($ profine) {$ 提供.factory( 'greet',function () { 返回 {“你好我的应用程序” 消息:}})})
如您所见,$ 提供服务公开了一个factory() 方法,该方法接受两个参数: 服务名称和函数。因此,我们可以得出结论,使用factory() 函数创建服务是 $ 提供.factory() 的简化语法。
在哪里使用提供程序
当我们为整个应用程序创建服务时,我们应该使用提供程序。例如,当我们创建服务来从API检索数据时,我们需要为每个应用程序设置一次API密钥。我们可以在应用程序的配置中设置,并将其传递给提供者的setter函数。
而这大约涵盖了它的AngularJS供应商!我希望你觉得这篇文章有用,并感谢您的阅读!