angularjs - Ovládač nie je definovaný v aplikácii Typescript po aktualizácii na 1.3

V mojej aplikácii mám nasledujúci kód:

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

a

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

Práve som prešiel na AngularJS 1.3 a teraz dostávam túto chybu:

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)

Tu je spôsob, akým robím konfiguráciu smerovača:

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

Tu je poradie načítania môjho skriptu:

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

Môže mi niekto povedať, či je problém v tom, ako definujem svoj kontrolér pomocou TypeScriptu?

Odpoveď č. 1

Napriek tomu, že opisujete, že jedinou zmenou je aktualizácia Angular JS, rád by som vám dal tip, ako by sa táto chyba mohla reprodukovať. Postupoval som podľa vášho vyššie uvedeného opisu a vytvoril tento nefunkčný plunker s týmto definovaním stavu:

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

A pretože definícia kontroléra v Angulari (nasledujúca po otázke) je:

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

toto vyvolá chybu:

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

Tak čo je zle? controller: 'HomeHomeController',

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

Ak to nastavíme na controller: 'homeHomeController' (názov v camel case), všetko funguje

Tu je aktualizovaný plunker s funkčnou verziou

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

Odpoveď č. 2

Z vašej otázky to nie je možné povedať, ale najpravdepodobnejšou príčinou tejto chyby je poradie.

Možno keď ste aktualizovali verziu Angularu, presunuli ste značku skriptu alebo nová verzia Angularu má jemne odlišný čas vykonávania (t. j. predtým čakala na onload a teraz už nie).

Uistite sa, že váš kontrolér je deklarovaný, skôr než zavoláte angular.module('home', [])....

Ak sú dva bloky kódu, ktoré ste zahrnuli, v rôznych súboroch, uistite sa, že súbor obsahujúci HomeHomeController je zahrnutý pred súborom, ktorý má volanie angular.module('home', [])...

Súvisiace články