javascript - 工厂、服务和 vendor 之间有什么区别？

Question

首先我想明确我是 AngularJS 的新手。您可能会发现我的问题与 AngularJS: Service vs provider vs factory 重复但是当我试图理解这件事时，它让我感到困惑。当我改变一个 Controller 中的值时，其他 Controller 也会受到影响。

根据对该问题的回答，服务是由 Angular 自身创建的对象，但它仍然在所有 Controller 之间共享。

Angular JS

    var myApp = angular.module('demo', []);

    // Factory Implementation
    myApp.factory('myFactory', function () {                      
        var service = {};
        service.TestData = 'This is default data from factory';
        return service;
    });

    // Service Implementation
    myApp.service('myService', function () {
        this.TestData = 'This is service';
    });

    // First Controller
    myApp.controller('myFirstController', function ($scope, myFactory, myService,myProvider) {
        $scope.ProviderData = myProvider;
        $scope.MyData = myFactory;
        $scope.ServiceData = myService;
        $scope.testFun = function () {
            $scope.MyData.TestData = 'This is new data from factory';
            $scope.ServiceData.TestData = 'New Service data';
            $scope.ProviderData.thingOnConfig = 'New thing from first controller';
        }
    });


    // Second Controller
    myApp.controller('mySecondController', function ($scope, myFactory, myService,myProvider) {
        $scope.ProviderData = myProvider;
        $scope.MyData = myFactory;
        $scope.ServiceData = myService;
    });

    myApp.provider('myProvider', function () {
        this.TestData = 'This is from provider';

        this.$get = function () {
            var that = this;
            return {
                thingOnConfig: that.TestData
            }
        }
    });

    myApp.config(function (myProviderProvider) {
        myProviderProvider.TestData = 'This is new from config of provider';
    });

HTML

<div class="row" ng-app="demo" ng-cloak>
    <div class="row" ng-controller="myFirstController">
        <div class="row">
            {{MyData.TestData}}
            <br />
            {{ServiceData.TestData}}
            <br />
            {{ProviderData.thingOnConfig}}
        </div>
        <div class="row">
            <input type="button" value='click here for update' ng-click="testFun()" />
        </div>
    </div>
    <div class="row" ng-controller="mySecondController">
        <div class="row">
            {{MyData.TestData}}
            <br />
            {{ServiceData.TestData}}
            <br />
            {{ProviderData.thingOnConfig}}
        </div>
    </div>
</div>    

fiddle 链接:http://jsfiddle.net/8Cg2s/

为什么所有最相同的事物都有三个不同的术语？如果有任何重要区别，那是什么？

Answer 1

fiddle 演示了预期的行为。我不明白是什么让您感到困惑。

关于您的问题:“为什么三个几乎相同的事物有不同的术语？”

如果我们对 3 个几乎相同的事物使用完全相同的名称，那么我们将如何区分它们？对不同的事物使用不同的名称是合理的(即使它们非常相似)。

---

我想真正的问题不是“为什么使用不同的术语”，而是“为什么有 3 个不同的函数(factory、service、provider) 用于相同的目的(声明 Angular Service)”。

您可能会失望地了解到没有 3 种而是 5 种方法来声明 Angular 服务:constant 和 value 是两个缺失的函数。

事实上只有一个概念，一个 Angular 服务，以及一种声明方式:provider。

其他4个函数(constant, factory, service, value)实现的也可以使用 provider 实现，但需要更多代码。
provider 是最灵活的(允许最多的可配置性)，但也是最冗长的。
因此，其他 4 个函数是常用 Angular 服务类型的快捷方式。

---

顺便说一句， the docs 中解释得很清楚:

工厂
[...] 这是注册服务的缩写，其提供者仅包含一个 $get 属性，这是给定的服务工厂函数。

服务
[...] 这是注册服务的缩写，其中其提供者的 $get 属性是将用于实例化服务实例的服务构造函数。

等等