Saubere URL ohne Hash (#) mit AngularJS

AngularJS routet standardmäßig  über ein # in der URL. Der Browser sendet dadurch den HTTP-Request nur an den Teil vor dem #. Alles was nach dem # steht interpretiert AngularJS.

  • http://beispiel.de/
  • http://beispiel.de/#/firma
  • http://beispiel.de/#/kontakt

Will man eine saubere URL muss man Angular anweisen  die URL ohne # zu generieren. Auch für ein besseres Ranking bei den Suchmaschinen ist dieser Schritt notwendig.

Schritt 1. $locationProvider konfiguriernen

routes.js

function (app) {
 'use strict';

 return app.config([
   '$stateProvider',
   '$locationProvider', 
 
   function ($stateProvider, $locationProvider) {
     
       //remove the #
       $locationProvider.html5Mode(true);

       $stateProvider
          .state('base', {
             url: '/',
             abstract: true,
             templateUrl: 'app/templates/base.html',
             controller: 'BaseCtrl'
          })
.....
}

 

Schritt 2 .Im Header muss ein <base> Tag  eingefügt werden.

index.html

<!DOCTYPE html>
<html>
    <head>
       // above external stylesheets and javascript files
       <base href="/baseProject/">

    </head>
    <body>
        <p>...</p>
    </body>
</html>

 

Sobald  der html5Mode auf true gesetzt ist verschwinden die #. Allerdings bekommt man eine Fehlermeldung beim Reaload einer Seite. Um dieses Problem zu beheben benötigt man eine .htaccess Datei im Projekt Verzeichnis.

Schritt 3. .htaccess Datei anlegen.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]

In der Apache Config sollte das “rewrite_module” aktiviert sein. Unter den folgenden Link gibt es weitere Infos zu mod rewrite: Info

Nun sollte es auch keine Probleme mehr beim Neuladen von Seiten geben.

Arbeiten mehrere Entwickler an einem Projekt kann es sein das sich die Ordnerstruktur unterscheidet. Darum ist es notwendig das jeder Entwickler seinen Base-Pfad in der index.html einträgt und nicht mit ins Git pusht.