AngularJS

**AngularJS** (pre odlíšenie od svojho nástupcu Angular (verzia 2 a vyššia) tiež nazývaný AngularJS 1 alebo Angular 1) je JavaScript webový framework na strane klienta pre vytváranie jednostránkových webových aplikácií na základe vzoru Model-View-ViewModel. Môže sa tak zjednodušiť vývoj softvéru a testovanie komponentov. Bol vyvinutý, ako open-source framework americkou spoločnosťou Google Inc. a bude podporovaný do konca roku 2021. 

V septembri 2016 bola uvedená výrazne vylepšená, nie spätne kompatibilná verzia Angular 2.  Pojem *AngularJS* je teraz obmedzený na verziu&nbsp;1 použité, *Angular* bez špecifikácie iba pre vyššie verzie.

## Koncept
Filozofia AngularJS je založená na predpoklade, že pre návrh používateľských rozhraní a pre vzájomné prepojenie softvérových komponentov by sa malo použiť deklaratívne programovanie (v HTML), zatiaľ čo na implementáciu programovej logiky by sa malo použiť imperatívne programovanie (v JavaScripte vo forme AngularJS).

Štruktúra AngularJS je voľne založená na vzore MVC, najmä na vzore MVVM, podľa ktorého je softvér rozdelený na modely (dátové modely), zobrazenia (používateľské rozhranie) a zobrazovacie modely (na zmenu používateľského rozhrania po interakcii s údajmi). 

AngularJS rozširuje slovnú zásobu HTML o nové značky a parametre, *direktívy*, z ktorých sa generuje funkčnosť za behu. To sa deje prostredníctvom takzvaných *dátových väzieb*, prostredníctvom ktorých sú jednotlivé prvky webovej aplikácie prepojené s dátovým modelom. Ak používateľ interaguje s aplikáciou, môže sa dátový model meniť alebo zobrazovať inak, napríklad triedením tabuľky podľa iného kritéria. Týmto spôsobom je možné generovať funkčnosť bez toho, aby sa bolo treba uchýliť k manipulácii s DOM prostredníctvom jQuery alebo podobných knižníc.

Aplikácie AngularJS sú rozdelené do rôznych modulov:

* **Templates** (Šablóny) definujú štruktúru používateľského rozhrania.
* **Controller** (Ovládače) obsahujú logiku programu.
* **Scopes** (Oblasť pôsobnosti) spravujú údaje, ku ktorým má programový blok prístup.
* **Filtre** triedia údaje dynamicky podľa zadaných kritérií.
* **Providers** (Poskytovatelia) poskytujú ďalšie funkcie (zvyčajne vrátane interakcie s backendom).

Tieto moduly spája dohromady takzvaný *Dependency Injection Container* (kontajner pre správu vkládania závislostí)*,* keď sa aplikácia volá bootstrappingom, čím sa vytvorí voľne previazaný program, ktorý sa skladá zo znova použiteľných komponentov. Z technického hľadiska je takáto aplikáciou slučka, ktorá zachytáva udalostí, vyhodnocuje ich a poprípade aktualizuje zobrazenia. Nemeniteľné údaje je možné prepojiť pomocou takzvanej *jednorazovej* *väzby* a vylúčiť z ďalších aktualizácií.

## Štruktúra

### Controller
V AngularJS je model pre zobrazenie (ViewModel podľa vzoru Model-View-ViewModel) definovaný spolu s logikou v ovládači. Ovládače sa potom kombinujú do samostatných modulov. Moduly sú do aplikácie integrované pomocou integrovaného kontajnera na vkladanie závislostí. Zobrazenia je prepojené s modelmi. Táto väzba údajov je obojsmerná, čo znamená, že vstupy používateľov ovplyvňujú model, a programové zmeny modelu ovplyvňujú aj zobrazenia pre používateľov.

### Direktívy
AngularJS umožňuje vytvárať používateľom definované HTML prvky a atribúty, takzvané direktívy.

Preddefinované direktívy je možné identifikovať podľa menného priestoru ng v predpone (typ použitej predvoľby závisí od nastaveného validátora).

Na výber prvkov používa *AngularJS zabudovaný jQuery Lite (jqLite)* . Toto je zmenšená verzia jQuery, v ktorej sú integrované iba najdôležitejšie funkcie. Ak je jQuery integrovaný do HTML DOM, použije sa namiesto jQuery Lite.

### Interpolácia
Pomocou dvojitých zložených zátvoriek *()* je možné do kódu HTML vložiť JavaScript výrazy. Použitím zreťazenia `|` môžu byť pridané filtre, ktoré ovplyvňujú zobrazený výsledok.

Alternatívne sa môže použiť aj `ng-bind` príkazy  a `` vedú k zobrazeniu hodnoty `name` premennej. Avšak `ng-bind` bráni prehliadaču v zobrazení šablóny pri jej prvom načítaní, ak AngularJS nenačítal údaje dostatočne rýchlo na to, aby šablónu nahradil.

### Služby
Služby obsahujú biznis logiku a naviazajú na externé zdroje – najmä cez REST&nbsp;služby. Služby sú inštancované ako singleton.

Služby môžu byť programované interne alebo prevzaté od externých poskytovateľov. AngularJS však už poskytuje množstvo služieb (rozpoznateľných podľa prefixu $). Patria sem napríklad `$http` a `$resource`, ktoré sa používajú na vytváranie Ajax požiadaviek. Oba majú interný prístup k objektu XMLHttpRequest a líšia sa stupňom abstrakcie. Zatiaľ čo `$http` dokáže spracovať akékoľvek požiadavky HTTP, `$resource` sa špecializuje na REST služby.

### Komunikácia medzi oblasťami pôsobnosti
Každý ovládač má svoj vlastný `$scope`, ktorý zapuzdruje funkcie a dáta patriace k ovládaču. Na to aby ovládače mohli komunikovať s inými ovládačmi alebo so službami, sú k dispozícií `$emit` a `$broadcast` metódy z objektu `$scope`, poprípade z objektu `$rootScope`. `$emit` sa používa na odosielanie správ na vyššie úrovne, zatiaľ čo `$broadcast` sa používa na odosielanie správ na nižšie úrovne.

Aby mohol ovládač alebo služba reagovať na správu, musí sa zaregistrovať pomocou metódy `$on` pre typ správy (vzor pozorovateľa).

### Rúter v jednostránkových aplikáciách
V jednostránkových aplikáciách sa trasy používajú na definovanie priradenia adries URL konkrétnym zobrazeniam. Na tento účel poskytuje `ngRoute` modul . To umožňuje dynamické načítanie rôznych zobrazení (fragmentov HTML) pomocou `ng-view` direktív. Objekt `$location`  umožňuje priame spracovanie adresy URL prehliadača, aby bolo možné simulovať navigáciu po stránke. 
## Program Hello World
Nasledujúci text zobrazuje „Ahoj svet!" program v AngularJS:

V `Default.html`:
```html
<!DOCTYPE html>
<html>
   <head>
      <title>Ahoj svet!</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
      <script src="controller.js"></script>
   </head>
   <body>
      <div ng-app="helloWorldModule">
         <div ng-controller="HelloWorldController">
            Name: <input type="text" ng-model="name" required>
            <hr>
            <div>Ahoj !</div>
         </div>
      </div>
   </body>
</html>
```
V `controller.js`:
```js
'use strict';
// definícia modulu
var helloWorldModule = angular.module("helloWorldModule", []);

// priradenie ovladača k modulu
helloWorldModule.controller("HelloWorldController", function ($scope) {
   $scope.name = "World";
});
```


## Referencie

## Vonkajšie odkazy

* Oficiálna webová stránka AngularJS

## Zdroj

Kategória:Softvér pod licenciou MIT
Kategória:JavaScript knižnice