2015-11-10 3 views
5

Ich versuche so genannte 'SEO-freundliche' URLs in AngularJS zu erstellen.

In meinem script.js für das Routing ich habe:

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

die # aus der URL zu entfernen, ich bin damit den html5-Modus mit:

$routeProvider.html5Mode(true); 

jedoch führt dies zu der folgende Fehler:

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

Hat jemand eine Lösung für dieses Problem? Dies bedeutet, dass der Inhalt aus den Ansichten nicht angezeigt wird.

bearbeiten: für jeden fragen, der Arbeitscode lautet:

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

Versuchen Sie, die '$ locationProvider.html5Mode (true) unter Verwendung hinzuzufügen;' statt. html5Mode ist eine Methode von $ locationProvider. –

+0

Hmm, jetzt bekomme ich: ReferenceError: wann ist nicht definiert OR ReferenceError: $ locationProvider ist nicht definiert – JWDev

+0

Sie müssen $ locationProvider auf dieselbe Weise injizieren wie mit $ routeProvider –

Antwort

7

html5mode Methode dort auf $locationProvider Anbieter zur Verfügung steht.

Sie sollten $locationProvider in Ihrer Konfigurationsphase beinhalten, dass die Abhängigkeit in Config-Block machen & dann html5mode für # freie URL aktivieren.

-Code

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

    //$routerProvider code here 

    $locationProvider.html5Mode(true); 

}]); 

Zusätzlich haben Sie <base href="/"> -Tag auf der Seite index.html

+1

Das ist perfekt! Vielen Dank. – JWDev

+0

@JWTomic Schön, Ihnen zu helfen ... Danke :) –

+1

$ locationProvider wird den Hashtag von der URL der Anwendung entfernen, aber die Anwendung wird nicht korrekt geladen. Um dies zu beheben, müssen Sie im Kopfbereich der Indexseite ein Basis-Tag hinzufügen. '