Erstellen von Komponenten in Angular 2 mit TypeScript und ES5

Kernpunkte

• Angular 2.0 verwendet TypeScript (ein Superset von JavaScript), um die Leistung zu optimieren, die Seitengeschwindigkeit und die Workflow -Automatisierung zu verbessern. Mit TypeScript können Entwickler Typeninformationen verwenden, um Javascript -Code zu kommentieren, wodurch Fehler in der Codebasis erfasst werden können.
• Angular 2.0 führt das Konzept von Komponenten ein, die wiederverwendbare Codeblöcke sind, die Ansichten und Logik enthalten. Komponenten ersetzen Anweisungen als Hauptelement des Frameworks, um sicherzustellen, dass ein Teil des Code des Anwendung keinen anderen Teil des Codes beeinträchtigt.
• Erstellen von Komponenten in Angular 2.0 mithilfe von TypeScript beinhaltet das Definieren von Komponentenklassen und das Importieren der erforderlichen Funktionen aus Angular. Dekorieren Sie dann die Klasse mit dem @Component Decorator und exportieren Sie sie für die Verwendung in anderen Teilen der Anwendung.
• Angular 2.0 unterstützt auch ES5, der Standard -JavaScript -Version, die in den meisten Browsern ausgeführt wird. Um Komponenten mit ES5 in Angular 2.0 zu erstellen, können Entwickler Methoden für NG -Objekte verwenden, um Komponenten zu definieren und Funktionen hinzuzufügen. Dann können Sie den Code direkt im Browser ausführen, ohne dass ein Server erforderlich ist.

Dieser Artikel wurde von Stephan Max, Jeff Smith und Ravi Kiran überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für die Besten erhalten haben!

Wenn sich das Jahresende nähert, ist das Angular -Team näher als je zuvor, eine stabile Version von Angular 2.0 zu veröffentlichen. Dies wird die Art und Weise, wie Winkelanwendungen entwickelt werden, umgestalten, aber bessere Ergebnisse erzielen. In diesem Artikel zeige ich Ihnen einige der Kernkonzepte in Angular 2.0 und wie Sie sie verwenden. Insbesondere werde ich Sie durch den Prozess des Aufbaus von Winkel 2 -Komponenten von Anfang bis Ende führen. Zuerst erfahren wir mehr darüber, wie dies mit TypeScript zu tun ist, und dann migrieren wir die Winkelkomponente, damit sie mit reinem ES5 ausgeführt werden kann.

Der Code für dieses Tutorial finden Sie in unserer GitHub -Code -Basis. Die Codebasis verfügt über zwei Filialen, eine für die TypsScript -Version und eine für die ES5 -Version. Wenn Sie einen bestimmten Zweig klonen möchten, verwenden Sie git clone <url> --branch <branch></branch></url>.

Was sind Komponenten?

Die Verwendung von Komponenten in JavaScript hat in den letzten Monaten erheblich zugenommen. Sie werden in Projekten wie React, Knockout, Ember und mehr verwendet. Es ist also keine Überraschung, dass Angular sie in Version 2.0 integriert. Die Code -Modularität war schon immer ein Fokus des Angular -Teams, und die Verwendung von Komponenten zeigt dies, da sie es uns ermöglichen, Code in eingekapselte Blöcke zu unterteilen.

Was sind Komponenten? Es ist im Wesentlichen ein Code, der während der gesamten Anwendung wiederverwendet werden kann. Es enthält zwei Teile: Ansicht und Logik. Durch die Nutzung der Aufmerksamkeit des Winkelentwicklungsteams auf Komponenten können wir einige sehr leistungsstarke Merkmale nutzen. Angular 2 erleichtert es sehr einfach, dynamische Anwendungen zu erstellen, die aus verschiedenen Komponenten bestehen, die Anweisungen als Kern des Frameworks ersetzt haben. In Angular 2 sind Direktiven leichte Komponenten, die nur dazu verwendet werden, der DOM eine gewisse Funktionalität zu verleihen. Jetzt müssen Angularentwickler aufgrund von Konfliktproblemen im Zusammenhang mit der Isolierung von $ Scope keine Sorgen machen, ihre Anwendungen durcheinander zu bringen. Stattdessen ist die Verwendung von Komponenten eine Möglichkeit, sicherzustellen, dass ein Teil des Code des Anwendung keinen anderen Teil des Codes beeinträchtigt.

TypeScript

Angular 2.0 wurde erstellt, um TypeScript zu verwenden, ein Supersatz von JavaScript. Angular -Entwickler haben viel Zeit damit verbracht, diese Veröffentlichung abzuschließen. Sie arbeiten hart, um die Leistung zu optimieren, einschließlich Seitengeschwindigkeit und Workflow -Automatisierung. TypeScript ähnelt anderen Transcodern, sodass Entwickler Code schreiben können, die leicht in gültige JavaScript konvertiert werden können. Davon abgesehen ist es im vergangenen Jahr beliebter geworden, sodass das Angular -Team beschloss, es zum Erstellen von Frameworks zu verwenden.

Einer der Vorteile der Verwendung von TypeScript ist sein Typsystem, mit dem Entwickler JavaScript mithilfe von Typinformationen kommentieren können. Dieser kommentierte Code wird durch den Compiler ausgeführt, wodurch Fehler aufgenommen werden, die ansonsten in der Codebasis auf die Erkennung von Benutzer lauern. Schauen wir uns nun die praktische Anwendung von Typenkript an.

unten habe ich ein Beispiel aus dem Artikel "The Rise of TypeScript" von TJ Van Toll extrahiert. In dieser Funktion sehen wir, dass die Parameter der Höhe und der Breite numerische Typen sein sollten. : number Bevor die Funktionskörper den Rückgabetyp angibt, der ebenfalls ein numerischer Typ ist. Daher führt jeder nicht numerische Inhalt, der an diese Funktion übergeben wird, den Compiler zum Kompilieren der Kompilierzeit.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Typ -Deklarationen helfen uns, APIs zu dokumentieren und unseren Code im Laufe der Zeit zu erleichtern.

Installation

Der Prozess des Zusammenstellens von Typscript in JavaScript ist sehr einfach. Holen Sie sich zuerst das Typscript -Paket von NPM:

npm install -g typescript

Nach Abschluss der Installation ist das Kompilieren von TypeScript in JavaScript so einfach wie das Ausführen des folgenden Befehls aus der Befehlszeile (die TypeScript -Datei wird mit der Erweiterung von .ts gespeichert):

tsc <filename.ts>

Lassen Sie uns nun sehen, wie Angular 2 die Leistung von TypeScript nutzen kann, um einfach benutzerdefinierte Komponenten zu erstellen. Der Code für unser erstes Beispiel finden Sie in der TypeScript -Filiale unserer GitHub -Codebasis.

Komponenten in TypeScript

erstellen

Da TypeScript ein Supersatz von JavaScript ist, kann jedes gültige JavaScript in .ts -Dateien ordnungsgemäß funktionieren. Durch die Verwendung von TypeScript können Entwickler ihren JavaScript -Code erweitern, um die neuesten ES6 -Funktionen zu nutzen. In diesem Beispiel werden wir die Klasse verwenden.

unten habe ich eine Komponente mit dem TypeScript -Code erstellt. Ich habe Angular zuerst mit der ES6 -Importsyntax importiert. In diesem Beispiel definieren wir eine Komponente und eine Ansicht dieser Komponente. Sobald wir fertig sind, benötigen wir die Bootstrap -Funktion von Angular, um Angular den Code auszuführen. In diesem Code sehen wir das @ -Symbol, mit dem Angular angeht, was wir zu bauen versuchen.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Da Angular 2 auf dem Typenkript aufgebaut ist, erkennt das Framework unsere @Component -Annotation und weiß, dass wir versuchen, eine neue Komponente zu erstellen. Darüber hinaus zeigt es Angular, dass wir eine Komponente instanziieren möchten, wenn es in unserem HTML <user-name></user-name> in unserem HTML sieht.

Wie oben erwähnt, enthält die Komponente zwei Teile:

• view
• logistisch

Da die Komponente definiert ist, müssen wir jetzt Ansichten und Logik erstellen.

Nach unserer Komponente können wir einen TypeScript -Code hinzufügen, um unsere Ansicht zu definieren. Werfen wir einen Blick auf die Fortsetzung des obigen Code

npm install -g typescript

Wenn ich jetzt

zu meiner Index.html -Datei hinzufüge, wird diese Vorlage in die DOM injiziert. Davon abgesehen ist der logische Teil unserer Komponente leer, da unsere Benutzerkomponentenklasse keinen Code enthält. <user-name></user-name>

Im obigen Beispiel habe ich nur eine leere Klasse. Aber jetzt erstelle ich eine Namensvariable und rendere diese Namensvariable in unserer Ansicht mit dem Ausdruck:

tsc <filename.ts>

Sie werden auch die Bootstrap -Funktion sehen, die ich zuvor erwähnt habe. Obwohl sie einen Namen teilen, wird diese Funktion verwendet, um unsere Winkelanwendung zu starten oder zu starten und nicht mit dem Twitter -Bootstrap -Framework zu tun. Wenn wir vergessen, unsere Komponente in diese Funktion zu übergeben, wird Angular nicht wissen, dass er unsere Komponente lädt.

Ich möchte auch schnell feststellen, dass unsere Anwendung einen Server verwenden muss, um ordnungsgemäß anzuzeigen. Wenn Sie direkt darauf zugreifen, kann System.js unser Hauptmodul, das unseren Code enthält, nicht laden.

Jetzt können Benutzer, die das Repository dieses Beispiels verwenden, im Root -Verzeichnis

ausführen. Nach dem Ausführen dieses Befehls können wir den tatsächlichen Effekt unserer Komponenten ansehen, indem wir

https://www.php.cn/link/f74d6ef882234fd34400A296b1da6149

besuchen. Hoffentlich zeigt dies, wie einfach Angular das Hinzufügen von Logik zu Komponenten macht! node app.js Migrieren Sie unsere Komponenten auf ES5

Für diejenigen, die ES5 verwenden möchten, um die Leistung von 2,0 zu nutzen, hat das Angular 2 -Team eine Framework -Version erstellt, die einfach auf die Website eingesetzt werden kann. Dies ist notwendig, da ES5 kein Modulsystem hat. Daher benötigen wir eine Art selbstverständlichem Bündel. Wenn Sie sich den Code für das erste Beispiel angesehen haben, werden Sie feststellen, dass ich der Anwendung drei verschiedene Skript -Tags hinzufügen muss. In diesem Beispiel müssen wir nur das folgende Skript hinzufügen.

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Mit diesem Skript können Entwickler ihr Wissen über ES5 nutzen, ohne sich Gedanken darüber zu machen, die Fähigkeiten des Rahmens zu opfern. Lassen Sie uns sehen, wie Sie Winkelkomponenten mit ES5 bauen. Der Code für dieses Beispiel befindet sich in der ES5 -Filiale unserer GitHub -Codebasis. Das heißt, fangen wir an!

Um Komponenten mit ES5 anstelle von TypeScript nachzubilden, werde ich einige unterschiedliche Ansätze verwenden. Dies ist im Grunde genommen das gleiche wie das, was ich im obigen Beispiel getan habe, aber wir werden die Methodenverbindung im NG -Objekt verwenden, anstatt das @ -Symbol zu verwenden. Dies wird im folgenden Code angezeigt:

npm install -g typescript

Jetzt können wir unsere Komponenten weiterhin Funktionen hinzufügen, die angezeigt werden, wenn unsere Anwendung den <user-name> -Al wählten liest.

Verwenden wir die Ansichts- und Klassenmethoden. Nach unserer Ansichtsmethode müssen wir nur die Vorlagenzeichenfolge übergeben, die wir zuvor verwendet haben. Da die Klassen in ES5 nicht unterstützt werden, werden wir unsere Verwendung in der Klassenmethode simulieren, indem wir einen einfachen Konstruktor erstellen, der unser Namensattribut enthält.

tsc <filename.ts>

Aber wir fehlen etwas. In unserem TypeScript -Beispiel haben wir die Bootstrap -Funktion verwendet, um unseren Winkelcode zu starten. Hier erfahren Sie, wie Sie dasselbe in ES5:

machen

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

Dies sollte unter unserem benutzerdefinierten Anwendungscode platziert werden. Dies führt dazu, dass Angular unsere Anwendung startet und die Komponenten nach dem Laden der Seite lädt. Im Gegensatz zu unserem vorherigen Beispiel (erfordert ein Server) kann diese Seite direkt im Browser angezeigt werden.

Wie Sie sehen, bietet das Angular -Team eine klare Lösung für Benutzer, die 2.0 -Anwendungen mit ES5 erstellen möchten. Wenn Sie daran interessiert sind, empfehle ich Ihnen dringend, die A.JS-Bibliothek zu lesen, mit der Entwickler anguläre Anwendungen in ES5 mithilfe der TypeScript-ähnlichen Syntax erstellen können.

Schlussfolgerung

Ich hoffe, dies gibt Ihnen einen detaillierten Blick auf verschiedene Aspekte von Angular, die in der nächsten Version des Frameworks erscheinen. Wenn Sie eine vollständige Anwendung mit Angular 2 und TypeScript (in diesem Fall in der Message Board) weiter erstellen möchten, schlage ich vor, dass Sie diesen Artikel ansehen: Mit Angular 2 mit TypeScript beginnen.

Ich möchte auch Ihre Erfahrungen mit Angular 2 wissen. Hast du es versucht? Haben Sie etwas gebaut, das Sie teilen möchten? Bitte lassen Sie es mich in den Kommentaren wissen.

FAQs beim Erstellen von Komponenten in Winkel 2 mithilfe von TypeScript und ES5

Wie erstelle ich Komponenten in Angular 2 mithilfe von TypeScript?

Komponenten in Angular 2 unter Verwendung von TypeScript umfassen mehrere Schritte. Zunächst müssen Sie Komponentensymbole aus der Winkelkernbibliothek importieren. Sie definieren dann eine Komponentenklasse und dekorieren sie mit dem @component Decorator. Der Dekorateur sagt Angular, dass die Klasse eine Komponente ist und Metadaten wie Selektoren und Vorlagen bereitstellt. Schließlich exportieren Sie die Komponentenklasse, damit Sie sie in anderen Teilen der Anwendung verwenden können. Hier ist ein grundlegendes Beispiel:

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Was ist der Unterschied zwischen TypeScript und ES5 in Angular 2?

TypeScript und ES5 sind beide Sprachen, mit denen Sie Angular 2 -Anwendungen schreiben können, aber sie haben einige wichtige Unterschiede. TypeScript ist ein statisch getipptes Superet von JavaScript, das der Sprache Typen und andere Funktionen hinzufügt. Es ist die bevorzugte Sprache für Angular 2, da der Code robuster und leichter zu warten. ES5 hingegen ist eine Standard -JavaScript -Version, die in den meisten Browsern ausgeführt wird. Angular 2 -Anwendungen können mit ES5 geschrieben werden, aber Sie werden einige der Vorteile von TypeScript verpassen.

(Die verbleibenden FAQs beziehen sich auf Angular und React und stimmen nicht mit dem ursprünglichen Thema überein, sodass sie weggelassen werden.)

Das obige ist der detaillierte Inhalt vonErstellen von Komponenten in Angular 2 mit TypeScript und ES5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!