AngularJS 应用程序配置“未捕获的对象"错误(ngRoute) | ngRoute![ngRoute]( "ngRoute")
本文介绍了AngularJS 应用程序配置“未捕获的对象"错误(ngRoute)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个简单的页面:
<头><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>投注应用</title><body ng-app='betsApp' ng-controller='betsAppCtrl'><h1>BetsApp</h1><ng-view></ng-view>
这是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:
<input type='text' ng-model='password' value={{password}}>
运行时我在控制台中收到此错误:
未捕获的对象 angular.js:78(匿名函数)angular.js:78(匿名函数)angular.js:3809forEach angular.js:323加载模块 angular.js:3775createInjector angular.js:3715doBootstrap angular.js:1379引导程序 angular.js:1394angularInit angular.js:1307(匿名函数)angular.js:21459n.Callbacks.j jquery.js:3073n.Callbacks.k.fireWith jquery.js:3185n.extend.ready jquery.js:3391
代码永远不会到达这一行:
$locationProvider.html5mode(true);$routeProvider.when('/login', {templateUrl:'pages/login.html'});
我做错了什么?
更新:这是我从调试角度得到的一些消息:
第 78 行，第 1 列暂停捕获异常观察表达式平台:data.data:调用 StackAsyncangular.js:78(匿名函数)angular.js:3809(匿名函数)angular.js:323为每个angular.js:3775加载模块angular.js:3715创建注入器angular.js:1379doBootstrapangular.js:1394引导程序angular.js:1307角度初始化angular.js:21459(匿名函数)jquery.js:3073n.Callbacks.jjquery.js:3185n.Callbacks.k.fireWithjquery.js:3391n.扩展就绪jquery.js:3407一世在 JavaScript 断点处暂停.范围变量当地的参数:参数[4]代码:modulerr"我:4消息:[$injector:modulerr] 无法实例化模块 betsApp 由于:↵错误:[$injector:unpr] 未知提供者:$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)↵ 在 Object.invoke (http://localhost:8000/bower_components/angular/angular.js:3859:13)↵ 在 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)↵ atdoBootstrap (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%3A20%A78%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%2Fbower_components%2Fangular%2Fangular.js%%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3832%3A39)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fbower_components%2Fang3A3859%3A13)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3788%3A37%0A%20%20%20%20%20%20%20%20%20(原生)%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%3A3711%)%020%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A1379%3A20)"前缀:[$injector:modulerr]"字符串化:函数(对象){模板:无法实例化模块 {0}，原因是:↵{1}"templateArgs:参数[4]这:未定义关闭关闭窗户全球的断点angular.js:78错误信息);应用程序.js:4.html5mode(true);应用程序.js:5.when('/login', {templateUrl:'pages/login.html'});DOM 断点XHR 断点事件侦听器断点工人"[$injector:modulerr] 无法实例化模块 betsApp 由于:错误:[$injector:unpr] 未知提供者:$routeProviderhttp://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider在 http://localhost:8000/bower_components/angular/angular.js:78:12在 http://localhost:8000/bower_components/angular/angular.js:3705:19在 getService (http://localhost:8000/bower_components/angular/angular.js:3832:39)在 Object.invoke (http://localhost:8000/bower_components/angular/angular.js:3859:13)在 http://localhost:8000/bower_components/angular/angular.js:3788:37在 Array.forEach(本机)在 forEach (http://localhost:8000/bower_components/angular/angular.js:323:11)在 loadModules (http://localhost:8000/bower_components/angular/angular.js:3775:5)在 createInjector (http://localhost:8000/bower_components/angular/angular.js:3715:11)在 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_angcomponent%2FboFbo%2Fangular.js%3A78%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fbower_components%2Fangular%2Fangular.js%3A3705%3A19%0A%20%200at%2%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%2Fbower_components%2Fangular.78%3A13A%20%2A%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_components%2Fang73%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']);
如果您使用的是 bower，则可以使用以下命令下载 ngRoute 模块:
bower 安装 angular-route
I have this simple page:
<!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>
this is the aplication.js file:
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 = "";
});
and here is the login.html:
<div>
<input type='text' ng-model='password' value={{password}}>
</div>
When running I am getting this error in console:
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
the code never gets to this lines:
$locationProvider.html5mode(true);
$routeProvider.when('/login', {templateUrl:'pages/login.html'});
What have I done wrong?
Update:here is some message I am getting from debugging 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)"
解决方案
In v1.2+, ngRoute is a separate module and should be loaded independently (and also declared as a dependency of your main module).
<script src='bower_components/angular/angular.js'></script>
<script src='bower_components/angular/angular-route.js'></script>
var betsApp = angular.module('betsApp', ['ngRoute']);
这篇关于AngularJS 应用程序配置“未捕获的对象"错误(ngRoute)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-15 23:45