$location / переключение между html5 и режимом hashbang / перезапись ссылок

У меня сложилось впечатление, что Angular будет переписывать URL-адреса, которые появляются в атрибутах href тегов привязки внутри шаблонов, так что они будут работать либо в режиме html5, либо в режиме hashbang. Документация для службы определения местоположения, кажется, говорит, что переписывание ссылок HTML заботится о ситуации hashbang. Таким образом, я ожидаю, что когда не в режиме HTML5, будут вставлены хэши, а в режиме HTML5- нет.

Тем не менее, кажется, что переписывание не происходит. Следующий пример не позволяет мне просто изменить режим. Все ссылки в приложении должны быть переписаны вручную (или получены из переменной во время выполнения. Требуется ли вручную переписывать все URL-адреса в зависимости от режима?

Я не вижу переписывания URL-адреса на стороне клиента в Angular 1.0.6, 1.1.4 или 1.1.3. Кажется, что все значения href должны начинаться с # / для режима hashbang и / для режима html5.

Есть ли какая-то конфигурация, необходимая для перезаписи? Я неправильно читаю документы? Делать что-то еще глупо?

Вот небольшой пример:

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>

<body>
    <div ng-view></div>
    <script>
        angular.module('sample', [])
            .config(
        ['$routeProvider', '$locationProvider',
            function ($routeProvider, $locationProvider) {

                //commenting out this line (switching to hashbang mode) breaks the app
                //-- unless # is added to the templates
                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    template: 'this is home. go to <a href="/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="/"/>home</a'
                });
            }
        ])
            .run();
    </script>
</body>

Приложение: перечитывая мой вопрос, я вижу, что использовал термин "переписывание" без излишней ясности относительно того, кто и когда хотел переписать. Вопрос заключается в том, как заставить Angular переписывать URL-адреса, когда он отображает пути, и как заставить его интерпретировать пути в коде JS равномерно в двух режимах. Речь идет не о том, как заставить веб-сервер выполнять совместимое с HTML5 переписывание запросов.

Источник

4 ответа

Решение

В документации не очень ясно про маршрутизацию AngularJS. Это говорит о Hashbang и режиме HTML5. На самом деле маршрутизация AngularJS работает в трех режимах:

  • Hashbang Mode
  • Режим HTML5
  • Хэшбанг в режиме HTML5

Для каждого режима существует соответствующий класс LocationUrl (LocationHashbangUrl, LocationUrl и LocationHashbangInHTML5Url).

Чтобы смоделировать перезапись URL-адреса, вы должны установить для html5mode значение true и украсить класс $sniffer следующим образом:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});

Теперь я объясню это более подробно:

Hashbang Mode

Конфигурация:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
});
$locationProvider
  .html5Mode(false)
  .hashPrefix('!');

Это тот случай, когда вам нужно использовать URL-адреса с хешами в ваших HTML-файлах, например, в

<a href="index.html#!/path">link</a>

В браузере вы должны использовать следующую ссылку: http://www.example.com/base/index.html#!/base/path

Как вы можете видеть в чистом режиме Hashbang, все ссылки в файлах HTML должны начинаться с базы, такой как "index.html#!".

Режим HTML5

Конфигурация:

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

Вы должны установить базу в HTML-файле

<html>
  <head>
    <base href="/">
  </head>
</html>

В этом режиме вы можете использовать ссылки без # в файлах HTML

<a href="/path">link</a>

Ссылка в браузере:

http://www.example.com/base/path

Хэшбанг в режиме HTML5

Этот режим активируется, когда мы фактически используем режим HTML5, но в несовместимом браузере. Мы можем смоделировать этот режим в совместимом браузере, украсив службу $sniffer и установив для истории значение false.

Конфигурация:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true)
  .hashPrefix('!');

Установите базу в HTML-файл:

<html>
  <head>
    <base href="/">
  </head>
</html>

В этом случае ссылки также могут быть записаны без хэша в HTML-файле.

<a href="/path">link</a>

Ссылка в браузере:

http://www.example.com/index.html#!/base/path
Источник

Будущие читатели, если вы используете Angular 1.6, вам также нужно изменить hashPrefix:

appModule.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('');
}]);

Не забудьте установить базу в своем HTML <head>:

<head>
    <base href="/">
    ...
</head>

Больше информации об изменениях здесь.

Источник

Мне потребовалось некоторое время, чтобы понять, как это работает - Angular WebAPI ASP Routing без # для SEO

  1. добавить в Index.html - base href="/">

  2. Добавьте $locationProvider.html5Mode(true); в app.config

  3. Мне нужно было игнорировать определенный контроллер (который был в домашнем контроллере) для загрузки изображений, поэтому я добавил это правило в RouteConfig

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

  4. В Global.asax добавьте следующее - не обращайте внимания на пути загрузки api и загрузки изображений, чтобы они работали как обычно, иначе перенаправьте все остальное.

     private const string ROOT_DOCUMENT = "/Index.html";

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    var path = Request.Url.AbsolutePath;
    var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
    var isImageUpload = path.StartsWith("/home", StringComparison.InvariantCultureIgnoreCase);

    if (isApi || isImageUpload)
        return;

    string url = Request.Url.LocalPath;
    if (!System.IO.File.Exists(Context.Server.MapPath(url)))
        Context.RewritePath(ROOT_DOCUMENT);
}

  5. Убедитесь, что вы используете $location.url('/XXX'), а не window.location... для перенаправления

  6. Ссылка на файлы CSS с абсолютным путем

и не

<link href="app/content/bootstrapwc.css" rel="stylesheet" />

Заключительное замечание - это дало мне полный контроль, и мне не нужно было ничего делать с веб-конфигурацией.

Надеюсь, это поможет, так как мне понадобилось время, чтобы понять.

Источник

Я хотел получить доступ к своему приложению в режиме HTML5 и фиксированном токене, а затем переключиться на метод hashbang (чтобы сохранить токен, чтобы пользователь мог обновить свою страницу).

URL для доступа к моему приложению:

http://myapp.com/amazing_url?token=super_token

Затем, когда пользователь загружает страницу:

http://myapp.com/amazing_url?token=super_token#/amazing_url

Затем, когда пользователь перемещается:

http://myapp.com/amazing_url?token=super_token#/another_url

При этом я сохраняю токен в URL и сохраняю состояние, когда пользователь просматривает. Я немного потерял видимость URL, но не существует идеального способа сделать это.

Поэтому не включайте режим HTML5, а затем добавьте этот контроллер:

.config ($stateProvider)->
    $stateProvider.state('home-loading', {
         url: '/',
         controller: 'homeController'
    })
.controller 'homeController', ($state, $location)->
    if window.location.pathname != '/'
        $location.url(window.location.pathname+window.location.search).replace()
    else
        $state.go('home', {}, { location: 'replace' })
Источник
Другие вопросы по тегам