如何在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);
}

声明服务也一样