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

257

Чи можливо видалити символ # з URL-адрес angular.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'});
}]);

Чи можу я редагувати це, щоб мати однаковий функціонал без #?

angularjs  url  ngroute 
— Тім Вебстер
джерело
13
приємний хештег
— кінь BoJack
— Ravimallya
Для мене вся відповідь тут неправильна. Ми можемо "переписати" URL-адресу та видалити #, але ніколи не матимемо доступу безпосередньо до веб-сторінки без #. Будь-яке реальне рішення тут ???
— amdev
Ось рішення, якщо ви використовуєте Angular 1.6 .
— Mistalis

Відповіді:

251

Так, ви повинні налаштувати $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);

  }]);
— Максим Грач
джерело
10
Оскільки IE lt 10 не підтримує API історії html5, який було включено налаштуванням html5Mode(true). В IE ви повинні використовувати #в маршрутах.
— Максим Грач
10
@powtac IE lt 10означає Internet Explorer менше, ніж версія 10
— Максим Грач
6
Чи можете ви встановити його таким чином, щоб використовувати # в IE? Це так просто , як тільки обгортання $locationProvider.html5Mode(true);в if !(IE lt 10)?
— Енді Хайден
52
Таким чином, це рішення вирішує видалення хештегу в URL-адресі, якщо URL-адрес має хештег, однак він не вирішує, як відповідати на запити, які не хочуть, щоб хештег був включений в першу чергу. Ака, він вирішує бла / # / телефони -> бла / телефони, але він не обробляє бла / телефони безпосередньо.
— Лука
9
Мені потрібно було помістити <base href = "/" /> у свій розділ index.html <head>.
— nyxz
55

Не забудьте перевірити підтримку браузера для API історії html5:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
— SSaidi
джерело
23
Це може бути краще підходить як коментар, оскільки це не відповідає безпосередньо на запитання.
— фірмовий сценарій
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
Працював як шарм, і я ціную перевірку методів, а не перевірку версій браузера - майбутнє підтвердження.
— Шейн
46

Щоб видалити тег 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="https://stackoverflow.com/">

         // 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
          });
        }
    }]);
— Емека Мбах
джерело
15
Для requireBase: false+1
— whoan
2
Привіт @digitlimit, Після додавання $locationProvider.html5Modeкоду мій код $urlRouterProvider.otherwise('/home');перестав працювати.
— Джейкрат
18

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

— Ягіз Озтурк
джерело
1
Як встановити переписувач URL для IIS? Я хостинг на Azure.
— Прабху
11

Якщо ви знаходитесь у стеці .NET з MVC з AngularJS, це те, що вам потрібно зробити, щоб видалити '#' з URL:

  1. Налаштуйте базовий href на своїй сторінці _Layout: <head> <base href="https://stackoverflow.com/"> </head>

  2. Потім додайте наступне у своїй кутовій конфігурації програми: $locationProvider.html5Mode(true)

  3. Вище буде видалено "#" з URL-адреси, але оновлення сторінки не працюватиме, наприклад, якщо ви перейдете на сторінку "yoursite.com/about", оновлення сторінки дасть вам 404. Це тому, що MVC не знає про кутову маршрутизацію та MVC викладати це шукатиме сторінку MVC для "about", яка не існує в маршрутизації MVC. Вирішення цього полягає в тому, щоб надіслати весь запит на сторінку MVC в один перегляд MVC, і ви можете це зробити, додавши маршрут, який охоплює всі

URL: 

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
— Максуд
джерело
До якого файлу слід додати маршрути.MapRoute?
— Віченак
1
RouteConfig.cs це під папкою
— App_Start
5

Ви можете налаштувати 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 ОК (імовірно) для, http://foo.barа агент / клієнт обробить решту.

Тож у випадках, коли ви хочете поділитися URL-адресою з іншими, у вас немає іншого можливості, крім того, щоб включити хештег.

— Крис
джерело
Хіба це не обійтися? Це досить велике питання.
— користувач441521
5

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

2.Секунд встановіть <base> на вашій головній сторінці.
Наприклад, ->
<base href="https://stackoverflow.com/">

Послуга $ location автоматично повернеться до методу хеш-частини для браузерів, які не підтримують API історії HTML5.

— Аншул Біш
джерело
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]
— Томас Княпек
джерело
1

Відповідно до документації. Ви можете використовувати:

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

Примітка: Якщо ваш веб-переглядач не підтримує HTML 5. Не хвилюйтесь: D у нього є відкат до режиму хешбанг. Отже, вам не потрібно перевіряти if(window.history && window.history.pushState){ ... }вручну

Наприклад: Якщо натиснути: <a href="https://stackoverflow.com/other">Some URL</a>

У браузері HTML5 : кутовий автоматично переспрямується наexample.com/other

У браузері Not HTML5 : кутовий автоматично переспрямується наexample.com/#!/other

— Ефріандіка Пратама
джерело
1

Ця відповідь передбачає, що ви використовуєте nginx як зворотний проксі, і ви вже встановили $ locationProvider.html5mode на істинне.

-> Для людей, які все ще можуть боротися з усіма крутими матеріалами вище.

Безумовно, рішення @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;
}

І побачити магію.

І це, безумовно, працює, принаймні для мене.

— Сатіс
джерело
Куди це додати?
— Volatil3
Куди додати вищезгаданий код? Помістіть їх у головний конфігураційний файл Nginx.
— Satys
1

Почати з index.html видалити всі #з <a href="#/aboutus">About Us</a>так воно повинно виглядати <a href="https://stackoverflow.com/aboutus">About Us</a>.Тепер в голові тега index.html записи <base href="https://stackoverflow.com/">тільки після останнього мета - тег .

Тепер у свою маршрутизацію 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

— Анікет Джа
джерело
Видалення всіх # URL допомогло, тому що я тестував його, не видаляючи #urls.
— optimistanoop
1

Здогадайтесь, це справді пізно для цього. Але додавання наведеного нижче конфігурації до імпорту app.module виконує цю роботу:

RouterModule.forRoot(routes, { useHash: false })
— Сагар Бхат
джерело
0

Крок 1: Введіть службу $ locationProvider в конструктор конфігурації програми

Крок 2: Додайте рядок коду $ locationProvider.html5Режим (вірно) до конструктора конфігурації програми.

Крок 3: на сторінку контейнера (цільовий, головний чи макет) додайте тег HTML, наприклад, <base href="https://stackoverflow.com/">всередині тегу.

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

 <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>
— Томас Бенц
джерело
-1

Просто додайте $locationProviderв систему

.config(function ($routeProvider,$locationProvider)

а потім додайте $locationProvider.hashPrefix(''); після

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

Це воно.

— Нарендра Соланки
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.