angularjs - ไม่พบการกำหนด Controller ในแอปพลิเคชัน Typescript หลังจากอัปเกรดเป็นเวอร์ชัน 1.3

ฉันมีโค้ดดังต่อไปนี้ในแอปพลิเคชันของฉัน:

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' (ชื่อแบบ camel case) ทุกอย่างก็ทำงานได้

นี่คือ plunker ที่อัปเดตพร้อมเวอร์ชันที่ใช้งานได้

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

คำตอบ #2

ไม่สามารถทราบได้จากคำถามของคุณ แต่สาเหตุที่เป็นไปได้มากที่สุดสำหรับข้อผิดพลาดนี้คือการสั่งซื้อ

บางทีเมื่อคุณอัปเกรดเวอร์ชันของ Angular คุณอาจย้ายแท็กสคริปต์ไป หรือเวอร์ชันใหม่ของ Angular มีเวลาการทำงานที่แตกต่างกันเล็กน้อย (เช่น เดิมมันเคยรอ onload และตอนนี้มันไม่รอ)

ตรวจสอบให้แน่ใจว่าคอนโทรลเลอร์ของคุณถูกประกาศก่อนที่คุณจะเรียกใช้ angular.module('home', [])....

หากบล็อกโค้ดทั้งสองที่คุณรวมอยู่นั้นอยู่ในไฟล์ต่างกัน ให้แน่ใจว่าไฟล์ที่มี HomeHomeController ถูกรวมก่อนไฟล์ที่มีการเรียกใช้ angular.module('home', [])...