2015-11-10 28 views
5

Sto cercando di creare URL cosiddetti "SEO-friendly" in AngularJS.

Nei miei script.js per l'instradamento ho:

app.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider.html5Mode(true); 
    when('/blog', { 
     templateUrl: 'blog.html', 
     controller: 'BlogController' 
    }). 
    when('/page/ideas', { 
     templateUrl: 'ideas.html', 
     controller: 'IdeasController' 
    }). 
    otherwise({ 
     templateUrl: 'home.html' 
    }); 
}]); 

app.controller("BlogController", function($scope) { 
    $scope.title = 'Blog'; 
}); 

app.controller("IdeasController", function($scope) { 
    $scope.title = 'Ideas'; 
}); 

Per rimuovere la # dall'URL, sto abilitando la modalità HTML5 con:

$routeProvider.html5Mode(true); 

tuttavia, questo si traduce in il seguente errore:

Failed to instantiate module exampleApp due to: TypeError: $routeProvider.html5Mode is not a function

Qualcuno ha una soluzione per questo problema? Significa che il contenuto non verrà visualizzato dalle visualizzazioni a causa di esso.

Edit: per chiunque chiedendo, il codice di lavoro è:

app.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) { 
     $routeProvider. 
     when('/blog', { 
      templateUrl: 'blog.html', 
      controller: 'BlogController' 
     }). 
     when('/page/ideas', { 
      templateUrl: 'ideas.html', 
      controller: 'IdeasController' 
     }). 
     otherwise({ 
      templateUrl: 'home.html' 
     }); 
     $locationProvider.html5Mode(true); 
    }]); 
+2

Provare a utilizzare il '$ locationProvider.html5Mode (true);' invece. html5Mode è un metodo di $ locationProvider. –

+0

Hmm, ora ottengo: ReferenceError: when non è definito OR ReferenceError: $ locationProvider non è definito – JWDev

+0

È necessario iniettare $ locationProvider nello stesso modo in cui si fa con $ routeProvider –

risposta

7

html5mode metodo è disponibile lì $locationProvider provider.

È necessario includere $locationProvider nella fase di configurazione per far sì che la dipendenza disponibili nel blocco config & quindi attivare html5mode per # URL gratuitamente.

Codice

app.config(['$routeProvider', '$locationProvider', 
function($routeProvider, $locationProvider) { 

    //$routerProvider code here 

    $locationProvider.html5Mode(true); 

}]); 

Inoltre si deve aggiungere <base href="/"> tag sulla pagina di index.html

+1

Questo è perfetto! Grazie. – JWDev

+0

@JWTomic Felice di aiutarti ... grazie :) –

+1

La configurazione $ locationProvider rimuoverà l'hashtag dall'URL dell'applicazione ma, l'applicazione non verrà caricata correttamente. Per risolvere questo problema, devi aggiungere un tag di base nella sezione head della pagina indice. '