Überblick über AngularJS
Bei Brat Tech LLC entwickelten die Entwickler Misko Hevery und Adam Abrons im Jahr 2009 ein AngularJS-Framework, wonach die Front-End-Entwicklung und die Erstellung von Anwendungen für eine Seite revolutioniert wurden. AngularJS ist ein Javascript-Framework, das HTML-Elemente mit Javascript-Objekten verbindet. Datenbindung und Abhängigkeitsinjektion sind einige der führenden Funktionen von AngularJs, die beim Schreiben langer Codes Zeit sparen und die Arbeit von Entwicklern und Browsern erleichtern. Wie dies erreicht wird, wird ausführlich erläutert, aber Sie erinnern sich vorerst nur an diese Terminologien. In diesem Thema lernen wir die AngularJS-Version kennen.
Versionen von AngularJS
AngularJS ist die Angular 1.x-Version und danach wird Angular 2 entwickelt, das sich von Angular 1.x unterscheidet. funktioniert.
Warum AngularJS Version und wie funktioniert es?
AngularJS hilft uns bei der Entwicklung interaktiver Anwendungen für einzelne Seiten. Mit einseitigen Anwendungen meine ich, dass die einzelne Seite, die Sie besucht haben, alle anderen Inhalte mit Javascript lädt. Diese Funktion hilft der Anwendung, schnell und effektiv zu sein.
Wenn wir Javascript und HTML zum Erstellen von Anwendungen verwenden, müssen Sie die Ansicht mithilfe von JS-Funktionen und -Objekten an das Modell binden. Wenn Sie jedoch der Meinung sind, dass diese bidirektionale Datenbindung in einer praktischen industriellen Anwendung genauso langwierig ist wie bei langen Codes. Dies war einer der Hauptgründe, warum AngularJS gelernt und weiterentwickelt werden musste.
Es ist an der Zeit, einige grundlegende Konzepte zu erlernen, bevor Sie mit der Entwicklung von Anwendungen beginnen, auf denen AngularJS basiert:
- Modell: Das Modell enthält Daten, Objekte und Logik.
- Ansicht: Dies ist die visuelle Darstellung einer Anwendung, die auch als Benutzeroberfläche bezeichnet wird.
- Ansicht zum Modell Zwei-Wege-Bindung: Das Javascript-Objekt, dh das Objekt, das Sie an ein HTML-DOM binden möchten, z. B. für eine Textbox, eine Eingabe oder beliebige HTML-Tags und umgekehrt, kann mithilfe einiger vordefinierter AngularJS-Bibliotheken auf einfache Weise erstellt werden.
- Controller: Controller sind Javascript-Funktionen, die das Modell und die Ansicht verbinden.
- Dienste: AngularJS-Dienste sind JavaScript-Funktionen, die bestimmte Aufgaben oder Funktionen ausführen, die von JavaScript verwaltet und getestet werden. Einige Beispiele für Dienste sind $ scope, $ http, $ rootScope.
- Ausdrücke: Ausdrücke werden verwendet, um Daten mit HTML zu binden. Diese Funktion wird auch als Interpolation bezeichnet. Ausdrücke werden mit ((expression)) geschweiften Klammern geschrieben. Ausdrücke werden ausgewertet und können ohne HTML-Tags geschrieben werden.
- Module: Module fungieren als Container, der verschiedene Teile der Winkelanwendung wie Controller, Dienste, Anweisungen usw. enthält.
Richtlinien und Geltungsbereich
Konzentrieren wir uns auf einige der vordefinierten Richtlinien und wie sie tatsächlich funktionieren. Der größte Teil dieser Direktive beginnt mit 'ng' aus Angular
1. Geltungsbereich
- Der Gültigkeitsbereich definiert das Javascript-Objekt, mit dem von Model zu HTML auf Daten zugegriffen werden kann. Scope fungiert als Konnektor zwischen beiden.
- Einige Bereichsdienste sind $ scope, $ rootScope. '$' definiert, dass diese Dienste vordefiniert sind und nicht geändert werden können. Denken Sie daran, dass bei HTML die Groß- und Kleinschreibung nicht berücksichtigt wird, bei AngularJS jedoch die Groß- und Kleinschreibung, sodass $ Scope einen Fehler als undefiniert ausgibt.
- Diese müssen in unserer Reglerfunktion deklariert werden und werden von Angular automatisch injiziert.
2. ng-controller
- Diese Anweisung wird verwendet, um eine Instanz / ein Objekt des Controllers zu erstellen, über das HTML DOM mit der eigentlichen Logik kommuniziert.
- HTML sagt, dass jedes Tag mit einem '-' ignoriert wird, wenn ein HTML-DOM erstellt wird.
- Sobald DOM erstellt ist, findet Angular Interpreter eine ng-controller-Direktive und erstellt eine Instanz des bestimmten Controllers, der auch einen $ scope-Service bereitstellt.
- In einer einzelnen HTML-Seite können sich viele ng-controller befinden.
3. ng-app
- Diese Direktive fungiert als Container, der Controller, Direktiven, Filter, Ausdrücke usw. enthält. Sie registriert oder startet die Anwendung oder das Modul.
- Es gibt nur eine NG-App in Ihrem HTML. Unter einer ng-App können sich viele ng-Controller befinden.
Dadurch wird ein Anwendungsobjekt mit dem Dienst $ rootScope instanziiert.
- Somit kann in einer vollständigen Anwendung auf $ rootScope-Variablen / -Funktionen zugegriffen werden.
4. ng-model
- ng-model wird verwendet, um die Daten aus HTML an das Modellobjekt zu binden. Es bietet bidirektionale Bindung.
5. ng-if
- Um bedingte Anweisungen für HTML-Tags auszuführen, wird ng-if verwendet. Wenn die Bedingung falsch wird, enthält das DOM dieses div nicht im DOM.
6. ng-bind
- Anstatt (()) für die Interpolation zu verwenden, kann auch ng-bind verwendet werden.
7. ng deaktiviert
- Basierend auf einer Bedingung kann ein Element in der Ansicht deaktiviert werden.
8. ng-show
- Wenn die gegebene Bedingung für ng-show wahr ist, wird das bestimmte Element im DOM angezeigt.
9. ng-hide
- Wenn die gegebene Bedingung für ng-hide wahr ist, bleibt das bestimmte Element im DOM verborgen.
10. ng-repeat
- Es wird das jeweilige Div oder Span in HTML mit der angegebenen Länge des Arrays oder der Liste wiederholt.
11. Klicken mit der linken Maustaste
- Bei einem Klickereignis auf das HTML-Element wird die bereitgestellte Funktionalität oder Aufgabe ausgeführt.
Tipp: Der beste Weg, eine Sprache zu lernen, besteht darin, sie zu codieren. Schauen wir uns also unseren ersten Code an.
Beispiele für die AngularJS-Version
Nachfolgend einige Beispiele
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Ausgabe:
Vorname: Joseph
Nachname: Alex
Ihr Name ist: Joseph Alex
Es gibt einige Punkte, auf die Sie sich aus dem obigen Codeausschnitt konzentrieren sollten:
- In Zeile 3 wird eine angle.min.js-Datei zur Seite hinzugefügt, die alle erforderlichen Bibliotheken zum Ausführen der AngularJS-Anwendung lädt.
- AngularJS hat hauptsächlich 2 Bibliotheken angle.js und eine komprimierte Version dieser Datei als angular.min.js.
- In Zeile 5 sehen Sie die Direktive als ng-app, die von HTML beim Erstellen des HTML-DOM ignoriert und von AngularJS als eine der Direktiven zum Starten der Anwendung aufgenommen wird.
- In Zeile 6 wird das ng-Modell verwendet, das den Text, den Sie in das Textfeld eingeben, an die Variablen fname und lname bindet. Denken Sie daran, dass bei diesen Variablen die Groß- und Kleinschreibung beachtet wird.
- In Zeile 8 sehen Sie den Ausdruck ((fname + ”“ + lname)), welcher Winkel die Daten auswertet und anzeigt, die Sie in Textfelder eingeben. Dies wird als Interpolation bezeichnet.
Lassen Sie uns ein weiteres Beispiel untersuchen:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Vorname:
Nachname:
Der Kundenname ist ((customerName)) und das Alter ist ((customerAge)).
In diesem Beispiel wird in Zeile 5 eine App mit dem Namen CustomerApp erstellt, die alle Teile der Anwendung enthält. In der nächsten Zeile wird ein Controller erstellt und als firstController benannt. $ scope wird als Funktionsparameter deklariert. AngularJS fügt es automatisch zur direkten Verwendung in die Anwendung ein, der Entwickler muss es nicht explizit erstellen.
Diese Funktion wird als Abhängigkeitsinjektion bezeichnet. In ähnlicher Weise wird der ng-controller für denselben Controller unter dem Tag ng-app verwendet. Denken Sie daran, dass der Anwendungsbereich der App oder des Controllers der Bereich ist, in dem das Div endet oder in dem Sie eine App oder einen Controller definieren. In diesem Fall können Sie nach Zeile 16 nicht mehr auf den Controller oder die Anwendung zugreifen.
Empfohlene Artikel
Dies ist eine Anleitung zur AngularJS-Version. Hier diskutieren wir die Versionen von AngularJS mit Anweisungen, Umfang und wie AngularJS funktioniert. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- AngularJS-Architektur
- Angular JS-Anwendung
- AngularJS Unit Testing
- Karriere in AngularJS
- Was ist Angular 2?