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

Можно ли удалить символ # из 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'});
}]);

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

ОТВЕТЫ

Ответ 1

Да, вы должны настроить $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);

  }]);

Ответ 2

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

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

Ответ 3

Чтобы удалить тэг 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
          });
        }
    }]);

Ответ 4

Я выписываю правило в 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

Ответ 5

Если вы находитесь в стеке .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"
    }
);

Ответ 6

Вы можете настроить 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-адресом с другими, у вас нет выбора, кроме как включить хэштег.

Ответ 7

Следуйте 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.

Ответ 8

Мое решение - создать .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]

Ответ 9

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

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

Ответ 10

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

$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

Ответ 11

В этом ответе предполагается, что вы используете 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;
}

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

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

Ответ 12

Шаг 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>

Ответ 13

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

.config(function ($routeProvider,$locationProvider)

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

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

Что это.

Ответ 14

Начните с 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