Question

我正在尝试在应用程序中使用Angular的路由机制，但是在点击应该导致路由的元素时，我得到的是一个无法GET viewName，其中viewName是任何视图。

这是我的app.js脚本文件：

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

//Define Routing for app
app.config(['$routeProvider',
   function($routeProvider) {
      $routeProvider
      .when('/', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/Students', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
            templateUrl: 'views/register_student.html',
            controller: 'StudentRegistrationController'
       });
  }]);

 app.controller('StudentListController', function($scope) {    
    $scope.message = 'This is student list screen';
 });


app.controller('StudentRegistrationController', function($scope) {
    $scope.message = 'This is student registration screen'; 
});

这是我的index.html：

<!DOCTYPE html>
<html ng-app="actsapp">

<head>
    <title></title>
    <link href="style/style.css" rel="stylesheet" />
    <link href="style/bootstrap.css" rel="stylesheet" />

    <script src="scripts/jquery-1.js"></script>
    <script src="scripts/angular/angular.js"></script>
    <script src="scripts/angular/angular-route.js"></script>
    <script src="scripts/angular/app.js"></script>
</head>

<body>
<div class="header">
    <div class="heading_wrap">
        <h1>Student Registration Form</h1>
    </div>
</div>
<div class="nav-wrap">
    <ul class="nav nav-acts-pills nav-stacked ">
        <li class="active">
            <a href="/Students">Student List</a>
        </li>
        <li>
            <a href="/RegisterStudent">Add Student</a>
        </li>
        <li>
            <a>Add Students (By School)</a>
        </li>
    </ul>
</div>

<div ng-view="" class="content-wrap" style="float:left;">
</div>
</body>

</html>

关于如何解决这个问题的任何建议都非常受欢迎。我的工作基于最新版本的ngRoute文档。谢谢。

Answer 1

您需要添加以下#来处理路由：

<li class="active">
    <a href="#/Students">Student List</a>    // add #
</li>
<li>
    <a href="#/RegisterStudent">Add Student</a>    // add #
</li>

在.js文件中，templateUrl应该是：/views/student_list.html。

但是，如果您需要没有#的路线，则需要添加$locationProvider.html5Mode(true);。查看示例here，了解如何避免使用#。另请参阅this。该演示说：

app.config(['$routeProvider',
   function($routeProvider,$locationProvider) {
  $routeProvider
      .when('/', {
        templateUrl: '/views/student_list.html',   // urls should be like this
        controller: 'StudentListController'
      })
      .when('/Students', {
        templateUrl: '/views/student_list.html',  // urls should be like this
        controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
        templateUrl: '/views/register_student.html',     // urls should be like this
        controller: 'StudentRegistrationController'
       });
       $locationProvider.html5Mode(true);
  }]);    ]

在视图中：

    <li class="active">
        <a href="/Students">Student List</a>
    </li>
    <li>
        <a href="/RegisterStudent">Add Student</a>
    </li>

Answer 2

我也有同样的问题。经过几个小时的研究，我终于明白了。

AngularJS是基于SPA（单页面应用程序）的概念设计的。因此，所有视图都应围绕与ng-app关联的主index.html构建。注意：我尝试通过创建两个不同的ng-app名称来解决这个问题，这样，当我href到B.html时，可以加载ng-app =＆＃34; B＆＃34;，而留下index.html使用ng-app =＆＃34; A＆＃34;背后。它没有用--Angular仍在寻找＆＃34; A＆＃34; - 有例外。

因此，您设计index.html的方式是保持一个共同的＆＃39;

的顶部或底部的核心部分

<ng-view></ng-view>

其他地方＆＃39;路由服务中的部分将放置默认的html视图 - 即你的index.html的起始内容;或者，将整个内容放在单独的视图文件中以加载到index.html中，例如我的代码：

<body ng-app="YouTiming">
    <div ng-controller="Main">
        <ng-view></ng-view>
    </div>
</body>

默认视图main_view.html将包含来自＆＃39; Main＆＃39;的内容。控制器。这是路由器：

angular.module("YouTiming", ["customFilter", "ngRoute"])
.config(function ($routeProvider) {
    $routeProvider
    .when("/archive", {
        templateUrl: "/view/archive.html"
    })
    .when("/edit-portfolio", {
        templateUrl: "/view/edit-portfolio.html"
    })
    .otherwise({
        templateUrl: "/view/main_view.html"
    });
});

然后，在main_view.html中，我有href：

<a ng-href="#/archive">Archive</a>

注意＆＃39;＃＆＃39;是告诉AngularJS我要放置＆＃34; /view/archive.html"回到目前为止知道的原始SPA（因为只有一个ng-app）。如果没有＆＃39;＃＆＃39;，您将收到相同的错误：Cannot GET /archive

在archive.html中：

<div>
    <div class="col-sm-6">
        123
    </div>
    <div class="col-sm-6">
        456
    </div>
</div>

最终结果：

123                456

接下来的问题是如何在同一SPA中的多个视图之间切换焦点视图。这是我要解决的下一个问题，但我认为你可以在$ scope中设置一些东西，通过使用ng-show或ng-hide来切换视图。如果有人有更好的建议，请告知，谢谢！

Angular ngRoute无法获取视图

2 个答案: