AngularJS转TypeScript：export服务如何兼容新旧控制器注入？

这个问题我之前帮不少做AngularJS迁移的开发者解决过，核心就是让TypeScript写的服务同时接入AngularJS的依赖注入（DI）系统和ES模块体系——这样旧的AngularJS控制器能通过传统方式注入它，新的TS代码又能直接导入使用，完美过渡到Angular 2+。下面给你一步步拆解实现方法：

步骤1：将TS服务注册到AngularJS模块 #

你已经用export导出了EquipmentAreaStorageT类，现在需要把它注册到AngularJS的模块中，让DI系统能识别它。做法是用.factory()或.service()（推荐用factory，更灵活），同时保留AngularJS依赖注入的安全写法（避免压缩时依赖名被混淆）：

/// <reference path="../../Scripts/typings/angularjs/angular.d.ts" />
import { UrlService } from './url.service'; // 假设你的UrlService也是TS写的服务

// 你的TS服务类
export class EquipmentAreaStorageT {
  constructor(private urlService: UrlService) {}

  // 示例业务方法
  fetchEquipmentAreas(): Promise<any> {
    return this.urlService.get('/api/equipment/areas');
  }
}

// 注册到AngularJS模块（确保"app.core"是你项目中已定义的模块）
angular.module('app.core')
  .factory('equipmentAreaStorageT', ['urlService', (urlService: UrlService) => {
    return new EquipmentAreaStorageT(urlService);
  }]);

这里的关键是：

• 用数组格式声明依赖（['urlService', ...]），确保压缩工具不会破坏依赖注入
• 把TS实例化后的服务对象返回给AngularJS的DI系统

步骤2：旧AngularJS控制器注入服务 #

不管你的旧控制器是原生JS还是TS写的，注入方式和之前完全一致，不需要做任何修改：

原生JS控制器示例 #

angular.module('app.equipment')
  .controller('EquipmentListCtrl', ['equipmentAreaStorageT', function(equipmentAreaStorageT) {
    const vm = this;
    // 直接使用服务
    equipmentAreaStorageT.fetchEquipmentAreas().then(function(areas) {
      vm.areas = areas;
    });
  }]);

旧TS控制器示例 #

/// <reference path="../../Scripts/typings/angularjs/angular.d.ts" />
import { EquipmentAreaStorageT } from '../core/equipment-area-storage.service';

class EquipmentListCtrl {
  areas: any[];
  // 用$inject声明依赖，避免压缩问题
  static $inject = ['equipmentAreaStorageT'];

  constructor(private equipmentAreaStorageT: EquipmentAreaStorageT) {
    this.loadAreas();
  }

  loadAreas(): void {
    this.equipmentAreaStorageT.fetchEquipmentAreas().then(areas => {
      this.areas = areas;
    });
  }
}

angular.module('app.equipment').controller('EquipmentListCtrl', EquipmentListCtrl);

步骤3：新TS控制器导入/注入服务 #

对于准备向Angular 2+过渡的新TS控制器，你有两种选择：

1. 继续用AngularJS的DI注入（和旧TS控制器写法一致）
2. 直接导入TS类使用（如果已经开始搭建Angular的DI环境，后续可以平滑切换到@Injectable()）

// 直接导入使用（适用于已开始Angular化的新代码）
import { EquipmentAreaStorageT } from '../core/equipment-area-storage.service';
import { UrlService } from './url.service';

class NewEquipmentComponent {
  private equipmentStorage: EquipmentAreaStorageT;

  constructor() {
    // 手动实例化（如果后续切换到Angular，可替换为构造函数注入）
    this.equipmentStorage = new EquipmentAreaStorageT(new UrlService());
  }
}

关键注意事项 #

• 避免重复注册：确保equipmentAreaStorageT服务只在一个地方注册到AngularJS模块，否则会覆盖或报错
• 类型定义兼容：确保所有依赖服务（比如UrlService）都有对应的TypeScript类型定义，要么用@types/angular，要么自己补充
• 编译配置：在tsconfig.json中设置正确的target（比如ES5）和module（比如CommonJS），确保编译后的代码能被项目的打包工具（Webpack/Gulp）正确处理
• 压缩安全：所有依赖注入必须用数组格式或$inject静态属性，不要用隐式注入，否则压缩后会找不到依赖

内容的提问来源于stack exchange，提问作者emamones