I have the following code in my application:
angular.module('home', [])
.controller('homeHomeController', HomeHomeController)
.controller('homeContentController', HomeContentController);
and
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;
}
}
I just upgraded to AngularJS 1.3 and now I am getting this error:
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)
Here is the way I am doing the router config:
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)
;
Here is the order of my script loads:
<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>
Can anyone tell me if there is aproblem with the way that I am defining my controller using Typescript?
Despite of the fact, that you describe that only change is angular JS upgrade, I would like to give you a hint, how this error could be reproduced. I followed your description above and created this broken plunker with this state definition:
var home = {
name: 'home',
url: '/Home',
views: {
'root': {
templateUrl: 'tpl.home.html',
controller: 'HomeHomeController',
},
'content': {
templateUrl: 'tpl.overview.html',
controller: 'homeContentController',
}
}
};
And because the angular's controller definition (following the question) is:
var app = angular.module('home', ['ui.router', 'services'])
.controller('homeHomeController', HomeHomeController)
.controller('homeContentController', HomeContentController);
this gets the error:
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
...
So, what is wrong? controller: 'HomeHomeController',
views: {
'root': {
templateUrl: 'tpl.home.html',
controller: 'HomeHomeController',
If we fix it to controller: 'homeHomeController'
(camel case name), everything is working
Here is updated plunker with working version
var home = {
name: 'home',
url: '/Home',
views: {
'root': {
templateUrl: 'tpl.home.html',
controller: 'homeHomeController',
},
'content': {
templateUrl: 'tpl.overview.html',
controller: 'homeContentController',
}
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With