Čo je AngularJS?

AngularJS je jedným z najpopulárnejších webových rámcov založených na JavaScripte, ktoré sa používajú pri vývoji front-endov. Používa sa pri vývoji jednostránkových aplikácií (SPA). AngularJS je open-source framework, ktorý spravuje najmä spoločnosť Google a komunita jednotlivcov zapojených do riešenia problémov, s ktorými sa stretáva vývoj aplikácií pre jednu stránku. V tejto téme sa budeme učiť o smerniciach AngularJS.

AngularJS nie je nič iné ako rozširuje existujúci HTML; Pridá sa na stránku HTML so značkou. AngularJS robí web HTML citlivejším na akcie používateľa jednoduchým pridaním ďalších atribútov. Posledná stabilná verzia AngularJS je odteraz 1.6.x.

Smernice AngularJS

AngularJS je efektívny rámec, ktorý podporuje architektúru založenú na modeli-View-Controller (MVC). Poskytuje základné funkcie, ako je obojsmerné viazanie údajov, radič, služby, smernice, šablóny, smerovač, filtre, závislosť vstrekovania atď. To všetko sú hlavné vlastnosti, ktoré spolupracujú na efektívnosti systému AngularJS.

Smernica je jednou z veľmi užitočných funkcií systému AngularJS. Rozširuje existujúci HTML a umožňuje vývoj webových stránok pomocou nového správania pomocou jednoduchého JavaScriptu. Umožňuje písať vlastné vlastné značky a mapovať ich do existujúceho HTML. Táto funkcia poskytuje väčšiu slobodu a vývojárom umožňuje veľkú flexibilitu pri vytváraní a používaní vlastných prvkov vo webových aplikáciách. Môžu tiež navrhovať svoje vlastné smernice. V tomto článku sa zameriame najmä na smernice AngularJS a pokúsime sa získať vedomosti o tejto hlavnej funkcii.

Smernice nie sú nič iné ako značky na elementoch DOM v HTML, ako je napríklad názov atribútu, názov prvku, trieda CSS alebo komentár. Kompilátor AngularJS potom pripojí špecifikované správanie k tomuto prvku. Každá smernica má názov a začína sa „ng-“. Každá smernica sa môže rozhodnúť, kde ju možno použiť v prvkoch DOM. Existuje niekoľko existujúcich smerníc, ktoré už sú v AngularJS k dispozícii, a podobne si ich môžeme sami definovať.

Pozrime sa na tri hlavné zabudované smernice, ktoré rozdeľujú rámec AngularJS na tri hlavné časti.

1. ng-app: Táto smernica hovorí kompilátoru, že ide o aplikáciu AngularJS. Smernica, kde je definovaná v DOM, sa stáva koreňovým prvkom aplikácie. napr



AngularJS je k dispozícii ako súbor JavaScript a pridáva sa do HTML pomocou značky. Ng-app at element hovorí AngularJS, že div je koreňový prvok a vlastník aplikácie AngularJS. Aplikácia AngularJS začína od tohto prvku a bez ohľadu na to, čo je kód AngularJS, je v ňom napísaná.

2. ng-model: Táto smernica viaže hodnotu z webovej stránky, väčšinou zo vstupného poľa na aplikačnú premennú. Táto smernica v zásade umožňuje odosielanie údajov zo vstupu do aplikácie AngularJS, ktorú je možné použiť niekde inde. napr

Enter:

Smernica ng-model viaže vstupnú hodnotu k aplikačnej premennej s názvom „input“. V nasledujúcom príklade uvidíme, ako môžeme na webovej stránke zobraziť rovnakú hodnotu.

3. ng-bind: Táto smernica viaže hodnotu z aplikácie AngularJS na webovú stránku. tj Umožňuje preposielanie údajov z aplikácie do značiek HTML. napr

Enter:

Dáta, ktoré sme zachytili pomocou smernice „ng-model“ v aplikačnej premennej „vstup“, sú viazané na prvok značky

pomocou „ng-bind“. Teraz môžeme spustiť túto aplikáciu a zistiť, ako dynamicky AngularJS aktualizuje zadanú hodnotu na stránke.

Spolu s nimi sú v AngularJS k dispozícii ďalšie smernice, ktoré sú dôležité.

4. ng-opakovanie: Táto smernica opakuje prvok HTML a používa sa na celý rad objektov. Táto smernica je veľmi užitočná v scenároch, ako je napríklad zobrazovanie prvkov tabuľky na webovej stránke.

5. ng-init: Táto smernica sa používa na inicializáciu hodnôt pre aplikáciu AngularJS pred načítaním webovej stránky.

Vytváranie nových smerníc

spolu s existujúcimi dostupnými smernicami AngularJS môžeme vytvoriť vlastné vlastné smernice. Je veľmi ľahké vytvárať nové smernice iba pomocou JavaScriptu. Nové smernice sa vytvárajú pomocou „. smernica “. napr



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 funkcia AngularJS, ktorá vytvára modul. Vytvorili sme vlastnú direktívu s názvom custom direktíva, pre ktorú je funkcia napísaná. Kedykoľvek použijeme túto smernicu na našej webovej stránke, táto funkcia bude vykonaná. V takom prípade je to vracajúca sa šablóna, ktorá obsahuje kód HTML.

Pri pomenovávaní smernice musíme použiť konvenciu pomenovávania veľblúdov a pri jej vyvolaní musíme použiť konvenciu pomenovávania „-“.

Existujú štyri spôsoby, ako sa môžeme odvolávať na smernice,

Názov prvku

Ako sa používa v poslednom príklade:

atribút

Trieda

Aby sme vyvolali direktívu použitím názvu triedy, musíme pri jej definícii pridať vlastnosť obmedzenia 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ár

Na vyvolanie smernice pomocou komentára musíme pri definovaní pridať vlastnosť obmedzení 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..! "
);
));

Vlastnosť nahradiť: true je povinná a nahradí pôvodný komentár smernicou, inak by bol komentár neviditeľný.

Záver - AngularJS smernice

Smernica je teda veľmi výkonnou funkciou, ktorá je k dispozícii v systéme AngularJS. Smernica umožňuje zaviesť novú syntax, sú ako značky a umožňuje nám k nim prikladať osobitné správanie. V AngularJS existujú dostupné smernice, ktoré sú veľmi užitočné, tiež môžeme definovať naše vlastné smernice a používať ich. Vlastné smernice umožňujú vývojárom veľkú flexibilitu a slobodu. Smernice pridávajú novú funkcionalitu do existujúceho HTML s inovatívnym štýlom a funkciami.

Odporúčané články

Toto je príručka smerníc AngularJS. Tu diskutujeme o troch hlavných zabudovaných smerniciach, ktoré rozdeľujú rámec AngularJS na tri hlavné časti. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

  1. Verzie Html
  2. Rámce v Jave
  3. AngularJS Architecture
  4. Štýly zoznamu HTML

Kategórie:

Vývoj softvéru