Was ist AngularJS?

AngularJS ist eines der beliebtesten JavaScript-basierten Webframeworks für die Front-End-Entwicklung. Es wird bei der Entwicklung von Single Page Applications (SPAs) verwendet. AngularJS ist ein Open-Source-Framework, das hauptsächlich von Google und einer Community von Personen verwaltet wird, die an der Lösung von Problemen bei der Entwicklung von Einzelseitenanwendungen beteiligt sind. In diesem Thema lernen wir die AngularJS-Direktiven kennen.

AngularJS ist nichts anderes, als das bestehende HTML zu erweitern. Es wird in HTML-Seite mit Tag hinzugefügt. Mit AngularJS reagiert die HTML-Site schneller auf Benutzeraktionen, indem zusätzliche Attribute einfach hinzugefügt werden. Die neueste stabile Version von AngularJS ist ab sofort 1.6.x.

Richtlinien von AngularJS

AngularJS ist ein effizientes Framework, das auf Model-View-Controller (MVC) basierende Architektur unterstützt. Es bietet Kernfunktionen wie bidirektionale Datenbindung, Controller, Dienste, Direktiven, Vorlagen, Router, Filter, Abhängigkeitsinjektion usw. Dies sind die Hauptfunktionen, die zusammenarbeiten, um AngularJS effizienter zu machen.

Die Direktive ist eine der sehr nützlichen Funktionen in AngularJS. Es erweitert den vorhandenen HTML-Code und ermöglicht das einfache Entwickeln von Webseiten mit neuem Verhalten unter Verwendung von Kern-JavaScript. Es ermöglicht das Schreiben eigener Tags und deren Zuordnung zu vorhandenem HTML. Diese Funktionalität bietet mehr Freiheit und ermöglicht Entwicklern eine große Flexibilität beim Erstellen und Verwenden benutzerdefinierter Elemente in Webanwendungen. Sie können auch ihre eigenen Anweisungen entwerfen. In diesem Artikel konzentrieren wir uns hauptsächlich auf AngularJS-Direktiven und versuchen, Kenntnisse über diese Kernfunktion zu erlangen.

Direktiven sind nichts anderes als Markierungen für DOM-Elemente in HTML wie Attributname, Elementname, CSS-Klasse oder Kommentar. Der Compiler von AngularJS hängt dann das angegebene Verhalten an dieses Element an. Jede Direktive hat einen Namen und beginnt mit 'ng-'. Jede Direktive kann entscheiden, wo sie in DOM-Elementen verwendet werden kann. Es gibt einige bestehende Direktiven, die bereits in AngularJS verfügbar sind und die wir auf eigene Faust definieren können.

Wir werden uns drei wichtige Direktiven ansehen, die das AngularJS-Framework in drei Hauptteile unterteilen.

1. ng-app: Diese Anweisung teilt dem Compiler mit, dass dies die AngularJS-Anwendung ist. Die Direktive, in der sie in DOM definiert ist, wird zum Stammelement der Anwendung. Z.B



AngularJS ist als JavaScript-Datei verfügbar und wird mit dem Tag in HTML eingefügt. Das Element ng-app at teilt AngularJS mit, dass div das Stammelement und der Eigentümer der AngularJS-Anwendung ist. AngularJS-Anwendung startet von diesem Element und was auch immer AngularJS-Code ist, wird in dieses Element geschrieben.

2. ng-model: Diese Direktive bindet den Wert von der Webseite, meist aus dem Eingabefeld, an die Anwendungsvariable. Grundsätzlich ermöglicht diese Direktive das Senden von Daten aus Eingaben an AngularJS-Anwendungen, die an anderer Stelle verwendet werden können. Z.B

Eingeben:

Die Direktive ng-model bindet den Eingabewert an die Anwendungsvariable "input". Wir werden dann im nächsten Beispiel sehen, wie wir denselben Wert auf der Webseite anzeigen können.

3. ng-bind: Diese Direktive bindet den Wert von der AngularJS-Anwendung an die Webseite. Das heißt, Sie können Daten von der Anwendung an HTML-Tags weiterleiten. Z.B

Eingeben:

Die Daten, die wir mit der Direktive "ng-model" in der Anwendungsvariablen "input" erfasst haben, sind an das Tag-Element gebunden

mit "ng-bind". Wir können diese Anwendung jetzt ausführen und sehen, wie dynamisch AngularJS den eingegebenen Wert auf der Seite aktualisiert.

Neben diesen gibt es in AngularJS noch einige andere wichtige Direktiven.

4. ng-repeat: Diese Anweisung wiederholt ein HTML-Element und wird für ein Array von Objekten verwendet. Diese Direktive ist sehr nützlich in Szenarien wie der Anzeige von Tabellenelementen auf einer Webseite.

5. ng-init: Mit dieser Anweisung werden die Werte für die AngularJS-Anwendung vor dem Laden einer Webseite initialisiert.

Neue Richtlinien erstellen

Wir können unsere eigenen benutzerdefinierten Direktiven zusammen mit den vorhandenen verfügbaren AngularJS-Direktiven erstellen. Es ist sehr einfach, neue Direktiven nur mit JavaScript zu erstellen. Neue Anweisungen werden mit “erstellt. Direktive ”-Funktion. Z.B



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module ist eine AngularJS-Funktion, die ein Modul erstellt. Wir haben eine benutzerdefinierte Direktive mit dem Namen benutzerdefinierte Direktive erstellt, für die eine Funktion geschrieben wurde. Wann immer wir diese Direktive auf unserer Webseite verwenden, wird diese Funktion ausgeführt. In diesem Fall handelt es sich um eine zurückgegebene Vorlage, die HTML-Code enthält.

Beim Benennen von Direktiven müssen wir die Namenskonvention für Kamelfälle verwenden, und beim Aufrufen müssen wir die durch "-" getrennte Namenskonvention verwenden.

Es gibt vier Möglichkeiten, wie wir Direktiven aufrufen können:

Elementname

Wie im letzten Beispiel verwendet:

Attribut

Klasse

Um die Direktive unter Verwendung des Klassennamens aufzurufen, müssen wir beim Definieren eine Einschränkungseigenschaft mit dem Wert 'C' hinzufügen.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Kommentar

Um die Direktive mit Hilfe von comment aufzurufen, müssen wir beim Definieren eine Einschränkungseigenschaft mit dem Wert 'M' hinzufügen.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Die Eigenschaft replace: true ist obligatorisch und ersetzt den ursprünglichen Kommentar durch die Direktive, da der Kommentar sonst unsichtbar wäre.

Schlussfolgerung - AngularJS-Richtlinien

Direktive ist also eine sehr mächtige Funktion, die in AngularJS verfügbar ist. Die Direktive erlaubt es, neue Syntax einzuführen, sind wie Marker und erlauben uns, ihnen ein spezielles Verhalten beizufügen. In AngularJS gibt es bereits verfügbare Direktiven, die sehr nützlich sind. Außerdem können wir unsere eigenen benutzerdefinierten Direktiven definieren und diese verwenden. Benutzerdefinierte Direktiven ermöglichen Entwicklern große Flexibilität und Freiheit. Direktiven erweitern vorhandenes HTML um neue Funktionen mit innovativem Stil und Funktionen.

Empfohlene Artikel

Dies ist eine Anleitung zu AngularJS-Richtlinien. Hier diskutieren wir die drei wichtigsten Direktiven, die das AngularJS-Framework in drei Hauptteile unterteilen. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

  1. Versionen von HTML
  2. Frameworks In Java
  3. AngularJS-Architektur
  4. HTML-Listenstile

Kategorie:

Software-Entwicklung