javascript AngularJS：“TypeError：undefined 不是函数”与 routeProvider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20171310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: "TypeError: undefined is not a function" with routeProvider
提问by Salem
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).
我正在尝试追踪 AngularJS 中的“TypeError: undefined is not a function”错误。如果您有任何想法，甚至更好，关于如何调试这样的东西的建议，我将不胜感激。请注意，这与我正在处理的代码非常相似，但并不完全相同（尽管运行时仍然存在相同的错误）。
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:
索引.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
应用程序.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:
控制器.js：
'use strict';
/* Controllers */
var channelsControllers = angular.module('channelsControllers', []);
channelsControllers.controller("CreateChannelCtrl", ['$scope',
function($scope) {
console.log("Success!");
}]);
test.html
测试.html
<div>This is a test.</div>
回答by Luuk van Egeraat
Using an outdated AngularJS version causes this bug.
使用过时的 AngularJS 版本会导致此错误。
回答by Bhaskar Melkani
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;
而且我不认为 存在一些问题
<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>
Above code works fine.
上面的代码工作正常。
Please correct me if I am wrong at any point.
如果我在任何时候错了，请纠正我。
Thanks.
谢谢。
回答by Khanh TO
Since channelsAppdepends on channelsControllers
由于channelsApp取决于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 DEMOshows, when their versions are different, there is error.
可能的问题是您使用了不同版本的 angular.js 和 angular-route.js。正如这个DEMO所示，当它们的版本不同时，就会出现错误。
If you use the same versions, like this DEMO, it works.
如果你使用相同的版本，比如这个DEMO，它就可以工作。
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
注意：从 1.2 版开始，ngRoute 被移到了它自己的模块中。在 1.0 版本中，ngRoute 是核心。更多信息：http: //docs.angularjs.org/guide/migration#ngroute-has-been-moved-into-its-own-module
