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

Question

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

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

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

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

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

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

226

javascript angularjs

Источник

user1488352 14 янв '13 в 14:06

11 ответов

Решение

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

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

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

47

Источник

user1484099 28 июл '13 в 15:21

Давайте напишем ответ, который выглядит простым и коротким

В конце Router добавьте html5Mode (true);

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

В html head добавьте базовый тег

<html>
<head>
    <meta charset="utf-8">    
    <base href="/">
</head>

спасибо @plus- за детализацию вышеуказанного ответа

39

Источник

user1390678 05 сен '15 в 15:50

Пытаться

$locationProvider.html5Mode(true)

Больше информации на $ locationProvider
Использование $ location

31

Источник

user627870 14 янв '13 в 14:29

Следующая информация от:
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 $ для определения местоположения и того, что он предоставляет.

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? Это стандартизированный способ манипулирования историей браузера с использованием скрипта. Это позволяет Angular изменять маршрутизацию и URL-адреса наших страниц без обновления страницы. Для получения дополнительной информации об этом, вот хорошая статья API Истории HTML5:

http://diveintohtml5.info/history.html

Настройка для относительных ссылок

Чтобы связать ваше приложение с помощью относительных ссылок, вам нужно установить <base> в <head> вашего документа. Это может быть в корневом файле index.html вашего приложения Angular. Найти <base> и установите для него корневой URL-адрес, который вы хотите использовать в своем приложении.

Например: <base href="/">

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

Резервный вариант для старых браузеров

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

В заключение

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

12

Источник

user1220243 07 дек '15 в 19:26

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

Обновить

Как: настроить сервер для работы с html5Mode¹

Когда у вас включен html5Mode, # персонаж больше не будет использоваться в ваших URL. # Символ полезен, поскольку не требует настройки на стороне сервера. Без #URL выглядит намного лучше, но он также требует переписывания на стороне сервера. Вот некоторые примеры:

Apache переписывает

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx переписывает

server {
    server_name my-app;

    index index.html;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS переписывает

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Экспресс переписывает

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

4

Источник

user5535245 11 сен '17 в 08:29

Если вы хотите настроить это локально на 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, где я храню все свои проекты. Как старая OS X настроена.

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

Следующее условие говорит, что если запрос не заканчивается указанными расширениями, добавьте туда, что вам нужно

И последний [L] говорит, что нужно обслуживать файл index.html - ваше приложение для всех остальных запросов.

Если у вас все еще есть проблемы, проверьте журнал apache, он, вероятно, даст вам полезные советы:

/private/var/log/apache2/error_log

3

Источник

user3069576 31 янв '14 в 16:19

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

добавлять <base href="/"> to index.html
Включите html5mode $location.html5Mode(true) в app.js.

С этим приложение будет хорошо работать. Но только в тех случаях, когда вы переходите от index.html к другим страницам. Например, моя базовая страница - www.javainuse.com. Если я нажму на ссылку Java, она будет правильно переходить на www.javainuse.com/java.

Однако, если я перейду на www.javainuse.com/java, то получу страницу "Ошибка не найдена".

Чтобы решить эту проблему, мы должны использовать переписывание URL. Dot net требует перезаписи URL для IIS.

Если вы используете tomcat, то перезапись URL должна быть выполнена с использованием Tuckey. Более подробную информацию о перезаписи URL можно получить здесь.

2

Источник

user5591691 14 сен '16 в 12:50

В Angular 6 с вашим роутером вы можете использовать:

RouterModule.forRoot(routes, { useHash: false })

1

Источник

user779957 30 авг '18 в 03:12

**

Рекомендуется использовать стиль HTML 5 (PathLocationStrategy) в качестве стратегии определения местоположения в Angular.

**Потому что

Он производит чистые и дружественные к SEO URL-адреса, которые пользователям легче понять и запомнить.
Вы можете воспользоваться рендерингом на стороне сервера, который ускорит загрузку нашего приложения, предварительно отрисовав страницы на сервере перед его доставкой клиенту.

Используйте Hashlocationstrtegy, только если вы должны поддерживать старые браузеры.
Нажмите здесь, чтобы узнать больше

0

Источник

user6650215 27 дек '17 в 12:55

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

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

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

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

0

Источник

user5089700 27 май '17 в 14:27

Другие вопросы по тегам javascript angularjs

user709635 14 янв '13 в 14:36 2013-01-14 14:36 · Accepted Answer · 2013-01-14 14:36

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

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

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

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

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

11 ответов

Давайте напишем ответ, который выглядит простым и коротким

Обновить

Как: настроить сервер для работы с html5Mode 1

Apache переписывает

Nginx переписывает

Azure IIS переписывает

Экспресс переписывает

Как: настроить сервер для работы с html5Mode¹