升级到1.3后,控制器未在Typescript应用程序中定义

Question

我的应用程序中有以下代码:

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定义我的控制器的方式存在问题吗？

Answer 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',
        }
    }
};

因为角度的控制器定义（在问题之后）是：

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',
        }
    }
};