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.