Co je AngularJS?

AngularJS je jedním z nejpopulárnějších webových rámců založených na JavaScriptu používaných při vývoji front-endů. Používá se při vývoji jednostránkových aplikací (SPA). AngularJS je open-source framework, který je udržován hlavně společností Google a komunitou jednotlivců zapojených do řešení problémů, se kterými se potýká vývoj jedné stránky. V tomto tématu se budeme učit o směrnicích AngularJS.

AngularJS není nic jiného než rozšiřuje existující HTML; Přidá se na stránku HTML se značkou. AngularJS umožňuje HTML stránkám lépe reagovat na akce uživatele přidáním dalších atributů snadno. Poslední stabilní verze AngularJS je nyní 1.6.x.

Směrnice AngularJS

AngularJS je efektivní rámec, který podporuje architekturu založenou na modelu-View-Controller (MVC). Poskytuje základní funkce, jako je obousměrná vazba dat, řadič, služby, směrnice, šablony, směrovač, filtry, závislost injekce atd. To vše jsou hlavní funkce, které spolupracují, aby byly AngularJS efektivní.

Směrnice je jednou z velmi užitečných funkcí v AngularJS. Rozšiřuje stávající HTML a umožňuje snadno vyvíjet webové stránky s novým chováním pomocí základního JavaScriptu. Umožňuje psát vlastní vlastní značky a mapovat je do existujícího HTML. Tato funkce poskytuje více svobody a umožňuje vývojářům velkou flexibilitu při vytváření a používání vlastních prvků ve webových aplikacích. Také mohou navrhovat své vlastní směrnice. V tomto článku se zaměříme hlavně na směrnice AngularJS a pokusíme se získat znalosti o této hlavní funkci.

Směrnice nejsou nic jiného než značky na elementech DOM v HTML, jako je název atributu, název elementu, třída CSS nebo komentář. Kompilátor AngularJS poté připojí uvedené chování k tomuto prvku. Každá směrnice má název a začíná na „ng-“. Každá směrnice se může rozhodnout, kde ji lze použít v prvcích DOM. Existuje několik existujících směrnic, které jsou již k dispozici v AngularJS, a podobně můžeme definovat sami.

Podíváme se na tři hlavní vestavěné směrnice, které dělí rámec AngularJS na tři hlavní části.

1. ng-app: Tato směrnice říká kompilátoru, že se jedná o aplikaci AngularJS. Směrnice, ve které je definována v DOM, se stává kořenovým prvkem aplikace. Např



AngularJS je k dispozici jako soubor JavaScript a přidává se do HTML pomocí značky. Ng-app at element říká AngularJS, že div je kořenový prvek a vlastník aplikace AngularJS. Aplikace AngularJS začíná od tohoto prvku a cokoli, co je kódem AngularJS, je zapsáno uvnitř tohoto prvku.

2. ng-model: Tato směrnice váže hodnotu z webové stránky, většinou ze vstupního pole na aplikační proměnnou. Tato směrnice v zásadě umožňuje odesílání dat ze vstupu do aplikace AngularJS, kterou lze použít jinde. Např

Zadejte:

Směrnice ng-model váže vstupní hodnotu k aplikační proměnné s názvem „input“. V dalším příkladu uvidíme, jak můžeme na webové stránce zobrazit stejnou hodnotu.

3. ng-bind: Tato směrnice váže hodnotu z aplikace AngularJS na webovou stránku. tj. umožňuje předávání dat z aplikace do značek HTML. Např

Zadejte:

Data, která jsme zachytili pomocí směrnice „ng-model“ v aplikační proměnné „input“, jsou vázáni na prvek tagu

pomocí „ng-bind“. Nyní můžeme tuto aplikaci spustit a uvidíme, jak dynamicky AngularJS aktualizuje zadanou hodnotu na stránce.

Spolu s nimi jsou v AngularJS k dispozici další směrnice, které jsou důležité.

4. ng-opakování: Tato směrnice opakuje prvek HTML a používá se na řadě objektů. Tato směrnice je velmi užitečná ve scénářích, jako je zobrazení prvků tabulky na webové stránce.

5. ng-init: Tato směrnice se používá k inicializaci hodnot pro aplikaci AngularJS před načtením webové stránky.

Vytváření nových směrnic

spolu s existujícími dostupnými direktivami AngularJS můžeme vytvořit vlastní vlastní direktivy. Je velmi snadné vytvářet nové příkazy pouze pomocí JavaScriptu. Nové směrnice jsou vytvářeny pomocí “. direktiva “. Např



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module je funkce AngularJS, která vytváří modul. Vytvořili jsme vlastní direktivu s názvem custom direktiva, pro kterou je funkce zapsána. Kdykoli použijeme tuto směrnici na naší webové stránce, bude tato funkce vykonána. V tomto případě je to vracející se šablona, ​​která obsahuje HTML kód.

Při pojmenování směrnice musíme použít konvenci pojmenování případů velbloudů a při jejím vyvolání je třeba použít konvenci názvů oddělených „-“.

Existují čtyři způsoby, jak můžeme vyvolat směrnice,

Název prvku

Jak bylo použito v posledním příkladu:

Atribut

Třída

Abychom vyvolali direktivu pomocí názvu třídy, musíme při definici přidat vlastnost omezit s hodnotou 'C'.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Komentář

Abychom vyvolali direktivu pomocí komentáře, musíme při definování přidat vlastnost omezit s hodnotou 'M'.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Vlastnost nahradit: true je povinná a nahradí původní komentář směrnicí, jinak by byl komentář neviditelný.

Závěr - AngularJS směrnice

Direktiva je tedy velmi výkonná funkce dostupná v AngularJS. Směrnice umožňuje zavést novou syntaxi, jsou jako značky a umožňuje nám k nim připojit zvláštní chování. V AngularJS jsou k dispozici existující direktivy, které jsou velmi užitečné, také můžeme definovat své vlastní direktivy a používat je. Vlastní směrnice umožňují vývojářům velkou flexibilitu a svobodu. Směrnice přidávají nové funkce do existujícího HTML s inovativním stylem a funkcemi.

Doporučené články

Toto je průvodce směrnicemi AngularJS. Zde diskutujeme tři hlavní vestavěné směrnice, které rozdělují rámec AngularJS do tří hlavních částí. Další informace naleznete také v následujících článcích -

  1. Verze Html
  2. Rámce v Javě
  3. AngularJS Architecture
  4. Styly seznamu HTML

Kategorie:

Vývoj softwaru