Angular routeProvider

Czym jest routeProvider?

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

Problemy z routeProvider w Angular 1.6

$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/.

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij