Angular.js'de HTML5 pushstate kullanma


84

Angularjs tarafından kullanılan # navigasyon yerine html5'in pushstate'ini uygulamaya çalışıyorum. Bir cevap için Google'da arama yapmayı denedim ve aynı zamanda açısal irc sohbet odasını henüz şanssız olarak denedim.

Bu benim controllers.js:

function PhoneListCtrl($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
    });
}

function PhoneDetailCtrl($scope, $routeParams) {
  $scope.phoneId = $routeParams.phoneId;
}

function greetCntr($scope, $window) {
    $scope.greet = function() {
    $("#modal").slideDown();
    }
}

app.js

angular.module('phoneapp', []).
    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'
            });
    }])

Yanıtlar:


129

$ LocationProvider'ı yapılandırmanıza ekleyin ve ayarlayın $locationProvider.html5Mode(true).

http://docs.angularjs.org/api/ng.$locationProvider

Basit örnek:

JS:

myApp.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
    .when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});

HTML:

<a href="/page1">Page 1</a> | <a href="https://stackoverflow.com/page2">Page 2</a>

RouteProvider için zaten config () varken bunun için bir kod örneği görebilir miyim? Bunun için yeni bir config () oluşturmam mı, yoksa onu bir yapılandırma dizisi olarak ilkine eklemem mi gerektiğinden ve configFn'nin ne olması gerektiğinden emin değilim ( docs.angularjs.org/api/angular.module )
Mike Crittenden

Ben de aynısını yaptım ama / telefonlar /: phoneId şablon url'si telefon / kısmi / telefon-detay.html haline geldi ve firebug net sekmesi html sayfası bulunamadı
Ajay Beniwal

Ayrıca, tarayıcıda belirli bir url'ye her gittiğimde (örneğin /homeyerine /) sayfa bulunamadı alıyorum . Kendi siteniz için html5'i etkinleştirmeyi denediniz mi?
Andriy Drozdyuk

37
Sayfaları doğru şekilde çekmenize izin vermek için sunucunuzu yapılandırmanız gerekir. Gezinmeye mysite.com/helloçalıştığınızda, o sayfayı sunucunuzdan ALMAYA çalışıyor. Bunun yerine, tarayıcının GET yapmasını mysite.comve ardından tarayıcının konumunu bulmak /hellove oraya gitmek için açısal kullanmasını istiyorsunuz. Bu nedenle sunucunuzu, mysite.comhangi alt alan adı girilirse girilsin verileri geri verecek şekilde yapılandırmanız gerekir .
Andrew Joslin

18
Dinlenme API'nizi /apiveya başka bir yere koyun derdim ve sonra her şeyi yapın ama / api / * index.html'yi verin.
Andrew Joslin
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.