Angular ngRoute 无法查看答案

【问题标题】：Angular ngRoute cannot get viewAngular ngRoute 无法查看
【发布时间】：2014-10-17 07:58:31
【问题描述】：

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

【问题讨论】：

您的代码似乎是正确的。你在哪个系统上运行？ Angular 至少能找到控制器吗？

标签： angularjs ngroute angularjs-ng-route

【解决方案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>

【讨论】：

我按照示例修改了更改，但是每当我单击 href 元素时，我都会收到“无法获取 /Students”消息。任何提示表示赞赏:)
哦，你需要像这样/views/student_list.html这样的模板网址，我会更新答案
其实这不是问题，app.config 中的 $locationProvider 破坏了 angular 模块
你是否在 app.config 函数中添加了$locationProvider
重新添加。出于某种奇怪的原因，它正在破坏代码。不明白为什么。

【解决方案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

在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 切换视图。如果有人有更好的建议，请指教，谢谢！

【讨论】：