AngularJS-i direktiivid: ng-init, ng-app, ng-modell ja ng-repeat
James Hartman
Mis on AngularJS-i direktiiv?
A Direktiivi AngularJS-is on käsk, mis annab HTML-ile uusi funktsioone. Kui Angular läbib HTML-koodi, leiab see esmalt lehelt direktiivid ja seejärel sõelub HTML-lehe vastavalt. Lihtne näide AngularJS-i direktiivist, mida oleme näinud varasemates peatükkides, on "ng-mudeli direktiiv". Seda direktiivi kasutatakse meie andmemudeli sidumiseks meie vaatega.
Märge: Teil võib HTML-lehel olla põhiline nurkkood ng-init, ng-repeat ja ng-model direktiividega, ilma et teil oleks vaja kontrollereid. Nende direktiivide loogika on failis Angular.js, mille pakub Google. Kontrollerid on järgmise taseme nurkprogrammeerimiskonstruktsioonid, mis võimaldavad äriloogikat, kuid nagu mainitud, et rakendus oleks nurkrakendus, pole kontrolleri olemasolu kohustuslik.
Kuidas luua AngularJS-is direktiive
Nagu sissejuhatuses määratlesime, on AngularJS-i direktiivid viis funktsioonide laiendamiseks HTML.
Siin on määratletud 4 direktiivi AngularJS.
Allpool on AngularJS-i direktiivide loend koos näidetega, mis selgitavad neid.
ng-rakendus AngularJS-is
Seda kasutatakse rakenduse Angular.JS lähtestamiseks. Kui see direktiiv on HTML-lehel paigas, ütleb see põhimõtteliselt Angularile, et see HTML-leht on rakendus angular.js.
Np-rakenduse näide
Allolev näide näitab, kuidas kasutada ng-app direktiivi. Selles näites näitame lihtsalt, kuidas muuta tavaline HTML-rakendus angularJS-rakenduseks.
<!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>
Koodi selgitus:
- Direktiiv „ng-app” lisatakse meie div-sildile, mis näitab, et see rakendus on angular.js-rakendus. Pange tähele, et ng-app direktiivi saab rakendada mis tahes märgendile, seega saab selle panna ka kehamärgendisse.
- Kuna oleme määratlenud selle rakenduse angular.js-rakendusena, saame nüüd kasutada angular.js-i funktsioone. Meie puhul kasutame avaldisi lihtsalt 2 stringi ühendamiseks.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Väljund näitab selgelt avaldise väljundit, mis sai võimalikuks ainult seetõttu, et määratlesime rakenduse angularjs-rakendusena.
ng-init AngularJS-is
Seda kasutatakse rakenduse andmete lähtestamiseks. Mõnikord võite oma rakenduse jaoks vajada kohalikke andmeid, seda saab teha ng-init direktiiviga.
Näide ng-init
Allolev näide näitab, kuidas kasutada ng-init direktiivi.
Selles näites loome muutuja nimega "TutorialName", kasutades ng-init direktiivi ja kuvame selle muutuja väärtuse lehel.
<!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>
Koodi selgitus:
- Direktiiv ng-init lisatakse meie div-sildile, et määratleda kohalik muutuja nimega "TutorialName" ja sellele antud väärtus on "AngularJS".
- Me kasutame AngularJs avaldisi, et kuvada muutuja nime "TutorialName" väljund, mis on määratletud meie ng-init direktiivis.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
Väljundis
- Tulemus näitab selgelt stringi "AngularJS" sisaldava avaldise väljundit. Selle põhjuseks on string "AngularJS" omistamine muutujale "TutorialName" jaotises ng-init.
ng-mudel AngularJS-is
Ja lõpuks on meil ng-mudeli direktiiv, mida kasutatakse HTML-juhtelemendi väärtuse sidumiseks rakenduse andmetega. Allolev näide näitab, kuidas kasutada ng-mudeli direktiivi.
ng-mudeli näide
Selles näites
- Loome 2 muutujat, mida nimetatakse "koguseks" ja "hinnaks". Need muutujad seotakse kahe tekstisisestuse juhtelemendiga.
- Seejärel kuvame kogusumma, mis põhineb nii hinna kui ka koguse väärtuste korrutamisel.
<!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>
Koodi selgitus:
- Direktiiv ng-init lisatakse meie div-sildile, et määratleda 2 kohalikku muutujat; ühte nimetatakse "koguseks" ja teist "hinnaks".
- Nüüd kasutame ng-mudeli direktiivi, et siduda tekstikastid "Inimesed" ja "Registreerimishind" vastavalt meie kohalike muutujatega "quantity" ja "price".
- Lõpuks näitame kogusummat avaldise kaudu, mis on koguse ja hinna muutujate korrutis.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
- Väljund näitab selgelt inimeste ja registreerimishinna väärtuste korrutamist.
Nüüd, kui lähete tekstikastidesse ja muudate inimeste ja registreerimishinna väärtust, muutub kogusumma automaatselt.
- Ülaltoodud väljund näitab lihtsalt andmete sidumise võimsust angularJs, mis saavutatakse kasutades ng-mudeli direktiiv.
ng-repeat AngularJS-is
Seda kasutatakse HTML-i elemendi kordamiseks. Allolev näide näitab, kuidas kasutada ng-repeat direktiiv.
Näide ng-repeat'ist
Selles näites
- Meil on massiivi muutujas ja peatükkide nimede massiiv
- seejärel kasutage massiivi iga elemendi loendiüksusena kuvamiseks käsku ng-repeat
<!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>
Koodi selgitus:
- Direktiiv ng-init lisatakse meie div-sildile, et määratleda muutuja nimega "peatükid", mis on 3 stringi sisaldav massiivimuutuja.
- Elementi ng-repeat kasutatakse reasisese muutuja "names" deklareerimisel ja peatükkide massiivi iga elemendi läbimisel.
- Lõpuks näitame kohaliku tekstisisese muutuja 'names' väärtust.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.
Väljund:
- Ülaltoodud väljund näitab lihtsalt, et ng-repeat direktiiv võttis massiivi iga väärtuse, mida nimetatakse peatükideks, ja lõi iga massiivi üksuse jaoks HTML-i loendiüksused.
kokkuvõte
- HTML-i funktsionaalsuse laiendamiseks kasutatakse direktiive. Angular pakub sisseehitatud käskkirju, näiteks
- ng-app – seda kasutatakse nurkrakenduse lähtestamiseks.
- ng-init – seda kasutatakse rakenduse muutujate loomiseks
- ng-mudel – seda kasutatakse HTML-i juhtelementide sidumiseks rakenduse andmetega
- ng-repeat – kasutatakse elementide kordamiseks nurga abil.
