Wie lerne ich AngularJs? Die umfassendste Einführung in AngularJS-Wissen

Dieser Artikel enthält eine detaillierte Erklärung zum Erlernen von Angularjs. Es enthält viele Wissenspunkte, die Sie möglicherweise vergessen haben. Beginnen wir jetzt mit dem Lesen dieses Artikels

Angular Js ist ein Javascript-Framework, eine in Javascript geschriebene Bibliothek.
Das AngularJS-Modul (Module) definiert AngularJS-Anwendungen.
AngularJS-Controller (Controller) wird zur Steuerung von AngularJS-Anwendungen verwendet.
Die ng-app-Direktive definiert die Anwendung und ng-controller definiert den Controller.
AngularJS erweitert HTML
AngularJS erweitert HTML über ng-Direktiven. Die
ng-app-Direktive definiert eine AngularJS-Anwendung. Die
ng-model-Direktive bindet Elementwerte (z. B. den Wert eines Eingabefelds) an die Anwendung.
Die ng-bind-Direktive bindet Anwendungsdaten an HTML-Ansichten.
AngularJS verwendet Ausdrücke, um Daten an HTML zu binden
Was ist AngularJS?
AngularJS erleichtert die Entwicklung moderner Single-Page-Anwendungen (SPAs: Single Page Applications).
AngularJS bindet Anwendungsdaten an HTML-Elemente.
AngularJS kann HTML-Elemente klonen und wiederholen.
AngularJS kann HTML-Elemente ein- und ausblenden.
AngularJS kann Code „hinter“ HTML-Elementen hinzufügen.
AngularJS unterstützt die Eingabevalidierung.
AngularJS-Anweisungen sind HTML-Attribute mit dem Präfix ng.
Die ng-init-Direktive initialisiert AngularJS-Anwendungsvariablen.
HTML5 erlaubt erweiterte (selbst erstellte) Attribute, beginnend mit data-.
AngularJS-Attribute beginnen mit ng-, aber Sie können data-ng- verwenden, um die Seite für HTML5 gültig zu machen.
AngularJS-Ausdrücke werden in doppelte geschweifte Klammern geschrieben: {{ Ausdruck }}.
AngularJS-Ausdrücke binden Daten an HTML, was der ng-bind-Direktive ähnelt.
AngularJS „gibt“ die Daten dort aus, wo der Ausdruck geschrieben ist.
AngularJS-Ausdrücke ähneln JavaScript-Ausdrücken: Sie können Literale, Operatoren und Variablen enthalten.
Beispiel {{ 5 + 5 }} oder {{ Vorname + " " + Nachname }}
AngularJS-Ausdruck und JavaScript-Ausdruck
Ähnlich wie der JavaScript-Ausdruck kann der AngularJS-Ausdruck Buchstaben, Operatoren und Variablen enthalten.
Im Gegensatz zu JavaScript-Ausdrücken können AngularJS-Ausdrücke in HTML geschrieben werden.
Im Gegensatz zu JavaScript-Ausdrücken unterstützen AngularJS-Ausdrücke keine bedingten Beurteilungen, Schleifen und Ausnahmen.
Im Gegensatz zu JavaScript-Ausdrücken unterstützen AngularJS-Ausdrücke Filter.


AngularJS-Direktiven


AngularJS erweitert HTML um neue Attribute, sogenannte Direktiven.
AngularJS fügt Ihrer Anwendung durch integrierte Anweisungen Funktionalität hinzu.
Mit AngularJS können Sie Anweisungen anpassen.
AngularJS-Anweisungen sind erweiterte HTML-Attribute mit dem Präfix ng-. Die
ng-app-Direktive initialisiert eine AngularJS-Anwendung. Die ng-app-Direktive teilt AngularJS mit, dass das

-Element der „Eigentümer“ der AngularJS-Anwendung ist.
Die ng-init-Direktive initialisiert Anwendungsdaten. Die
ng-model-Direktive bindet Elementwerte (z. B. den Wert eines Eingabefelds) an die Anwendung.


ng-app-Direktive Die
ng-app-Direktive definiert das Stammelement einer AngularJS-Anwendung. Die
ng-app-Direktive startet (automatisch initialisiert) die Anwendung automatisch, wenn die Webseite geladen wird.
Später erfahren Sie, wie ng-app über einen Wert (z. B. ng-app="myModule") eine Verbindung zu einem Codemodul herstellt.


ng-init-Direktive Die
ng-init-Direktive definiert Anfangswerte für AngularJS-Anwendungen.
Normalerweise wird ng-init nicht verwendet. Stattdessen verwenden Sie einen Controller oder ein Modul.


ng-model-Direktive
ng-model-Direktive Bindet HTML-Elemente an Anwendungsdaten. Die
ng-model-Direktive wird verwendet, um Anwendungsdaten an HTML-Controller-Werte (Eingabe, Auswahl, Textbereich) zu binden. Die
ng-model-Direktive kann außerdem:
eine Typvalidierung (Nummer, E-Mail, erforderlich) für Anwendungsdaten bereitstellen.
Geben Sie den Status (ungültig, verschmutzt, berührt, Fehler) für Anwendungsdaten an.
Stellen Sie CSS-Klassen für HTML-Elemente bereit.
HTML-Elemente an HTML-Formulare binden.


ng-repeat-Direktive
ng-repeat-Direktive klont das HTML-Element einmal für jedes Element in der Sammlung (Array).


Benutzerdefinierte Direktiven erstellen
Zusätzlich zu den integrierten Direktiven von AngularJS können wir auch benutzerdefinierte Direktiven erstellen.
Sie können die Funktion .directive verwenden, um benutzerdefinierte Anweisungen hinzuzufügen.
Um eine benutzerdefinierte Direktive aufzurufen, muss der Name der benutzerdefinierten Direktive zum HTML-Element hinzugefügt werden.
Verwenden Sie „camelCase“, um eine Direktive „runoobDirective“ zu benennen. Bei der Verwendung müssen Sie diese jedoch durch „runoob-directive:“ trennen Anruf.
restrict value kann einer der folgenden sein:
E Verwenden Sie
A als Elementnamen. Verwenden Sie
C als Attribut. Verwenden Sie
M als Kommentar. Verwenden Sie
restrict. Standardwerte sind E und A, das heißt, die Anweisung kann über den Elementnamen und den Attributnamen aufgerufen werden.


AngularJS Controller
AngularJS-Anwendungen werden von Controllern gesteuert. Die
ng-controller-Direktive definiert einen Anwendungscontroller.
Controller sind reguläre JavaScript-Objekte, die von Standard-JavaScript-Objektkonstruktoren erstellt werden.


AngularJS-Filter
AngularJS-Filter können zum Transformieren von Daten verwendet werden:
Filter
Beschreibung
Währung
Formatiert Zahlen in das Währungsformat.
Filter
Wählen Sie eine Teilmenge aus Array-Elementen aus.
Kleinbuchstaben
Formatieren Sie die Zeichenfolge in Kleinbuchstaben.
orderBy
Ordnet ein Array basierend auf einem Ausdruck.
Großbuchstaben
Formatieren Sie die Zeichenfolge in Großbuchstaben.
Filter können über ein Pipe-Zeichen (|) und einen Filter zu Ausdrücken hinzugefügt werden.


AngularJS-Dienst
In AngularJS können Sie Ihren eigenen Dienst erstellen oder integrierte Dienste verwenden.


Was ist Service?
In AngularJS ist ein Dienst eine Funktion oder ein Objekt, das in Ihrer AngularJS-Anwendung verwendet werden kann.
AngularJS verfügt über mehr als 30 integrierte Dienste.
Es gibt einen $location-Dienst, der die URL-Adresse der aktuellen Seite zurückgeben kann.


$http ist ein Kerndienst in AngularJS, der zum Lesen von Daten von Remote-Servern verwendet wird.


Die ng-repeat-Direktive durchläuft den HTML-Code in einer Schleife, um eine Dropdown-Liste zu erstellen. Die ng-options-Direktive eignet sich jedoch besser zum Erstellen einer Dropdown-Liste. Sie hat Folgendes Vorteile:
Optionen mit ng-options Ein Objekt von ng-repeat ist ein String. Die


ng-show-Direktive blendet ein HTML-Element aus oder zeigt es an. Die
ng-disabled-Direktive bindet die Anwendungsdaten „mySwitch“ an das HTML-disabled-Attribut. Die
ng-model-Direktive bindet „mySwitch“ an den Inhalt (Wert) des HTML-Eingabe-Kontrollkästchenelements.
Wenn mySwitch wahr ist, wird die Schaltfläche deaktiviert:
Die ng-hide-Direktive wird verwendet, um HTML-Elemente auszublenden oder anzuzeigen.

ng-click-Direktive definiert AngularJS-Klickereignisse.

HTML-Elemente ausblenden
Mit der ng-hide-Direktive wird festgelegt, ob der Anwendungsteil sichtbar ist.
ng-hide="true" setzt das HTML-Element auf unsichtbar.
ng-hide="false" legt fest, dass das HTML-Element sichtbar ist.

ng-show-Direktive kann verwendet werden, um festzulegen, ob ein Teil der Anwendung sichtbar ist.
ng-show="false" kann HTML-Elemente unsichtbar machen.
ng-show="true" kann HTML-Elemente sichtbar machen.


AngularJS-Module

Module definieren eine Anwendung.
Module sind Container für verschiedene Teile Ihrer Anwendung.
Module sind Container für Anwendungscontroller.
Controller gehören normalerweise zu einem Modul.


Globale Funktionen sollten in JavaScript vermieden werden. Denn sie können leicht von anderen Skriptdateien überschrieben werden.
Das AngularJS-Modul sorgt dafür, dass alle Funktionen unter diesem Modul liegen, wodurch dieses Problem vermieden wird.


HTML-Steuerelement
Die folgenden HTML-Eingabeelemente werden als HTML-Steuerelemente bezeichnet:
Eingabeelement
Auswahlelement
Schaltflächenelement
Textbereichselement


Das bevorzugte Stylesheet für AngularJS ist Twitter Bootstrap. Twitter Bootstrap ist derzeit das beliebteste Frontend-Framework.

AngularJS-Animation
AngularJS bietet Animationseffekte, die mit CSS verwendet werden können.
Um Animationen in AngularJS zu verwenden, müssen Sie die Bibliothek „angular-animate.min.js“ importieren.

Was macht ngAnimate?
ngAnimate-Modelle können Klassen hinzufügen oder entfernen.
Das ngAnimate-Modell kann keine HTML-Elemente animieren, aber ngAnimate überwacht Ereignisse wie das Ausblenden und Anzeigen von HTML-Elementen. Wenn ein Ereignis eintritt, verwendet ngAnimate eine vordefinierte Klasse, um HTML-Elemente zu animieren.
AngularJS-Anweisungen zum Hinzufügen/Entfernen von Klassen:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show- und ng-hide-Anweisungen werden verwendet, um den Wert der ng-hide-Klasse hinzuzufügen oder zu entfernen.
Andere Anweisungen fügen beim Betreten des DOM die Klasse ng-enter und beim Entfernen des DOM das Attribut ng-leave hinzu.
Wenn sich die Position des HTML-Elements ändert, kann die ng-repeat-Direktive auch die ng-move-Klasse hinzufügen.
Außerdem wird die Klassensammlung des HTML-Elements entfernt, nachdem die Animation abgeschlossen ist. Beispiel: Die ng-hide-Direktive fügt die folgenden Klassen hinzu:
ng-animate
ng-hide-animate
ng-hide-add (wenn das Element ausgeblendet wird)
ng-hide -remove (wenn Element angezeigt wird)
ng-hide-add-active (wenn Element ausgeblendet wird)
ng-hide-remove-active (wenn Element angezeigt wird)


value
Value Ist ein einfaches Javascript-Objekt, das zum Übergeben von Werten an den Controller verwendet wird (Konfigurationsphase):


factory
factory ist eine Funktion, die zum Zurückgeben eines Werts verwendet wird. Wird bei Bedarf von Diensten und Controllern erstellt.
Normalerweise verwenden wir Factory-Funktionen, um Werte zu berechnen oder zurückzugeben.


Anbieter
Erstellen Sie einen Dienst, eine Fabrik usw. (Konfigurationsphase) über den Anbieter in AngularJS.
Der Anbieter stellt eine Factory-Methode get() bereit, die zur Rückgabe von value/service/factory verwendet wird.


Konstante
Konstante (Konstante) wird verwendet, um Werte während der Konfigurationsphase zu übergeben. Beachten Sie, dass diese Konstante während der Konfigurationsphase nicht verfügbar ist.
mainApp.constant("configParam", "constant value");


AngularJS-Routing
AngularJS-Routing ermöglicht uns den Zugriff auf unterschiedliche Inhalte über unterschiedliche URLs.
Eine Single-Page-Webanwendung (SPA) mit mehreren Ansichten kann über AngularJS implementiert werden.
Normalerweise hat unsere URL die Form http://runoob.com/first/page, aber in Single-Page-Webanwendungen implementiert AngularJS sie über # + Tag.


Die Konfigurationsfunktion des AngularJS-Moduls wird zum Konfigurieren von Routing-Regeln verwendet. Durch die Verwendung von configAPI fordern wir an, dass $routeProvider in unsere Konfigurationsfunktion eingefügt wird, und verwenden $routeProvider.whenAPI, um unsere Routing-Regeln zu definieren.
$routeProvider stellt uns die Funktionen when(path,object) und else(object) zur Verfügung, um alle Routen der Reihe nach zu definieren:
Der erste Parameter ist die URL oder die reguläre URL-Regel.
Der zweite Parameter ist das Routing-Konfigurationsobjekt.

Routeneinstellungsobjekt
AngularJS-Routing kann auch über verschiedene Vorlagen implementiert werden.
Der erste Parameter der Funktion $routeProvider.when ist die URL oder die reguläre URL-Regel, und der zweite Parameter ist das Routing-Konfigurationsobjekt.


template:
Wenn wir nur einfache HTML-Inhalte in ng-view einfügen müssen, verwenden Sie diesen Parameter:
.when('/computers',{template:'This It's a Computerkategorieseite'})
templateUrl:
Wenn wir nur die HTML-Vorlagendatei in ng-view einfügen müssen, verwenden Sie diesen Parameter:
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});


Der obige Code ruft den Inhalt der Datei „views/computers.html“ vom Server ab und fügt ihn in ng-view ein .


Controller:
Funktion, String- oder Array-Typ, die Controller-Funktion, die auf der aktuellen Vorlage ausgeführt wird und einen neuen Bereich generiert.


controllerAs:
String-Typ, geben Sie einen Alias ​​für den Controller an.


redirectTo:
Die umgeleitete Adresse.


Auflösung:
Geben Sie andere Module an, von denen der aktuelle Controller abhängt.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).

Das obige ist der detaillierte Inhalt vonWie lerne ich AngularJs? Die umfassendste Einführung in AngularJS-Wissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!