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

Question

After converting my AngularJS Service to TypeScript using the word "export", then makes it available for import in a TypeScript controller...

, but how can i still injecting it ,with old controllers?

Explaining in Detail , I am rewriting my controllers to services on Typescript to be prepared for a future migration of angularjs to angular 2.x , Here is a service "equipmentAreaStorageT" using TypeScript...

     <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);

and I know using the Import keyword should be enough for injecting this into a 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);

but i dont want to transform all my Controllers to Typescript.. not at the moment, so how can i use this new TypeScript service in my old .js controller. i have tryed this for example..

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

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

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

        $scope.loadRecords();

    }
]);

but i get always this error. Object.defineProperty(exports, "__esModule", { value: true });

im working with visual studio and added the Types for working with typescript.

Answer 1

If you just import service in a controller - it wouldn't be the same as injecting. You can use imported value only for typescript typings.

You should properly set up your builder (webpack, gulp - whatever you use) to work with typescript. Everything still will be the same as with javascript. You still need to register service in some module and inject in another place. If you are using AngularJs 1.5+ consider using components. Also look at ng-annotate (or it's babel plugin to simplify injection)