Angularjs, роутинг. Как убрать хеш теги из ссылок, сохранив возможность обновления страницы?

Есть код конфига
app.config(['$routeProvider', '$locationProvider',
	function($routeProvider, $locationProvider) {
		$routeProvider.otherwise({redirectTo: '/'});
		$routeProvider
			.when('/', {
				templateUrl: 'views/view.html',
				controller: 'View1Ctrl'
			})
			.when('/view1', {
				templateUrl: 'views/view1.html',
				controller: 'View1Ctrl'
			})
			.when('/:testId', {
				templateUrl: 'views/view2.html',
				controller: 'View2Ctrl'
			});
		$locationProvider.html5Mode(true);
}]);

Код html
<head>
  <base href='/test/app/' />
</head>
<body ng-app="app">

  <ul class="menu">
    <li><a href="#/">view</a></li>
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/12">view2</a></li>
  </ul>
 <div ng-view></div>
</body>
</html>


Все работает отлично, хешей в ссылках не видно, переходы вперед-назад работают, но при обновлении/перезагрузке страницы на ссылке вида localhost/test/app/view1 вылетает ошибка, что такая страница не найдена.

Если убрать строку $locationProvider.html5Mode(true); в ссылках появляются хеш теги - #, и страницы корректно обновляются.

Как сделать, чтобы ссылки были красивые и обновление нормально работало?
  • Вопрос задан
  • 4343 просмотра
Пригласить эксперта
Ответы на вопрос 3
AMar4enko
@AMar4enko
Зависит от того, где запускаете. Если, например, за nginx, то в нем в конфигурации прописывают специальное правило, которое исходя из User-Agent по всем роутам показывает index.html, а angularjs по location сам все разруливает.
Ну и во всех остальных случаях подход аналогичный.
Просто иногда бывает нужно "живому" пользователю отдать angularjs приложение, а поисковому роботу заранее подготовленную статику. Если роботы вас пока не интересуют, то просто вне зависимости от url отдавайте index.html
Ответ написан
Комментировать
ayyjay
@ayyjay
PHP - Разработчик, верстальщик
RewriteEngine On
RewriteBase /test/app/
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /test/app/index.html
Ответ написан
Комментировать
Люди, кому интересна эта тему прошу заценить мой deep-ngroute с динамическими страничками. Делал под себя, поэтому чего-то может не хватать!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы