SORU
21 Mayıs 2013, Salı

konum / geçiş arasında html5 $ve hashbang modu / tekrar bağlantı

Açısal olsun html5 modunda veya hashbang modda çalışmak istiyorsunuz tempaltes, böyle içinde çapa etiketleri href öznitelikleri görünür URL yeniden yazmak olacağını sanıyordum. documentation for the location service HTML Bağlantı Yeniden hashbang durumla ilgilenir derler. Böylece HTML5 modunda değilken, karma takılmasını isterim, ve HTML5 modunda, olmaz.

Ancak, yeniden gerçekleşiyor gibi görünüyor. Aşağıdaki örnek, bana sadece modunu değiştirmek için izin vermez. Uygulama tüm bağlantılar el (veya çalışma zamanı. bir değişken türetilmiştir tarafından yazılmış olması gerekir El ile tüm adresler moduna bağlı olarak yeniden girmek zorunda mıyım?

İstemci tarafında herhangi bir url Açısal olarak 1.0.6, 1.1.4 veya 1.1.3 devam tekrar görmek istemiyorum. Tüm değerleri href html5 modu için hashbang modu / # / e olması gerekir gibi görünüyor.

Bazı yapılandırma yok tekrar neden gereklidir? Doktorlar yanlış tahmin ediyorum? Başka bir şey bana çok saçma geliyor.

İşte küçük bir örnek:

<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>

Ek: tekrar okurken benim sorum, bu dönem "yeniden yapmak istediğimde kim" bir bolluk olmadan netliği ve. yeniden kullanılan görüyorum Bu soru hakkındaAçısalyollar işler ve yollar yorumlamak için nasıl URL yeniden yazmak için JS kodu düzgün iki mod arasında.değilbir web sunucusu HTML5 uyumlu istekleri yeniden yapmasına yol hakkında.

CEVAP
21 Mayıs 2013, Salı

Belgelere AngularJS yönlendirme konusunda çok net değil. Hashbang ve HTML5 modu bahsediyor. Aslında, AngularJS yönlendirme üç modda çalışır:

  • Hashbang Modu
  • HTML5 Modu
  • HTML5 Modunda Hashbang

Her mod için ilgili LocationUrl bir sınıf () LocationHashbangUrl, LocationUrl ve LocationHashbangİnHTML5Url var.

URL tekrar simüle etmek için aslında aşağıdaki gibi: doğru ve süslemek html5mode $sniffer sınıf ayarlamanız gerekir

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

Şimdi daha ayrıntılı olarak açıklayacağım:

Hashbang Modu

Yapılandırma:

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

Bu gibi HTML dosyaları sağlamalarının ile URL kullanmak gerekir

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

Aşağıdaki Bağlantıyı kullanmalısınız Tarayıcı: http://www.example.com/base/index.html#!/base/path

HTML dosyaları tüm bağlantılar gibi temel olarak başlamalıdır saf Hashbang modunda gördüğünüz gibi "index.html#!".

HTML5 Modu

Yapılandırma:

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

-Dosya HTML temel olarak ayarlamak gerekir

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

Bu modda bağlantıları olmadan # HTML dosyalarını kullanabilirsiniz

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

Tarayıcıda Link:

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

HTML5 Modunda Hashbang

Bu mod aslında HTML5 modu kullandığınızda aktif ama uyumsuz bir tarayıcı. $Sniffer hizmeti dekorasyon ve yanlış tarih ayarlayarak bu uyumlu bir tarayıcı modunda harekete geçirebiliriz.

Yapılandırma:

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

HTML dosyası tabanı ayarlayın:

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

Bu durumda bağlantıları da HTML dosyası karma olmadan yazılabilir

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

Tarayıcıda Link:

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
AngularjsAçısal YönlendirmeAngular-routing

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • EEVblog

    EEVblog

    4 NİSAN 2009
  • Elliot Davin

    Elliot Davin

    28 Kasım 2008
  • Drakinen

    Drakinen

    1 EYLÜL 2008

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR