Angular ist eine TypeScript-Entwicklungsplattform und ein Framework, die zum Erstellen von Single-Page-Anwendungen verwendet werden.

Angular hat eine komplexe Geschichte. Die Entwickler verwendeten JavaScript, um die erste Version dieses Frameworks (AngularJS) zu erstellen. Die Angular-Entwickler verwendeten später TypeScript, um alle nachfolgenden Versionen von Angular zu erstellen (aufgrund der Anzahl von Fehlern in der ersten Version).

Ab 2021 ist die neueste Version von Angular 12.0. In diesem Artikel erfahren Sie alles, was Sie über das Angularframework wissen müssen.

Was ist eckig?

Viele Leute beschreiben Angularas als Framework, und obwohl diese Definition nicht falsch ist, ist Angular nicht nur ein Framework. Angular ist auch eine Entwicklungsplattform. Dies bedeutet, dass es über ein Hardware- und Softwaresystem verfügt, auf dem Angular-Anwendungen ausgeführt werden.

Obwohl es auf TypeScript basiert, können Sie den größten Teil des Codes der Plattform in JavaScript schreiben. Wie die meisten Frameworks ist Angular komponentenbasiert. Dies bedeutet, dass jeder Abschnitt einer Angular-Benutzeroberfläche als unabhängige Einheit behandelt wird, was zur Erstellung von wiederverwendbarem Code und skalierbaren Anwendungen führt.

Um Angular verwenden zu können, müssen Sie mit HTML, CSS und JavaScript vertraut sein (die Kenntnis von TypeScript ist von Vorteil, aber keine Voraussetzung). Angularis wird häufig mit VueJS und ReactJS verglichen, und eine der Hauptbeschwerden ist, dass Angular eine steilere Lernkurve hat.

Verwandt: Was ist ReactJS und wofür kann es verwendet werden?

Dies ist keine Überraschung, da Angular (als Entwicklungsplattform) über eine größere Anzahl von Kernstrukturen verfügt, mit denen Sie sich vertraut machen müssen. Zu diesen Strukturen gehören:

• Module
• Komponenten
• Vorlagen

Und wenn Sie diese Kernfunktionen verstehen, sind Sie auf dem besten Weg, ein Angular-Entwickler zu werden.

Erkunden von Angular-Dateien

Die Angular-Anwendung generiert viele Dateien in Ihrem neuen Projektordner (wie Sie in der Abbildung unten sehen können). Auf der offiziellen Website von Angular finden Sie Anweisungen zur Installation von Angular auf Ihrem Computer.

Eine der wichtigeren Dateien im Hauptprojektordner ist die Paket.json Datei. Diese Datei sagt Ihnen den Namen Ihres Projekts, wie Sie Ihr Projekt starten (ng dienen), wie Sie Ihr Projekt erstellen (ng bauen) und wie Sie Ihr Projekt testen (ng test) unter anderem.

Ihr Hauptprojektordner enthält auch zwei Ordner –node_modules und src. Die src Ordner ist der Ort, an dem Sie Ihre gesamte Entwicklung durchführen. es enthält mehrere Dateien und Ordner.

Der src-Ordner

Die stile.css Datei ist der Ort, an dem Sie alle Ihre globalen Stileinstellungen ablegen, und die index.html file ist die einzelne Seite, die in Ihrem Browser gerendert wird.

Durchsuchen der Datei index.html

Das einzige, was Sie in der ändern möchten index.html Datei oben ist der Titel der Anwendung. Die -Tag im Textkörper der HTML-Datei oben verlinkt auf die app.komponente.ts Datei, die sich im App-Ordner befindet (wie Sie im Bild unten sehen können).

Durchsuchen der app.component.ts-Datei

import {Component } from '@angular/core';
@Komponente({
Selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Export-Klasse AppComponent {
title = 'meine-app';
}

Die app.komponente.ts Datei verwendet die App-Root Selektor, der sich im index.html Datei oben. Es verwendet die app.komponente.html Datei als Vorlage und die app.component.css Datei für Stil.

Die app.component.css Die Datei ist beim Generieren leer, da sich alle Stileinstellungen zusammen mit dem HTML-Layout innerhalb des app.komponente.html Datei.

Ausführen der Angular-Anwendung mit dem ng dienen --open Befehl zeigt Folgendes in Ihrem Browser an:

Um zu ändern, was in Ihrem Browser angezeigt wird, müssen Sie die app.komponente.html Datei.

Ersetzen Sie den Inhalt dieser Datei durch den folgenden Code:

Hallo Welt

Erzeugt die folgende Ausgabe in Ihrem Browser:

Winkelmodule verstehen

Jeden Eckig Anwendung basiert auf einem grundlegenden Modulsystem, bekannt als NgModule. Jede Bewerbung enthält mindestens eine NgModul. Eckig erzeugt zwei Module aus dem ng neu Befehl (App-Routing.module.ts und app.module.ts).

Die app.module.ts Datei enthält das Root-Modul, das vorhanden sein muss, damit die Anwendung ausgeführt werden kann.

Durchsuchen der Datei app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
Erklärungen: [
Anwendungskomponente
],
Importe: [
BrowserModul,
AppRoutingModul
],
Anbieter: [],
Bootstrap: [AppComponent]
})
Exportklasse AppModule { }

Die obige Datei verwendet das JavaScript importieren Anweisung zum Importieren der NgModul, das BrowserModul, das Anwendungskomponente, und der AppRoutingModul (das ist das zweite NgModule im Projekt).

Die @NgModule Dekorateur kommt nach den Importen. Es zeigt an, dass die app.module.ts Datei ist in der Tat a NgModul. Die @NgModule decorator konfiguriert dann mehrere Arrays: die Erklärungen, das Importe, das Anbieter, und der Bootstrap.

Die Erklärungen Array speichert die Komponenten, Direktiven und Pipes, die zu einem bestimmten. gehören NgModul. Bei einem Root-Modul jedoch nur die Anwendungskomponente wird im gespeichert Erklärung Array (wie Sie im obigen Code sehen können).

Die Importe Array importiert das andere NgModule die Sie in der Anwendung verwenden. Die Importe array im obigen Code importiert die BrowserModul (wodurch browserspezifische Dienste wie DOM-Rendering verwendet werden können) und die AppRoutingModul (damit kann die Anwendung die Eckig Router).

Verwandt: Der versteckte Held der Websites: Das DOM verstehen

Die Anbieter Array sollte Dienste enthalten, die Komponenten in anderen NgModule Kann benutzen.

Die Bootstrap Array ist sehr wichtig, da es die Eintragskomponente enthält, die Angular erstellt und in das index.html Datei im Hauptprojektordner. Jede Angular-Anwendung startet vom Bootstrap Array in der Wurzel NgModul von Bootstrapping das NgModul (was einen Prozess beinhaltet, bei dem jede Komponente in die Bootstrap Array im Browser-DOM).

Winkelkomponenten verstehen

Jede Angular-Komponente wird mit vier spezifischen Dateien generiert. Wenn Sie sich das App-Ordnerbild oben ansehen, sehen Sie die folgenden Dateien:

• app.component.css (eine CSS-Datei)
• app.komponente.html (eine Vorlagendatei)
• app.component.spec.ts (eine Testspezifikationsdatei)
• app.komponente.ts (eine Komponentendatei)

Alle oben genannten Dateien sind mit derselben Komponente verknüpft. Wenn Sie das verwenden ng generieren Befehl zum Generieren einer neuen Komponente werden vier ähnliche Dateien wie die obigen generiert. Die app.komponente.ts Datei enthält die Wurzelkomponente, das die verschiedenen Aspekte der Komponente (wie die Vorlage und den Stil) verbindet.

Durchsuchen der app.component.ts-Datei

import { Component } from '@angular/core';
@Komponente({
Selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Export-Klasse AppComponent {
title = 'meine-app';
}

Die app.komponente.ts file verwendet die JavaScript-Import-Anweisung, um „Component“ aus dem Kern von Angular zu importieren. Dann ist die @Komponente decorator identifiziert die Klasse als eine Komponente. Die @Komponente decorator enthält ein Objekt bestehend aus a Wähler, ein VorlagenUrl, und ein styleUrls Array.

Die Wähler erzählt Eckig um eine Instanz der App-Komponente in eine beliebige HTML-Vorlage einzufügen, die ein Tag entsprechend dem Wähler (also die Schild). Und wenn Sie einen Blick zurück auf den Code im index.html Datei oben finden Sie die Schild.

Die Haupt-App-Komponentendatei ist auch mit der Vorlagendatei verknüpft VorlagenUrl Eigentum. Dies ist das app.komponente.html -Datei, die beschreibt, wie eine bestimmte Komponente in einer Angular-Anwendung gerendert werden soll.

Die letzte Eigenschaft im Objekt ist die styleUrls. Diese Eigenschaft verweist auf ein Array von Stylesheets, was bedeutet, dass Sie mehrere Stylesheets auf eine einzelne Komponente (damit Sie das globale Stylesheet im src-Ordner zum styleUrls-Array hinzufügen können als Gut).

Angular-Vorlagen verstehen

Die app.komponente.html Datei ist ein Beispiel für eine Angular-Vorlage. Diese Datei ist sowohl eine HTML-Datei als auch eine Komponentendatei (die App-Komponente). Daher muss jede Komponente ein HTML-Template haben, einfach weil es beschreibt, wie eine Komponente im DOM gerendert wird.

Was kommt als nächstes?

Das DOM zu verstehen ist der nächste beste Schritt. Die Angular-Plattform und das Framework zu übernehmen, ist zweifellos eine Herausforderung. Es ist jedoch möglich, und da Angular seine Komponenten im DOM rendert, ist das Erlernen des DOM – während Sie versuchen, Angular zu meistern – ein weiterer großartiger Schritt.

Der versteckte Held der Websites: Das DOM verstehen

Sie lernen Webdesign und möchten mehr über das Document Object Model wissen? Hier ist, was Sie über das DOM wissen müssen.

Weiter lesen

Über den Autor