AngularJS：服务vs供应商vs工厂

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

当前回答

句法糖是区别。只需要提供程序。或者换句话说，只有提供者才是真正的角度，所有其他提供者都是派生的（以减少代码）。还有一个简单的版本，叫做Value（），它只返回值，不返回计算或函数。偶数值是从提供程序派生的！

那么，为什么会出现这样的并发症，为什么我们不能只使用提供者而忘记其他一切呢？它应该可以帮助我们轻松编写代码，更好地进行沟通。开玩笑的回答是，它越复杂，框架的销售就越好。

可以返回value=value的提供程序一个可以实例化并返回=工厂（+值）提供程序可以实例化+做某事=服务（+工厂，+值）提供者=必须包含名为$get（+Factory，+Service，+Value）的属性

角注入为我们得出这一结论提供了第一个线索。

$injector用于检索提供者“不是服务，不是工厂，而是提供者”定义的对象实例。

更好的答案是：Angular服务由服务工厂创建。这些服务工厂是由服务提供程序创建的函数。服务提供程序是构造函数。实例化时，它们必须包含名为$get的属性，该属性保存服务工厂函数

因此，主供应器和注入器都将就位：）。当$get可以通过从IServiceProvider继承而在提供程序中实现时，Typescript就变得有趣了。

2016-04-03 19:50:08

其他回答

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

此答案针对主题/问题

Factory、Service和Constant是如何在提供者配方之上添加语法糖的？

工厂、服务和供应商在内部是怎样的

基本上发生的是

当您创建factory（）时，它会将第二个参数中提供的函数设置为provider的$get并返回它（provider（name，｛$get:factoryFn｝）），您所得到的只是provider，但除了$get之外没有其他属性/方法（这意味着您无法配置）

工厂源代码

function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
};

当生成服务（）时，它返回您提供factory（）的函数，该函数注入构造函数（返回您在服务中提供的构造函数的实例）并返回它

服务源代码

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
};

因此，基本上在这两种情况下，您最终都会将providers$get设置为您提供的函数，但您可以提供$get以外的任何内容，因为您最初可以在provider（）中为config块提供

2015-04-13 22:55:00

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

假设我们有：

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

1.服务是在必要时创建的单例对象，在应用程序生命周期结束之前（浏览器关闭时）不会被清理。控制器在不再需要时被销毁和清理。

2.创建服务的最简单方法是使用factory（）方法。factory（）方法允许我们通过返回包含服务函数和服务数据的对象来定义服务。服务定义函数是我们放置可注入服务的地方，例如$http和$q。前任：

angular.module('myApp.services')
.factory('User', function($http) { // injectables go here
var backendUrl = "http://localhost:3000"; var service = {
    // our factory definition
user: {},
setName: function(newName) {
      service.user['name'] = newName;
    },
setEmail: function(newEmail) { service.user['email'] = newEmail;
},
save: function() {
return $http.post(backendUrl + '/users', { user: service.user
}); }
};
return service; });

在我们的应用程序中使用factory（）

在我们的应用程序中使用工厂很容易，因为我们可以在运行时在需要的地方简单地注入工厂。

angular.module('myApp')
.controller('MainController', function($scope, User) {
  $scope.saveUser = User.save;
});

另一方面，service（）方法允许我们通过定义构造函数来创建服务。我们可以使用原型对象来定义服务，而不是原始javascript对象。与factory（）方法类似，我们还将在函数定义中设置可注入项。创建服务的最低级方法是使用provide（）方法。这是创建可以使用.config（）函数配置的服务的唯一方法。与前面的to方法不同，我们将在定义的this中设置可注射对象$get（）函数定义。

2016-10-30 23:39:31

使用此页面和文档作为参考（自上次查看以来似乎有了很大的改进），我整理了以下真实世界演示，其中使用了提供者的5种风格中的4种；价值、常量、工厂和全面供应商。

HTML格式：

<div ng-controller="mainCtrl as main">
    <h1>{{main.title}}*</h1>
    <h2>{{main.strapline}}</h2>
    <p>Earn {{main.earn}} per click</p>
    <p>You've earned {{main.earned}} by clicking!</p>
    <button ng-click="main.handleClick()">Click me to earn</button>
    <small>* Not actual money</small>
</div>

app

var app = angular.module('angularProviders', []);

// A CONSTANT is not going to change
app.constant('range', 100);

// A VALUE could change, but probably / typically doesn't
app.value('title', 'Earn money by clicking');
app.value('strapline', 'Adventures in ng Providers');

// A simple FACTORY allows us to compute a value @ runtime.
// Furthermore, it can have other dependencies injected into it such
// as our range constant.
app.factory('random', function randomFactory(range) {
    // Get a random number within the range defined in our CONSTANT
    return Math.random() * range;
});

// A PROVIDER, must return a custom type which implements the functionality 
// provided by our service (see what I did there?).
// Here we define the constructor for the custom type the PROVIDER below will 
// instantiate and return.
var Money = function(locale) {

    // Depending on locale string set during config phase, we'll
    // use different symbols and positioning for any values we 
    // need to display as currency
    this.settings = {
        uk: {
            front: true,
            currency: '£',
            thousand: ',',
            decimal: '.'
        },
        eu: {
            front: false,
            currency: '€',
            thousand: '.',
            decimal: ','
        }
    };

    this.locale = locale;
};

// Return a monetary value with currency symbol and placement, and decimal 
// and thousand delimiters according to the locale set in the config phase.
Money.prototype.convertValue = function(value) {

    var settings = this.settings[this.locale],
        decimalIndex, converted;

    converted = this.addThousandSeparator(value.toFixed(2), settings.thousand);

    decimalIndex = converted.length - 3;

    converted = converted.substr(0, decimalIndex) +
        settings.decimal +
        converted.substr(decimalIndex + 1);    

    converted = settings.front ?
            settings.currency + converted : 
            converted + settings.currency; 

    return converted;   
};

// Add supplied thousand separator to supplied value
Money.prototype.addThousandSeparator = function(value, symbol) {
   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, symbol);
};

// PROVIDER is the core recipe type - VALUE, CONSTANT, SERVICE & FACTORY
// are all effectively syntactic sugar built on top of the PROVIDER construct
// One of the advantages of the PROVIDER is that we can configure it before the
// application starts (see config below).
app.provider('money', function MoneyProvider() {

    var locale;

    // Function called by the config to set up the provider
    this.setLocale = function(value) {
        locale = value;   
    };

    // All providers need to implement a $get method which returns
    // an instance of the custom class which constitutes the service
    this.$get = function moneyFactory() {
        return new Money(locale);
    };
});

// We can configure a PROVIDER on application initialisation.
app.config(['moneyProvider', function(moneyProvider) {
    moneyProvider.setLocale('uk');
    //moneyProvider.setLocale('eu'); 
}]);

// The ubiquitous controller
app.controller('mainCtrl', function($scope, title, strapline, random, money) {

    // Plain old VALUE(s)
    this.title = title;
    this.strapline = strapline;

    this.count = 0;

    // Compute values using our money provider    
    this.earn = money.convertValue(random); // random is computed @ runtime
    this.earned = money.convertValue(0);

    this.handleClick = function() { 
        this.count ++;
        this.earned = money.convertValue(random * this.count);
    };
});

工作演示。

2015-01-30 20:04:12

AngularJS：服务vs供应商vs工厂

推荐文章

最新文章

标签