Угловой ngRoute не может получить вид

Я пытаюсь использовать механизм маршрутизации 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. Спасибо.

Источник

2 ответа

Решение

Вам нужно добавить # как ниже для работы маршрутизации:

<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>
Источник

У меня тоже такая же проблема. Поработав над этим часами, я наконец-то все понял.

AngularJS разработан по концепции SPA (одностраничное приложение). Поэтому все представления должны быть построены вокруг основного index.html, связанного с ng-app. Примечание. Я попытался обойти его, создав два разных имени ng-app, чтобы при переходе к B.html, который затем может загрузить ng-app="B", а в index.html оставить ng-app = "А" позади. Это не сработало -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, будет иметь содержимое из контроллера 'Main'. Вот маршрутизатор:

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-приложение). Без '#' вы получите ту же ошибку: 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. Если у кого-то есть лучшее предложение, пожалуйста, сообщите, спасибо!

Источник
Другие вопросы по тегам