Winkel 2 in 10 Minuten

Die Art und Weise, wie wir heute Anwendungen entwickeln, hat die Komplexität der Entwicklungen erheblich reduziert, und trotz der Aufnahme neuer Technologien, die zunächst etwas kompliziert erscheinen mögen, helfen sie tatsächlich nicht nur, bessere Anwendungen zu bauen, sondern auch an aktuelle Usability-Anforderungen anzupassen.

Eine dieser Technologien, die wir verwenden können, ist AngularJS, ein MVW-Framework (Model-View-Was auch immer), was übersetzt Model-View-Whatever-Works-for you heißt, basiert auf JavaScript und ermöglicht es uns, unsere Dokumente bereitzustellen HTML statische Merkmale der dynamischen Funktionalität und die Nutzung der Bindungen um Daten in unseren HTML-Code mit den eigenen Anweisungen des Frameworks einzufügen.

Angular funktioniert recht gut, aber wir haben eine neue Iteration davon und es ermöglicht, die Funktionalität des Frameworks viel mehr zu erweitern, dann sehen wir uns an, wie wir mit der Verwendung beginnen können Angular 2 in nur 10 Minuten.

1. Erhalten von TypeScript und Angular 2

Um diese Implementierung durchzuführen, werden wir so optimal wie möglich arbeiten, dafür verwenden wir Typoskript Dies ist eine Sprache, die es ermöglicht, die Funktionalität von . zu erweitern JavaScript sich auf die Verwendung von Klassen und Objekten zu konzentrieren.

Um so viel zu bekommen Typoskript Was Winkel 2 es ist notwendig, dass wir haben Node.js, sowie den Paketmanager auf unserem Computer, wenn wir sie immer noch nicht haben, können Sie einen Blick auf die erste Schritte mit Node.js in diesem Tutorial.

Sobald wir haben Node.js und der Paketmanager NPM Wir können die Befehle ausführen, um das zu bekommen, was wir brauchen:

 npm install -g tsd@^0.6.0 tsd install angle2 es6-promise rx rx-lite 

Zusätzlich müssen wir den Compiler installieren Typoskript da der Browser keine .ts-Dateien erkennt:

 npm install -g typescript@^1.5.0-beta

Nach der Ausführung sollten wir über die Konsole die Installation der Module, des Compilers und der Framework-Bibliotheken sehen.

VERGRÖSSERN

Schließlich müssen wir nur noch einen lokalen Server installieren, um unsere Anwendung professionell auszuführen, dafür in unserer Konsole und über NPM führen wir Folgendes aus:

 npm install -g http-server

2. Erstellung unserer Anwendung

Sobald wir alles Notwendige für den Betrieb unserer Anwendung haben, erstellen wir einen Ordner, in dem wir die Projektdateien haben, den wir nennen können eckig10min, und im Inneren werden wir eine Datei namens . erstellen application.ts und unser übliches index.html.

Als erstes fügen wir die Klassen und Komponenten unserer Datei application.ts hinzu. Dazu müssen wir als erstes importieren Winkel 2 wie folgt:

 import {Component, View, bootstrap} from 'angular2 / angle2';

Um zu überprüfen, ob sich unser Compiler im Ordner unseres Projekts befindet, führen wir Folgendes aus:

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

Mit dem, was wir per Konsole erhalten sollten, dass die Kompilierung erfolgreich abgeschlossen wurde und dass sie auch auf Änderungen in der Datei wartet, das heißt, weil der Parameter -watch verwendet wurde.

VERGRÖSSERN

Jetzt erstellen wir unsere Komponente, in der wir die deklarieren Wähler die wir in unserem HTML-Code verwenden werden, sowie unsere Ansicht, in der wir die Vorlage einfügen, in die wir die Änderungen einfügen.

 @Component ({selector: 'my-app'}) @View ({template: ''})

Da unser Compiler nach Änderungen Ausschau hält und wir einige eingefügt haben, ist es normal, dass wir einige Aktivitäten in unserer Konsole sehen.

Jetzt müssen wir nur noch die Deklaration unserer Klasse vornehmen und die Objekte im Konstruktor initialisieren, die dann in der Ansicht geleert werden. Schließlich verwenden wir die Bootstrap()-Funktion, die für das Rendern der Komponenten auf unserer Seite verantwortlich ist.

 Klasse myComponent {Name: String; Konstruktor () {dieser.name = 'Jonathan'; }} Bootstrap (myComponent);

Wir haben unseren Typescript-Code bereits fertig, und wenn wir unseren Ordner einchecken, sollten wir ein JavaScript haben, das das Ergebnis unserer Kompilierung der .ts ist.

VERGRÖSSERN

3. HTML erstellen

Schließlich müssen wir die bauen HTML, führen die fälligen Importe durch und binden die Selektoren ein, die wir in unserer .ts-Datei deklarieren, dazu werden wir die system.js, die uns die Durchführung der importieren unserer Datei sehen wir uns den Inhalt unseres HTML an:

 Winkel 2 in 10 Minuten 

Sobald dies erledigt ist, müssen wir nur noch unseren Server und unsere Anwendung ausführen, dazu stoppen wir den Compiler und führen den Server mit dem folgenden Befehl aus:

 http-Server

Dadurch wird ein Server in eingerichtet localhost: 8080 und es wird uns den Zugriff auf unsere Anwendung ermöglichen.

Wir werden die in unserer Datei definierten Daten sehen Typoskript sind diejenigen, die in unsere Anwendung injiziert werden, auf diese Weise trennen wir die Logik unserer Anwendung und können ein sauberes HTML-Dokument haben, das nur die Selektoren verarbeitet, die wir dank erstellt haben Winkel 2, um uns eine Anwendung zu ermöglichen, die mit geringstmöglichem Aufwand optimaler und effizienter arbeitet.