AngularJS应用配置"未捕获对象"错误(ngRoute)
AngularJS application config "Uncaught object" error (ngRoute)
我有一个简单的页面:
<!doctype html>
<html>
<head >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='bower_components/bootstrap/dist/css/bootstrap.css')>
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/angular/angular.js'></script>
<script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<script src='js/application.js'></script>
<title>Bets Application</title>
</head>
<body ng-app='betsApp' ng-controller='betsAppCtrl'>
<h1>BetsApp</h1>
<ng-view></ng-view>
</body>
</html>
这是aplication.js文件:
var betsApp = angular.module('betsApp', []);
betsApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5mode(true);
$routeProvider.when('/login', {templateUrl:'pages/login.html'});
});
betsApp.controller('betsAppCtrl', function($scope)
{
$scope.password = "";
$scope.email = "";
});
这是login.html:
<div>
<input type='text' ng-model='password' value={{password}}>
</div>
运行时，我在控制台中得到这个错误:
Uncaught object angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:3809
forEach angular.js:323
loadModules angular.js:3775
createInjector angular.js:3715
doBootstrap angular.js:1379
bootstrap angular.js:1394
angularInit angular.js:1307
(anonymous function) angular.js:21459
n.Callbacks.j jquery.js:3073
n.Callbacks.k.fireWith jquery.js:3185
n.extend.ready jquery.js:3391
代码永远不会到这几行:
$locationProvider.html5mode(true);
$routeProvider.when('/login', {templateUrl:'pages/login.html'});
我做错了什么?
更新:这是我从调试angular中得到的一些消息:
Line 78, Column 1
Pause On Caught Exceptions
Watch Expressions
Platform: <not available>
data.data: <not available>
Call StackAsync
angular.js:78
(anonymous function)
angular.js:3809
(anonymous function)
angular.js:323
forEach
angular.js:3775
loadModules
angular.js:3715
createInjector
angular.js:1379
doBootstrap
angular.js:1394
bootstrap
angular.js:1307
angularInit
angular.js:21459
(anonymous function)
jquery.js:3073
n.Callbacks.j
jquery.js:3185
n.Callbacks.k.fireWith
jquery.js:3391
n.extend.ready
jquery.js:3407
I
Paused on a JavaScript breakpoint.
Scope Variables
Local
arguments: Arguments[4]
code: "modulerr"
i: 4
message: "[$injector:modulerr] Failed to instantiate module betsApp due to:↵Error: [$injector:unpr] Unknown provider: $routeProvider↵http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider↵ at http://localhost:8000/bower_components/angular/angular.js:78:12↵ at http://localhost:8000/bower_components/angular/angular.js:3705:19↵ at getService (http://localhost:8000/bower_components/angular/angular.js:3832:39)↵ at Object.invoke (http://localhost:8000/bower_components/angular/angular.js:3859:13)↵ at http://localhost:8000/bower_components/angular/angular.js:3788:37↵ at Array.forEach (native)↵ at forEach (http://localhost:8000/bower_components/angular/angular.js:323:11)↵ at loadModules (http://localhost:8000/bower_components/angular/angular.js:3775:5)↵ at createInjector (http://localhost:8000/bower_components/angular/angular.js:3715:11)↵ at doBootstrap (http://localhost:8000/bower_components/angular/angular.js:1379:20)↵http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=betsApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24routeProvider%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3705%3A19%0A%20%20%20%20at%20getService%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3832%3A39)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3859%3A13)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3788%3A37%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A323%3A11)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3775%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3715%3A11)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A1379%3A20)"
prefix: "[$injector:modulerr] "
stringify: function (obj) {
template: "Failed to instantiate module {0} due to:↵{1}"
templateArgs: Arguments[4]
this: undefined
Closure
Closure
Window
Global
Breakpoints
angular.js:78
Error(message);
application.js:4
.html5mode(true);
application.js:5
.when('/login', {templateUrl:'pages/login.html'});
DOM Breakpoints
XHR Breakpoints
Event Listener Breakpoints
Workers
"[$injector:modulerr] Failed to instantiate module betsApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider
at http://localhost:8000/bower_components/angular/angular.js:78:12
at http://localhost:8000/bower_components/angular/angular.js:3705:19
at getService (http://localhost:8000/bower_components/angular/angular.js:3832:39)
at Object.invoke (http://localhost:8000/bower_components/angular/angular.js:3859:13)
at http://localhost:8000/bower_components/angular/angular.js:3788:37
at Array.forEach (native)
at forEach (http://localhost:8000/bower_components/angular/angular.js:323:11)
at loadModules (http://localhost:8000/bower_components/angular/angular.js:3775:5)
at createInjector (http://localhost:8000/bower_components/angular/angular.js:3715:11)
at doBootstrap (http://localhost:8000/bower_components/angular/angular.js:1379:20)
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=betsApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24routeProvider%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3705%3A19%0A%20%20%20%20at%20getService%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3832%3A39)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3859%3A13)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3788%3A37%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A323%3A11)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3775%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3715%3A11)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A1379%3A20)"
在v1.2+中， ngRoute 是一个单独的模块，应该独立加载(也声明为主模块的依赖项)。
<script src='bower_components/angular/angular.js'></script>
<script src='bower_components/angular/angular-route.js'></script>
var betsApp = angular.module('betsApp', ['ngRoute']);
<子>如果使用的是wer，可以使用以下命令下载ngRoute模块:bower install angular-route
RouteProvider现在是一个独立于Angular核心分发版的模块。参见https://docs.angularjs.org/api/ngRoute。
因为它看起来像你在使用bower，我将做一个
bower install angular-route
，它将下载所需的.js文件并将其放置在bower_components目录中。修改HTML以包含此脚本。然后，application.js文件中的第一行应该是:
var betsApp = angular.module('betsApp', ['ngRoute']);
确保你的Module和ng-app是相等的
angular.module('foo', ['ngRoute']);
<html ng-app="foo">
你必须添加angular-route模块!
相关文章：
- 铬:“;未捕获的语法错误:意外的标记:"
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- "未捕获的语法错误:意外的标记｝"
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- 为什么我会出现此错误"未捕获引用错误:未定义标题;
- "未捕获的语法错误:意外的标记"角度JS
- 内联javascript与"<脚本>"字符串错误地关闭了脚本标记
- jquery validate 1.8.1”;jQuery"是未定义的错误IE8
- "资源不足错误“;当从Chrome控制台重复发出ajax请求时
- "未捕获类型错误/丢弃意外“;因为一句台词而出现?(HTML w/<脚本>）
- 我该如何解决“;未捕获引用错误:谷歌没有定义"?(谷歌地图API）
- "未捕获的语法错误:意外的标记<"当尝试使用谷歌'核心报告API
- 用分隔符分隔具有多个整数值的字符串的Javascript"重试错误的值
- 语法错误:"意外的标记<"在Web控制台中
- "所请求的名称已经作为不同类型的“”存在;HTTP 409响应错误
- "responsed_to|format|“;引发UnknownFormat错误
- 为什么我得到“;错误:预期"同时访问字符串
- "未定义不是函数“;错误jQuery，.replaces，scrollTop
- 我收到一个类型错误，其中包含-"$不是函数“;使用noConflict时
- "属性描述必须是对象“”;错误
