Utilisation de pushstate HTML5 sur angular.js

84

J'essaye d'implémenter le pushstate de html5 au lieu de la navigation # utilisée par Angularjs. J'ai essayé de rechercher une réponse sur google et j'ai également essayé la salle de chat angulaire irc sans succès encore.

C'est mon 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'
            });
    }])
Hilarl
la source

Réponses:

129

Injectez $ locationProvider dans votre configuration et définissez $locationProvider.html5Mode(true).

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

Exemple simple:

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>
Andrew Joslin
la source
Puis-je voir un exemple de code pour cela quand il y a déjà config () pour routeProvider? Je ne sais pas si je suis censé créer une nouvelle config () pour cela ou l'ajouter à la première en tant que tableau de configurations, et je ne sais pas non plus ce que devrait être configFn ( docs.angularjs.org/api/angular.module )
Mike Crittenden
J'ai fait la même chose, mais lorsque je clique sur / phones /: phoneId, l'URL du modèle devient phones / partials / phone-detail.html et que l'onglet net firebug affiche une page html non trouvée
Ajay Beniwal
J'obtiens également une page introuvable chaque fois que je navigue vers une URL donnée dans le navigateur (par exemple /homeau lieu de /). Avez-vous essayé d'activer html5 pour votre propre site?
Andriy Drozdyuk
37
Vous devez configurer votre serveur pour vous permettre d'extraire correctement les pages. Lorsque vous essayez d'accéder à mysite.com/hello, il tente d'obtenir cette page à partir de votre serveur. Au lieu de cela, vous voulez que le navigateur GET mysite.com, puis utilise angular pour trouver l'emplacement du navigateur /helloet y aller. Vous devez donc configurer votre serveur pour restituer les mysite.comdonnées quel que soit le sous-domaine saisi.
Andrew Joslin
18
Je dirais de mettre votre API de repos à /apiou quelque chose du genre, puis de tout faire sauf / api / * donner l'index.html.
Andrew Joslin