179

Miałem wrażenie, że Angular przepisze adresy URL pojawiające się w atrybutach href tagów zakotwiczenia w temaltalach, tak aby działały zarówno w trybie HTML5, jak i Hashbang. Dokumentacja za usługę lokalizacji zdaje się mówić, że HTML Link Przepisywanie dba o sytuacji hashbang. Spodziewałbym się zatem, że gdy nie będzie w trybie HTML5, skróty zostaną wstawione, aw trybie HTML5 nie.

Wydaje się jednak, że przepisywanie nie ma miejsca. Poniższy przykład nie pozwala mi po prostu zmienić trybu. Wszystkie linki w aplikacji będą musiały zostać przepisane ręcznie (lub uzyskane ze zmiennej w czasie wykonywania. Czy muszę ręcznie przepisać wszystkie adresy URL w zależności od trybu?

Nie widzę żadnego przepisywania adresów URL po stronie klienta w Angular 1.0.6, 1.1.4 lub 1.1.3. Wydaje się, że wszystkie wartości href muszą być poprzedzone znakiem # / dla trybu hashbang i / dla trybu html5.

Czy konieczna jest konfiguracja, aby spowodować przepisywanie? Czy źle czytam dokumenty? Robisz coś głupiego?

Oto mały przykład:

<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="https://stackoverflow.com/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="https://stackoverflow.com/"/>home</a'
                });
            }
        ])
            .run();
    </script>
</body>

Dodatek: czytając ponownie moje pytanie, widzę, że użyłem terminu „przepisywanie” bez dużej jasności co do tego, kto i kiedy chciałbym dokonać przepisania. Pytanie dotyczy tego, w jaki sposób zmusić program Angular do przepisania adresów URL podczas renderowania ścieżek oraz w jaki sposób zmusić go do interpretacji ścieżek w kodzie JS w sposób jednolity w obu trybach. To nie o tym, jak spowodować, że serwer WWW, aby zrobić HTML5 zgodny przepisywanie wniosków.

angularjs angular-routing

— laurowy
źródło

1

Oto rozwiązanie dla Angulara 1.6 .

— Mistalis

361

Dokumentacja nie jest bardzo jasna na temat routingu AngularJS. Mówi o trybie Hashbang i HTML5. W rzeczywistości routing AngularJS działa w trzech trybach:

Tryb Hashbang
Tryb HTML5
Hashbang w trybie HTML5

Dla każdego trybu istnieje odpowiednia klasa LocationUrl (LocationHashbangUrl, LocationUrl i LocationHashbangInHTML5Url).

Aby zasymulować przepisywanie adresów URL, musisz ustawić wartość html5mode na true i udekorować klasę $ sniffer w następujący sposób:

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

Wyjaśnię to teraz bardziej szczegółowo:

Tryb Hashbang

Konfiguracja:

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

Dzieje się tak, gdy trzeba używać adresów URL z skrótami w plikach HTML, takich jak

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

W przeglądarce musisz użyć następującego linku: http://www.example.com/base/index.html#!/base/path

Jak widać w czystym trybie Hashbang, wszystkie linki w plikach HTML muszą zaczynać się od podstawy, np. „Index.html #!”.

Tryb HTML5

Konfiguracja:

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

Powinieneś ustawić bazę w pliku HTML

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

W tym trybie możesz używać linków bez # w plikach HTML

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

Link w przeglądarce:

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

Hashbang w trybie HTML5

Ten tryb jest aktywowany, gdy faktycznie używamy trybu HTML5, ale w niekompatybilnej przeglądarce. Możemy symulować ten tryb w kompatybilnej przeglądarce, dekorując usługę $ sniffer i ustawiając historię na false.

Konfiguracja:

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

Ustaw bazę w pliku HTML:

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

W takim przypadku łącza można również zapisać bez skrótu w pliku HTML

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

Link w przeglądarce:

http://www.example.com/index.html#!/base/path

— Jowisz
źródło

Dziękuję za szczegółowe wyjaśnienie, @jupiter. Zobaczę, czy mogę pominąć huk i zachować skrót i oszukać Angular, aby nie wymagał dwóch zestawów adresów URL w zależności od trybu!

— laurelnaiada

1

Myślę, że nie zrozumiałem właściwie twojego problemu. Dlaczego nie używasz tylko adresów URL bez skrótu? Będą działać w przeglądarkach obsługujących interfejs API historii i przeglądarkach nieobsługujących interfejsu API historii. AngularJS umieści wersję # w pasku lokalizacji, gdy klikniesz je w przeglądarkach nieobsługujących interfejsu API historii, ponieważ AngularJS przechwytuje kliknięcia linków.

— Jowisz

Pracuję nad strukturą, która powinna obsługiwać oba tryby. Autorzy aplikacji powinni mieć możliwość wyboru jednego lub drugiego bez martwienia się o to, czy w szablonach znajdują się skróty i / lub zmiany w interpretacji ścieżek względnych. Mam nadzieję, że twoja sztuczka pomoże sprawić, że „wszystko, co robisz, to zmiana trybu” (nawet jeśli praktycznym rozwiązaniem jest „ustaw tryb na html5, a następnie kłamać na temat możliwości przeglądarki”).

— laurelnaiad

1

Dostaję się $providejest niezdefiniowany?

— Petrus Theron

1

@pate - podczas konfigurowania dekoratora musisz wprowadzić $ $ do funkcji konfiguracji.

— laurelnaiad

8

Przyszli czytelnicy przyszłości, jeśli używasz Angulara 1.6 , musisz również zmienić hashPrefix:

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

Nie zapomnij ustawić bazy w swoim HTML <head>:

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

Więcej informacji o dzienniku zmian here.

— Mistalis
źródło

3

dzięki @Mistalis. twoja odpowiedź działa dobrze. ale problem pojawia się, gdy odświeżam stronę po routingu, występują błędy nie znaleziono strony. proszę pomóż mi ..

— Ashish Mehta

@AshishMehta Hello Ashish. Sugeruję przeczytanie tej odpowiedzi , może to rozwiązać problem. PA! :)

— Mistalis,

0

Zajęło mi to trochę czasu, żeby to rozgryźć, więc tak to działa - Angular WebAPI ASP Routing bez # dla SEO

dodaj do Index.html - base href = "/">
Dodaj $ locationProvider.html5Mode (prawda); do app.config

Potrzebowałem pewnego kontrolera (który był w kontrolerze domowym), aby go zignorować podczas przesyłania obrazów, więc dodałem tę regułę do RouteConfig

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

W Global.asax dodaj następujące elementy - pamiętaj, aby zignorować api i ścieżki przesyłania obrazów, aby działały normalnie, w przeciwnym razie przekieruj wszystko inne.

 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);
}

Upewnij się, że używasz $ location.url ('/ XXX'), a nie window.location ... do przekierowania
Odwołaj się do plików CSS z bezwzględną ścieżką

i nie

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

Ostatnia uwaga - zrobienie tego w ten sposób dało mi pełną kontrolę i nie musiałem nic robić z konfiguracją sieci.

Mam nadzieję, że to pomaga, ponieważ zajęło mi to trochę czasu.

— tfa
źródło

0

Chciałem mieć dostęp do mojej aplikacji w trybie HTML5 i stałym tokenie, a następnie przejść do metody hashbang (aby zatrzymać token, aby użytkownik mógł odświeżyć swoją stronę).

URL dostępu do mojej aplikacji:

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

Następnie, gdy użytkownik ładuje stronę:

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

Następnie, gdy użytkownik nawiguje:

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

Dzięki temu trzymam token w adresie URL i utrzymuję stan, gdy użytkownik przegląda. Straciłem trochę widoczność adresu URL, ale nie ma idealnego sposobu na zrobienie tego.

Więc nie włączaj trybu HTML5, a następnie dodaj ten kontroler:

.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' })

— Luc Boissaye
źródło

$ location / przełączanie między trybem HTML5 a hashbang / przepisywanie linków

Tryb Hashbang

Tryb HTML5

Hashbang w trybie HTML5