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

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

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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

Ответ 9

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