登录
当前位置： 首页 > 面试题库 >

AngularJS应用程序配置“未捕获的对象”错误（ngRoute）

燕元明
2023-03-14
问题内容：

我有这个简单的页面：

<!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'});

我做错了什么？

更新： 这是我从调试角度获得的一些消息：

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']);

如果您使用的是凉亭，则可以ngRoute使用以下命令下载该模块：
bower install angular-route



 类似资料：
  • 运行时错误-未捕获（promise）：[对象对象]

    我用这个例子来理解ionic和php与mysql之间的操作，但我发现这个错误在我看来似乎是错误的，我不明白它来自哪里。奇怪的是，当我加载一个便笺时，它会工作，并加载到数据库中。 他离开了存储库，以防他们想要可视化代码https://github.com/javazika/ionic_crud_php_msqyl

  • 应用程序错误：此版本的应用程序未为Google Play配置

    当我开始我的购买流程的时候，我在测试我的应用程序帐单时，我收到了这个错误信息。我在进入google play商店后看到了这条消息。 我已经通读了所有其他的帖子，这些帖子都是关于这个错误的。

  • 未捕获引用错误：未定义进程

    我正在使用node。js创建一个web应用程序。运行应用程序时（通过在浏览器上打开index.html或在终端上使用“npm start”命令），会出现两个错误： 未捕获引用错误：未定义进程 未捕获引用错误：未定义require 我解决了“require is not defined”错误，特别是在我的索引中加入了。html头标记指向此脚本的链接，其中定义了require函数。但是，我找不到与pr

  • 使用spring security saml的应用程序中未配置IDP错误

    我正在基于上的示例代码编写一个带有Spring Boot和Spring Security SAML的web应用程序https://github.com/vdenotaris/spring-boot-security-saml-sample.当我尝试访问应用程序中的安全URL时，出现以下异常： 我正在按如下方式配置IDP： 从调试输出来看，IDP似乎已配置： 我到底做错了什么？

  • Azure Active directory的应用程序配置错误

    我正在我的ionic应用程序3中实现微软ADAL插件，因此我已经在微软azure上创建了一个帐户，并在azure门户中注册了我的应用程序。在所有必要的配置后，我使用了应用程序凭据在我的离子，但它通过配置错误。

  • 未捕获类型错误：对象（…）（…）。类不是函数

    无法理解为什么在尝试实现此角度代码时会出现TypeError。它在类（｛constructor:function（）｛｝｝）周围生成错误。不确定原因。谢谢你的帮助

相关阅读

AngularJS错误：$ injector：unpr未知提供程序Dropzone-未捕获的错误：未提供URLAngular JS未捕获错误：[$ injector：modulerr]AngularJS应用中的$ timeout未定义错误AngularJS错误：未知提供程序：aProvider <-a

相关文章

jQuery 捕获JSP内置对象Spring Batch应用程序JavaScript之继承（面向对象的程序设计）对象怎么定位？对象怎么分配？

相关问答

未捕获类型错误：对象（…）（…）。类不是函数未捕获错误：无法将WP_Post类型的对象用作数组未捕获的引用错误：未定义jsPDFJava未捕获ContextException错误致命错误：未捕获错误：对未定义函数的调用是_product（）

相关工具

ios应用程序开发框架用ruby写的采集程序小鸡软件工作室应用程序保护系统AngularJSSPT 对象数据库

相关文档

马上着手开发 iOS 应用程序Perl 程序员应该知道的事AngularJS 入门教程AngularJS 中文教程GitBook 安装配置使用
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.