Angularjs 无法获取视图_Angularjs_Ngroute_Angularjs Ng Route

Angularjs 无法获取视图

angularjs

Angularjs 无法获取视图,angularjs,ngroute,angularjs-ng-route,Angularjs,Ngroute,Angularjs Ng Route,我试图在一个应用程序中使用Angular的路由机制，但是点击元素会导致路由，我得到一个无法获取viewName的视图，其中viewName是任意视图这是我的app.js脚本文件： var app = angular.module('actsapp', ['ngRoute']); //Define Routing for app app.config(['$routeProvider', function($routeProvider) { $routeProvider

我试图在一个应用程序中使用Angular的路由机制，但是点击元素会导致路由，我得到一个无法获取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文档。谢谢。

您需要添加如下所示的

来处理路由：

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

他认为：

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

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

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

因此，您设计index.html的方式是，要么将“公共”核心部分放在页面的顶部，要么放在页面的底部

<ng-view></ng-view>

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

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

最终结果是：

123                456

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

您的代码似乎是正确的。你在哪个系统上运行？Angular是否至少找到了控制器？我按照示例修改了更改，但是每次单击href元素时，我都会收到一条“Cannot GET/Students”消息。任何提示都很感谢：）哦，你需要像这样模板URL

/views/student_list.html

我会更新答案事实上这不是问题，app.config中的$locationProvider打破了角度模块。你可以在app.config函数中添加

$locationProvider

，然后重新添加它。出于某种奇怪的原因，它破坏了密码。我不明白为什么。

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"
    });
});

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

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

123                456