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

можно ли удалить символ # из углового.URL-адреса в JS?

Я все еще хочу иметь возможность использовать кнопку "Назад" браузера и т. д., Когда я изменяю представление и обновляю 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'});
}]);

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

14 247
url angularjs ngroute

14 ответов:

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

  }]);
244

будьте уверены, чтобы проверить поддержку браузером на базе HTML5 API для истории:

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

чтобы удалить хэш-тег для довольно 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
          });
        }
    }]);
44

я выписываю правило в web.конфигурация после $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>

в мой индекс.html я добавил Это в <head>

<base href="/">

не забудьте установить url rewriter для iis на сервере.

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

17

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

  1. настройка базовой href на странице _Layout:<head> <base href="/"> </head>

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

  3. выше будет удалить ' # ' из url, но обновление страницы не будет работать, например, если вы находитесь в "yoursite.com/about-Пейдж рефриш даст вам 404. Это потому, что MVC не знает об угловой маршрутизации и по шаблону MVC он будет искать страницу MVC для "О", которая не существует в пути маршрутизации MVC. Обходной путь для этого-отправить весь запрос страницы MVC в одно представление MVC, и вы можете сделать это, добавив маршрут, который ловит все

url:

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

вы можете настроить html5mode, но это работает только для ссылок, включенных в HTML-якоря вашей страницы и как url-адрес выглядит в адресной строке браузера. Попытка запросить подстраницу без хэштега (с 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 с другими, у вас нет выбора, кроме как включить хэштег.

5

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

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

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

5

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

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

добавить в индекс.формат html Включить html5mode $location.html5Mode (true) в приложении.js.

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

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

чтобы решить эту проблему, мы должны использовать перезапись url. Точка net требует переписывания URL-адресов в IIS.

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

3

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

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

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

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

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

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

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 в redirect location и proxy_pass данные, конечно, поместите url-адрес вашего сайта на место url-адреса моего блога. (Запрос: вопрос это только после того, как вы попробовали его)

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

и увидеть волшебство.

и это, безусловно, работает, по крайней мере для меня.

1

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

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

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

Шаг 4: Удалите все ' # " для конфигурации маршрутизации из всех тегов привязки. Для примера, с href="#домашний" становится с href="Главная"; с href="#о" становится herf="о"; 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>
0

начать с индекса.html удалить все # С <a href="#/aboutus">About Us</a> так это должно выглядеть как <a href="/aboutus">About Us</a>.Теперь в голове тег индекса.HTML-код писать <base href="/"> просто после последнего мета-тег.

теперь в вашей маршрутизации JS inject $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

0

просто добавить $locationProvider на

.config(function ($routeProvider,$locationProvider)

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

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

вот и все.

-1