Was ist genau Angular?
Angular ist ein JavaScript-Open-Source-Front-End-Framework, das reaktive Single Page Applications (SPAs) erstellt und von den Entwicklern von Google erstellt wurde. Angular hat eine weit verbreitete Kontrolle über Open Source JavaScript Frameworks attestiert und wird von Entwicklern und Unternehmen für seine großartigen Funktionstechniken außerordentlich geschätzt. Angular Ein innovatives clientseitiges MVW-Framework wird derzeit in hohem Maße für die Entwicklung von mobilen Apps und Web-Apps verwendet. Es wurde in Typescript mit Unterstützung der ES6-Standardisierung (ECMA Script 2015) geschrieben. Das von Microsoft entwickelte Typoskript ist eine Obermenge von JavaScript. Dadurch wird der Code transpiliert und in das JavaScript- oder ES5-Format konvertiert. Das Typescript ist stark typisiert und es ist erlaubt, OOPS-Funktionen wie Klassen-, Schnittstellen- und Modulanweisungen wie C # oder Java zu schreiben, um die Ausführung zu beschleunigen und die Laufzeitfehler zu reduzieren.
Im Folgenden sind die Hauptmerkmale von Angular 2 aufgeführt
-
Komponenten -
Die Vorgängerversion von Angular hatte die Aufmerksamkeit von Controllern auf sich gezogen, konzentrierte sich nun jedoch ganz darauf, mit Komponenten über den Controllern zu arbeiten. Komponenten helfen dabei, die Anwendungen in mehrere Module aufzuteilen. Dies trägt zu einer effektiveren Verwaltung der Anwendung in einem bestimmten Zeitraum bei.
-
Modul -
Das Modul ist ziemlich identisch mit einer Klasse. Ein Modul wird im Allgemeinen durch einen Codeblock beschrieben, der zum Ausführen einer bestimmten einzelnen Task verwendet wird. Angular bietet die Möglichkeit der Modularität, bei der nur eine Anwendung durch Aufteilen in mehrere Module erstellt wird. Das Schlüsselwort export wird zum Exportieren der Komponentenklasse aus einem Modul verwendet. Jede Angular-Anwendung verfügt standardmäßig über mindestens ein Angular-Modul, das als App-Modul bezeichnet wird.
Beispielsweise
-
Vorlage -
Die Vorlage ist die Schlüsselrolle, die das Durchsuchen der Komponente rechtfertigt. Es könnte deklariert werden, dass die Ansicht der Komponente anhand einer Vorlage identifiziert wird. Es ist mit HTML erstellt, enthält Bindung und Direktive.
Beispielsweise
-
Metadaten -
Es ist sehr hilfreich, die Effizienz der Klasse zu steigern. In Typescript wird zu diesem Zweck die Klasse durch Dekorieren gekennzeichnet. Um beispielsweise eine Komponente in der Angular-Anwendung anzugeben, verwenden Sie Metadaten der Klasse (dh @Component Decorator).
Ein Decorator ist eine Funktion, die einer Klasse Metadaten hinzufügt, es sind Member oder Methodenargumente.
-
Datenbindung -
Die effektivste Funktion, die Datenbindung, ist die Verbindungsbrücke zwischen Model und View. Es macht automatisch synchronisiert. Angular unterstützt vier Bindungsarten: Eigenschaftsbindung, Ereignisbindung, Interpolation und bidirektionale Bindung.
-
Richtlinie -
Direktiven sind maßgeschneiderte HTML-Attribute, die hilfreich sind, um die Fähigkeit von HTML aufrechtzuerhalten. Um eine Direktive zu erstellen, wird der @ Direct Decorator für verbundene Metadaten der Klasse verwendet. Drei Arten von Anweisungen - Komponente, Dekorateur und Vorlage.
-
Dienstleistungen -
Services werden immer dann verwendet, wenn eine einzelne Produktivität normalerweise in verschiedenen Modulen der Anwendung erforderlich ist. Grundsätzlich wird verwendet, um die Daten und das Verhalten innerhalb der Anwendung zu teilen. Der Service hat keine Basisklasse. Häufig verwendete Dienste sind Protokollierungsdienst, Datendienst, Massageservice usw.
-
Abhängigkeitsspritze -
Abhängigkeitsinjektion in Angular. Abhängigkeitsinjektion (DI) ist ein Grundkonzept von Angular 2+ und ermöglicht es einer Klasse, Abhängigkeiten von einer anderen Klasse zu sammeln. Normalerweise wird bei Angular die Abhängigkeitsinjektion durch Injizieren einer Dienstklasse in eine Abschnitts- oder Modulklasse ausgeführt.
Beispielsweise
Es gibt viele Texteditoren, die Typescript vollständig unterstützen. Entweder out of the box oder mit einem Plugin, einschließlich all dieser wie folgt.
- Visual Studio.
- Visual Studio-Code.
- Atom.
- Finsternis.
- WebStorm.
Visual Studio Code ist die beste Wahl, da es Open Source ist und unter Linux, Windows und MacOS ausgeführt wird. Es bietet großartige Funktionen, die Typescript unterstützen, einschließlich
- Auto-Vervollständigung
- IntelliSense
- Syntaxprüfung
- Refactoring
Zum Herunterladen von Visual Studio-Code besuchen Sie die Website unter https://code.visualstudio.com/download.
Schritte zum Installieren von Angular 2
Jetzt Erste Schritte mit dem Prozess zur Installation von Angular 2
Schritt 1: Um Angular 2 zu installieren, laden Sie zuerst das node.js-Paket von der https://nodejs.org/en/download/-Site herunter.
Installieren Sie das heruntergeladene npm-Repository (Node Package Manager) in Ihrem System.
- Wenn Sie ein Windows-System verwenden, installieren Sie das Windows-Installationsprogramm.
- Wenn Sie MacOS System verwenden, installieren Sie das MacOS-Installationsprogramm.
Überprüfen Sie Ihre systemkompatiblen Versionen wie 32-Bit oder 64-Bit.
Schritt 2: Knoten installieren,
Doppelklicken Sie nun auf die heruntergeladene Datei node-v10 15.3-x64.msi, um das Installationsprogramm auszuführen, und klicken Sie im Installationsfenster auf die Schaltfläche Weiter.
Schritt 3: Aktivieren Sie nun das Kontrollkästchen und akzeptieren Sie die Bedingungen der Lizenzvereinbarung . Klicken Sie dann auf die Schaltfläche Weiter.
Schritt 4: Ändern Sie im nächsten Bildschirm den Installationspfad, falls erforderlich, oder klicken Sie auf die Schaltfläche Weiter.
Schritt 5: Behalten Sie auf dem Bildschirm Nächste Featureauswahl die Standardauswahl bei und klicken Sie auf die Schaltfläche Weiter.
Schritt 6: Um Node.js zu installieren, klicken Sie auf die Schaltfläche Installieren.
Schritt 7: Warten Sie im nächsten Bildschirm, bis die Installation abgeschlossen ist.
Schritt 8: Klicken Sie nun auf Fertig stellen.
Schritt 9: Öffnen Sie die Eingabeaufforderung auf Ihrem Computer, geben Sie den folgenden Befehl ein und überprüfen Sie die NodeJS-Version und die Npm-Version:
c:/>node -v
c:/>npm -v.
Schritt 10: Sobald die Installation abgeschlossen ist. Besuchen Sie die Website unter https://cli.angular.io/ für Angular CLI (Command Line Interface).
Schritt 11: Öffnen Sie die Eingabeaufforderung Ihres Computers und geben Sie den Befehl „npm install –g @ angular / cli“ ein. Drücken Sie die Eingabetaste, um Angular 2 CLI (Command Line Interface) zu installieren.
Hinweis: Wenn Sie MacOS / Linux verwenden, setzen Sie sudo einfach vor die npm, "sudo npm install –g @ angular / cli".
Schritt 12: Geben Sie "ng new first-app" ein und drücken Sie die Eingabetaste, um die erste App zu erstellen.
Schritt 13: Bei der Installation der Angular 2-App werden Ihnen von Angular CLI einige Fragen gestellt.
- Möchten Sie eine Winkelführung hinzufügen? (J / Nein) -> Nein
- Welcher Stylesheet-Standard soll verwendet werden? (Benutzen Sie die Pfeiltasten) -> CSS
Schritt 14: Fügen Sie in der ersten App alle Pakete mit Angular CLI hinzu
Sobald Sie alle Pakete installiert haben, wird die App auf der Festplatte erstellt.
Schritt 15: Geben Sie den Befehl „ng –version“ in die Eingabeaufforderung ein und drücken Sie die Eingabetaste, um die Winkelversion zu ermitteln
Schritt 16: Geben Sie nun den Befehl "cd first-app" ein, um in das App-Verzeichnis oder den App-Ordner zu gelangen.
Schritt 17: Schließlich wird die Angular-App „First App“ erstellt. Geben Sie nun den Befehl "ng serve" ein.
Schritt 18: Öffnen Sie nun den Browser und geben Sie http: // localhost: 4200 in die Adressleiste ein und drücken Sie die Eingabetaste, um die First Application Angular-App im Browser auszuführen.
Empfohlene Artikel
Dies war eine Anleitung zur Installation von Angular 2. Hier haben wir die Hauptfunktionen von Angular 2 und die Schritte zur Installation von Angular 2 besprochen. Weitere Informationen finden Sie auch in den folgenden Artikeln -
- Angular 2 Spickzettel
- Angular 2 Interview Fragen
- Winkel 2 gegen Vue JS
- Winkelbefehle