Угловой маршрут с $ routeProvider

Question

Я пытаюсь понять маршрутизацию, прежде чем приступать к созданию своего приложения, но он, похоже, не работает.

У меня есть базовое приложение для тестов, в которых я создал 3 html-файла, соответствующих 3 различным представлениям, и я хочу изменить отображаемое представление в зависимости от маршрутов.

Но я всегда вижу индексный вид.

Вот файлы:

app.js:

'use strict'; 

angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers']) 
.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: '../index.html' 
     }) 
     .when('/requests', { 
     templateUrl: '../views/requestsList.html' 
     }) 
     .when('/projects', { 
     templateUrl: '../views/projectsList.html' 
     }) 
     .otherwise({ 
     redirectTo: '/lol' 
     }); 

    }]); 

requestsController.js:

'use strict'; 

var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']); 

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) { 

    this.studentName = "Request"; 
    this.studentMark = 75; 

}); 

projectsController.js:

'use strict'; 

var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']); 

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) { 

    this.studentName = "Project"; 
    this.studentMark = 75; 

}); 

HTML-файлы являются почти то же самое, за исключением некоторых слов и для контроллера, связанного с каждым из них.

Вот несколько строк, которые изменяются между HTML WIEWS:

index.html:

index view 
<div class="row-fluid" ng-controller="requestsController as rc"> 
    <div class="span2">{{rc.studentName}} </div> 
</div> 

requestsList.html:

Request view 
<div class="row-fluid" ng-controller="requestsController as r"> 
    <div class="span2">{{r.studentName}} </div> 
</div> 

projectsList.html

Project view 
<div class="row-fluid" ng-controller="projectsController as p"> 
    <div class="span2">{{p.studentName}} </div> 
</div> 

Byt no ma Если вы добавили '/ projects' или '/ requests' к URL-адресу, я остаюсь на индексном представлении.

Любая идея, что я делаю неправильно?

Answer 1

Убедитесь, что у вас есть ng-view атрибут или набор элементов в вашем index.html. Если он отсутствует, маршрутизатор не будет работать.
Еще одна хорошая практика будет установить контроллер представления на маршрутизаторе, например, так:

$routeProvider 
    .when('<route_name>', { 
    templateUrl: '../<tempate>.html', 
    controller: '<controller_name>', 
    controllerAs: 'myController' 
    }) 

Answer 2

1. На базовой файл (обычно index.html), убедитесь, что у вас есть ng-view директиву, которая будет использоваться для загрузки всех частичных вида

2. всех ваши HTML шаблонов в том же месте, что и основной файл? Если да, вместо templateUrl как "../index.html" вы можете попробовать установить его на "/index.html". Первый проверяет файл html вне каталога, в котором находится базовый файл, а второй проверяет его в том же каталоге