angularjs - Kontroller definierad i en Typescript-applikation efter uppgradering till 1.3

Jag har följande kod i min applikation:

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

och

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

Jag har precis uppgraderat till AngularJS 1.3 och nu får jag detta fel:

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)

Här är sättet jag gör routerns konfiguration på:

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

Här är ordningen på hur mina skript laddas:

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

Kan någon berätta för mig om det finns ett problem med sättet jag definierar min controller på med Typescript?

Svar #1

Trots det faktum att du beskriver att den enda ändringen är uppgradering av Angular JS, skulle jag vilja ge dig en ledtråd om hur detta fel kan reproduceras. Jag följde din beskrivning ovan och skapade denna trasiga plunker med denna tillståndsdefinition:

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

Och eftersom Angulars kontrollerdefinition (efter frågan) är:

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

detta ger felet:

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

Så, vad är fel? controller: 'HomeHomeController',

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

Om vi fixar det till controller: 'homeHomeController' (camel case-namn), fungerar allt

Här är uppdaterad plunker med fungerande version

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

Svar #2

Det går inte att avgöra från din fråga, men den mest sannolika orsaken till detta fel är beställningen.

Kanske när du uppgraderade versionen av Angular, flyttade du en script-tagg eller så har den nya versionen av Angular en subtilt annorlunda exekveringstid (dvs den brukade vänta på onload och nu gör den det inte).

Se till att din controller deklareras innan du anropar angular.module('home', [])....

Om de två kodblocken du inkluderade finns i olika filer, se till att filen som innehåller HomeHomeController inkluderas före filen som har anropet till angular.module('home', [])...

Relaterade artiklar