Menu
I'm trying to track down a "TypeError: undefined is not a function" error in AngularJS. If you have any ideas, or even better, suggestions on how to debug something like this, I'd appreciate it. Note that this is very similar to the code I'm working on, but not exactly the same (although it still has the same errors when run).
trace:
TypeError: undefined is not a function
at update (http://localhost:63342/Channels/vendor/angular-route.js:838:13)
at Scope.$broadcast (http://localhost:63342/Channels/vendor/angular.js:11803:28)
at http://localhost:63342/Channels/vendor/angular-route.js:549:26
at wrappedCallback (http://localhost:63342/Channels/vendor/angular.js:10549:81)
at wrappedCallback (http://localhost:63342/Channels/vendor/angular.js:10549:81)
at http://localhost:63342/Channels/vendor/angular.js:10635:26
at Scope.$eval (http://localhost:63342/Channels/vendor/angular.js:11528:28)
at Scope.$digest (http://localhost:63342/Channels/vendor/angular.js:11373:31)
at Scope.$apply (http://localhost:63342/Channels/vendor/angular.js:11634:24)
at done (http://localhost:63342/Channels/vendor/angular.js:7635:45)
index.html:
<!DOCTYPE html>
<html ng-app="channelsApp">
<head>
<title></title>
<link rel="stylesheet" href="css/style.css"/>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
</head>
<body>
<div ng-view></div>
<!--App Scripts-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
app.js
var channelsApp = angular.module('channelsApp', [
'ngRoute',
'channelsControllers'
]);
channelsApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/new', {
templateUrl: 'partials/test.html',
controller: 'CreateChannelCtrl'
}).
otherwise({
redirectTo: '/new'
});
}]);
controllers.js:
'use strict';
/* Controllers */
var channelsControllers = angular.module('channelsControllers', []);
channelsControllers.controller("CreateChannelCtrl", ['$scope',
function($scope) {
console.log("Success!");
}]);
test.html
<div>This is a test.</div>
358
Using an outdated AngularJS version causes this bug.
87
I used the same code and it works for me. There might be some issue with the library. Update your angular library. Please let me know if you want my code.
And I don't think that there is some issue with
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>, since in the tutorial of AngularJS on their site, they too have included app.js before controller.js.
And I guess its logical since in javascript and in 'strict mode' too you call a function then you can define it;
<html>
<body>
<script>
'use strict';
callMe(0);
function callMe(a){alert(a)}
</script>
</body>
</html>
Above code works fine.
Please correct me if I am wrong at any point.
Thanks.
44
Since channelsApp depends on channelsControllers
var channelsApp = angular.module('channelsApp', [
'ngRoute',
'channelsControllers'
]);
You have to reverse the scripts like this:
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
The possible problem is you use different versions of angular.js and angular-route.js. As this DEMO shows, when their versions are different, there is error.
If you use the same versions, like this DEMO, it works.
Note: ngRoute is moved into its own module since version 1.2. In version 1.0, ngRoute is in the core. For more information: http://docs.angularjs.org/guide/migration#ngroute-has-been-moved-into-its-own-module
28
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
