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 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:
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 codice_1 môžu byť pridané filtre, ktoré ovplyvňujú zobrazený výsledok.
Alternatívne sa môže použiť aj codice_2 príkazy codice_3 a codice_4 vedú k zobrazeniu hodnoty codice_5 premennej. Avšak codice_2 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 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 codice_7 a codice_8, 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 codice_7 dokáže spracovať akékoľvek požiadavky HTTP, codice_8 sa špecializuje na REST služby.
Komunikácia medzi oblasťami pôsobnosti.
Každý ovládač má svoj vlastný codice_11, 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í codice_12 a codice_13 metódy z objektu codice_11, poprípade z objektu codice_15. codice_12 sa používa na odosielanie správ na vyššie úrovne, zatiaľ čo codice_13 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 codice_18 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 codice_19 modul . To umožňuje dynamické načítanie rôznych zobrazení (fragmentov HTML) pomocou codice_20 direktív. Objekt codice_21 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 codice_22:
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Ahoj svet!&lt;/title&gt;
 &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"&gt;&lt;/script&gt;
 &lt;script src="controller.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div ng-app="helloWorldModule"&gt;
 &lt;div ng-controller="HelloWorldController"&gt;
 Name: &lt;input type="text" ng-model="name" required&gt;
 &lt;hr&gt;
 &lt;div&gt;Ahoj !&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
V codice_23:
'use strict';
// definícia modulu
var helloWorldModule = angular.module("helloWorldModule", []);
// priradenie ovladača k modulu
helloWorldModule.controller("HelloWorldController", function ($scope) {
 $scope.name = "World";