AngularJS：服务vs供应商vs工厂

AngularJS中的服务、提供商和工厂之间有什么区别？

当前回答

正如这里的几个人正确指出的，工厂、供应商、服务，甚至价值和常量都是同一事物的版本。您可以将更通用的提供程序分解为所有这些提供程序。像这样：

这是本文的图片来源：

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

2015-11-19 13:36:14

其他回答

对我来说，当我意识到它们都以相同的方式工作时，我就发现了这一点：通过运行一次某个东西，存储它们获得的值，然后在通过依赖注入引用时提取相同的存储值。

假设我们有：

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

三者之间的区别在于：

a的存储值来自运行fn。b的存储值来自newing fn。c的存储值来自首先通过newing fn获取一个实例，然后运行该实例的$get方法。

这意味着在AngularJS中有一个类似于缓存对象的东西，每次注入的值仅在第一次注入时分配一次，其中：

cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()

这就是为什么我们在服务中使用这个，并定义一个This$获取提供者。

2014-11-14 06:25:16

工厂

如果给AngularJS一个函数，AngularJS将在请求工厂时缓存并注入返回值。

例子：

app.factory('factory', function() {
    var name = '';
    // Return value **is** the object that will be injected
    return {
        name: name;
    }
})

用法：

app.controller('ctrl', function($scope, factory) {
     $scope.name = factory.name;
});

服务

如果给AngularJS一个函数，AngularJS将调用new来实例化它。AngularJS创建的实例将在请求服务时缓存并注入。由于new用于实例化服务，因此关键字this是有效的，并引用实例。

例子：

app.service('service', function() {
     var name = '';
     this.setName = function(newName) {
         name = newName;
     }
     this.getName = function() {
         return name;
     }
});

用法：

app.controller('ctrl', function($scope, service) {
   $scope.name = service.getName();
});

供应商

给AngularJS一个函数，AngularJS将调用它的$get函数。它是$get函数的返回值，将在请求服务时缓存并注入。

提供程序允许您在AngularJS调用$get方法获取可注入对象之前配置提供程序。

例子：

app.provider('provider', function() {
     var name = '';
     this.setName = function(newName) {
          name = newName;
     }
     this.$get = function() {
         return {
            name: name
         }
     }
})

用法（作为控制器中的注射剂）

app.controller('ctrl', function($scope, provider) {
    $scope.name = provider.name;
});

用法（在调用$get以创建可注射对象之前配置提供程序）

app.config(function(providerProvider) {
    providerProvider.setName('John');
});

2014-08-02 05:37:39

派对有点晚了。但我认为这对那些想学习（或清楚）如何使用工厂、服务和提供者方法开发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

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

2015-03-04 11:12:38

这是本文的图片来源：

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

2015-11-19 13:36:14

AngularJS：服务vs供应商vs工厂

推荐文章

最新文章

标签