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

25-03-21 8

在本文中，我们将给您介绍关于AngularJS应用程序配置“未捕获的对象”错误的详细内容，并且为您解答ngRoute的相关问题，此外，我们还将为您提供关于angularjsngRoute和ui.rou

在本文中，我们将给您介绍关于AngularJS应用程序配置“未捕获的对象”错误的详细内容，并且为您解答ngRoute的相关问题，此外，我们还将为您提供关于angularjs ngRoute和ui.router对比、angularjs ui-router-如何建立跨应用程序全局的主状态、angularjs – AngualrJS routeProvider路由到错误的模板、angularjs – Angular ngRoute – 如果手动输入url,则无法获取页面的知识。

本文目录一览：

AngularJS应用程序配置“未捕获的对象”错误（ngRoute）（angular全局捕获异常）
angularjs ngRoute和ui.router对比
angularjs ui-router-如何建立跨应用程序全局的主状态
angularjs – AngualrJS routeProvider路由到错误的模板
angularjs – Angular ngRoute – 如果手动输入url,则无法获取页面

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

我有这个简单的页面：

<!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:3809forEach angular.js:323loadModules angular.js:3775createInjector angular.js:3715doBootstrap angular.js:1379bootstrap angular.js:1394angularInit angular.js:1307(anonymous function) 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''});

我做错了什么？

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

Line 78, Column 1Pause On Caught ExceptionsWatch ExpressionsPlatform: <not available>data.data: <not available>Call StackAsyncangular.js:78(anonymous function)angular.js:3809(anonymous function)angular.js:323forEachangular.js:3775loadModulesangular.js:3715createInjectorangular.js:1379doBootstrapangular.js:1394bootstrapangular.js:1307angularInitangular.js:21459(anonymous function)jquery.js:3073n.Callbacks.jjquery.js:3185n.Callbacks.k.fireWithjquery.js:3391n.extend.readyjquery.js:3407IPaused on a JavaScript breakpoint.Scope VariablesLocalarguments: Arguments[4]code: "modulerr"i: 4message: "[$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: undefinedClosureClosureWindowGlobalBreakpointsangular.js:78Error(message);application.js:4.html5mode(true);application.js:5.when(''/login'', {templateUrl:''pages/login.html''});DOM BreakpointsXHR BreakpointsEvent Listener BreakpointsWorkers"[$injector:modulerr] Failed to instantiate module betsApp due to:Error: [$injector:unpr] Unknown provider: $routeProviderhttp://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)"

答案1

小编典典

在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

angularjs ngRoute和ui.router对比

ngRoute模块是angularjs自带的路由模块，ui.router是一个第三方路由模块，接下来将对两者进行一个对比：

ng-router(angular-router.js) ng-view ngRoute模块 $routeProvider服务 .when() .otherwise();

ui-router(angular-ui-router.js) ui-view ui.router模块 $stateProvider服务 .state() ,$urlRouterProvider服务 .otherwise();

ng-router:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- html -->
<ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>

//js
angular.module(''myApp'', [''ngRoute''])
.config([''$locationProvider'', ''$routeProvider'',function($locationProvider, $routeProvider){
    $locationProvider.html5Mode(false).hashPrefix('''');
    $routeProvider
     .when(''/view1'', {
         templateUrl: ''view1/view1.html'',
         controller: ''View1Ctrl''
     })
     .when(''/view2'', {
         templateUrl: ''view2/view2.html'',
         controller: ''View2Ctrl''
     })
     .otherwise({redirectTo: ''/view1''});
}])

ui-router:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

<!--html-->
<ul class="menu">
    <li><a ui-sref="state1">state1</a></li>
    <li><a ui-sref="state2">state2</a></li>
</ul>
<div ui-view></div>

//js
angular.module(''myApp'', [''ui.router''])
.config([''$stateProvider'',''$urlRouterProvider'',function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise(''/state2'');
    // ui-router state配置
    $stateProvider.state(''state1'',{
        url: "/state1",
        templateUrl: "view1/view1.html",
        controller: ''View1Ctrl''
    }).state(''state2'',{
        url: "/state2",
        templateUrl: ''view2/view2.html'',
        controller: ''View2Ctrl''
    });
}])

angularjs ui-router-如何建立跨应用程序全局的主状态

<html ng-app="app">
<head>
...
</head>
<body>
  <div id="header"></div>
  <div id="notification"></div>
  <div id="container"></div>
  <div id="footer"></div>
</body>
</html>

使用应用程序的给定结构（源自angular-app）：

标头：这里是网站导航，登录/退出工具栏等。它是动态的，具有自己的控制器
notification：全局通知容器。
容器：这曾经是我的<ng-view>。这就是所有其他模块的加载位置。
页脚：全局页脚。

状态层次结构如何？我已经看过了显示单个模块（联系人）的示例，但是通常一个应用程序将具有全局（根）状态，而在根状态内部则呈现其他模块状态。

我在想的是我的app模块可能具有root状态，然后每个模块都应该具有其自己的状态，而我必须从状态继承root。我对吗？

同样从ui- state示例中，它们既使用了$routeProvider，$urlRouterProvider也$stateProvider定义了url。我的理解是$stateProvide还处理路由。如果输入错误，应该使用哪个提供商进行路由？

编辑
：http：//plnkr.co/edit/wqKsKwFq1nxRQ3H667LU？p
= preview

谢谢！

angularjs – AngualrJS routeProvider路由到错误的模板

我的app.js文件中有以下两条路由,由于某种原因我不知道何时尝试导航到/ clients / new-invoice我看到/ clients /：clientID路由和模板.我可以转到正确页面的唯一方法是删除/ clients /：clientID路由.

此外,我注意到只有在我将：clientID添加到下面的路由后才开始发生这种情况.

有人可以通过告诉我我在这里做错了什么来帮助我吗？

$routeProvider.when('/clients/:clientID',{     templateUrl: 'templates/client-profile-view.html',controller: 'ClientsController',title: 'Client Profile',data: {
                     auth: true,plevel: [5] 
                  }                
            });    


    $routeProvider.when('/clients/new-invoice',{     templateUrl: 'templates/new-invoice.html',controller: 'InvoicesController',title: 'New Invoice',plevel: [5] 
                  }                
            });

解决方法

您只需更改订单,在/ clients / new-invoice之后放置/ clients /：clientID.订单很重要.应在静态路径之后定义所有正则表达式路径.

angularjs – Angular ngRoute – 如果手动输入url,则无法获取页面

我是AngularJS的初学者并且有以下问题.我正在玩ngRoute模块,到目前为止这是我的代码：

HTML：

<nav ng-controller="navController as nav">
    <ul>
        <li ng-repeat="item in navItems">
            <a href="{{ item.url }}">{{ item.name }}</a>
        </li>
    </ul>
</nav>


<div id="main">
    <div ng-view></div>
</div>

app.js

(function(window) {

    var app = angular.module('app',['ngRoute']);

    app.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
        $routeProvider
            .when('/',{
                templateUrl : 'pages/home.html',controller  : 'mainController'
            })
            .when('/contact',{
                templateUrl : 'pages/contact.html',controller  : 'contactController'
            });

        if (window.history && window.history.pushState) {
            $locationProvider.html5Mode(true);
        }
    }]);


    app.controller('mainController',['$scope',function($scope) {
        $scope.message = 'Hello from home page';
    }]);


    app.controller('contactController',function($scope) {
        $scope.message = 'Hello from contact page';
    }]);

    app.controller('navController',function($scope) {
        $scope.navItems = [
            { name: 'Home',url: '/' },{ name: 'Contact',url: '/contact' }
        ];
    }]);

})(window);

它工作正常. Angular渲染菜单,当我点击链接时,它会显示我想要的页面.但除以下情况外.当它显示主页(网址：http://localhost:3000)并且我手动添加到网址“/ contact”时,我得到空白页面,错误“无法获取/联系”.有人可以解释一下为什么会发生这种情况,我该如何解决？我将不胜感激任何帮助.谢谢.

解决方法

实际上,对于非HTML5浏览器,您需要#(#标签).

否则,他们只会在提到的href上对服务器进行HTTP调用. #是一个旧的浏览器短路,它不会触发请求,这允许许多js框架在其上构建自己的客户端重新路由.

您可以使用$locationProvider.html5Mode(true)告诉angular使用HTML5策略(如果可用).

这里是支持HTML5策略的浏览器列表：http://caniuse.com/#feat=history

资料来源：AngularJS routing without the hash ‘#’

关于AngularJS应用程序配置“未捕获的对象”错误和ngRoute的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于angularjs ngRoute和ui.router对比、angularjs ui-router-如何建立跨应用程序全局的主状态、angularjs – AngualrJS routeProvider路由到错误的模板、angularjs – Angular ngRoute – 如果手动输入url,则无法获取页面的相关知识，请在本站寻找。

本文标签：