2

我正在尝试在应用程序中使用 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 文档。谢谢你。

4

2 回答 2

9

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

<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);. 检查此处的示例以了解如何避免使用#. 另外，请参阅此。该演示说：

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>
于 2014-10-17T08:10:24.153 回答
2

我也有同样的问题。经过几个小时的努力，我终于把它弄好了。

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

因此，您设计 index.html 的方式是在顶部或底部保留一个“通用”核心部分

<ng-view></ng-view>

路由服务中的“否则”部分将放置默认的 html 视图——即 index.html 的起始内容；或者，您将整个内容放在单独的视图文件中以加载到 index.html 中，例如我的代码：

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

默认视图 main_view.html 将包含来自“主”控制器的内容。这是路由器：

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>

注意'#'是告诉AngularJS我想把“/view/archive.html”放回它到目前为止知道的原始SPA（因为只有一个ng-app）。没有'#'，你会得到同样的错误：Cannot GET /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 切换视图。如果有人有更好的建议，请指教，谢谢！

于 2014-10-25T19:17:41.277 回答