Routovanie cez AngularJS

Začínate s Angularom a chceli by ste využiť jeho animácie a routovanie? Veríme že Vám týmto článkom pomôžeme.

Kedy použiť Angular routing?

Pokiaľ sa chystáte vytvoriť SPA webovú stránku, tak ste na správnom mieste. SPA, alebo ináč Single-page application je jednostránkový web, kde nedochádza k opätovnému načítaniu, ale dochádza iba k načítavaniu určitých častí na úvodnú stránku.

Ako na to?

V tomto routovaní použijeme modul ngRoute.

Takže dáme načítať:

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

Následne daný modul načítame do nami vytvorenej aplikácie:

var app = angular.module("mojaAplikacia", ["ngRoute"]);app.config(function($routeProvider) {....}

Pokiaľ máme toto nastavenie tak si musíme ešte určiť – ak kliknem – to a to načíta.

Ako na to?

V html kóde si dajte:

<a href="/">Domov</a><a href="#druha">Kontakt</a>

A vo vašej aplikácii:

$routeProvider.when("/", {templateUrl : "domov.htm"}).when("/druha ", {templateUrl : "kontakt.htm"});

Takže teraz máme už akciu ak kliknem – to a to načíta. Dobre ale kam?No a na to slúži ng-view.Napríklad :

<div ng-view></div>

Celé routovanie vyzerá takto:

<html><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script></head><body ng-app="mojaAplikacia"><a href="/">Domov</a><a href="#druha">Kontakt</a><div ng-view></div><script>var app = angular.module("mojaAplikacia", ["ngRoute"]);app.config(function($routeProvider) {$routeProvider.when("/", {templateUrl : "domov.htm"}).when("/druha ", {templateUrl : "kontakt.htm"});});</script></body></html>

Pokiaľ chcete do routovania pridať nejaký controller. Napríklad pridať css class tak je potrebné pozmeniť ng-view:

<div class=" {{ pageClass }}" ng-view></div>

a do aplikácie pridať controller:

templateUrl : "domov.htm" ,controller: 'domovController'

Následne vytvoriť controller:

app.controller('domovController', function($scope) {    $scope.pageClass = 'domov-css';})

Dúfam, že Vám tento článok trocha pomohol.AngZdar.

Kontaktujte nás

+421 948 633 959
info@becrea.sk

Pre klientov

helpdesk@becrea.sk

Klientská zóna

App_[BE]Klient

Naše služby

Tvorba web aplikácií
Tvorba moderných E-shopov
Tvorba mobilných aplikácií
SEO a PPC kampane
Sociálne siete (fb,tw,.)
Kreativita a grafika
Testovanie obsahu
Analýza web stránky

Naši spokojní klienti

Medzi našich klientov patrí Limousin travel s.r.o., Gastro Power Job s.r.o., IDOMASTER s.r.o., E&N Autoparts, s.r.o., EKOAUTO s.r.o., East Slovakia Travel, BOZPO - BJ, s.r.o. a ďalší, pridajte sa k naším spokojným klientom. Ďakujeme za prejavenú dôveru.

© 2018 S [BE]CREA