Оглавление:
Карта сайта:
Оглавление:
Карта сайта:
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>