AngularJS

AngularJS
Logo
Základné informácie
Autor	Google Inc.
Lokalizácia	JavaScript
Typ softvéru	Webový framework
Licencia	MIT
Pozri ajInformač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) jeJavaScriptwebový frameworkna 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érua testovanie komponentov. Bol vyvinutý, akoopen-sourceframeworkamerickouspoločnosťouGoogle Inc.a bude podporovaný do konca roku 2021.

V septembri 2016 bola uvedená výrazne vylepšená, nie spätne kompatibilná verzia Angular 2.PojemAngularJSje teraz obmedzený na verziu 1 použité,Angularbez š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ýchdá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 sDOMprostredníctvomjQueryalebo podobnýchknižníc.

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

• Templates(Šablóny) definujú štruktúrupouží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.
• Filtretriedia údaje dynamicky podľa zadaných kritérií.
• Providers(Poskytovatelia) poskytujú ďalšie funkcie (zvyčajne vrátane interakcie sbackendom).

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 takzvanejjednorazovejväzbya 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ľamenného priestorung 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žívaAngularJS zabudovaný jQuery Lite (jqLite).Toto je zmenšená verziajQuery,v ktorej sú integrované iba najdôležitejšie funkcie. Ak je jQuery integrovaný do HTMLDOM,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ímzreťazenia|môžu byť pridané filtre, ktoré ovplyvňujú zobrazený výsledok.

Alternatívne sa môže použiť ajng-bindpríkazy<span ng-bind= "name" ></span>a<span>{{name}}</span>vedú k zobrazeniu hodnotynamepremennej. Avšakng-bindbrá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ä cezRESTslužby. Služby sú inštancované akosingleton.

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$httpa$resource,ktoré sa používajú na vytváranieAjaxpožiadaviek. Oba majú interný prístup k objektu XMLHttpRequest a líšia sa stupňom abstrakcie. Zatiaľ čo$httpdokáže spracovať akékoľvek požiadavky HTTP,$resourcesa š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í$emita$broadcastmetódy z objektu$scope,poprípade z objektu$rootScope.$emitsa používa na odosielanie správ na vyššie úrovne, zatiaľ čo$broadcastsa 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$onpre 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 priradeniaadries URLkonkrétnym zobrazeniam. Na tento účel poskytujengRoutemodul. To umožňuje dynamické načítanie rôznych zobrazení (fragmentov HTML) pomocoung-viewdirektív. Objekt$locationumožň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:

VDefault.html:

<!DOCTYPE html>
<html>
<head>
<title>Ahoj svet!</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<scriptsrc="controller.js"></script>
</head>
<body>
<divng-app="helloWorldModule">
<divng-controller="HelloWorldController">
Name:<inputtype="text"ng-model="name"required>
<hr>
<div>Ahoj {{name}}!</div>
</div>
</div>
</body>
</html>

Vcontroller.js:

'use strict';
// definícia modulu
varhelloWorldModule=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ánkuAngularJSna nemeckej Wikipédii.