AngularJS Providers 详解：从基础到高级用法-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00612/article/details/148324267

AngularJS Providers 详解：从基础到高级用法

angular.js angular/angular.js: 是 Google 推出的一款 JavaScript 框架，可以方便地实现 Web 应用程序的前端开发。适合对 JavaScript、Web 应用程序和想要实现 Web 应用程序前端开发的开发者。项目地址: https://gitcode.com/gh_mirrors/an/angular.js

前言

在 AngularJS 框架中，依赖注入（DI）是其核心特性之一，而 Providers 系统则是实现依赖注入的基础设施。理解 Providers 的工作原理对于构建可维护、可扩展的 AngularJS 应用至关重要。本文将全面解析 AngularJS 中的 Providers 系统，帮助开发者掌握其核心概念和实际应用。

Providers 基础概念

什么是 Providers

在 AngularJS 中，Providers 是创建和配置服务的"配方"。AngularJS 的依赖注入系统通过 Providers 来实例化和组装应用所需的各种对象，主要包括两类：

服务对象（Services）：由开发者定义 API 的自定义对象
特殊对象（Specialized Objects）：符合 AngularJS 特定 API 的对象，包括控制器（Controllers）、指令（Directives）、过滤器（Filters）和动画（Animations）

为什么需要 Providers

AngularJS 应用由大量协作对象组成，这些对象需要被正确实例化和连接。Providers 系统提供了标准化的方式来：

定义对象的创建逻辑
管理对象间的依赖关系
控制对象的生命周期
实现配置与运行时逻辑的分离

五种 Provider 类型详解

AngularJS 提供了五种 Provider 类型，从简单到复杂依次为：

1. Value Recipe（值配方）

适用场景：最简单的 Provider 类型，用于注册简单的值（字符串、数字、对象字面量等）。

angular.module('myApp', [])
  .value('clientId', 'a12345654321x');

特点：

不能有依赖项
在配置阶段不可用
适合简单的常量值

2. Constant Recipe（常量配方）

适用场景：与 Value 类似，但在配置阶段也可用。

angular.module('myApp', [])
  .constant('planetName', 'Greasy Giant');

特点：

不能有依赖项
在配置阶段和运行阶段都可用
适合需要在配置阶段使用的常量

3. Factory Recipe（工厂配方）

适用场景：需要复杂逻辑或依赖其他服务的场景。

angular.module('myApp', [])
  .factory('apiToken', ['clientId', function(clientId) {
    return (clientId + ':' + Date.now()).toUpperCase();
  }]);

特点：

可以有依赖项
通过工厂函数返回服务实例
适合创建任意类型的对象（原始值、对象、函数等）

最佳实践：命名工厂函数为<serviceId>Factory（如apiTokenFactory），便于调试和代码维护。

4. Service Recipe（服务配方）

适用场景：需要基于构造函数创建服务实例的场景。

function UnicornLauncher(apiToken) {
  this.launch = function() {
    console.log('Launching with token:', apiToken);
  };
}

angular.module('myApp', [])
  .service('unicornLauncher', ['apiToken', UnicornLauncher]);

特点：

使用new操作符调用构造函数
自动处理依赖注入
适合面向对象风格的代码

5. Provider Recipe（提供者配方）

适用场景：需要应用全局配置的可复用服务。

angular.module('myApp', [])
  .provider('unicornLauncher', function() {
    var useTinfoil = false;
    
    this.setTinfoil = function(value) {
      useTinfoil = !!value;
    };
    
    this.$get = ['apiToken', function(apiToken) {
      return new UnicornLauncher(apiToken, useTinfoil);
    }];
  })
  .config(['unicornLauncherProvider', function(launcherProvider) {
    launcherProvider.setTinfoil(true);
  }]);

特点：

最底层的 Provider 类型，其他类型都是它的语法糖
可以在配置阶段进行设置
适合需要高度可配置的服务

生命周期：配置阶段 vs 运行阶段

理解 AngularJS 应用的两个关键生命周期阶段对于正确使用 Providers 至关重要：

配置阶段：
- 所有 Provider 被注册和配置
- 只能访问 Provider 和 Constant
- 通过module.config()函数执行
运行阶段：
- 所有服务被实例化
- 可以访问所有注册的服务
- 通过module.run()函数执行

特殊对象的创建

除了常规服务，AngularJS 中的特殊对象也是通过 Providers 系统创建的：

指令（Directives）：使用 Factory 配方
过滤器（Filters）：使用 Factory 配方
动画（Animations）：使用 Factory 配方
控制器（Controllers）：特殊处理，每次需要时都会新建实例

// 指令示例
angular.module('myApp', [])
  .directive('myPlanet', ['planetName', function(planetName) {
    return {
      restrict: 'E',
      template: 'Planet: {{planet}}',
      controller: function($scope) {
        $scope.planet = planetName;
      }
    };
  }]);

选择正确的 Provider 类型

下表总结了各 Provider 类型的关键特性：

| 特性/类型 | Factory | Service | Value | Constant | Provider | |----------------|---------|---------|-------|----------|----------| | 可以有依赖项 | 是 | 是 | 否 | 否 | 是 | | 类型友好注入 | 否 | 是 | 是* | 是* | 否 | | 配置阶段可用 | 否 | 否 | 否 | 是 | 是** | | 可创建函数 | 是 | 是 | 是 | 是 | 是 | | 可创建原始值 | 是 | 否 | 是 | 是 | 是 |

通过直接使用new操作符实现 ** 服务对象在配置阶段不可用，但 Provider 实例可用

最佳实践与常见陷阱

命名约定：
- 工厂函数：<serviceId>Factory
- 服务构造函数：首字母大写的命名（如UnicornLauncher）
- Provider：<serviceId>Provider
性能考虑：
- 所有服务都是单例的，只实例化一次
- 控制器每次都会新建实例
避免陷阱：
- 不要在配置阶段尝试访问服务
- 对于简单值优先使用 Value 或 Constant
- 需要配置的服务才使用 Provider
测试友好设计：
- 通过依赖注入使服务易于模拟
- 保持服务职责单一