Удаление идентификатора фрагмента из URL-адресов AngularJS (символ #)

Question

Удаление идентификатора фрагмента из URL-адресов AngularJS (символ #)

242

Можно ли удалить символ # из angular.js URL?

Я все еще хочу иметь возможность использовать кнопку "Назад в браузере" и т.д., когда я изменяю представление и обновляю URL с параметрами, но я не хочу символ #.

Учебник routeProvider объявляется следующим образом:

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

Могу ли я изменить это, чтобы иметь одинаковую функциональность без #?

Tim Webster 08 фев. 2013, в 10:46

Источник

12

хороший хэштег
BoJack Horseman 27 дек. 2014, в 13:50
0

stackoverflow.com/questions/14319967/...
Ravimallya 09 янв. 2015, в 08:19
0

Для меня все ответы здесь неверны. Мы можем «переписать» URL-адрес и удалить #, но никогда не получим прямой доступ к веб-странице без #. Любое реальное решение здесь ???
amdev 03 окт. 2016, в 12:52
0

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

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

Теги:

angularjs

url

ngroute

14 ответов

57

Обязательно проверьте поддержку браузера для API истории html5:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }

SSaidi 07 дек. 2013, в 08:10

23

Это может быть лучше подходит для комментариев, так как не дает прямого ответа на вопрос.
brandonscript 07 дек. 2013, в 07:50
31

Согласно руководству разработчика , это обнаружение выполняется автоматически: If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically
IanB 26 март 2014, в 00:10
0

Работал как шарм, и я ценю проверку методов, а не проверку версий браузера - будущее.
Shane 26 май 2014, в 00:59

Показать ещё 1 комментарий

44

Чтобы удалить тэг Hash для симпатичного URL, а также для вашего кода, который будет работать после минимизации, вам нужно структурируйте свой код, как показано ниже:

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);

Digitlimit 08 янв. 2015, в 10:58

14

Для requireBase: false +1
whoan 03 апр. 2016, в 14:14
1

Здравствуйте @digitlimit, После добавления кода $locationProvider.html5Mode мой код $urlRouterProvider.otherwise('/home'); перестал работать.
Jaikrat 28 апр. 2016, в 11:53

16

Я выписываю правило в web.config после $locationProvider.html5Mode(true) устанавливается в app.js.

Надежда, помогает кому-то выйти.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

В моем index.html я добавил это в <head>

<base href="/">

Не забудьте установить URL-адрес перезаписывающего устройства для iis на сервере.

Также, если вы используете Web Api и IIS, этот URL-адрес совпадения не будет работать, поскольку он изменит ваши вызовы api. Поэтому добавьте третий вход (третью строку условия) и выдайте шаблон, который будет исключать вызовы из www.yourdomain.com/api

Yagiz Ozturk 19 нояб. 2014, в 08:03

1

Как установить переписчик URL для IIS? Я хостинг на Azure.
Prabhu 22 окт. 2015, в 05:54

9

Если вы находитесь в стеке .NET с MVC с помощью AngularJS, это то, что вам нужно сделать, чтобы удалить "#" из URL:

Настройте свой базовый href на странице _Layout: <head> <base href="/"> </head>
Затем добавьте следующее в конфигурацию приложения angular: $locationProvider.html5Mode(true)
Выше будет удалять '#' из URL-адреса, но обновление страницы не будет работать, например. если вы находитесь на странице "yoursite.com/about" refreash, вы получите 404. Это связано с тем, что MVC не знает о маршрутизации angular, а по шаблону MVC он будет искать страницу MVC для "about", которая не существует в пути маршрутизации MVC. Обходным путем для этого является отправка всего запроса страницы MVC в одно представление MVC, и вы можете сделать это, добавив маршрут, который ловит все

url:

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);

Maksood 17 сен. 2015, в 00:42

0

В какой файл я должен добавить маршруты .MapRoute?
Vicheanak 21 нояб. 2015, в 13:24
0

RouteConfig.cs его в папке App_Start
Maksood 23 нояб. 2015, в 18:14

5

Следуйте 2 шагам -
1. Сначала установите $locationProvider.html5Mode (true) в конфигурационном файле приложения.
Для примера -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Всегда установите <base> на своей главной странице.
Например, →
<base href="/">

Служба определения местоположения автоматически перейдет к методу хэш-части для браузеров, которые не поддерживают API истории HTML5.

Anshul Bisht 14 апр. 2016, в 08:59

5

Вы можете настроить html5mode, но это работает только для ссылок, включенных в html-привязки вашей страницы, и того, как выглядит URL-адрес в адресной строке браузера. Попытка запросить подстраницу без hashtag (с или без html5mode) из любой точки вне страницы приведет к ошибке 404. Например, следующий запрос CURL приведет к ошибке страницы, не найденной, независимо от html5mode:

$ curl http://foo.bar/phones

хотя ниже будет возвращена корневая/домашняя страница:

$ curl http://foo.bar/#/phones

Причиной этого является то, что все, что после хэштага удаляется до того, как запрос поступит на сервер. Таким образом, запрос http://foo.bar/#/portfolio поступает на сервер в качестве запроса для http://foo.bar. Сервер ответит ответом 200 OK (предположительно) для http://foo.bar, и агент/клиент обработает остальные.

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

chris 05 июнь 2015, в 14:55

0

Нет ли способа обойти это? Это довольно большая проблема.
user441521 14 окт. 2016, в 19:02

3

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

Добавить в 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 17 сен. 2016, в 13:19

0

У меня была такая же проблема, когда даже после запуска в режиме html5mode запись в прямом URL-адресе в браузере приводит к ошибке не может быть полученной ... Спасибо за упоминание об этом, так как я рад, что я не единственный, кто испытал это , Спасибо, что поделились ссылкой и сейчас смотрю это видео.
twknab 25 март 2017, в 05:19

3

Мое решение - создать .htaccess и использовать код #Sorian.. без .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]

Thomas Knápek 19 янв. 2014, в 22:14

2

Точная точная копия stackoverflow.com/a/17909743/1407478
davidkonrad 25 март 2017, в 12:01

1

В этом ответе предполагается, что вы используете nginx в качестве обратного прокси, и вы уже установили для параметра $locationProvider.html5mode значение true.

- > Для людей, которые все еще могут бороться со всеми классными вещами выше.

Конечно, решение @maxim grach отлично работает, но для решения, как реагировать на запросы, которые не хотят включать хэштег, в первую очередь, что можно сделать, это проверить, отправляет ли php 404, а затем переписать url. Ниже приведен код для nginx,

В местоположении php обнаружите ошибку 404 php и перенаправляйтесь в другое место,

location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}

Затем перепишите URL-адрес в адрес перенаправления и прокси-пароль, а затем отправьте URL-адрес своего сайта в адрес моего блога. (Запрос: вопрос только после того, как вы попробовали)

location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}

И посмотри волшебство.

И это определенно работает, по крайней мере для меня.

Satys 10 фев. 2016, в 19:41

0

Где это добавить?
Volatil3 04 янв. 2017, в 10:34
0

Где добавить код выше? Поместите их в основной файл конфигурации Nginx.
Satys 04 янв. 2017, в 12:19

1

Согласно документации. Вы можете использовать:

$locationProvider.html5Mode(true).hashPrefix('!');

NB: Если ваш браузер не поддерживает HTML 5. Не волнуйтесь: D у него есть возврат в режим hashbang. Таким образом, вам не нужно вручную проверять if(window.history && window.history.pushState){ ... }

Например: если вы нажмете: <a href="/other">Some URL</a>

В браузере HTML5: angular автоматически перенаправляется на example.com/other

В браузере не HTML5: angular автоматически перенаправляется на example.com/#!/other

Efriandika Pratama 06 янв. 2016, в 07:51

0

Начните с index.html удалите все # из <a href="#/aboutus">About Us</a>, чтобы он выглядел как <a href="/aboutus">About Us</a>. Теперь в главном теге index.html напишите <base href="/"> сразу после последнего метатега.

Теперь в вашей маршрутизации js введите $locationProvider и напишите $locatonProvider.html5Mode(true); Что-то вроде этого: -

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

Подробнее о просмотре этого видео https://www.youtube.com/watch?v=XsRugDQaGOo

Aniket Jha 25 фев. 2018, в 07:23

0

Удаление всего # Url помогло, потому что я тестировал его, не удаляя #urls.
optimistanoop 19 дек. 2018, в 14:48

0

Просто добавьте $locationProvider В

.config(function ($routeProvider,$locationProvider)

а затем добавьте $locationProvider.hashPrefix(''); после

.otherwise({
        redirectTo: '/'
      });

Что это.

Narendra Solanki 21 апр. 2017, в 06:47

0

Шаг 1: Внесите службу $locationProvider в конструктор конфигурации приложения

Шаг 2: добавьте строку кода $locationProvider.html5Mode (true) в конструктор конфигурации приложения.

Шаг 3: на странице контейнера (посадка, мастер или макет) добавьте тег html, такой как <base href="/"> внутри тега.

Шаг 4: удалите все "#" для конфигурации маршрутизации из всех тегов привязки. Например, href= "# home" становится href= "home", href= "about about" становится herf = "about"; href= "#contact" становится href= "contact"

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>

Thomas.Benz 17 авг. 2016, в 21:20

Ещё вопросы

Для меня все ответы здесь неверны. Мы можем «переписать» URL-адрес и удалить #, но никогда не получим прямой доступ к веб-странице без #. Любое реальное решение здесь ???
Вот решение, если вы используете Angular 1.6 .
Это может быть лучше подходит для комментариев, так как не дает прямого ответа на вопрос.
Согласно руководству разработчика , это обнаружение выполняется автоматически: If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically
Работал как шарм, и я ценю проверку методов, а не проверку версий браузера - будущее.
Здравствуйте @digitlimit, После добавления кода $locationProvider.html5Mode мой код $urlRouterProvider.otherwise('/home'); перестал работать.
Как установить переписчик URL для IIS? Я хостинг на Azure.
В какой файл я должен добавить маршруты .MapRoute?
Нет ли способа обойти это? Это довольно большая проблема.
У меня была такая же проблема, когда даже после запуска в режиме html5mode запись в прямом URL-адресе в браузере приводит к ошибке не может быть полученной ... Спасибо за упоминание об этом, так как я рад, что я не единственный, кто испытал это , Спасибо, что поделились ссылкой и сейчас смотрю это видео.
Точная точная копия stackoverflow.com/a/17909743/1407478
Где добавить код выше? Поместите их в основной файл конфигурации Nginx.
Удаление всего # Url помогло, потому что я тестировал его, не удаляя #urls.

Maxim Grach · Accepted Answer · 2013-02-08T12-46-00.000Z

239

Лучший ответ

Да, вы должны настроить $locationProvider и установить html5Mode на true:

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);

Maxim Grach 08 фев. 2013, в 12:46

0

Похоже, что это вызывает проблемы в IE, я получаю всевозможные дайджест-ошибки в консоли, и он все равно заканчивается перенаправлением на # / phones Ошибка: 10 $ digest () достигнуты итерации. Aborting! Я не использую никаких пользовательских тегов в своем приложении
Tim Webster 08 фев. 2013, в 11:36
0

IE (: о IE читайте на сайте Angular: docs.angularjs.org/guide/ie
Maxim Grach 08 фев. 2013, в 11:46
0

Я прочитал эту статью, хотя она относится к IE7 и 8, у меня есть те же проблемы в 9. Я могу заставить свое приложение работать в IE7, используя моё определение модуля выше. Но это имеет хэш в URL. Если я использую ваше определение, я получаю ошибки в IE9. :(
Tim Webster 08 фев. 2013, в 11:52
10

Потому что IE lt 10 не поддерживает API истории html5, которые были включены при настройке html5Mode(true) . В IE вы должны использовать # в маршрутах.
Maxim Grach 08 фев. 2013, в 16:50
0

Хорошо спасибо. Я решил иметь другой конфиг для т.е. не настройки html5mode.
Tim Webster 08 фев. 2013, в 17:42
0

@MaximGrach, не могли бы вы пояснить, что означает IE lt 10 ?
powtac 05 авг. 2013, в 14:28
10

@powtac IE lt 10 означает Internet Explorer меньше, чем версия 10
Maxim Grach 06 авг. 2013, в 18:26
6

Можете ли вы установить так, чтобы это отступило от использования # в IE? Это так же просто, как просто обёртывание $locationProvider.html5Mode(true); if !(IE lt 10) ?
Andy Hayden 14 авг. 2013, в 15:07
0

После этого можно ли получить доступ к локальному хосту / телефонам напрямую? не проходя мимо index.html?
storm_buster 05 янв. 2014, в 00:05
2

это не работает, когда я обновляю ту же страницу. или другими способами .......
Charnjeet Singh 17 янв. 2014, в 08:23
50

Таким образом, это решение решает проблему удаления хэштега в URL, учитывая, что у URL есть хэштег, однако он не решает, как отвечать на запросы, которые не хотят, чтобы хэштег был включен в первую очередь. Ака, это решает бла / # / Телефоны -> бла / телефоны, но он не обрабатывает бла / телефоны напрямую.
Luke 12 фев. 2014, в 01:56
1

@ Люк очень прав ... есть ли у кого-нибудь решение для способа прямой обработки URL-адресов, данных браузеру, без знака # для начала? (как в случае с бла / телефонами на странице нашего приложения). Это проблема, которую я хочу решить ...
Mik Cox 15 апр. 2014, в 20:33
2

@ Мик Кокс, я действительно смог решить это. Пусть ваш бэкэнд отправит обратно index.html для всех URL, так что вы не увидите 404.
Luke 16 апр. 2014, в 02:57
0

Извините, я не понимаю, что вы имеете в виду @Luke, не могли бы вы добавить немного больше деталей?
Mik Cox 17 апр. 2014, в 22:31
1

@MikCox, когда URL-адрес напрямую вводится в браузере, ваш сервер может вернуть 404, потому что он не может найти этот ресурс. Что вы хотите сделать, так это чтобы браузер передал обратно index.html (поскольку большинство SPA имеют только один HTML-шаблон) и имеет Angular для обработки URL-адреса, чтобы правильно манипулировать шаблоном.
Luke 18 апр. 2014, в 04:44
0

@ Люк, как ты справляешься с чем-то вроде рассылки URL-адреса кому-то, похожему на « mywebsite.com/user/123131/settings » вместо « mywebsite.com/#/user/123131/settings »?
Bogdan Varlamov 28 апр. 2014, в 17:44
0

@BogdanVarlamov Вы можете уточнить? Обработка электронной почты? Или обрабатываете ссылку? Если вы говорите об обработке ссылки, ответ уже предоставлен выше.
Luke 29 апр. 2014, в 17:50
0

@ Люк, я вижу, где ты говоришь, что «это не касается бла / телефонов» напрямую. Мне интересно, есть ли другое решение, которое может обрабатывать URL-адреса такого типа в качестве запроса (т.е. я вставляю этот URL-адрес в браузер и не хочу, чтобы приложение определяло маршрут без #)
Bogdan Varlamov 29 апр. 2014, в 18:55
1

Вы можете найти это полезным - github.com/angular-ui/ui-router/wiki/…
Moin Haidar 16 июль 2014, в 11:45
2

Мне также пришлось добавить requireBase: false чтобы заставить его работать в блоке $locationProvider.html5Mode
Aaron Lelevier 23 нояб. 2014, в 15:36
0

@Luke Решение .htaccess от Томаса Кнапека исправило это для меня.
plong0 10 март 2015, в 17:57
3

Я бы хотел, чтобы этот ответ содержал пояснения в ответе, а не в комментариях. Я не уверен, как на самом деле реализовать этот @MaximGrach
David Anderton 03 дек. 2015, в 18:13
9

Мне нужно было поместить <base href = "/" /> в мой раздел index.html <head>.
nyxz 18 дек. 2015, в 13:51
0

Он работает нормально, но не работает, когда мы обновляем / перезагружаем страницу. Пожалуйста, помогите, если у вас есть какие-либо предложения
PHP_RIDER 25 фев. 2016, в 10:39
0

когда я попробовал это, это работает, но / actionname удаляется из URL, поэтому / actionname меняется на /
Mike W 02 июнь 2017, в 17:51
0

Это решение просто удаляет «#» из URL визуально. Я не могу получить доступ к странице, например example.com/about, с URL-адреса браузера. Если я хочу получить доступ к странице с URL-адреса браузера, мне все равно нужно добавить «#», например example.com/#/about . Это правильно, или я делаю какую-то ошибку? Я использую AngularJS 1.6.
Ankit Prajapati 28 июнь 2018, в 16:29

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