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"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“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"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“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

http://ipnx.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"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“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"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“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!