Utilizzo di pushstate HTML5 su angular.js


84

Sto cercando di implementare pushstate di html5 invece della navigazione # usata da Angularjs. Ho provato a cercare una risposta su google e ho anche provato la chat room angolare irc senza ancora fortuna.

Questo è il mio 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'
            });
    }])

Risposte:


129

Iniettare $ locationProvider nella configurazione e impostare $locationProvider.html5Mode(true).

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

Esempio semplice:

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>

Posso vedere un esempio di codice per questo quando c'è già config () per routeProvider? Non sono sicuro se dovrei creare una nuova config () per questo o aggiungerlo al primo come array di configurazioni, e inoltre non sono sicuro di quale dovrebbe essere configFn ( docs.angularjs.org/api/angular.module )
Mike Crittenden

Ho fatto lo stesso ma quando faccio clic su / phones /: phoneId l'URL del modello diventa telefoni / partials / phone-detail.html e la scheda firebug net mostra la pagina html non trovata
Ajay Beniwal

Ricevo anche una pagina non trovata ogni volta che navigo verso un determinato URL nel browser (ad es. /homeInvece di /). Hai provato ad abilitare html5 per il tuo sito?
Andriy Drozdyuk

37
Devi configurare il tuo server per permetterti di estrarre le pagine correttamente. Quando provi a navigare mysite.com/hello, sta cercando di OTTENERE quella pagina dal tuo server. Invece, vuoi che il browser OTTIENI mysite.come quindi usi angolare per trovare la posizione del browser /helloe andarci. Quindi è necessario configurare il server per restituire i mysite.comdati indipendentemente dal sottodominio inserito.
Andrew Joslin,

18
Direi che metti la tua API di riposo su /apio qualcosa del genere, quindi fai tutto tranne / api / * distribuisci index.html.
Andrew Joslin
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.