简述factory、 service和 provider是什么关系？

八股文_Angular面试题 0 47

参考回答

在 AngularJS 中，factory、service 和 provider 都是用于创建和管理服务的方式，它们之间的关系可以总结为：

factory 和 service 是 provider 的简化实现。
provider 是最底层的方式，允许完全控制服务的创建过程。
factory 是一个函数，返回一个对象，适合逻辑较复杂的服务。
service 是一个基于构造函数的方式，直接实例化服务对象，适合逻辑简单的服务。

详细讲解与拓展

1. 共同点

目的：都用于定义服务（共享的业务逻辑或数据）。
注入：所有三者创建的服务都可以通过依赖注入 (DI) 使用。
生命周期：它们创建的服务是单例的，即在整个应用中只有一个实例。

2. 区别与用法

特性	factory	service	provider
定义形式	返回一个对象的工厂函数。	基于构造函数的实例化对象。	使用 `get` 方法自定义服务创建过程。
使用场景	服务逻辑复杂，需要处理数据或动态生成对象。	简单逻辑，通过实例化构造函数提供服务。	提供高度自定义的服务（如配置服务）。
灵活性	逻辑复杂且灵活，代码可读性高。	较简单，但功能相对有限。	最灵活，适合需要配置的高级场景。
语法示例	详见下方示例代码。	详见下方示例代码。	详见下方示例代码。

3. 示例代码

3.1 factory 示例

factory 是一个返回对象的函数，适用于需要在函数中封装逻辑的场景。

angular.module('myApp', [])
  .factory('myFactory', function() {
    return {
      sayHello: function(name) {
        return 'Hello, ' + name + '!';
      }
    };
  })
  .controller('myCtrl', function( $scope, myFactory) {$ scope.greeting = myFactory.sayHello('AngularJS');
  });

3.2 service 示例

service 是基于构造函数创建实例的一种方式，适用于简单的场景。

angular.module('myApp', [])
  .service('myService', function() {
    this.sayHello = function(name) {
      return 'Hello, ' + name + '!';
    };
  })
  .controller('myCtrl', function( $scope, myService) {$ scope.greeting = myService.sayHello('AngularJS');
  });

3.3 provider 示例

provider 是最底层的方式，允许我们通过配置定制服务的行为。

angular.module('myApp', [])
  .provider('myProvider', function() {
    var greetingPrefix = 'Hello';

    this.setGreetingPrefix = function(prefix) {
      greetingPrefix = prefix;
    };

    this. $get = function() { return { sayHello: function(name) { return greetingPrefix + ', ' + name + '!'; } }; }; }) .config(function(myProviderProvider) { myProviderProvider.setGreetingPrefix('Hi'); }) .controller('myCtrl', function($ scope, myProvider) {
    $scope.greeting = myProvider.sayHello('AngularJS');
  });

4. 三者之间的关系

factory 和 service 本质上是对 provider 的封装：

factory 实现为：

app.factory('myFactory', function() {
  return { /* 返回对象 */ };
});

等价于：

app.provider('myFactory', {
  $get: function() {
    return { /* 返回对象 */ };
  }
});

service 实现为：

app.service('myService', function() {
  this.sayHello = function() { /* 方法逻辑 */ };
});