Я изучаю AngularJS и там одна вещь, которая меня действительно раздражает.
Я использую $routeProvider для объявления правил маршрутизации для моего приложения:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
но когда я перехожу к моему приложению в браузере, я вижу app/#/test вместо app/test.
Итак, мой вопрос: почему AngularJS добавляет этот хеш # в URL? Есть ли возможность избежать этого?
На самом деле вам нужен # (хэштег) для браузеров без HTML5.
В противном случае они просто сделают HTTP-вызов на сервере по указанному href. # - это старый короткозамкнутый обозреватель, который не запускает запрос, что позволяет многим js-фреймворкам создавать собственные клиентские повторы поверх этого.
Вы можете использовать $locationProvider.html5Mode(true), чтобы сообщить angular использовать стратегию HTML5, если она доступна.
Вот список браузеров, поддерживающих стратегию HTML5: http://caniuse.com/#feat=history
Если вы включили html5mode, как говорили другие, и создайте файл .htaccess со следующим содержимым (скорректируйте свои потребности):
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
Пользователи будут перенаправлены в ваше приложение, когда они введут правильный маршрут, и ваше приложение прочитает маршрут и вернет их на правильную "страницу" внутри него.
РЕДАКТИРОВАТЬ: просто убедитесь, что конфликты с файлами или каталогами не конфликтуют с вашими маршрутами.
В Router в конце добавьте html5Mode (true);
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
В html head добавьте тег base
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
спасибо @plus - для подробного описания вышеуказанного ответа
попробуйте
$locationProvider.html5Mode(true)
Дополнительная информация на
$locationProvider
Использование $location
Следующая информация взята из:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
Очень легко получить чистые URL-адреса и удалить хэштег из URL-адреса в Angular.
По умолчанию, AngularJS будет маршрутизировать URL-адреса с хэштегом
Например:
Есть 2 вещи, которые нужно сделать.
Настройка $locationProvider
Установка нашей базы для относительных ссылок
$location Service
В Angular служба $location анализирует URL-адрес в адресной строке и вносит изменения в ваше приложение и наоборот.
Я бы очень рекомендовал прочитать официальные документы Angular $location, чтобы получить представление о службе определения местоположения и о том, что она предоставляет.
https://docs.angularjs.org/api/ng/service/$location
$locationProvider и html5Mode
Мы будем делать это при определении вашего приложения Angular и настройка маршрутов.
angular.module('noHash', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true); });
Что такое API истории HTML5? Это стандартизованный способ управления историей браузера с помощью script. Это позволяет Angular изменять маршрутизацию и URL-адреса наших страниц без обновления страницы. Для получения дополнительной информации об этом, вот хорошая статья API истории HTML5:
http://diveintohtml5.info/history.html
Настройка относительных ссылок
<base> в <head> вашего документа. Это может быть в
root index.html файла вашего приложения Angular. Найдите тег <base> и
установите его в корневой URL, который вы хотите использовать для своего приложения.Например: <base href="/">
Откат для старых браузеров
Заключение
Если вы хотите настроить это локально на OS X 10.8, обслуживая Angular с помощью Apache, то вы можете найти следующее в вашем файле .htaccess:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /~yourusername/appname/public/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
RewriteRule (.*) index.html [L]
</IfModule>
Параметры + FollowSymlinks, если они не установлены, могут дать вам запретную ошибку в журналах, например:
Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden
Требуется переписать базу, иначе запросы будут разрешены корневому серверу, который по умолчанию не является вашим каталогом проектов, если вы специально не настроили ваши vhosts, поэтому вам нужно установить путь, чтобы запрос нашел ваш корневой каталог проекта. Например, на моей машине у меня есть каталог /Users/me/Sites, где я сохраняю все свои проекты. Как и в старой ОС X.
Следующие две строки эффективно говорят, что путь не является каталогом или файлом, поэтому вам нужно убедиться, что у вас нет файлов или каталогов, аналогичных вашим маршрутам маршрутов вашего приложения.
Следующее условие говорит, что если запрос, не заканчивающийся указанными расширениями файлов, добавляет то, что вам нужно там
И последний [L] говорит, что он служит для файла index.html - вашего приложения для всех других запросов.
Если у вас все еще есть проблемы, проверьте журнал apache, это, вероятно, даст вам полезные советы:
/private/var/log/apache2/error_log
Как уже упоминалось выше, этапы -
Добавить <base href="/"> в index.html
Включить html5mode $location.html5Mode (true) в app.js.
При этом приложение будет работать хорошо. Но только в сценариях, когда вы перемещаетесь с index.html на другие страницы. Например, моя базовая страница - www.javainuse.com. Если я нажму на ссылку java, она будет правильно перейти к www.javainuse.com/java.
Однако, если я прямо перейду на сайт www.javainuse.com/java, страница не будет найдена.
Чтобы решить эту проблему, мы должны использовать переписывание URL. Для сети Dot требуется переписывание URL для IIS.
Если вы используете tomcat, тогда переписывание URL должно быть выполнено с помощью Tuckey. Можно получить дополнительную информацию о перезаписи URL здесь
Вы также можете использовать приведенный ниже код для перенаправления на главную страницу (дома):
{ path: '', redirectTo: 'home', pathMatch: 'full'}
После указания перенаправления, как указано выше, вы можете перенаправить другие страницы, например:
{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}
Использование режима HTML5 требует перезаписи URL-адресов на стороне сервера, в основном вы должны переписать все свои ссылки на точку входа вашего приложения (например, index.html). Требование тега <base> также важно для этого случая, так как позволяет AngularJS различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатывать приложение. Для получения дополнительной информации см. Руководство разработчика AngularJS - Использование $location HTML5 на стороне сервера.