Angular Tutorial
Erste Schritte mit Angular
Suche…
Bemerkungen
Angular (allgemein als " Angular 2+ " oder " Angular 2 " bezeichnet) ist ein TypeScript- basiertes Open-Source-Front-End-Web-Framework, das vom Angular Team bei Google und von einer Gemeinschaft von Einzelpersonen und Unternehmen angesprochen wird Teile des Workflow des Entwicklers beim Erstellen komplexer Webanwendungen. Angular ist eine vollständige Überarbeitung vom selben Team, das AngularJS entwickelt hat . ¹
Das Framework besteht aus mehreren Bibliotheken , von denen einige Core ( @ Angle / Core zum Beispiel) und einige optional ( @ Angle / Animationen ) sind.
Sie schreiben Angular-Anwendungen, indem Sie HTML- Vorlagen mit Angularized Markup erstellen, Komponentenklassen zum Verwalten dieser Vorlagen schreiben, Anwendungslogik in Services hinzufügen und Komponenten und Services in Modulen integrieren .
Dann starten Sie die App durch Bootstrapping des Root-Moduls . Angular übernimmt die Aufgabe, präsentiert Ihren Anwendungsinhalt in einem Browser und reagiert auf Benutzerinteraktionen gemäß den Anweisungen, die Sie gegeben haben.
Der grundlegendste Teil der Entwicklung von Angular-Anwendungen sind die Komponenten . Eine Komponente ist eine Kombination aus einer HTML-Vorlage und einer Komponentenklasse, die einen Teil des Bildschirms steuert. Hier ist ein Beispiel für eine Komponente, die eine einfache Zeichenfolge anzeigt:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Jede Komponente beginnt mit einer @Component Decorator-Funktion, die ein Metadatenobjekt übernimmt. Das Metadatenobjekt beschreibt, wie die HTML-Vorlage und die Komponentenklasse zusammenarbeiten.
Die selector Eigenschaft weist Angular an, die Komponente innerhalb eines benutzerdefinierten <my-app> -Tags in der index.html- Datei anzuzeigen.
index.html (im
bodyTag)<my-app>Loading AppComponent content here ...</my-app>
Die Vorlageneigenschaft definiert eine Nachricht innerhalb eines <h1> -Headers. Die Nachricht beginnt mit "Hello" und endet mit {{name}} , einem Bindungsausdruck für die Winkelinterpolation. Zur Laufzeit ersetzt Angular {{name}} durch den Wert der name -Eigenschaft der Komponente. Die Interpolationsbindung ist eine von vielen Angular-Funktionen, die Sie in dieser Dokumentation finden. Ändern Sie im Beispiel die name 'Angular' der Komponentenklasse von 'Angular' in 'World' und sehen Sie, was passiert.
Dieses Beispiel ist in TypeScript geschrieben , einer Obermenge von JavaScript. Angular verwendet TypeScript, da es mit seinen Typen einfach ist, die Entwicklerproduktivität mit Werkzeugen zu unterstützen. Darüber hinaus wird fast alles von TypeScript unterstützt. Daher ist es schwierig , einfaches JavaScript zum Schreiben Ihrer Anwendung zu verwenden. Das Schreiben von Angular-Code in JavaScript ist jedoch möglich. Dieser Leitfaden erklärt, wie.
Weitere Informationen zur Architektur von Angular finden Sie hier
Versionen
| Ausführung | Veröffentlichungsdatum |
|---|---|
| 5.0.0-beta.1 (Neueste) | 2017-07-27 |
| 4.3.2 | 2017-07-26 |
| 5.0.0-beta.0 | 2017-07-19 |
| 4.3.1 | 2017-07-19 |
| 4.3.0 | 2017-07-14 |
| 4.2.6 | 2017-07-08 |
| 4.2.5 | 2017-06-09 |
| 4.2.4 | 2017-06-21 |
| 4.2.3 | 2017-06-16 |
| 4.2.2 | 2017-06-12 |
| 4.2.1 | 2017-06-09 |
| 4.2.0 | 2017-06-08 |
| 4.2.0-rc.2 | 2017-06-01 |
| 4.2.0-rc.1 | 2017-05-26 |
| 4.2.0-rc.0 | 2017-05-19 |
| 4.1.3 | 2017-05-17 |
| 4.1.2 | 2017-05-10 |
| 4.1.1 | 2017-05-04 |
| 4.1.0 | 2017-04-26 |
| 4.1.0-rc.0 | 2017-04-21 |
| 4.0.3 | 2017-04-21 |
| 4.0.2 | 2017-04-11 |
| 4.0.1 | 2017-03-29 |
| 4.0.0 | 2017-03-23 |
| 4.0.0-rc.6 | 2017-03-23 |
| 4.0.0-rc.5 | 2017-03-17 |
| 4.0.0-rc.4 | 2017-03-17 |
| 2.4.10 | 2017-03-17 |
| 4.0.0-rc.3 | 2017-03-10 |
| 2.4.9 | 2017-03-02 |
| 4.0.0-rc.2 | 2017-03-02 |
| 4.0.0-rc.1 | 2017-02-24 |
| 2.4.8 | 2017-02-18 |
| 2.4.7 | 2017-02-09 |
| 2.4.6 | 2017-02-03 |
| 2.4.5 | 2017-01-25 |
| 2.4.4 | 2017-01-19 |
| 2.4.3 | 2017-01-11 |
| 2.4.2 | 2017-01-06 |
| 2.4.1 | 2016-12-21 |
| 2.4.0 | 2016-12-20 |
| 2.3.1 | 2016-12-15 |
| 2.3.0 | 2016-12-07 |
| 2.3.0-rc.0 | 2016-11-30 |
| 2.2.4 | 2016-11-30 |
| 2.2.3 | 2016-11-23 |
| 2.2.2 | 2016-11-22 |
| 2.2.1 | 2016-11-17 |
| 2.2.0 | 2016-11-14 |
| 2,2,0-rc,0 | 2016-11-02 |
| 2.1.2 | 2016-10-27 |
| 2.1.1 | 2016-10-20 |
| 2.1.0 | 2016-10-12 |
| 2.1.0-rc.0 | 2016-10-05 |
| 2.0.2 | 2016-10-05 |
| 2.0.1 | 2016-09-23 |
| 2.0.0 | 2016-09-14 |
| 2.0.0-rc.7 | 2016-09-13 |
| 2.0.0-rc.6 | 2016-08-31 |
| 2.0.0-rc.5 | 2016-08-09 |
| 2.0.0-rc.4 | 2016-06-30 |
| 2.0.0-rc.3 | 2016-06-21 |
| 2.0.0-rc.2 | 2016-06-15 |
| 2.0.0-rc.1 | 2016-05-03 |
| 2.0.0-rc.0 | 2016-05-02 |
Installation von Angular mit Winkelkli
Dieses Beispiel ist eine schnelle Einrichtung von Angular und das Erstellen eines schnellen Beispielprojekts.
Voraussetzungen:
- Node.js 6.9.0 oder höher.
- npm v3 oder höher oder garn .
- Typisierung v1 oder höher.
Öffnen Sie ein Terminal und führen Sie die Befehle nacheinander aus:
npm install -g typings oder npm install -g typings yarn global add typings
npm install -g @angular/cli oder yarn global add @angular/cli
Der erste Befehl installiert die Typisierungsbibliothek global (und fügt die ausführbare typings zu PATH hinzu). Die zweite installiert @ angle / cli global und fügt die ausführbare Datei ng PATH hinzu.
Ein neues Projekt einrichten
Navigieren Sie mit dem Terminal zu einem Ordner, in dem Sie das neue Projekt einrichten möchten.
Führen Sie die Befehle aus:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Nun haben Sie ein einfaches Beispielprojekt mit Angular. Sie können jetzt zu dem in Terminal angezeigten Link navigieren und sehen, was gerade läuft.
Hinzufügen zu einem vorhandenen Projekt
Navigieren Sie zum Stammverzeichnis Ihres aktuellen Projekts.
Führen Sie den Befehl aus:
ng init
Damit fügen Sie Ihrem Projekt das erforderliche Gerüst hinzu. Die Dateien werden im aktuellen Verzeichnis erstellt. Stellen Sie daher sicher, dass Sie diese in einem leeren Verzeichnis ausführen.
Projekt lokal ausführen
Um Ihre Anwendung während der Ausführung im Browser anzuzeigen und mit ihr zu interagieren, müssen Sie einen lokalen Entwicklungsserver starten, der die Dateien für Ihr Projekt hostet.
ng serve
Wenn der Server erfolgreich gestartet wurde, sollte eine Adresse angezeigt werden, unter der der Server ausgeführt wird. Normalerweise ist dies:
http://localhost:4200
Standardmäßig ist dieser lokale Entwicklungsserver mit Hot Module Reloading verbunden. Änderungen an HTML, Typoscript oder css führen dazu, dass der Browser automatisch neu geladen wird (kann aber bei Bedarf deaktiviert werden).
Komponenten, Richtlinien, Pipes und Services generieren
Mit dem Befehl ng generate <scaffold-type> <name> (oder einfach ng g <scaffold-type> <name> ) können Sie automatisch Angular-Komponenten generieren:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
Es gibt verschiedene Arten von Gerüsten, die eckige Kli erzeugen können:
| Gerüsttyp | Verwendungszweck |
|---|---|
| Modul | ng g module my-new-module |
| Komponente | ng g component my-new-component |
| Richtlinie | ng g directive my-new-directive |
| Rohr | ng g pipe my-new-pipe |
| Bedienung | ng g service my-new-service |
| Klasse | ng g class my-new-class |
| Schnittstelle | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
Sie können den Typnamen auch durch den ersten Buchstaben ersetzen. Zum Beispiel:
ng gm my-new-module zum Erzeugen eines neuen Moduls oder ng gc my-new-component zum Erstellen einer Komponente.
Gebäude / Bündelung
Wenn Sie mit dem Erstellen Ihrer Angular-Web-App fertig sind und sie auf einem Webserver wie Apache Tomcat installieren möchten, müssen Sie nur den Build-Befehl mit oder ohne Produktionsflag ausführen. Die Produktion minimiert den Code und optimiert für eine Produktionseinstellung.
ng build
oder
ng build --prod
Suchen Sie dann im Stammverzeichnis des Projekts nach einem Ordner /dist , der den Build enthält.
Wenn Sie die Vorteile eines kleineren Produktionspakets wünschen, können Sie auch die Ahead-of-Time-Vorlagenkompilierung verwenden, die den Vorlagen-Compiler aus dem endgültigen Build entfernt:
ng build --prod --aot
Unit Testing
Angular bietet integrierte Einheitentests, und jeder von angle-cli erstellte Artikel generiert einen grundlegenden Unit-Test, der ausgegeben werden kann. Die Unit-Tests werden mit Jasmin geschrieben und mit Karma ausgeführt. Um den Test zu starten, führen Sie den folgenden Befehl aus:
ng test
Dieser Befehl führt alle Tests im Projekt aus und führt sie jedes Mal erneut aus, wenn sich eine Quelldatei ändert, unabhängig davon, ob es sich um einen Test oder Code aus der Anwendung handelt.
Weitere Informationen finden Sie auch auf der Website von angle-cli github
Winkeliges "Hello World" -Programm
Voraussetzungen:
Einrichten der Entwicklungsumgebung
Bevor wir beginnen, müssen wir unsere Umgebung einrichten.
Installieren Sie Node.js und npm, wenn sie noch nicht auf Ihrem Computer installiert sind.
Stellen Sie sicher, dass Sie mindestens die Knoten 6.9.x und npm 3.xx ausführen, indem Sie die Knoten -v und npm -v in einem Terminal- / Konsolenfenster ausführen. Ältere Versionen erzeugen Fehler, neuere Versionen sind jedoch in Ordnung.
Installieren Sie die Angular-CLI global mit
npm install -g @angular/cli.
Schritt 1: Neues Projekt erstellen
Öffnen Sie ein Terminalfenster (oder die Eingabeaufforderung Node.js in Windows).
Wir erstellen ein neues Projekt und eine neue Skeleton-Anwendung mit dem Befehl:
ng new my-app
Hier ist das ng für Angular. Wir bekommen so eine Dateistruktur.
Es gibt viele Dateien. Wir müssen uns jetzt nicht um alle sorgen.
Schritt 2: Bereitstellen der Anwendung
Wir starten unsere Anwendung mit folgendem Befehl:
ng serve
Wir können ein Flag -open (oder einfach -o ) verwenden, das unseren Browser automatisch unter http://localhost:4200/ öffnet.
ng serve --open
Navigieren Sie im Browser zur Adresse http://localhost:4200/ . Es sieht ungefähr so aus:
Schritt 3: Bearbeiten unserer ersten Winkelkomponente
Die CLI hat die Standard-Angular-Komponente für uns erstellt. Dies ist die Wurzelkomponente und wird app-root . Man kann es in ./src/app/app.component.ts .
Öffnen Sie die Komponentendatei und ändern Sie die Titeleigenschaft von Welcome to app!! zu Hello World . Der Browser wird automatisch mit dem überarbeiteten Titel geladen.
Originalcode: Beachten Sie den title = 'app';
Modified Code: Wert des title wird geändert.
Ebenso gibt es eine Änderung in ./src/app/app.component.html .
Ursprüngliches HTML
Modifiziertes HTML
Beachten Sie, dass der Wert von title aus der ./src/app/app.component.ts angezeigt wird. Der Browser wird automatisch neu geladen, wenn die Änderungen abgeschlossen sind. Es sieht ungefähr so aus.
Weitere Informationen zum Thema finden Sie hier .