angularjs - 在升級到 1.3 後，TypeScript 應用程式中未定義 Controller

我在我的應用程式中有以下程式碼：

angular.module('home', [])
    .controller('homeHomeController', HomeHomeController)
    .controller('homeContentController', HomeContentController);

和

class HomeHomeController {
    static $inject = [
        '$http',
        'examService',
        'stateService',
        'userService'
    ];
    constructor(
        private $http: ng.IHttpService,
        private $es: IExamService,
        private $ss: IStateService,
        private $us: IUserService
        ) {
        var self = this;   
    }
} 

我剛升級到 AngularJS 1.3，現在我遇到這個錯誤：

Error: [ng:areq] Argument 'HomeHomeController' is not a function, got undefined
http://errors.angularjs.org/1.3.0/ng/areq?p0=HomeHomeController&p1=not%20aNaNunction%2C%20got%20undefined
    at http://127.0.0.1:17315/Scripts/angular.js:80:12
    at assertArg (http://127.0.0.1:17315/Scripts/angular.js:1610:11)
    at assertArgFn (http://127.0.0.1:17315/Scripts/angular.js:1620:3)
    at http://127.0.0.1:17315/Scripts/angular.js:8319:9
    at http://127.0.0.1:17315/Scripts/angular.js:7496:34
    at forEach (http://127.0.0.1:17315/Scripts/angular.js:343:20)
    at nodeLinkFn (http://127.0.0.1:17315/Scripts/angular.js:7483:11)
    at compositeLinkFn (http://127.0.0.1:17315/Scripts/angular.js:6991:13)
    at publicLinkFn (http://127.0.0.1:17315/Scripts/angular.js:6870:30)
    at compile (http://127.0.0.1:17315/Scripts/angular-ui-router.js:3335:9) 

這是我設置路由器的方式：

app.config([
    '$httpProvider',
    '$locationProvider',
    '$sceProvider',
    '$stateProvider',
    appConfig
]);

function appConfig(
    $httpProvider,
    $locationProvider,
    $sceProvider,
    $stateProvider: ng.ui.IStateProvider
    ) {

    $locationProvider.html5Mode(true);

    ..
     var home = {
        name: 'home',
        url: '/Home',
        views: {
            'root': {
                templateUrl: '/Content/app/home/partials/home.html',
            },
            'content': {
                templateUrl: '/Content/app/home/partials/overview.html',
            },
        }
    };
    ..
    $stateProvider
        ..
        .state(home)
        ;

這是我的腳本載入順序：

<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-ui-router.js"></script>
...
<script src="/Content/app/home/controllers/HomeController.js"></script>
<script src="/Content/app/home/home.js"></script>

<script src="/Content/app/app.js"></script>
<script src="/Content/app/appConfig.js"></script>
<script src="/Content/app/appRun.js"></script>

有沒有人可以告訴我，我使用 Typescript 定義控制器的方式是否有問題？

答案＃1

儘管你描述說唯一的變更是 Angular JS 升級，我還是想給你一個提示，說明這個錯誤可能是如何被重現的。我根據你上面的描述創建了這個 壞掉的 plunker，並使用了這個狀態定義：

var home = {
    name: 'home',
    url: '/Home',
    views: {
        'root': {
            templateUrl: 'tpl.home.html',
            controller: 'HomeHomeController',
        },
        'content': {
            templateUrl: 'tpl.overview.html',
            controller: 'homeContentController',
        }
    }
};

而且因為 Angular 的控制器定義（跟隨問題）是：

var app = angular.module('home', ['ui.router', 'services'])
    .controller('homeHomeController', HomeHomeController)
    .controller('homeContentController', HomeContentController);

這會出現錯誤：

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

那麼，哪裡出了問題？ controller: 'HomeHomeController',

views: {
    'root': {
        templateUrl: 'tpl.home.html',
        controller: 'HomeHomeController',

如果我們將它固定為 controller: 'homeHomeController'（駝峰式名稱），一切都正常運作

這裡是更新過的 Plunker，包含可運作的版本

var home = {
    name: 'home',
    url: '/Home',
    views: {
        'root': {
            templateUrl: 'tpl.home.html',
            controller: 'homeHomeController',
        },
        'content': {
            templateUrl: 'tpl.overview.html',
            controller: 'homeContentController',
        }
    }
};

答案＃2

從你的問題無法判斷，但這個錯誤最可能的原因是排序。

也許當你升級 Angular 的版本時，你移動了一個 script 標籤，或者新的 Angular 版本有一個微妙不同的執行時間（例如，它以前會等待 onload，而現在則不會）。

確保在調用 angular.module('home', [])... 之前已經聲明了你的控制器。

如果您包含的兩個程式碼區塊位於不同的檔案中，請確保包含 HomeHomeController 的檔案在呼叫 angular.module('home', [])... 的檔案之前被引入