Što je AngularJS direktiva?
Direktiva u AngularJS naredba je koja daje HTML novu funkcionalnost. Kada angular prođe kroz HTML kôd, prvo će pronaći direktive na stranici, a zatim će u skladu s tim raščlaniti HTML stranicu.
Jednostavan primjer AngularJS direktive, koji smo vidjeli u ranijim poglavljima, jest "direktiva o ng-modelu". Ova se direktiva koristi za vezivanje našeg modela podataka za naš pogled.
Napomena: Možete imati osnovni kutni kôd na HTML stranici s direktivama ng-init, ng-repeat i ng-model bez potrebe da imate kontrolere. Logika ovih direktiva je u datoteci Angular.js koju pruža Google. Kontroleri su konstrukcije kutnog programiranja sljedeće razine koje omogućuju poslovnu logiku, ali kao što je spomenuto da aplikacija treba biti kutna aplikacija, nije obavezno imati kontroler.
U ovom vodiču naučit ćete-
- Kako stvoriti direktivu
- ng-aplikacija
- ng-init
- ng-model
- ng-ponoviti
Kako stvoriti direktivu
Kao što smo definirali u uvodu, AngularJS direktive način su za proširenje funkcionalnosti HTML-a.
U AngularJS su definirane 4 direktive.
Ispod je popis AngularJS direktiva, zajedno s primjerima koji objašnjavaju svaku od njih.
1) ng-aplikacija
To se koristi za inicijalizaciju aplikacije Angular.JS. Kada je ova direktiva na mjestu na HTML stranici, ona u osnovi govori Angular-u da je ova HTML stranica aplikacija angular.js.
Primjer u nastavku pokazuje kako koristiti direktivu ng-app. U ovom ćemo primjeru jednostavno pokazati kako napraviti normalnu HTML aplikaciju angularJS aplikacijom.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Objašnjenje koda:
- Direktiva "ng-app" dodana je našoj oznaci div kako bi naznačila da je ova aplikacija aplikacija angular.js. Imajte na umu da se direktiva ng-app može primijeniti na bilo koju oznaku, tako da se može staviti i u oznaku tijela.
- Budući da smo ovu aplikaciju definirali kao aplikaciju angular.js, sada možemo koristiti funkciju angular.js. U našem slučaju koristimo izraze za jednostavno spajanje 2 niza.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Izlaz jasno pokazuje izlaz izraza koji je omogućen samo zato što smo definirali aplikaciju kao angularjs aplikaciju.
2) ng-init
To se koristi za inicijalizaciju podataka aplikacije. Ponekad vam mogu zatrebati neki lokalni podaci za vašu aplikaciju, to se može učiniti s ng-init direktivom.
Primjer u nastavku pokazuje kako se koristi ng-init direktiva.
U ovom ćemo primjeru stvoriti varijablu nazvanu "TutorialName" pomoću ng-init direktive i prikazati vrijednost te varijable na stranici.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Objašnjenje koda:
- Direktiva ng-init dodana je u našu div oznaku kako bi definirala lokalnu varijablu nazvanu "TutorialName", a vrijednost koja joj je dana je "AngularJS".
- Koristimo izraze u AngularJs za prikaz rezultata promjene varijable "TutorialName" koja je definirana u našoj ng-init direktivi.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
U izlazu,
- Rezultat jasno pokazuje izlaz izraza koji sadrži niz "AngularJS". To je rezultat niza "AngularJS" koji je dodijeljen varijabli 'TutorialName' u odjeljku ng-init.
3) ng-model
I na kraju, imamo direktivu ng-model koja se koristi za vezanje vrijednosti HTML kontrole na podatke aplikacije. Primjer u nastavku pokazuje kako koristiti direktivu ng-model.
U ovom primjeru,
- Stvorit ćemo 2 varijable pod nazivom "količina" i "cijena". Te će varijable biti povezane s 2 kontrole unosa teksta.
- Zatim ćemo prikazati ukupan iznos na temelju množenja vrijednosti cijene i količine.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Objašnjenje koda:
- Direktiva ng-init dodana je u našu div oznaku kako bi definirala 2 lokalne varijable; jedno se naziva "količina", a drugo "cijena".
- Sada koristimo ng-model direktivu za povezivanje tekstualnih okvira "Ljudi" i "Cijena registracije" s našim lokalnim varijablama "količina", odnosno "cijena".
- Konačno, prikazujemo Total kroz izraz, koji je množenje varijabli količine i cijene.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
- Rezultat jasno pokazuje množenje vrijednosti za ljude i cijenu registracije.
Ako odete na tekstne okvire i promijenite vrijednost Osobe i Cijena registracije, Ukupni iznos automatski će se promijeniti.
- Gornji izlaz samo pokazuje snagu vezanja podataka u angularJs, što se postiže upotrebom direktive ng-model.
4) ng-ponoviti
To se koristi za ponavljanje HTML elementa. Primjer u nastavku pokazuje kako koristiti direktivu ng-repeat.
U ovom primjeru,
- Imat ćemo niz imena poglavlja u varijabli polja i
- zatim upotrijebite direktivu ng-repeat za prikaz svakog elementa niza kao stavke popisa
Event Registration Guru99 Global Event
- {{names}}
Objašnjenje koda:
- Direktiva ng-init dodana je u našu div oznaku kako bi definirala varijablu koja se naziva "poglavlja" koja je varijabla niza koja sadrži 3 niza.
- Element ng-repeat koristi se deklariranjem inline varijable koja se naziva "imena" i prolaskom kroz svaki element u nizu poglavlja.
- Konačno, prikazujemo vrijednost lokalne ugrađene varijable 'imena'.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
- Gornji izlaz samo pokazuje da je direktiva ng-repeat uzela svaku vrijednost u polju nazvanu "poglavlja" i kreirala HTML stavke popisa za svaku stavku u nizu.
Sažetak
- Direktive se koriste za proširenje funkcionalnosti HTML-a. Angular pruža ugrađene smjernice kao što su
- ng-app - Koristi se za inicijalizaciju kutne aplikacije.
- ng-init - Koristi se za stvaranje varijabli aplikacije
- ng-model - Koristi se za povezivanje HTML kontrola s podacima aplikacije
- ng-repeat - Koristi se za ponavljanje elemenata pomoću kutnih.