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: Možete imati osnovni angular kod na HTML stranici s direktivama ng-init, ng-repeat i ng-model bez potrebe za kontrolerima. Logika za ove direktive nalazi se u datoteci Angular.js koju osigurava Google. Kontroleri su sljedeće razine kutnih programskih konstrukcija koje omogućuju poslovnu logiku, ali kao što je spomenuto da bi aplikacija bila kutna 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>
Objašnjenje koda:
- 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>
Objašnjenje koda:
- 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>
Objašnjenje koda:
- 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>
Objašnjenje koda:
- 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.
