AngularJS маршрутизация без хеша '#'

Question

AngularJS маршрутизация без хеша '#'

203

Я изучаю AngularJS и там одна вещь, которая меня действительно раздражает.

Я использую $routeProvider для объявления правил маршрутизации для моего приложения:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

но когда я перехожу к моему приложению в браузере, я вижу app/#/test вместо app/test.

Итак, мой вопрос: почему AngularJS добавляет этот хеш # в URL? Есть ли возможность избежать этого?

Doob 14 янв. 2013, в 14:21

Источник

2

Вот решение, если вы используете Angular 1.6.
Mistalis 29 март 2017, в 12:06

Теги:

javascript

angularjs

9 ответов

43

Если вы включили 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]

Пользователи будут перенаправлены в ваше приложение, когда они введут правильный маршрут, и ваше приложение прочитает маршрут и вернет их на правильную "страницу" внутри него.

РЕДАКТИРОВАТЬ: просто убедитесь, что конфликты с файлами или каталогами не конфликтуют с вашими маршрутами.

bearfriend 28 июль 2013, в 15:26

0

есть ли версия nginx этого? когда я загружаю /about странице не удается, если я не захожу к нему через приложение.
chovy 26 нояб. 2013, в 20:04
0

Никогда не использовал их, но попробуйте это: stackoverflow.com/questions/5840497/convert-htaccess-to-nginx
bearfriend 27 нояб. 2013, в 14:34
3

@chovy - здесь идет версия nGinx: server {имя_сервера my-app; root / path / to / app; location / {try_files $ uri $ uri / /index.html; }}
Moin Haidar 16 июль 2014, в 10:04
4

помните <base href = "/"> </ base> в теге head
Silvio Troia 27 дек. 2014, в 16:31
0

Спасибо! без этого глубокое связывание невозможно. Я до сих пор не уверен, что красивость или URI стоит того, чтобы поддерживать это, если вам нужна глубокая связь, особенно в некоторых облачных / paas средах, где у вас может не быть легкого доступа к httpd config.
Pierre Henry 06 сен. 2016, в 07:03
0

Это не сработало для меня, если я не поместил RewriteRule (.*) index.html [L] качестве последней строки
Alessandro Dionisi 14 янв. 2019, в 16:15

Показать ещё 4 комментария

35

Позволяет написать ответ, который выглядит простым и коротким

В 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 - для подробного описания вышеуказанного ответа

vijay 05 сен. 2015, в 17:45

0

Я не смог заставить это работать. Я разместил новый вопрос со своими конкретными данными по адресу: stackoverflow.com/questions/36041074/… Пожалуйста, посмотрите на это, и если вы можете помочь, я был бы очень признателен.
Larry Martell 16 март 2016, в 16:10

31

попробуйте

$locationProvider.html5Mode(true)

Дополнительная информация на $locationProvider
Использование $location

skeep 14 янв. 2013, в 15:13

6

извините, я добавил .config (function ($ locationProvider) {$ locationProvider.html5Mode (true)}), но у меня есть результат index.html #% 2Fhome not index.html / home
zloctb 11 сен. 2014, в 12:59
0

@zloctb ты решил это в конечном итоге?
Nikhil Sahu 17 авг. 2016, в 07:27

10

Следующая информация взята из:
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

Мы будем использовать модуль $locationProvider и зададим для html5Mode значение true.

Мы будем делать это при определении вашего приложения 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="/">

Существует множество других способов настройки, а режим HTML5 set to true должен автоматически разрешать относительные ссылки. Если ваш корень вашего приложения отличается от URL (например,/my-base, затем используйте это как свою базу.

Откат для старых браузеров

Служба $location автоматически отменит хэш-бэнд метод для браузеров, которые не поддерживают API истории HTML5.
Это происходит прозрачно для вас, и вам не придется настраивать все для его работы. Из документов Angular $location вы можете видеть метод резервного копирования и то, как он работает.

Заключение

Это простой способ получить красивые URL-адреса и удалить хэштег в ваше приложение Angular. Получайте удовольствие, делая эти супер чистые и супер быстрые Angular приложения!

zero_cool 07 дек. 2015, в 21:19

2

Как уже упоминалось выше, этапы -

Добавить <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 здесь

Rameez 14 сен. 2016, в 13:18

2

Если вы хотите настроить это локально на 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

Mister P 31 янв. 2014, в 17:27

0

Если вы используете MAMP в качестве локального сервера Apache, убедитесь, что первая RewriteBase является относительной ссылкой. например, RewriteBase / angularjs_site_folder /
David Douglas 29 май 2015, в 08:09

0

Использование режима HTML5 требует перезаписи URL-адресов на стороне сервера, в основном вы должны переписать все свои ссылки на точку входа вашего приложения (например, index.html). Требование тега <base> также важно для этого случая, так как позволяет AngularJS различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатывать приложение. Для получения дополнительной информации см. Руководство разработчика AngularJS - Использование $location HTML5 на стороне сервера.

georgeawg 11 сен. 2017, в 09:59

0

Вы также можете использовать приведенный ниже код для перенаправления на главную страницу (дома):

{ path: '', redirectTo: 'home', pathMatch: 'full'}

После указания перенаправления, как указано выше, вы можете перенаправить другие страницы, например:

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}

Arash 27 май 2017, в 15:05

Ещё вопросы

Вот решение, если вы используете Angular 1.6.
есть ли версия nginx этого? когда я загружаю /about странице не удается, если я не захожу к нему через приложение.
Никогда не использовал их, но попробуйте это: stackoverflow.com/questions/5840497/convert-htaccess-to-nginx
@chovy - здесь идет версия nGinx: server {имя_сервера my-app; root / path / to / app; location / {try_files $ uri $ uri / /index.html; }}
Спасибо! без этого глубокое связывание невозможно. Я до сих пор не уверен, что красивость или URI стоит того, чтобы поддерживать это, если вам нужна глубокая связь, особенно в некоторых облачных / paas средах, где у вас может не быть легкого доступа к httpd config.
Это не сработало для меня, если я не поместил RewriteRule (.*) index.html [L] качестве последней строки
Я не смог заставить это работать. Я разместил новый вопрос со своими конкретными данными по адресу: stackoverflow.com/questions/36041074/… Пожалуйста, посмотрите на это, и если вы можете помочь, я был бы очень признателен.
извините, я добавил .config (function ($ locationProvider) {$ locationProvider.html5Mode (true)}), но у меня есть результат index.html #% 2Fhome not index.html / home
@zloctb ты решил это в конечном итоге?
Если вы используете MAMP в качестве локального сервера Apache, убедитесь, что первая RewriteBase является относительной ссылкой. например, RewriteBase / angularjs_site_folder /

plus- · Accepted Answer · 2013-01-14T14-56-00.000Z

249

Лучший ответ

На самом деле вам нужен # (хэштег) для браузеров без HTML5.

В противном случае они просто сделают HTTP-вызов на сервере по указанному href. # - это старый короткозамкнутый обозреватель, который не запускает запрос, что позволяет многим js-фреймворкам создавать собственные клиентские повторы поверх этого.

Вы можете использовать $locationProvider.html5Mode(true), чтобы сообщить angular использовать стратегию HTML5, если она доступна.

Вот список браузеров, поддерживающих стратегию HTML5: http://caniuse.com/#feat=history

plus- 14 янв. 2013, в 14:56

4

Спасибо. Это то, что я подозревал. Но для меня это довольно недружелюбно к пользователю! Допустим, я хочу, чтобы какой-то ресурс был доступен через url, app / res. Как пользователи моего сайта могут узнать, что вместо этого они должны ввести app / # / res?
pikkvile 14 янв. 2013, в 15:53
0

Пользователям не нужно вводить url вручную, но по возможности перемещаться по пользовательскому интерфейсу сайта.
plus- 14 янв. 2013, в 15:57
5

Но если это так, зачем мне нужно, чтобы эти пути были видны в строке адреса? Если пользователи не будут использовать их, я могу просто сделать одностраничное приложение javascript.
pikkvile 14 янв. 2013, в 18:05
6

Это полезно, когда вы хотите отслеживать состояние приложения. Фреймворки предлагают механизм истории. Кроме того, он позволяет прямой доступ к состоянию вашего приложения, например, через общий доступ к URL.
plus- 14 янв. 2013, в 18:09
6

Хэштег не требуется в современных браузерах, которые поддерживают API истории HTML5. Смотрите ответ @ skeep и предоставленные ссылки. В режиме HTML5 Angular будет использовать хэштеги, только если браузер не поддерживает его. Также обратите внимание, что вам не нужно использовать $ routeProvider, если вы не хотите ... вы можете подключить свою собственную маршрутизацию, используя ng-clicks и ng-include (на самом деле вы должны сделать это, если вам нужно несколько уровней маршрутизация, так как ng-view может появляться только один раз на страницу). Смотрите также stackoverflow.com/questions/12793609/…
Mark Rajcok 15 янв. 2013, в 03:13
0

@MarkRajcok Спасибо за точность. Исправляя ответ соответственно
plus- 15 янв. 2013, в 07:55
2

В случае hhml рендеринга hashbang / pushstate / на стороне сервера, Twitter очень приятно читать engineering.twitter.com/2012/12/… Он объясняет, как им удалось это сделать, поэтому он обратно совместим со старым браузером и с поиском двигатели. Я знаю, что это не специфично для angularjs, но вы можете воспроизвести поток.
jackdbernier 25 апр. 2013, в 23:56
0

Просто хочу добавить для любого читающего, браузеры не HTML5 НЕ требуют хеш-код и могут быть абсолютно правильно маршрутизированы путем ввода с хешем или без него. Смотрите мой ответ ниже.
bearfriend 02 окт. 2013, в 21:03
0

@Doob Стоит отметить, что в конечном итоге Twitter отказался от использования хешей # в своих URL-адресах по многим причинам, включая производительность. Вы можете прочитать об этом в разделе « Повышение производительности на twitter.com», а также о недостатках (и их значительных) в использовании # в «About About The Hashbangs» .
user456814 19 фев. 2014, в 06:57
1

@ solid7 оставляйте свои комментарии об ответе в комментарии , не пытайтесь редактировать ответ и изменять его значение.
uvesten 08 апр. 2014, в 20:49
0

Ссылка в Твиттере изменилась на blog.twitter.com/2012/implementing-pushstate-for-twittercom
Leo Caseiro 21 апр. 2015, в 23:34
0

Также необходимо добавить <base href = "/"> </ base> в тег head, чтобы избежать ошибок JavaScript в консоли. объяснил на scotch.io
ankit9j 30 июнь 2017, в 20:02

Показать ещё 10 комментариев