在 angularJs 控制器和 TypeScript 控制器中使用 TypeScript 服务答案

【问题标题】：using TypeScript service in both angularJs Controllers and TypeScript Controllers在 angularJs 控制器和 TypeScript 控制器中使用 TypeScript 服务
【发布时间】：2018-09-29 07:21:18
【问题描述】：

使用“导出”一词将我的 AngularJS 服务转换为 TypeScript 后，然后使其可用于在 TypeScript 控制器中导入...

，但是我怎么还能用旧的控制器注入它呢？

详细解释，我正在将我的控制器重写为 Typescript 上的服务，以便为将来将 angularjs 迁移到 angular 2.x 做好准备，这是使用 TypeScript 的服务“equipmentAreaStorageT”...

     <reference path="../../Scripts/typings/angularjs/angular.d.ts" /> 
     import { UrlService } from '../../Scripts/app/services/urlService'; 
     export class EquipmentAreaStorageT { 

    keyPrefix = "";
    api = "";
    index =""; 
    constructor(private isl3UrlService: UrlService) {

        var _this = this; 
        this.keyPrefix = "EquipmentAreaStorageT";
        this.api = "api/equipmentAreaApi/";
        this.index = "EquipmentArea";        
    }
    getIndexUrl() {
        return this.isl3UrlService.getPath + this.index;
    }    
}
angular.module('main').service('equipmentAreaStorageT', EquipmentAreaStorageT);

我知道使用 Import 关键字应该足以将其注入 TypeScriptController

import { EquipmentAreaStorageT } from '../EquipmentArea/EquipmentAreaStorageT'; 
export class EquipmentAreaControllerT {
    $inject = ["$scope"];

    entity = {};
    isOpen = false; 
    gridOptions = {}; 
    isl3SelectionService = {};
    isl3DialogService = {}; 
    constructor($scope,private isl3EquipmentAreaStorage: EquipmentAreaStorageT) {    
        var _this = this;

        var ctrl = $controller("baseEditOnGridController", { $scope: this, storage: isl3EquipmentAreaStorage});        

        ctrl.loadRecords();
    }
}
angular.module('main').controller('EquipmentAreaControllerT', EquipmentAreaControllerT);

但我不想将我的所有控制器都转换为 Typescript.. 目前不想，所以我如何在旧的 .js 控制器中使用这个新的 TypeScript 服务。例如，我已经尝试过..

appRoot.controller("EquipmentAreaController", [
    "$scope", "equipmentAreaStorageT"
    function ($scope, equipmentAreaStorageT) {

        $scope.entity = {};
        $scope.isOpen = false;

        $controller("baseEditOnGridController", { $scope: $scope, storage: equipmentAreaStorageT});

        $scope.loadRecords();

    }
]);

但我总是得到这个错误。 Object.defineProperty(exports, "__esModule", { value: true });

我正在使用 Visual Studio，并添加了使用 typescript 的类型。

【问题讨论】：

不清楚你在问什么。什么是“TypeScript 控制器”？如果您使用的是 AngularJS，这些仍然是 AngularJS 控制器，无论是否是 Typescript。代码相关问题应包含stackoverflow.com/help/mcve
您好，我刚刚更新了我的问题，希望您能提供帮助。
Angulajs 通过依赖注入强制一切来扼杀模块系统。我从来没有找到像今天这样使用模块导入的方法

标签： angularjs typescript

【解决方案1】：

如果您只是在控制器中导入服务 - 它与注入不同。您只能将导入的值用于打字稿打字。

您应该正确设置构建器（webpack、gulp - 无论您使用什么）以使用 typescript。一切仍然与 javascript 相同。您仍然需要在某个模块中注册服务并在另一个地方注入。如果您使用的是 AngularJs 1.5+，请考虑使用组件。另请查看 ng-annotate （或者是 babel plugin 以简化注入）

【讨论】：