跳至正文
首页 » 博客 » What is a Provider () in AngularJS?

What is a Provider () in AngularJS?

provider () 函数允许我们创建一个可配置的服务,我们可以为使用provider () 创建的服务设置每个应用程序的输入。例如,如果我们需要设置API密钥来访问应用程序级别的服务,我们可以在模块配置中设置,并使用 $ provider服务将输入传递给提供者。所有其他在内部创建服务的方法都使用 $ 提供服务。

创建一个服务使用 $ 提供服务在module.config

让我们首先使用provider() 函数创建一个非常简单的服务。

app.config( 函数 ($ profine) {$ provider.provider( 'globalsetting'函数 () {        这个 .$ get = 函数 () {            var appname =; “律师应用程序”            返回 {appName: appname};}})});

让我们探索上面的代码片段中发生了什么。要使用provider创建服务,我们需要使用 $ provider服务。$ provider服务的provider函数有两个参数: 服务名称和函数。提供程序函数必须具有 $ get函数。要使用provider() 创建一个简单的服务,我们需要执行以下五个步骤:

  1. 注入 $ 提供服务在应用程序配置方法
  2. 创建一个提供程序使用provider() 函数
  3. 传递两个参数给provider() 函数: 服务名称和函数
  4. 提供程序函数必须包含 $ get函数
  5. 返回一个对象文字从 $ 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() 函数创建服务,我们需要:

  1. 创建一个服务使用模块.provider()
  2. 注册服务在module.config()
  3. 在注册服务时,我们需要将服务名称附加到提供者。因此,如果服务名称是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};}});

让我们看看这里发生了什么:

  1. 我们创建了一个setter函数。
  2. 我们在setter函数中传递一个参数。
  3. 我们还设置了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供应商!我希望你觉得这篇文章有用,并感谢您的阅读!

</p