Użycie routeProvider w Angular 1 umożliwia przeniesienie routingu z warstwy backendowej do frontendu. Prościej: zmiany w adresie strony internetowej przechwytywane, są przez Angulara i pobierana jest określona część strony zamiast ładowanie całej strony na nowo z serwera. Do użycia routeProvider, potrzebne jest kilka rzeczy:

1) Dołączenie do projektu pliku: angular-route.min.js np. z CDN google:

< script src="//ajax.googleapis.com /ajax/libs/angularjs /1.4.8/angular-route.js" > < /script> 

2) Na naszej stronie/aplikacji należy dodać ng-view. To właśnie w tym miejscu zostanie na stronę wczytana zawartość, która wskazana będzie w routingu. Najpopularniejszymi metodami dodania, są:

< ng-view > < /ng-view > lub < div ng-view > < /div ng-view >

3) Następnie niezbędne jest wstrzyknięcie ngRoute w module angulara: angular.module

var app = angular.module('app', ['ngRoute']);

4) Konfiguracja

app.config(['$routeProvider', function($routeProvider){
		$routeProvider
		.when('/',
		{ 	templateUrl: '/done.html',
			controller: 'main'
		})
		.when('/example',
		{	templateUrl: '/example.html',
			controller: 'main'
		})
		.otherwise({
			template: 'Brak strony!'
		});
	}]);

$locationProvider .hashPrefix

Zgodnie z powyższą konfiguracją powinniśmy w pasku przeglądarki po adresie domeny uzyskać znak # i cały routing czyli kolejne podstrony będą dodawane po nim. Problem jednak pojawia się w przypadku AngularJS 1.6. Okazuje się, że zmiany adresu URL, które powinny pojawiać się po #, w tej wersji Angulara wyglądają w taki sposób #!.

W momencie, gdy spróbujemy przejść na adres #/example otrzymamy #!#%20example co powoduje, że całość przestaje działać. Jest jednak ratunek na tą przypadłość. Należy dodać $locationProvider:

app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider){
		$locationProvider.hashPrefix('');
                $routeProvider
		.when('/', { //reszta identycznie jak wcześniej

Problem jest załatwiony jednak istnieje jeszcze jeden sposób, żeby poradzić sobie z adresem. Jest nim użycie metody z HTML5 i wogóle pozbycie się # z adresu.

$locationProvider .html5Mode

W celu użycia trybu HTML5 należy wykonać dwie dodatkowe czynności w stosunku do poprzedniego:
1) Na końcu przedstawianej powyżej listy należy dodać $locationProvider .html5Mode(true);

app.config(['$routeProvider', function($routeProvider){
		$routeProvider
		.when('/',
		{ 	templateUrl: '/done.html',
			controller: 'main'
		})
		.when('/example',
		{	templateUrl: '/example.html',
			controller: 'main'
		})
		.otherwise({
			template: 'Brak strony!'
		});
                $locationProvider.html5Mode(true);
	}]);

To jeszcze nie koniec ponieważ w pliku głównym index.html musimy poinformować przeglądarkę od jakiej strony ma zaczynać. Poniższy kod umieszczamy na końcu w sekcji HEAD

< base href="/"> 

Działającą aplikację typu sklep internetowy (wersja demonstracyjna) z opisanym powyżej mechanizmem <base href="/"> można zobaczyć pod adresem: http://sportshop.papoldesign.pl/.