Загрузка страниц с помощью ng-view не работает

Я работаю над своим первым маршрутизатором AngularJS, используя редактор Brackets, чтобы протестировать его на локальном хосте (я понимаю, что он не будет работать на моей локальной машине). Включаемые файлы работают нормально, но не загружаются все 5 файлов HTML. Ознакомьтесь со всеми кодами на Plunker. Я не понимаю, чего не хватает.

HTML

<head>
<title>Welcome!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="myApp">

<!-- header section -->
<div ng-include="'header.html'"></div>

<br><br>

<!-- views section -->
<div ng-view>View pages here...</div>

<br><br>

<!-- footer section -->
<div ng-include="'footer.html'"></div>

</body>

script.js

var app = angular.module('myApp', ['ngRoute'])

.config(function($routeProvider) {
$routeProvider.when('/1', {
    templateUrl: '1.html'
})
$routeProvider.when('/2', {
   templateUrl: '2.html'
})
$routeProvider.when('/3', {
    templateUrl: '3.html'
})
$routeProvider.when('/4', {
   templateUrl: '4.html'
})
$routeProvider.when('/5', {
    templateUrl: '5.html'
})
});

person Christian Luneborg    schedule 17.04.2018    source источник
comment
Вопрос показывает AngularJS V1.6, но PLNKR использует V1.2. Это вопрос версии 1.6 или вопрос версии 1.2? Это важно, потому что префикс hashbang по умолчанию изменился между двумя версиями.   -  person georgeawg    schedule 04.08.2018


Ответы (1)


Просто измените href="#/1" на href="#!1"

<div>
    <a href="#!1">One</a>
    <a href="#!2">Two</a>
    <a href="#!3">Three</a>
    <a href="#!4">Four</a>
    <a href="#!5">Five</a>
</div>
person Luillyfe    schedule 17.04.2018
comment
Да, это работает, но это странно. Он работает на ‹plnkr.co/edit/f09xYs24HThNT3Nfntp4?p=preview› без !. - person Christian Luneborg; 17.04.2018
comment
Префикс hash bang по умолчанию был изменен в V1.6. Для получения дополнительной информации см. Руководство разработчика AngularJS — переход на версию 1.6 — $location. - person georgeawg; 18.04.2018
comment
Да, я собирался это прокомментировать. В этом первом плункере у вас была версия 1.6.4, а теперь вы изменили ее на 1.2.3. - person Luillyfe; 18.04.2018
comment
Да, я изменил его, он работает на Plunker, но мой настоящий проект все еще показывает пустую страницу. - person Christian Luneborg; 18.04.2018