2015-11-10 10 views
5

Próbuję utworzyć tak zwane "przyjazne SEO" adresy URL w AngularJS.

W moich script.js do routingu mam:

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

Aby usunąć # z adresu URL, jestem umożliwiając tryb HTML5 z:

$routeProvider.html5Mode(true); 

jednak skutkuje następujący błąd:

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

Czy ktoś ma rozwiązanie tego problemu? Oznacza to, że treść nie będzie wyświetlana z widoków z tego powodu.

Edit bo ktoś zastanawiasz, kodeks pracy jest:

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

Spróbuj użyć '$ locationProvider.html5Mode (true);' zamiast. html5Mode to metoda $ locationProvider. –

+0

Hmm, teraz dostaję: ReferenceError: kiedy nie jest zdefiniowany LUB ReferenceError: $ locationProvider nie jest zdefiniowany – JWDev

+0

Trzeba wstrzyknąć $ locationProvider w taki sam sposób, jak w $ routeProvider –

Odpowiedz

7

html5mode metoda jest dostępna tam $locationProvider dostawcy.

powinien zawierać $locationProvider w fazie config aby to zależność dostępny w bloku konfiguracyjnym & następnie włączyć html5mode dla # wolnego URL.

Kod

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

    //$routerProvider code here 

    $locationProvider.html5Mode(true); 

}]); 

Dodatkowo trzeba dodać <base href="/"> tag na index.html stronie

+1

To jest idealne! Dziękuję Ci. – JWDev

+0

@JWTomic Cieszę się, że mogę Ci pomóc .. Dzięki :) –

+1

Konfiguracja $ locationProvider spowoduje usunięcie hashtagu z adresu URL aplikacji, ale aplikacja nie zostanie załadowana poprawnie. Aby rozwiązać ten problem, musisz dodać znacznik podstawowy w sekcji head strony indeksu. '

Powiązane problemy