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

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>

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.