AngularJS

Pri nástupe HTML5 sa JavaScript o dosť rozrástol. Aplikácie v tomto jazyku sa stávajú čím ďalej viac komplexné a samotná knižnica jQuery na to prestáva stačiť. Má totiž jednu veľkú nevýhodu a to, že mieša dohromady aplikačnú logiku, spracovanie udalostí a manipuláciu s DOM. Pri menších aplikáciách, webových stránok či widgetov to zase taký problém nie je. Problém nastáva, ak sa daná aplikácia či widget rozrastie natoľko, že sa programátor začne v kóde strácať. V takom prípade nastupuje na rad architektúra MVC alebo nejaký jej derivát.

Keď sme sa teda rozhodli používať MVC architektúru, narazíme na pár problémov. Ako ju implementovať v JavaScripte a ako urobiť template systém? HTML je dobrý pre deklaráciu statických dokumentov, ale čo keď potrebujeme vytvoriť dynamické aplikácie, kde sa informácia vo View (teda v HTML) neustále mení?

AngularJS je MVC framework od Googlu, ktorý rozširuje HTML o rad elementov a atribútov, vďaka ktorým je vytvoriť taký dynamický HTML dokument hračka. Navyše umožňuje vytvárať vaše vlastné HTML elementy a atribúty, obsahuje two-way data binding a má veľa ďalších užitočných vlastností vďaka ktorým sa kód stáva extrémne prehľadný, jednoduchý a krátky.

Najlepšie bude, predviesť tento framework na konkrétnom príklade. Vytvoríme si slider obrázkov a zobrazenie obsahu divka s efektom. Pre obyčajný javascript alebo aj jQuery je táto úloha ťažšia, než sa na prvý pohľad zdá.

Pre AngularJS je to však hračka.


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script type="text/javascript" rc="js/less.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1><small>Galery slider</small></h1>
<div class="container" ng-app="animateApp" ng-controller="mainController">
<div  ng-controller="CarouselCtrl as cs" class="carousel">
<div class="controls"><a ng-click="cs.prev()" class="prev"><</a><a ng-click="cs.next()" class="next">></a></div>
<div class="window">
<div ng-repeat="(key,src) in cs.images" ng-class="cs.position(key)" class="pane">
<img ng-src="{{src}}"/>
</div>
</div>
</div>
<div class="text-center">
<h1><small>ngShow and ngHide</small></h1>
<i class="btn btn-primary" ng-click="logo = !logo" ng-class="{ active: logo }">LOGO</i>
<a class="btn btn-success" href="#" ng-click="hugo = !hugo" ng-class="{ active: hugo }">HUGO</a>
</div>
<div class="row">
<div class="col-xs-6"><div class="jumbotron" ng-show="logo">
<img src="VAS IMG.png" class="img-responsive img-thumbnail">
</div>
</div>
<div class="col-xs-6">
<div class="jumbotron" ng-show="hugo">
<img src="VAS IMG.png" class="img-responsive img-thumbnail">
</div>
</div>
</div>
</div>
</body>
</html>


Funkcia pre zobrazenie div vyzerá nasledovne:

var app = angular.module('animateApp', ['ngAnimate'])
app.controller('mainController', function($scope) {
$scope.logo = false;
$scope.hugo = false;
});
 


Na prvý pohľad klasický HTML dokument, ale niektoré elementy obsahujú špeciálne atribúty (direktívy), ktoré do klasického HTML nepatrí. Tieto direktívy spracováva Angular.

ngApp

Táto direktíva automaticky spustí našu aplikáciu. Ako parameter očakáva názov hlavného modulu aplikácie.

ngModel

Je direktíva, ktorá hovorí ANGULAR, aby použil two-way data binding. Všetky zmeny vo scope sa premietnu na tomto elemente a naopak, všetky zmeny hodnoty viazaného elementu sa prejavia vo scope. Funguje iba s elementmi input, select a textarea

{{AngularJS výraz}}

Výraz medzi dvoma zloženými zátvorkami tiež spracováva AngularJS. Syntax je rovnaká ako syntax JavaScriptu. Môžete tu vypisovať hodnoty do poľa, objektov, premenných, volať funkcie a používať tzv. Filtre. Filtre sa zapisujú za znak '|' a majú syntax | méno_filtru: argument1: argument2.

ngRepeat

Je cyklus, ktorý prejde pole a pre každú iteráciu zopakuje prvok, ku ktorému sa viaže. Vytvára vo vnútri elementu špeciálne premenné. Jednak premennú obsahujúcu aktuálnu položku pole a potom špeciálnu premennú, ktorá obsahuje aktuálny index položky.

ngController

Odovzdá danému elementu scope Controlleru, ktorého mu odovzdáme parametrom. Teda iba meno Controlleru.

Model a Controller

V AngularJS je modelom akýkoľvek objekt odovzdaný do scope.

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