AngularJS

AngularJS
Logo
Základné informácie
Autor	Google Inc.
Lokalizácia	JavaScript
Typ softvéru	Webový framework
Licencia	MIT
Pozri aj Informačný portál

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:

• 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).

Syntax predpôn pre direktívy

Validátor	príklad
žiadny	ng-repeat="item in items"
XML	ng:repeat="item in items"
HTML5	data-ng-repeat="item in items"
xHTML	x-ng-repeat="item in items"

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 (double-curly syntax) 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 <span ng-bind="name"></span> a <span>{{name}}</span> 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 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:

<!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 {{name}}!</div>
         </div>
      </div>
   </body>
</html>

V controller.js:

'use strict';
// definícia modulu
var helloWorldModule = angular.module("helloWorldModule", []);

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

Vonkajšie odkazy

• Oficiálna webová stránka AngularJS

Zdroj

Tento článok je čiastočný alebo úplný preklad článku AngularJS na nemeckej Wikipédii.