Оглавление:
Карта сайта:
Оглавление:
Карта сайта:
Это старая версия документа!
Html5 mode превращает angularjs routes из вида example.com/#!/home в вид example.com/home (все href ссылки должны также указывать на url без hashbang). Чтобы включить html5mode нужно выполнить:
$locationProvider.html5Mode(true); $locationProvider.hashPrefix('!');
Теперь необходимо чтобы наш nginx сервер отправлял запросы с example.com/home на главный index.html файл приложения. Для этого укажем в конфиге следующую директиву:
location / { expires -1; add_header Pragma "no-cache"; add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"; root /var/web; try_files $uri $uri/ /index.html =404; }
Строка try_files $uri $uri/ /index.html =404; означает что теперь все несуществующие url будут переадресованы на index.html файл, сохранив при этом url в адресной строке браузера.
Это решение уже является рабочим (а также совместимым с старым hashbang форматом ссылок) и если ваше приложение не должно индексироваться поисковыми системами то можно закончить.
пример
'use strict'; (function(){ var app = angular.module('MyApp', ['ngRoute']); app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when('/', { controller: 'BooksController', templateUrl: 'templates/books.html' }) .when('/book/:id', { controller: 'BookController', templateUrl: 'templates/book.html' }) .when('/404', { templateUrl: 'templates/404.html' }) .otherwise({redirectTo: '/404'}); }]); })();
<h1>Список книг</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Название</th>
<th>Автор</th>
<th>Год</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{$index + 1}}</td>
<td><a href="book/{{book.id}}">{{book.title | myFilter : '!' : '?'}}</a></td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
<td>{{book.price | currency : 'руб.' : 0}}</td>
</tr>
</tbody>
</table>