AngularJS:“;TypeError:undefined不是函数“”;使用routeProvider

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

本文关键字：使用 routeProvider 函数 undefined TypeError AngularJS      更新时间：2023-09-26

我正在试图追踪AngularJS中的"TypeError:undefined不是函数"错误。如果您对如何调试类似的东西有任何想法，甚至更好的建议，我将不胜感激。请注意，这与我正在处理的代码非常相似，但并不完全相同（尽管运行时仍然有相同的错误）。

跟踪：

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>

使用过时的AngularJS版本会导致此错误。

我使用了相同的代码，它对我有效。库可能有一些问题。更新角度库。如果你想要我的代码，请告诉我。

我不认为<script src="js/app.js"></script> <script src="js/controllers.js"></script>，因为在他们网站上的AngularJS教程中，他们也在controller.js之前包含了app.js。我想这是合乎逻辑的，因为在javascript和"严格模式"中，你也可以调用一个函数，然后定义它；

<html>
<body>
<script>
'use strict';
callMe(0);
function callMe(a){alert(a)}
</script>
</body>
</html>

上面的代码运行良好。

如果我在任何时候都错了，请纠正我。

谢谢。

由于channelsApp依赖于channelsControllers

var channelsApp = angular.module('channelsApp', [
    'ngRoute',
    'channelsControllers'
]);

你必须像这样反转脚本：

<script src="js/controllers.js"></script>
<script src="js/app.js"></script>

可能的问题是你使用不同版本的angular.js和angular-route.js。正如这个演示所示，当它们的版本不同时，就会出现错误。

如果你使用相同的版本，比如这个DEMO，它是有效的。

注意：ngRoute从1.2版本开始被移到自己的模块中。在1.0版本中，ngRoute是核心。有关详细信息：http://docs.angularjs.org/guide/migration#ngroute-已移动到其自己的模块

相关文章：