AngularJS应用程序配置"未捕获的对象"错误（ngRoute） [英] AngularJS application config "Uncaught object" error (ngRoute)

查看：90 发布时间：2018/6/14 18:18:22 javascript html angularjs url-routing

本文介绍了AngularJS应用程序配置"未捕获的对象"错误（ngRoute）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个简单的页面：

 <！doctype html> 
< html> 
< head> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> 
< meta name =viewportcontent =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> 
< / 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（函数（$ routeProvider，$ locationProvider）{
 $ locationProvider.html5mode（true）; 
 $ routeProvider.when（'/ login'，{templateUrl： 'pages / login.html'}）; 
}）; 
 
 betsApp.controller（'betsAppCtrl'，函数（$ scope）
 {
 $ scope.password =; 
 $ scope.email =; 
}）;

这里是 login.html ：

 < div> 
< input type ='text'ng-model ='password'value = {{password}}> 
< / div>

运行时，我在控制台中收到此错误：

 未捕获的对象angular.js：78 
（匿名函数）angular.js：78 
（匿名函数）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 
（匿名函数）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'}）; b 
 
 
 $ b  更新： 
这里是我从调试角度得到的一些消息： 
 
 
 第78行，第1列
 
暂停发现异常
 
观看表达式
平台：< not available> 
 data.data：<不可用> 
调用StackAsync 
 angular.js：78 
（匿名函数）
 angular.js：3809 
（匿名函数）
 angular.js：323 
 forEach 
 angular.js：3775 
 loadModules 
 angular.js：3715 
 createInjector 
 angular.js：1379 
 doBootstrap 
 angular.js：1394 
ootstrap 
 angular.js：1307 
 angularInit 
 angular.js：21459 
（匿名函数）
 jquery.js：3073 
 n.Callbacks.j 
 jquery.js：3185 
 n.Callbacks.k.fireWith 
 jquery.js：3391 
 n.extend.ready 
 jquery.js：3407 
 I 
暂停JavaScript断点。 
范围变量
本地
参数：参数[4] 
代码：modulerr
i：4 
消息：[$ injector：modulerr] Failed由于以下原因实例化模块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在http：// localhost：8000 / bower_components / angular / angular.js：3705：19在getService（http：// localhost：8000 / bower_components在http：// localhost：8000 / bower_components / angular处使用Object.invoke（http：// localhost：8000 / bower_components / angular / angular.js：3859：13）处的/angular/angular.js:3832:39)↵ /elerative.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：1 1）doBootstrap（http：// localhost：8000 / bower_components / angular / angular.js：1379：20）↵http：//errors.angularjs.org/1.2.16/$injector/modulerr？p0 = betsApp& P1 =错误％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％20原子％20http％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A78 3A12％％0A％20％20％20％20原子％20http％3A％ 2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3705％3A19％0A％20％20％20％20原子％20getService％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％ 3A3832％3A39）％0A％20％20％20％20原子％20Object.invoke％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3859％3A13）％0A％20％20％ 20％20原子％20http％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3788％3A37％0A％20％20％20％20原子％20Array.forEach％20（天然）％0A％20％20 ％20％20原子％20forEach％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_compo堂费％2Fangular％2Fangular.js％3A323％3A11）％0A％20％20％20％20个原子％20loadModules％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3775％3A5）％ 0A％20％20％20％20原子％20createInjector％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3715％3A11）％0A％20％20％20％20原子％20doBootstrap％20 （$％$ 3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A1379％3A20）
 prefix：[$ injector：modulerr]
 stringify：function（obj）{
模板：由于以下原因，无法实例化模块{0}：
 templateArgs：参数[4] 
 this：undefined 
 Closure 
 Closure 
窗口
全局
断点
 angular.js：78 
错误（消息）; 
 application.js：4 
 .html5mode（true）; 
 application.js：5 
 .when（'/ login'，{templateUrl：'pages / login.html'}）; 
 DOM断点
 XHR断点
事件监听器断点
工作
[$ injector：modulerr]由于以下原因，未能实例化模块betsApp：
错误： $ injector：unpr]未知提供者：$ routeProvider 
 http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeProvider 
在http：// localhost：8000 /在http：// localhost：8000 / bower_components / angular / angular.js：3705：19处获得bower_components / angular / angular.js：78：12 
 getService（http：// localhost：8000 / bower_components / angular / angular.js：3832：39）
在Object.invoke（http：// localhost：8000 / bower_components / angular / angular.js：3859：13）
 at http：// localhost：8000 / bower_components / angular / angular.js：3788：37 
在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）
在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 / $注射器/ modulerr P0 = betsApp&安培; P1 =错误％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％20原子％20http％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A78 3A12％％0A ％20％20％20％20原子％20http％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3705％3A19％0A％20％20％20％20原子％20getService％20（HTTP％3A％2F ％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3832％3A39）％0A％20％20％20％20原子％20Object.invoke％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular。 JS％3A3859％3A13）％0A％20％20％20％20原子％20http％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3788％3A37％0A％20％20％20％20原子％20Array .forEach％20（天然）％0A％20％20％20％20原子％20forEach％20（HTTP％3A％2F％2Flocalh OST％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A323％3A11）％0A％20％20％20％20个原子％20loadModules％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3775 ％3A5）％0A％20％20％20％20原子％20createInjector％20（HTTP％3A％2F％2Flocalhost％3A8000％2Fbower_components％2Fangular％2Fangular.js％3A3715％3A11）％0A％20％20％20％20原子％20doBootstrap％20（http％3A％2F％2Flocalhost％3A8000％2Fower_components％2Fangular％2Fangular.js％3A1379％3A20）
  
 
 
解决方案
在v1.2 +中，   ngRoute   是一个单独的模块，应该独立加载（并声明为主模块的依赖）。 b 
 $ b 
 < 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 install 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']);




_{If you are using bower, you can download the ngRoute module with the following command:

bower install angular-route}

                        这篇关于AngularJS应用程序配置&quot;未捕获的对象&quot;错误（ngRoute）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularJS应用程序配置"未捕获的对象"错误（ngRoute） [英] AngularJS application config "Uncaught object" error (ngRoute)

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS应用程序配置&quot;未捕获的对象&quot;错误（ngRoute） [英] AngularJS application config &quot;Uncaught object&quot; error (ngRoute)

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

AngularJS应用程序配置"未捕获的对象"错误（ngRoute） [英] AngularJS application config "Uncaught object" error (ngRoute)

登录关闭