2016-08-09 47 views
5

我是Angular的新手。我正在学习配置块并运行模块块。Angular中提供者和实例有什么区别?

请看看下面的代码:

angular.module('myModule', []). 
config(function(injectables) { // provider-injector 
// This is an example of config block. 
// You can have as many of these as you want. 
// You can only inject Providers (not instances) 
// into config blocks. 
}). 
run(function(injectables) { // instance-injector 
// This is an example of a run block. 
// You can have as many of these as you want. 
// You can only inject instances (not Providers) 
// into run blocks 
}); 

正如你可以在配置块被写入看到:“你只能注入提供商(不是实例)”。

这是什么意思?任何人都可以解释提供者和实例之间有什么区别?

回答

4

其实你的问题是好的。为了使它非常简单,我们在Angular JS中定义服务来实现我们的功能。 Provider是配置服务应该如何工作的方式之一。在Angular JS中还有一些更多的概念,即值,常量,工厂,服务和装饰器,它们可以帮助我们以不同的方式拦截服务。请检查下面的链接。

https://docs.angularjs.org/guide/providers

说回提供商,它们被用来定义需要甚至在应用程序启动到完成的应用程序范围的配置。由于配置块在Angular JS模块加载之前执行,我们在它们下面配置提供者。由于模块在那段时间之前不会被加载,因此您无法访问配置块中的服务。

一旦所有模块都被$注入器加载,就会执行运行块。一旦你进入一个运行模块,你不能再配置你的提供者,因为你的服务将被加载。这就是您无法在运行块内访问提供程序的原因。

我们来看一个例子。我设计了我的应用程序来支持用户和管理员屏幕。但是与它们相关的功能是在它们各自的服务中定义的。我想在用户登录时仅加载相应的服务。我们使用以下提供者来实现该目标。

定义rolesProvider

myApp.provider("roles", function rolesProvider(){ 
var role; 
this.setRole = function(value) { 
role = value; 
} 

this.$get = function rolesFactory() { 
if(role === "user") { 
return new userRole(); 
} else { 
return new adminRole(); 
} 
} 
}); 

配置rolesProvider为用户

myApp.config(["rolesProvider"], function(rulesProvider){ 
rulesProvider.setRole("user"); 
}); 

我的应用程序将被配置为一个用户,而不是作为一个管理应用程序时揭开序幕运行。

让我知道你是否需要更多的解释。

+0

谢谢......它帮助我理解。 – RajSharma

+0

不客气。 –

0

从这篇文章中偷取:AngularJS: Service vs provider vs factory - 绝对值得阅读,以便更好地理解angular中不同类型提供者的角色。

但是如果我们想在注入之前配置Greeter类呢?然后,我们可以写

例如:

provide.provider('greeter2', function() { 
    var salutation = 'Hello'; 
    this.setSalutation = function(s) { 
    salutation = s; 
} 

    function Greeter(a) { 
    this.greet = function() { 
     return salutation + ' ' + a; 
    } 
    } 

    this.$get = function(a) { //When injected into a controller or service, this is what will get called. 
    return new Greeter(a); 
    }; 
}); 

然后你可以配置上面,像这样:

angular.module('abc', []).config(function(greeter2Provider) { //Provider injected 
    greeter2Provider.setSalutation('Halo'); 
}); 

function Controller(greeter2) { //Accessing the actual service exposed by the provider.$get 
    expect(greeter2.greet()).toEqual('Halo 123'); 
} 
0

快速回答:提供者将创建一个实例。直到他们可以在config()块中使用它们。对于想要在启动期间将url端点更改为数据提供者的数据提供者非常有用。

但是在运行new Something()之前,您可以在“Provider provider”部分运行一些配置代码。

服务服务,服务工厂和服务值都是提供程序定义的快捷方式,但隐藏配置部分远离您并直接转到对象的实例化(使用new Something())。

相关问题