AngularJS：服务vs供应商vs工厂

派对有点晚了。但我认为这对那些想学习（或清楚）如何使用工厂、服务和提供者方法开发Angular JS自定义服务的人更有用。

我看到了这段视频，它清楚地解释了开发AngularJS定制服务的工厂、服务和供应商方法：

https://www.youtube.com/watch?v=oUXku28ex-米

源代码：http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service

此处发布的代码直接从上述来源复制，以使读者受益。

基于“工厂”的定制服务的代码如下（它与同步和异步版本一起调用http服务）：

自定义服务的“服务”方法的代码（这与“工厂”非常相似，但从语法角度来看不同）：

自定义服务的“提供者”方法的代码（如果您想开发可配置的服务，这是必要的）：

最后是与上述任何服务一起工作的UI：

<html><head><title></title><script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js“></script><script type=“text/javascript”src=“t03.js”></script></head><body ng app=“app”><div ng controller=“emp”>＜div＞a的值为｛｛a｝｝，但你可以改变<input-type=text-ng-model=“a”/><br>b的值是{{b}}，但你可以改变<input-type=text-ng-model=“b”/><br></div>总和＝｛｛Sum｝｝<br><button ng click=“doSum（）”>计算</button></div></body></html>

2015-12-28 19:26:13

JS Fiddle演示

工厂/服务/供应商的“Hello world”示例：

2013-07-30 10:20:42

工厂：您实际在工厂内部创建对象并将其返回的工厂。service：您只有一个使用this关键字定义函数的标准函数的服务。provider：您定义了一个$get，它可以用来获取返回数据的对象。

2015-03-04 11:12:38

派对有点晚了。但我认为这对那些想学习（或清楚）如何使用工厂、服务和提供者方法开发Angular JS自定义服务的人更有用。

我看到了这段视频，它清楚地解释了开发AngularJS定制服务的工厂、服务和供应商方法：

https://www.youtube.com/watch?v=oUXku28ex-米

源代码：http://www.techcbt.com/Post/353/Angular-JS-basics/how-to-develop-angularjs-custom-service

此处发布的代码直接从上述来源复制，以使读者受益。

基于“工厂”的定制服务的代码如下（它与同步和异步版本一起调用http服务）：

自定义服务的“服务”方法的代码（这与“工厂”非常相似，但从语法角度来看不同）：

自定义服务的“提供者”方法的代码（如果您想开发可配置的服务，这是必要的）：

最后是与上述任何服务一起工作的UI：

<html><head><title></title><script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js“></script><script type=“text/javascript”src=“t03.js”></script></head><body ng app=“app”><div ng controller=“emp”>＜div＞a的值为｛｛a｝｝，但你可以改变<input-type=text-ng-model=“a”/><br>b的值是{{b}}，但你可以改变<input-type=text-ng-model=“b”/><br></div>总和＝｛｛Sum｝｝<br><button ng click=“doSum（）”>计算</button></div></body></html>

2015-12-28 19:26:13

我的理解很简单。

工厂：您只需在工厂内部创建一个对象并返回它。

服务：

您只需要一个使用此关键字定义函数的标准函数。

供应商：

您定义了一个$get对象，它可以用于获取返回数据的对象。

2014-06-05 07:18:39

服务与供应商与工厂：

我试图保持简单。这都是关于JavaScript的基本概念。

首先，我们来谈谈AngularJS中的服务！

什么是服务：在AngularJS中，Service只是一个单独的JavaScript对象，可以存储一些有用的方法或财产。此单例对象是根据ngApp（Angular应用程序）创建的，它在当前应用程序中的所有控制器之间共享。当Angularjs实例化服务对象时，它使用唯一的服务名称注册该服务对象。因此，每当我们需要服务实例时，Angular都会在注册表中搜索该服务名称，并返回对服务对象的引用。这样我们就可以调用方法、访问服务对象上的财产等。您可能会有疑问，是否也可以在控制器的范围对象上放置财产和方法！所以为什么需要服务对象？答案是：服务在多个控制器范围内共享。如果您将一些财产/方法放在控制器的范围对象中，它将仅对当前范围可用。但当您在服务对象上定义方法和财产时，它将全局可用，并且可以通过注入该服务在任何控制器的范围内访问。

所以，若有三个控制器作用域，让它是controllerA、controllerB和controllerC，它们都将共享同一个服务实例。

<div ng-controller='controllerA'>
    <!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
    <!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
    <!-- controllerC scope -->
</div>

如何创建服务？

AngularJS提供了注册服务的不同方法。在这里，我们将集中讨论工厂（..）、服务（..）和提供者（..）三种方法；

使用此链接进行代码参考

工厂功能：

我们可以如下定义工厂函数。

factory('serviceName',function fnFactory(){ return serviceInstance;})

AngularJS提供了“factory（'serviceName'，fnFactory）”方法，该方法包含两个参数，serviceName和一个JavaScript函数。Angular通过调用函数fnFactory（）创建服务实例，如下所示。

var serviceInstace = fnFactory();

传递的函数可以定义一个对象并返回该对象。AngularJS只是将此对象引用存储到作为第一个参数传递的变量中。从fnFactory返回的任何内容都将绑定到serviceInstance。除了返回对象之外，我们还可以返回函数、值等，无论我们将返回什么，都将可用于服务实例。

例子：

var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
  var data={
    'firstName':'Tom',
    'lastName':' Cruise',
    greet: function(){
      console.log('hello!' + this.firstName + this.lastName);
    }
  };

  //Now all the properties and methods of data object will be available in our service object
  return data;
});

服务功能：

service('serviceName',function fnServiceConstructor(){})

这是另一种方式，我们可以注册服务。唯一的区别是AngularJS尝试实例化服务对象的方式。这次angular使用“new”关键字并调用如下所示的构造函数。

var serviceInstance = new fnServiceConstructor();

在构造函数中，我们可以使用“this”关键字向服务对象添加财产/方法。例子：

//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
  this.firstName ='James';
  this.lastName =' Bond';
  this.greet = function(){
    console.log('My Name is '+ this.firstName + this.lastName);
  };
});

提供程序功能：

Provider（）函数是创建服务的另一种方法。让我们有兴趣创建一个只向用户显示一些问候信息的服务。但我们也希望提供一个功能，用户可以设置自己的问候语。从技术上讲，我们希望创建可配置的服务。我们如何做到这一点？必须有一种方法，让应用程序可以传递他们的自定义问候消息，Angularjs将其提供给创建我们服务实例的工厂/构造函数。在这种情况下，provider（）函数完成任务。使用provider（）函数，我们可以创建可配置的服务。

我们可以使用下面给出的提供程序语法创建可配置的服务。

/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});

/*step2:configure the service */
app.config(function configureService(serviceProvider){});

提供程序语法如何在内部工作？

1.提供程序对象是使用我们在提供程序函数中定义的构造函数创建的。

var serviceProvider = new serviceProviderConstructor();

2.我们在app.config（）中传递的函数被执行。这被称为配置阶段，在这里我们有机会定制我们的服务。

configureService(serviceProvider);

3.最后通过调用serviceProvider的$get方法创建服务实例。

serviceInstance = serviceProvider.$get()

使用provide语法创建服务的示例代码：

var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
  //this function works as constructor function for provider
  this.firstName = 'Arnold ';
  this.lastName = ' Schwarzenegger' ;
  this.greetMessage = ' Welcome, This is default Greeting Message' ;
  //adding some method which we can call in app.config() function
  this.setGreetMsg = function(msg){
    if(msg){
      this.greetMessage =  msg ;
    }
  };

  //We can also add a method which can change firstName and lastName
  this.$get = function(){
    var firstName = this.firstName;
    var lastName = this.lastName ;
    var greetMessage = this.greetMessage;
    var data={
       greet: function(){
         console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
       }
    };
    return data ;
  };
});

app.config(
  function(providerPatternProvider){
    providerPatternProvider.setGreetMsg(' How do you do ?');
  }
);

工作演示

摘要：

工厂使用返回服务实例的工厂函数。serviceInstance=fnFactory（）；

服务使用构造函数，Angular使用“new”关键字调用此构造函数以创建服务实例。serviceInstance=新的fnServiceConstructor（）；

Provider定义了providerConstructor函数，此providerConstructer函数定义了工厂函数$get。Angular调用$get（）来创建服务对象。提供程序语法还有一个额外的优点，即在服务对象实例化之前对其进行配置。serviceInstance=$get（）；

2014-07-22 11:39:14

AngularJS：服务vs供应商vs工厂

推荐文章

最新文章

标签