Включение режима HTML 5 в AngularJS 1.2

Я работаю над приложением, которое должно использовать режим HTML 5. Из-за того, что я переношу существующий сайт на использование AngularJS 1.2, я не могу иметь теги "#" в своем URL-адресе. В настоящее время у меня есть следующее:

angular.module('myApp', ['ngRoute']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider
    .when("/home", {templateUrl:'home.html', controller:'homeController'})
    // other routes are defined here..
    .otherwise({redirectTo: '/home'});
  }]);

К сожалению, когда я посещаю 'http://myServer/home', мое приложение не работает, когда включен режим html 5. Я получаю 404. Однако, когда я навещаю http://myServer/, он работает. Его как глубокая привязка не работает, когда у меня включен режим html5. Если я прокомментирую строку, которая говорит "$ locationProvider.html5mode (true);", функции сайта. Однако еще раз, я не могу иметь хэш-теги в своем URL-адресе из-за того, что я переношу существующий сайт.

Я не понимаю, как работает html5mode (true)? Или я делаю что-то неправильно?

Спасибо

ОТВЕТЫ

Ответ 1

Если вы используете html5mode, вам нужно внести изменения на стороне сервера, чтобы вернуть точку входа index.html (страница основного приложения) по любому запросу URL-адреса. Затем приложение angular будет анализировать URL-адрес и загружать необходимую страницу.

Ответ 2

Здесь приведен список решений для большинства распространенных веб-серверов: Apache, nginx, IIS и express. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

Ссылка находится в wi-router wiki, но она не имеет к этому никакого отношения, этот ответ действителен с ngRoute.

Ответ 3

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

Шаг 1: Внесите провайдера местоположений в модуль приложения и установите для html5mode значение true

$locationProvider.html5Mode(true);

Шаг 2. Вставьте базовый тег в свой index.html Некоторые люди говорят, что это не требуется, но у меня возникла ошибка, когда я попытался удалить тег и реализовать его. Он говорит, что locationProvider требует базовый тег.

<base href="/specify-app-directory-here/">

Если он находится в корне, следующая строка будет достаточной

<base href="/">

Шаг 3: вам потребуется настроить перерисовку URL-адресов на вашем сервере. Я, сам новичок, но нашел это довольно простым. Если вы используете Apache, именно так вы это делаете.

Создайте .htaccess и поместите его в тот же каталог, что и index.html, или вы даже можете использовать существующий. Добавьте следующие строки в .htaccess

Options +FollowSymLinks 

RewriteEngine On
RewriteBase /base-as-specified-in-base-tag/

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^([a-zA-Z]+)$ #/$1 [NC,L]

Последняя строка - это то, что очень важно. В основном, он сообщает вашему серверу, если он найдет какие-либо ссылки в форме "/home", он перенаправит его на "/#/home", который может обрабатывать angularJS соответствующим образом. При этом он фактически не изменяет URL-адрес, отображаемый в адресной строке, и у вас есть довольно URL-адрес. Если вы попытаетесь также перезагрузить страницу, вы не получите ошибку 404.

Надеюсь, что это поможет.

Ответ 4

сначала включить $locationProvider.html5Mode (true);

после включения html 5 mode true вы можете вставить этот код в .htaccess

НАЧАТЬ

Параметры + FollowSymLinks

 RewriteEngine on

     RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) your file root /index.php [NC,L]

END