Što je AngularJS?

AngularJS je jedan od najpopularnijih web okvira koji se temelji na JavaScriptu, a koji se koristi u razvoju na prednjem kraju. Koristi se u izradi aplikacija za jednu stranicu (SPA). AngularJS je okvir otvorenog koda koji uglavnom održava Google i zajednica pojedinaca uključenih u rješavanje problema s kojima se suočavaju u razvoju aplikacija za jednu stranicu. U ovoj ćemo temi upoznati AngularJS direktive.

AngularJS nije ništa drugo nego proširuje postojeći HTML; Dodano je u HTML stranici s oznakom. AngularJS čini HTML mjesto učinkovitijim za postupke korisnika dodavanjem dodatnih atributa lako. Najnovija stabilna inačica AngularJS-a trenutno je 1.6.x.

Smjernice AngularJS

AngularJS je učinkovit okvir koji podržava arhitekturu zasnovanu na modelu-View-Controller (MVC). Pruža osnovne značajke kao što su dvosmjerno povezivanje podataka, kontroler, usluge, direktive, predlošci, usmjerivač, filtri, ubrizgavanje ovisnosti itd. Sve su to glavne značajke koje kolaborativno djeluju na način da AngularJS postane učinkovit.

Ova direktiva jedna je od vrlo korisnih značajki u AngularJS. Proširuje postojeći HTML i omogućuje laganu izradu web stranica s novim ponašanjem koristeći temeljni JavaScript. Omogućuje pisanje vlastitih prilagođenih oznaka i njihovo preslikavanje u postojeći HTML. Ova funkcionalnost daje veću slobodu i omogućuje programerima veliku fleksibilnost u stvaranju i korištenju prilagođenih elemenata u web aplikacijama. Također, i oni mogu smišljati vlastite direktive. U ovom ćemo se članku uglavnom usredotočiti na AngularJS direktive i pokušati steći znanje o ovoj osnovnoj značajki.

Direktive su samo označivači na DOM elementima u HTML-u, kao što su ime atributa, ime elementa, CSS klasa ili komentar. Tada prevoditelj AngularJS pridaje određeno ponašanje tom elementu. Svaka direktiva ima naziv i započinje s 'ng-'. Svaka direktiva može odlučiti gdje se može koristiti u DOM elementima. Postoje neke direktive koje su već dostupne u AngularJS i slično možemo definirati i sami.

Pogledat ćemo tri glavne ugrađene direktive koje AngularJS okvir dijele na tri glavna dijela.

1. ng-app: Ova direktiva kompajleru govori da je to AngularJS aplikacija. Direktiva tamo gdje je definirana u DOM-u postaje korijenski element aplikacije. npr



AngularJS je dostupan kao JavaScript datoteka i dodaje se u HTML koristeći tag. Ng-app at element govori AngularJS da je div korijenski element i vlasnik AngularJS aplikacije. AngularJS aplikacija započinje od tog elementa i sve što je kod AngularJS, piše se u njemu.

2. ng-model: Ova direktiva veže vrijednost s web stranice, uglavnom iz polja unosa na aplikacijsku varijablu. U osnovi, ova direktiva omogućuje slanje podataka iz ulaza u AngularJS aplikaciju koji se mogu koristiti negdje drugdje. npr

Unesi:

Direktiva ng-modela veže ulaznu vrijednost na varijablu aplikacije koja se naziva "ulaz". Tada ćemo vidjeti kako možemo prikazati istu vrijednost na web stranici u sljedećem primjeru.

3. ng-bind: Ova direktiva veže vrijednost iz AngularJS aplikacije na web stranicu. tj. To omogućava prosljeđivanje podataka iz aplikacije u HTML oznake. npr

Unesi:

Podaci koji smo zabilježili pomoću direktive "ng-model" u aplikacijskoj varijabli "ulaz" vezani su za element oznake

pomoću "ng-bind". Sada možemo pokrenuti ovu aplikaciju i vidjeti kako dinamički AngularJS ažurira unesenu vrijednost na stranici.

Uz njih, u AngularJS-u su dostupne i neke druge direktive koje su važne.

4. ng-repeat: Ova direktiva ponavlja HTML element i koristi se za niz objekata. Ova je smjernica vrlo korisna u scenarijima poput prikazivanja elemenata tablice na web stranici.

5. ng-init: Ova se direktiva koristi za inicijaliziranje vrijednosti za AngularJS aplikaciju prije nego što učita web stranicu.

Stvaranje novih direktiva

možemo stvoriti vlastite prilagođene direktive zajedno sa postojećim AngularJS direktivama. Vrlo je lako stvoriti nove direktive koristeći samo JavaScript. Nove se direktive stvaraju pomoću ". funkcija ”. 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 koja stvara modul. Stvorili smo prilagođenu direktivu pod nazivom prilagođena direktiva za koju je napisana funkcija. Kad god koristimo ovu direktivu na našoj web stranici, ova će se funkcija izvršiti. U ovom slučaju to je povratni predložak koji sadrži HTML kôd.

Dok daje direktivu o imenovanju, trebamo koristiti konvenciju o imenovanju slučaja deva, a dok je pozivamo na nju, treba koristiti zasebnu konvenciju o imenovanju.

Postoje četiri načina na koja se možemo pozvati na direktive,

Naziv elementa

Kao što je korišteno u posljednjem primjeru:

Atribut

klasa

Da bismo se pozvali na direktivu koristeći se imenom klase, moramo dodati ograničenje svojstva s vrijednošću 'C', dok je 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

Da bismo se pozvali na direktivu koristeći komentar, moramo dodati svojstvo ograničenja s vrijednošću 'M', dok je definiramo.

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

Zamijeni svojstvo: true je obavezno i ​​zamijenit će izvorni komentar direktivom, inače će komentar biti nevidljiv.

Zaključak - AngularJS direktive

Dakle, Direktiva je vrlo moćna značajka dostupna u programu AngularJS. Direktiva omogućava uvođenje nove sintakse, nalik su markerima i omogućava nam da im pridajemo posebno ponašanje. U AngularJS-u postoje dostupne direktive koje su vrlo korisne, također možemo definirati vlastite prilagođene direktive i koristiti ih. Prilagođene direktive omogućuju programerima veliku fleksibilnost i slobodu. Direktive dodaju novu funkcionalnost postojećem HTML-u s inovativnim stilom i značajkama.

Preporučeni članci

Ovo je vodič za AngularJS direktive. Ovdje smo raspravljali o tri glavne ugrađene direktive koje dijele AngularJS okvir na tri glavna dijela. Možete također pogledati sljedeće članke da biste saznali više -

  1. Verzije Html
  2. Okviri na Javi
  3. AngularJS Arhitektura
  4. Stilovi popisa HTML-a

Kategorija:

Razvoj softvera