如何在Angular 1中将依赖项注入与不同名称空间中的控制器和服务一起使用？

Question

I am trying to introduce a clean folders structure for the scripts in my project using Angular 1 and TypeScript 2. I want to have one file app.ts where I will declare my app and controllers, services etc. Then in separate folders like Controllers I would like to keep my controllers in separate files.

What I have now does not work properly when I am trying to use namespaces and separate classes. It works fine if I put controllers declaration in a separate file completely using constructor inside instead of the namespaces as in the example below. When I run the application I can see two javascript errors:

-Uncaught ReferenceError: TypeScript is not defined, at app.ts:6 (in this case TypeScript is my namespace)

-Error: [ng:areq] Argument 'BrowseMovieTicketsController' is not a function, got undefined http://errors.angularjs.org/1.4.10/ng/areq?p0=BrowseMovieTicketsController&p1=not%20a%20function%2C%20got%20undefined

In section of my html file the scripts are included in this ordering:

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

Body of index.html

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

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

File 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;
        }
    }
}

File MovieInformationService.ts:

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

Answer 1

You need to declare your controller in your module. Try this:

namespace  TypeScript.Controllers {

    export class BrowseMovieTicketsController {

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

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

Same for declare your service