如何在Angular 1中將依賴項注入與不同名稱空間中的控制器和服務一起使用？

Question

我試圖為使用Angular 1和TypeScript 2的項目中的腳本引入一個干凈的文件夾結構。我想要一個文件app.ts，在其中我將聲明我的應用程序和控制器，服務等。然后在單獨的文件夾中，例如Controllers希望將我的控制器保存在單獨的文件中。

當我嘗試使用名稱空間和單獨的類時，我現在無法正常使用。 如果我將控制器聲明完全放在內部使用構造函數而不是下面的示例中的名稱空間，則可以很好地工作。 當我運行該應用程序時，我可以看到兩個javascript錯誤：

-未捕獲的ReferenceError：在app.ts：6處未定義TypeScript（在這種情況下，TypeScript是我的命名空間）

-錯誤：[ng：areq]參數'BrowseMovieTicketsController'不是一個函數，未定義http://errors.angularjs.org/1.4.10/ng/areq?p0=BrowseMovieTicketsController&p1=not%20a%20function%2C%20got ％20undefined

在我的html文件的部分中，腳本包含在此順序中：

<script src="/bower_components/angular/angular.js"></script>  
<script src="/Scripts/TypeScript/app.js"></script>
<script src="/Scripts/TypeScript/Services/MovieInformationService.js"></script> 
<script src="/Scripts/TypeScript/Controllers/BrowseMovieTicketsController.js"></script>

index.html的主體

<div ng-app="myApp" ng-controller="BrowseMovieTicketsController">
<a ng-click="GetMovie()">Test</div></div>

文件app.ts：

/// <reference path="./../Scripts/typings/angularjs/angular.d.ts"/>

var myApp = angular.module('myApp', []);

//Controllers
myApp.controller("BrowseMovieTicketsController", TypeScript.Controllers.BrowseMovieTicketsController);

//Services
myApp.service("MovieInformationService", TypeScript.Services.MovieInformationService);

文件BrowseMovieTicketsController.ts：

/// <reference path="./../../Scripts/typings/angularjs/angular.d.ts"/>

namespace  TypeScript.Controllers {

    export class BrowseMovieTicketsController {

        scope: any;
        movieInformationService: Services.MovieInformationService;

        static $inject = ["$scope", "MovieInformationService"];

        constructor($scope: any, MovieInformationService: Services.MovieInformationService) {
            this.scope = $scope;
            this.movieInformationService = MovieInformationService;
        }
    }
}

文件MovieInformationService.ts：

namespace TypeScript.Services {
    "use strict";
    export class MovieInformationService {
        public GetMovie() {
            console.log("hello");
        }
    }
}

Answer 1

您需要在模塊中聲明控制器。 嘗試這個：

namespace  TypeScript.Controllers {

    export class BrowseMovieTicketsController {

        static $inject = ["$scope", "MovieInformationService"];

        constructor(private $scope: any, private MovieInformationService: Services.MovieInformationService) {
        }
    }
myApp.controller("BrowseMovieTicketsController", TypeScript.Controllers.BrowseMovieTicketsController);
}

聲明服務也一樣