Kaj je AngularJS?

AngularJS je eden najbolj priljubljenih spletnih okvirov, ki temeljijo na JavaScript, ki se uporabljajo pri razvoju sprednjih strani. Uporablja se pri razvoju aplikacij za posamezne strani (SPA). AngularJS je odprtokodni okvir, ki ga v glavnem vzdržujeta Google in skupnost posameznikov, ki sodelujejo pri reševanju težav, ki se srečujejo pri razvoju aplikacij za eno stran. V tej temi bomo spoznali direktive AngularJS.

AngularJS ni nič, ampak razširja obstoječi HTML; Dodano je na strani HTML z oznako. AngularJS naredi spletno mesto HTML bolj odziven na uporabnikove akcije, tako da enostavno doda dodatne atribute. Najnovejša stabilna različica AngularJS je do zdaj 1.6.x.

Direktive AngularJS

AngularJS je učinkovit okvir, ki podpira arhitekturo, ki temelji na modelu View-Controller (MVC). Ponuja ključne funkcije, kot so dvosmerna vezava podatkov, krmilnik, storitve, direktive, predloge, usmerjevalnik, filtri, vbrizgavanje odvisnosti itd. Vse to so glavne značilnosti, ki sodelujejo pri učinkovitosti AngularJS.

Direktiva je ena izmed zelo uporabnih lastnosti v AngularJS. Razširja obstoječi HTML in omogoča enostavno razvijanje spletnih strani z novim vedenjem z uporabo osnovnega JavaScripta. Omogoča pisanje lastnih oznak po meri in njihovo preslikavo v obstoječi HTML. Ta funkcionalnost daje več svobode in razvijalcem omogoča veliko prožnost pri ustvarjanju in uporabi prilagojenih elementov v spletnih aplikacijah. Prav tako lahko tudi sami oblikujejo svoje direktive. V tem članku se bomo osredotočili predvsem na direktive AngularJS in poskušali pridobiti znanje o tej glavni značilnosti.

Direktive niso nič drugega kot označevalci elementov DOM v HTML-ju, kot so ime atributa, ime elementa, razred CSS ali komentar. Prevajalnik AngularJS nato temu elementu pripiše določeno vedenje. Vsaka direktiva ima ime in se začne z 'ng-'. Vsaka direktiva lahko odloči, kje jo lahko uporabimo v elementih DOM. Obstaja nekaj obstoječih direktiv, ki so že na voljo v AngularJS in podobno lahko določimo tudi sami.

Ogledali si bomo tri glavne vgrajene direktive, ki okvir AngularJS delijo na tri glavne dele.

1. ng-app: Ta direktiva prevajalcu sporoča, da je to aplikacija AngularJS. Direktiva, kjer je določena v DOM, postane korenski element aplikacije. Npr



AngularJS je na voljo kot datoteka JavaScript in je dodan v HTML s pomočjo oznake. Ng-app at element pove AngularJS, da je div korenski element in lastnik aplikacije AngularJS. Aplikacija AngularJS se začne od tega elementa in v njej je napisano karkoli je AngularJS koda.

2. ng-model: Ta direktiva veže vrednost s spletne strani, večinoma iz polja za vnos na spremenljivko aplikacije. V osnovi ta direktiva omogoča pošiljanje podatkov iz vhoda v aplikacijo AngularJS, ki jo je mogoče uporabiti nekje drugje. Npr

Vnesite:

Direktiva ng-model veže vhodno vrednost na spremenljivko aplikacije, imenovano "input". Nato bomo videli, kako lahko na naslednji strani prikažemo isto vrednost na spletni strani.

3. ng-bind: Ta direktiva veže vrednost iz aplikacije AngularJS na spletno stran. tj. Omogoča posredovanje podatkov iz aplikacije v oznake HTML. Npr

Vnesite:

Podatki, ki smo jih zajeli s pomočjo direktive "ng-model" v aplikacijski spremenljivki "input", so vezani na element oznake

z uporabo "ng-bind". To aplikacijo lahko zaženemo zdaj in vidimo, kako dinamično AngularJS posodablja vneseno vrednost na strani.

Poleg teh so v AngularJS na voljo še nekatere druge direktive, ki so pomembne.

4. ng-repeat: Ta direktiva ponavlja element HTML in se uporablja za niz predmetov. Ta direktiva je zelo uporabna v scenarijih, kot je prikazovanje elementov tabel na spletni strani.

5. ng-init: Ta direktiva se uporablja za inicializacijo vrednosti aplikacije AngularJS, preden naloži spletno stran.

Oblikovanje novih direktiv

lahko ustvarimo lastne direktive po meri skupaj z obstoječimi razpoložljivimi direktivami AngularJS. Zelo enostavno je ustvariti nove direktive z uporabo samo JavaScript. Nove direktive se ustvarijo z uporabo „. direktiva “. Npr



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 funkcija AngularJS, ki ustvari modul. Ustvarili smo direktivo po meri z imenom direktiva po meri, za katero je napisana funkcija. Kadarkoli bomo na tej spletni strani uporabljali to direktivo, se bo ta funkcija izvajala. V tem primeru gre za povratno predlogo, ki vsebuje kodo HTML.

Medtem ko moramo imenovati direktivo o poimenovanju, moramo uporabljati konvencijo o poimenovanju primerov kamel in pri tem uporabljati ločeno konvencijo o poimenovanju.

Obstajajo štirje načini, na katere se lahko sklicujemo na direktive,

Ime elementa

Kot je bilo uporabljeno v zadnjem primeru:

Atributi

Razred

Za uveljavitev direktive z uporabo imena razreda moramo dodati lastnosti omejevanja z vrednostjo 'C', medtem ko jo definiramo.

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..! "
);
));

Komentar

Za sklicevanje na direktivo z uporabo komentarja moramo med definiranjem dodati lastnost omeji z vrednostjo '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..! "
);
));

Lastnost nadomestitve: true je obvezna in bo originalni komentar nadomestila z direktivo, sicer bi bil komentar neviden.

Sklep - Angular JS direktive

Direktiva je torej zelo močna funkcija, ki je na voljo v AngularJS. Direktiva omogoča uvajanje nove skladnje, so kot označevalci in nam omogoča, da jim pripisujemo posebno vedenje. V AngularJS obstajajo razpoložljive direktive, ki so zelo koristne, prav tako lahko določimo lastne direktive po meri in jih uporabljamo. Smernice po meri razvijalcem omogočajo veliko prožnost in svobodo. Direktive dodajo novo funkcionalnost obstoječemu HTML-ju z inovativnim slogom in funkcijami.

Priporočeni članki

To je vodnik za direktive AngularJS. Tukaj razpravljamo o treh glavnih vgrajenih direktivah, ki okvir AngularJS delijo na tri glavne dele. Za več informacij si lahko ogledate tudi naslednje članke -

  1. Različice HTML
  2. Okviri na Javi
  3. AngularJS Arhitektura
  4. Slogi seznama HTML

Kategorija:

Razvoj programske opreme