了解AngularJS工厂、服务和提供商

所有这些都用于共享可重用的单例对象。它有助于在应用程序/各种组件/模块之间共享可重用代码。

来自文档服务/工厂：延迟实例化–Angular仅在应用程序组件依赖于服务/工厂时实例化它。单件–每个组件依赖于服务获取对单个实例的引用由服务工厂生成。

工厂

工厂是一个函数，您可以在创建对象之前操作/添加逻辑，然后返回新创建的对象。

app.factory('MyFactory', function() {
    var serviceObj = {};
    //creating an object with methods/functions or variables
    serviceObj.myFunction = function() {
        //TO DO:
    };
    //return that object
    return serviceObj;
});

用法

它可以只是像类一样的函数集合。因此，当您将其注入控制器/工厂/指令函数时，它可以在不同的控制器中实例化。每个应用程序只实例化一次。

服务

在查看服务时，只需考虑阵列原型。服务是一个使用“new”关键字实例化新对象的函数。您可以使用this关键字将财产和函数添加到服务对象。与工厂不同，它不返回任何内容（它返回包含方法/财产的对象）。

app.service('MyService', function() {
    //directly binding events to this context
    this.myServiceFunction = function() {
        //TO DO:
    };
});

用法

当您需要在整个应用程序中共享单个对象时，请使用它。例如，经过验证的用户详细信息、可共享的方法/数据、实用程序功能等。

供应商

提供程序用于创建可配置的服务对象。您可以通过config函数配置服务设置。它使用$get（）函数返回一个值。$get函数在运行阶段以角度执行。

app.provider('configurableService', function() {
    var name = '';
    //this method can be be available at configuration time inside app.config.
    this.setName = function(newName) {
        name = newName;
    };
    this.$get = function() {
        var getName = function() {
             return name;
        };
        return {
            getName: getName //exposed object to where it gets injected.
        };
    };
});

用法

当您需要在服务对象可用之前为其提供模块化配置时，例如，假设您希望根据环境（如dev、stage或prod）设置API URL

注释只有提供程序在angular的配置阶段可用，而服务和工厂不是。

希望这能澄清您对工厂、服务和供应商的理解。

我的理解很简单。

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

服务：

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

供应商：

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

本质上，供应商、工厂和服务都是服务。工厂是服务的一种特殊情况，您只需要一个$get（）函数，这样您就可以用更少的代码编写它。

服务、工厂和供应商之间的主要区别在于其复杂性。服务是最简单的形式，工厂更健壮，提供者在运行时可配置。

以下是何时使用每一项的摘要：

工厂：需要根据其他数据计算您提供的值。

服务：您正在返回带有方法的对象。

提供者：您希望能够在配置阶段配置将在创建之前创建的对象。在应用程序完全初始化之前，主要在应用程序配置中使用Provider。

看完所有这些帖子后，这给我带来了更多的困惑……但所有的信息都是有价值的。。最后我找到了下表，它将通过简单的比较提供信息

注射器使用配方创建两种类型的对象：服务和特殊用途物体有五种配方类型定义了如何创建对象：Value，工厂、服务、供应商和常量。工厂和服务是最常用的配方。它们之间的唯一区别是，Service配方对自定义类型的对象更有效，而Factory可以生成JavaScript原语和函数。提供者配方是核心配方类型，所有其他配方都只是其语法上的糖。提供程序是最复杂的配方类型。除非您正在构建一段需要全局配置的可重用代码，否则您不需要它。除控制器外的所有特殊用途对象均通过工厂配方定义。

对于初学者来说：-这可能不正确的用例，但在高级别上，这是这三个用例的用例。

如果要在angular模块中使用，应将配置函数创建为提供程序

angular.module（'myApp'）.config（函数（$testProvider）{$testProvider.someFunction（）；})

Ajax调用或第三方集成需要提供服务。对于数据操作，将其创建为工厂

对于基本场景，工厂和服务的行为相同。

了解AngularJS工厂、服务和提供商

所有这些都用于共享可重用的单例对象。它有助于在应用程序/各种组件/模块之间共享可重用代码。

来自文档服务/工厂：延迟实例化–Angular仅在应用程序组件依赖于服务/工厂时实例化它。单件–每个组件依赖于服务获取对单个实例的引用由服务工厂生成。

工厂

工厂是一个函数，您可以在创建对象之前操作/添加逻辑，然后返回新创建的对象。

app.factory('MyFactory', function() {
    var serviceObj = {};
    //creating an object with methods/functions or variables
    serviceObj.myFunction = function() {
        //TO DO:
    };
    //return that object
    return serviceObj;
});

用法

它可以只是像类一样的函数集合。因此，当您将其注入控制器/工厂/指令函数时，它可以在不同的控制器中实例化。每个应用程序只实例化一次。

服务

在查看服务时，只需考虑阵列原型。服务是一个使用“new”关键字实例化新对象的函数。您可以使用this关键字将财产和函数添加到服务对象。与工厂不同，它不返回任何内容（它返回包含方法/财产的对象）。

app.service('MyService', function() {
    //directly binding events to this context
    this.myServiceFunction = function() {
        //TO DO:
    };
});

用法

当您需要在整个应用程序中共享单个对象时，请使用它。例如，经过验证的用户详细信息、可共享的方法/数据、实用程序功能等。

供应商

提供程序用于创建可配置的服务对象。您可以通过config函数配置服务设置。它使用$get（）函数返回一个值。$get函数在运行阶段以角度执行。

app.provider('configurableService', function() {
    var name = '';
    //this method can be be available at configuration time inside app.config.
    this.setName = function(newName) {
        name = newName;
    };
    this.$get = function() {
        var getName = function() {
             return name;
        };
        return {
            getName: getName //exposed object to where it gets injected.
        };
    };
});

用法

当您需要在服务对象可用之前为其提供模块化配置时，例如，假设您希望根据环境（如dev、stage或prod）设置API URL

注释只有提供程序在angular的配置阶段可用，而服务和工厂不是。

希望这能澄清您对工厂、服务和供应商的理解。

JS Fiddle演示

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

var myApp=角度模块（'myApp'，[]）；//服务风格，可能是最简单的myApp.service（'helloWorldFromService'，函数（）{this.sayHello=函数（）{return“你好，世界！”；};});//工厂风格，更加复杂myApp.factory（'helloWorldFromFactory'，函数（）{返回{sayHello:函数（）{return“你好，世界！”；}};});//提供程序风格、全面、可配置版本myApp.provider（'helloWorld'，函数（）{this.name='默认值'；这一点$get=函数（）{var名称=this.name；返回{sayHello:函数（）{return“您好，”+name+“！”；}}};this.setName=函数（名称）{this.name=名称；};});//嘿，我们可以配置提供者！myApp.config（函数（helloWorldProvider）{helloWorldProvider.setName（'World'）；});函数MyCtrl（$scope、helloWorld、helloWorldFromFactory、helloWorldFromService）{$scope.hellos=[helloWorld.sayHello（），helloWorldFromFactory.sayHello（），helloWorldFromService.sayHello（）]；}<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js“></script><body ng app=“myApp”><div ng controller=“MyCtrl”>｛｛hellos｝｝</div></body>