AngularJS-Anweisungen: ng-init, ng-app, ng-model und ng-repeat
James Hartmann
Was ist eine Direktive in AngularJS?
A Direktive in AngularJS ist ein Befehl, der HTML neue Funktionalitรคt verleiht. Wenn Angular den HTML-Code durchgeht, findet es zunรคchst die Anweisungen auf der Seite und analysiert dann die HTML-Seite entsprechend. Ein einfaches Beispiel fรผr eine AngularJS-Direktive, die wir in frรผheren Kapiteln gesehen haben, ist die โng-model-Direktiveโ. Diese Direktive wird verwendet, um unser Datenmodell an unsere Ansicht zu binden.
Hinweis: Mit den Direktiven ng-init, ng-repeat und ng-model kรถnnen Sie einfachen Angular-Code in einer HTML-Seite haben, ohne dass Controller erforderlich sind. Die Logik fรผr diese Anweisungen befindet sich in der von Google bereitgestellten Datei Angular.js. Controller sind die Angular-Programmierkonstrukte der nรคchsten Ebene, die Geschรคftslogik ermรถglichen. Wie bereits erwรคhnt, ist es jedoch nicht zwingend erforderlich, รผber einen Controller zu verfรผgen, damit eine Anwendung eine Angular-Anwendung ist.
So erstellen Sie Anweisungen in AngularJS
Wie wir in der Einleitung definiert haben, sind AngularJS-Direktiven eine Mรถglichkeit, die Funktionalitรคt von zu erweitern HTML.
Es sind 4 Anweisungen definiert in AngularJS.
Nachfolgend finden Sie eine Liste der AngularJS-Direktiven sowie Beispiele zur Erlรคuterung jeder einzelnen Direktive.
ng-App in AngularJS
Dies wird verwendet, um eine Angular.JS-Anwendung zu initialisieren. Wenn diese Anweisung in einer HTML-Seite vorhanden ist, teilt sie Angular grundsรคtzlich mit, dass es sich bei dieser HTML-Seite um eine Angular.js-Anwendung handelt.
Beispiel einer NP-App
Das folgende Beispiel zeigt, wie die ng-app-Direktive verwendet wird. In diesem Beispiel zeigen wir lediglich, wie man aus einer normalen HTML-Anwendung eine AngularJS-Anwendung macht.
<!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 Erlรคuterung:
- Die Direktive โng-appโ wird zu unserem div-Tag hinzugefรผgt, um anzuzeigen, dass es sich bei dieser Anwendung um eine Angular.js-Anwendung handelt. Beachten Sie, dass die ng-app-Direktive auf jedes Tag angewendet werden kann, sodass sie auch in das Body-Tag eingefรผgt werden kann.
- Da wir diese Anwendung als Angular.js-Anwendung definiert haben, kรถnnen wir jetzt die Angular.js-Funktionalitรคt nutzen. In unserem Fall verwenden wir Ausdrรผcke, um einfach zwei Zeichenfolgen zu verketten.
Wenn der Code erfolgreich ausgefรผhrt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausfรผhren.
Ausgang:
Die Ausgabe zeigt deutlich die Ausgabe des Ausdrucks, die nur mรถglich war, weil wir die Anwendung als AngularJS-Anwendung definiert haben.
ng-init in AngularJS
Dies wird verwendet, um Anwendungsdaten zu initialisieren. Manchmal benรถtigen Sie mรถglicherweise einige lokale Daten fรผr Ihre Anwendung. Dies kann mit der ng-init-Direktive erfolgen.
Beispiel fรผr ng-init
Das folgende Beispiel zeigt, wie die ng-init-Direktive verwendet wird.
In diesem Beispiel erstellen wir mithilfe der ng-init-Direktive eine Variable namens โTutorialNameโ und zeigen den Wert dieser Variablen auf der Seite an.
<!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 Erlรคuterung:
- Die ng-init-Direktive wird zu unserem div-Tag hinzugefรผgt, um eine lokale Variable namens โTutorialNameโ zu definieren, und der ihr zugewiesene Wert ist โAngularJSโ.
- Wir verwenden Ausdrรผcke in AngularJs, um die Ausgabe des Variablennamens โTutorialNameโ anzuzeigen, der in unserer ng-init-Direktive definiert wurde.
Wenn der Code erfolgreich ausgefรผhrt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausfรผhren.
Ausgang:
In der Ausgabe
- Das Ergebnis zeigt deutlich die Ausgabe des Ausdrucks, der den String โAngularJSโ enthรคlt. Dies ist darauf zurรผckzufรผhren, dass die Zeichenfolge โAngularJSโ der Variablen โTutorialNameโ im Abschnitt โng-initโ zugewiesen wurde.
ng-Modell in AngularJS
Und schlieรlich haben wir die ng-model-Direktive, die verwendet wird, um den Wert eines HTML-Steuerelements an Anwendungsdaten zu binden. Das folgende Beispiel zeigt, wie die ng-model-Direktive verwendet wird.
Beispiel eines NG-Modells
In diesem Beispiel
- Wir werden zwei Variablen namens โMengeโ und โPreisโ erstellen. Diese Variablen werden an zwei Texteingabesteuerelemente gebunden.
- Anschlieรend zeigen wir den Gesamtbetrag basierend auf der Multiplikation der Preis- und Mengenwerte an.
<!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 Erlรคuterung:
- Die ng-init-Direktive wird zu unserem div-Tag hinzugefรผgt, um zwei lokale Variablen zu definieren; Das eine heiรt โMengeโ und das andere โPreisโ.
- Jetzt verwenden wir die ng-model-Direktive, um die Textfelder โPersonenโ und โRegistrierungspreisโ an unsere lokalen Variablen โMengeโ bzw. โPreisโ zu binden.
- Schlieรlich zeigen wir das Gesamtergebnis รผber einen Ausdruck an, der die Multiplikation der Mengen- und Preisvariablen darstellt.
Wenn der Code erfolgreich ausgefรผhrt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausfรผhren.
Ausgang:
- Die Ausgabe zeigt deutlich die Multiplikation der Werte fรผr Personen und Registrierungspreis.
Wenn Sie jetzt in die Textfelder gehen und die Werte fรผr Personen und Registrierungspreis รคndern, รคndert sich der Gesamtbetrag automatisch.
- Die obige Ausgabe zeigt lediglich die Leistungsfรคhigkeit der Datenbindung in AngularJs, die durch die Verwendung von erreicht wird ng-model-Direktive.
ng-repeat in AngularJS
Dies wird verwendet, um ein HTML-Element zu wiederholen. Das folgende Beispiel zeigt die Verwendung von ng-repeat-Direktive.
Beispiel fรผr ng-repeat
In diesem Beispiel
- Wir werden ein Array von Kapitelnamen in einer Array-Variablen haben und
- Verwenden Sie dann die Direktive ng-repeat, um jedes Element des Arrays als Listenelement anzuzeigen
<!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 Erlรคuterung:
- Die ng-init-Direktive wird zu unserem div-Tag hinzugefรผgt, um eine Variable namens โchaptersโ zu definieren, bei der es sich um eine Array-Variable mit 3 Zeichenfolgen handelt.
- Das ng-repeat-Element wird verwendet, indem eine Inline-Variable namens โnamesโ deklariert und jedes Element im Kapitelarray durchgegangen wird.
- Abschlieรend zeigen wir den Wert der lokalen Inline-Variable โNamenโ.
Wenn der Code erfolgreich ausgefรผhrt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausfรผhren.
Ausgang:
- Die obige Ausgabe zeigt lediglich, dass die ng-repeat-Direktive jeden Wert im Array namens โChaptersโ รผbernommen und HTML-Listenelemente fรผr jedes Element im Array erstellt hat.
Zusammenfassung
- Direktiven werden verwendet, um die Funktionalitรคt von HTML zu erweitern. Angular bietet integrierte Anweisungen wie
- ng-app โ Dies wird verwendet, um eine Angular-Anwendung zu initialisieren.
- ng-init โ Dies wird zum Erstellen von Anwendungsvariablen verwendet
- ng-model โ Dies wird verwendet, um HTML-Steuerelemente an Anwendungsdaten zu binden
- ng-repeat โ Wird verwendet, um Elemente mithilfe von Winkeln zu wiederholen.
