Когда вы разрабатываете «одностраничное приложение AngularJS» и используете «ngRoute» для маршрутизации, # добавляется к URL-адресу. Это некрасиво.

По умолчанию AngularJS направляет URL-адреса с хэштегом.

Например.

Http://example.com

Http://example.com/#/about

Убрать эти # из URL-адреса и сделать их красивыми - очень просто.

Вам просто нужно сделать три вещи, чтобы добиться этого.

  1. Настроить $ locationProvider
  2. Установить базу для относительных ссылок
  3. Замените href = "#" на href = "/"

$ местоположение

Служба $ location анализирует URL-адрес в адресной строке браузера (на основе window.location) и делает URL-адрес доступным для вашего приложения. Изменения URL-адреса в адресной строке отражаются в сервисе $ location, а изменения в $ location отражаются в адресной строке браузера.

$ locationProvider

$ locationProvider используется для настройки того, как хранятся пути глубинных ссылок приложения.

Давайте начнем

  1. Мы будем использовать $ locationProvider и установить для html5Mode значение true. Вы можете сделать это при настройке приложения angular.

2. Установка относительных ссылок

$ location в режиме HTML5 требует наличия тега ‹base›!

Если вы настраиваете $ location для использования html5Mode, вам необходимо указать базовый URL-адрес для приложения с помощью ‹ base href = » ›».

Или вы можете настроить $ locationProvider так, чтобы базовый URL не требовался, передав объект определения с ‘ requireBase: false ’ в $ locationProvider.html5Mode ():

3. Теперь вы можете выполнять маршрутизацию, используя href = ”/” вместо href = ”#”.

Если корень вашего приложения отличается от URL.

Например, / login, затем используйте это как свою базу.

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