AngularJS Direktive: ng-init, ng-app, ng-model & ng-repeat
James Hartman
ล to je Direktiva u AngularJS?
A Direktiva u AngularJS je naredba koja HTML-u daje novu funkcionalnost. Kada Angular prolazi kroz HTML kod, prvo ฤe pronaฤi direktive na stranici, a zatim analizirati HTML stranicu u skladu s tim. Jednostavan primjer AngularJS direktive, koju smo vidjeli u ranijim poglavljima je "ng-model direktiva". Ova se direktiva koristi za povezivanje naลกeg podatkovnog modela s naลกim pogledom.
Biljeลกka: Osnovni Angular kod moลพete imati na HTML stranici s direktivama ng-init, ng-repeat i ng-model bez potrebe za kontrolerom. Logika za ove direktive nalazi se u Angular.js datoteci koju pruลพa GoogleKontroleri su sljedeฤa razina Angular programskih konstrukcija koje omoguฤuju poslovnu logiku, ali kao ลกto je spomenuto, da bi aplikacija bila Angular aplikacija nije obavezno imati kontroler.
Kako stvoriti direktive u AngularJS
Kao ลกto smo definirali u uvodu, AngularJS direktive su naฤin za proลกirenje funkcionalnosti HTML.
Postoje 4 direktive definirane u AngularJS.
Ispod je popis AngularJS direktiva zajedno s primjerima koji objaลกnjavaju svaku od njih.
ng-aplikacija u AngularJS
Ovo se koristi za inicijalizaciju Angular.JS aplikacije. Kada se ova direktiva postavi na HTML stranicu, ona u osnovi govori Angularu da je ova HTML stranica angular.js aplikacija.
Primjer np-aplikacije
Primjer u nastavku pokazuje kako koristiti direktivu ng-app. U ovom primjeru jednostavno ฤemo pokazati kako normalnu HTML aplikaciju uฤiniti angularJS aplikacijom.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
Code Objaลกnjenje:
- Direktiva "ng-app" dodaje se naลกoj div oznaci kako bi se naznaฤilo da je ova aplikacija angular.js aplikacija. Imajte na umu da se direktiva ng-app moลพe primijeniti na bilo koju oznaku, tako da se takoฤer moลพe staviti u oznaku tijela.
- Buduฤi da smo ovu aplikaciju definirali kao angular.js aplikaciju, sada moลพemo koristiti funkcionalnost 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 kรดd u pregledniku.
Izlaz:
Izlaz jasno pokazuje izlaz izraza koji je omoguฤen samo zato ลกto smo definirali aplikaciju kao angularjs aplikaciju.
ng-init u AngularJS
Ovo se koristi za inicijalizaciju podataka aplikacije. Ponekad ฤete moลพda trebati neke lokalne podatke za svoju aplikaciju, to se moลพe uฤiniti s ng-init direktivom.
Primjer ng-init
Primjer u nastavku pokazuje kako koristiti direktivu ng-init.
U ovom primjeru ฤemo stvoriti varijablu pod nazivom "TutorialName" pomoฤu direktive ng-init i prikazati vrijednost te varijable na stranici.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
Code Objaลกnjenje:
- Direktiva ng-init dodaje se naลกoj div oznaci za definiranje lokalne varijable pod nazivom "TutorialName", a vrijednost koja joj je dana je "AngularJS".
- Koristimo izraze u AngularJs-u za prikaz izlaza naziva varijable "TutorialName" koji je definiran u naลกoj direktivi ng-init.
Ako se kรดd uspjeลกno izvrลกi, sljedeฤi ฤe se izlaz prikazati kada pokrenete kรดd u pregledniku.
Izlaz:
U izlazu,
- Rezultat jasno pokazuje izlaz izraza koji sadrลพi niz "AngularJS". To je rezultat toga ลกto je niz "AngularJS" dodijeljen varijabli "TutorialName" u odjeljku ng-init.
ng-model u AngularJS
I konaฤno, imamo direktivu ng-model, koja se koristi za vezanje vrijednosti HTML kontrole s podacima aplikacije. Primjer u nastavku pokazuje kako koristiti direktivu ng-model.
Primjer ng-modela
U ovom primjeru
- Stvorit ฤemo 2 varijable pod nazivom "koliฤina" i "cijena". Ove varijable bit ฤe vezane za 2 kontrole unosa teksta.
- Zatim ฤemo prikazati ukupni iznos na temelju mnoลพenja vrijednosti cijene i koliฤine.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
Code Objaลกnjenje:
- Direktiva ng-init je dodana naลกoj div oznaci za definiranje 2 lokalne varijable; jedan se zove "koliฤina", a drugi je "cijena".
- Sada koristimo direktivu ng-model za vezanje tekstualnih okvira "People" i "Registration price" na naลกe lokalne varijable "quantity" i "price".
- Konaฤno, prikazujemo ukupan iznos putem izraza, 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 kรดd u pregledniku.
Izlaz:
- Izlaz jasno pokazuje mnoลพenje vrijednosti za osobe i cijenu registracije.
Sada, ako odete u tekstne okvire i promijenite vrijednost Osobe i cijene registracije, Ukupni ฤe se automatski promijeniti.
- Gornji rezultat samo pokazuje snagu povezivanja podataka u angularJs, koja se postiลพe upotrebom direktiva ng-model.
ng-ponovi u AngularJS
Ovo se koristi za ponavljanje HTML elementa. Primjer u nastavku pokazuje kako koristiti ng-repeat direktiva.
Primjer ng-repeat
U ovom primjeru
- Imat ฤemo niz naziva poglavlja u varijabli polja i
- zatim upotrijebite direktivu ng-repeat za prikaz svakog elementa niza kao stavke popisa
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
Code Objaลกnjenje:
- Direktiva ng-init dodaje se naลกoj div oznaci za definiranje varijable pod nazivom "chapters" koja je varijabla polja koja sadrลพi 3 niza.
- Element ng-repeat koristi se deklariranjem ugraฤene varijable pod nazivom "names" i prolaskom kroz svaki element u nizu poglavlja.
- Konaฤno, prikazujemo vrijednost lokalne ugraฤene varijable 'names'.
Ako se kรดd uspjeลกno izvrลกi, sljedeฤi ฤe se izlaz prikazati kada pokrenete kรดd u pregledniku.
Izlaz:
- Gornji izlaz samo pokazuje da je direktiva ng-repeat uzela svaku vrijednost u nizu pod nazivom "poglavlja" i stvorila stavke HTML popisa za svaku stavku u nizu.
Rezime
- Direktive se koriste za proลกirenje funkcionalnosti HTML-a. Angular pruลพa ugraฤene direktive kao ลกto su
- ng-app โ Ovo se koristi za pokretanje kutne aplikacije.
- ng-init โ Ovo se koristi za stvaranje varijabli aplikacije
- ng-model โ Ovo se koristi za vezanje HTML kontrola s podacima aplikacije
- ng-repeat โ Koristi se za ponavljanje elemenata pomoฤu kutnog.
