javascript - AngularJS: "TypeError: undefined is not a function" with routeProvider

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>

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>

Share Improve this question edited Jul 5, 2014 at 4:47 abbood 23.6k20 gold badges141 silver badges258 bronze badges asked Nov 24, 2013 at 5:04 Salem 1,1624 gold badges19 silver badges30 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 8

Using an outdated AngularJS version causes this bug.

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.

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/guide/migration#ngroute-has-been-moved-into-its-own-module

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS: "TypeError: undefined is not a function" with routeProvider - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)