Die Art und Weise, wie wir heutzutage Anwendungen entwickeln können, hat die Komplexität der Entwicklungen erheblich verringert, und trotz der Einbeziehung neuer Technologien, die auf den ersten Blick etwas kompliziert erscheinen mögen, tragen sie in der Realität nicht nur dazu bei, bessere Anwendungen zu erstellen, sondern auch zu sein angepasst an die aktuellen Usability-Anforderungen.
Eine dieser Technologien, die wir verwenden können, ist AngularJS , ein Framework-MVW ( Model-View-Whatever ), das als Model-View-What-it-to-work-for-you übersetzt wird und auf JavaScript basiert und es ermöglicht uns, unsere statischen HTML- Dokumente mit dynamischer Funktionalität zu versehen und die Bindungen zu verwenden, um Daten unter Verwendung der eigenen Anweisungen des Frameworks in unser HTML einzufügen.
Angular funktioniert ganz gut, aber wir haben eine neue Iteration davon und können die Funktionalität des Frameworks viel mehr erweitern. Lassen Sie uns dann sehen, wie wir Angular 2 in nur 10 Minuten verwenden können .
1. Erhalten von TypeScript und Angular 2
Um diese Implementierung durchzuführen, arbeiten wir auf die bestmögliche Art und Weise. Dazu verwenden wir Typescript , eine Sprache, mit der die JavaScript- Funktionalität erweitert werden kann, um sich auf die Verwendung von Klassen und Objekten zu konzentrieren.
Um sowohl TypeScript als auch Angular 2 zu erhalten, ist es erforderlich, dass wir Node.js und seinen Paketmanager auf unserem Computer haben. Wenn wir sie immer noch nicht haben, können Sie sich die ersten Schritte mit Node.js in diesem Tutorial ansehen.
Sobald wir Node.js und den NPM- Paketmanager haben, können wir die Befehle ausführen, um das zu bekommen, was wir brauchen:
npm install -g tsd@^0.6.0 tsd installieren angle2 es6-versprechen rx rx-lite
Zusätzlich müssen wir den TypeScript- Compiler installieren, da der Browser die .ts-Dateien nicht erkennt:
npm install -g typescript@^1.5.0-beta
Nach der Ausführung sollten wir die Installation der Module, des Compilers und der Framework-Bibliotheken über die Konsole sehen. 
Schließlich müssen wir nur noch einen lokalen Server installieren, um unsere Anwendung professionell ausführen zu können. Dazu führen wir in unserer Konsole und über NPM Folgendes aus:
npm install -g http-server
2. Erstellen unserer Anwendung
Sobald wir alles haben, was für den Betrieb unserer Anwendung notwendig ist, erstellen wir einen Ordner, in dem wir die Projektdateien haben. Wir können ihn angle10min nennen und innerhalb dessen erstellen wir eine Datei mit dem Namen aplicacion.ts und unserer üblichen index.html .
Als Erstes fügen wir die Klassen und Komponenten zu unserer Datei application.ts hinzu. Dazu müssen wir als Erstes Angular 2 wie folgt importieren:
{Component, View, Bootstrap} aus 'angle2 / angular2' importieren;
Um die Funktionsweise unseres Compilers im Ordner unseres Projekts zu überprüfen, führen wir Folgendes aus:
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata aplicacion.ts
Womit wir von der Konsole erhalten sollen, dass die Kompilierung erfolgreich abgeschlossen wurde und dass auch auf Änderungen in der Datei gewartet wird, dass der Parameter -watch verwendet wurde. 
Jetzt erstellen wir unsere Komponente, in der wir den Selektor deklarieren, den wir in unserem HTML-Code verwenden, sowie unsere Ansicht, in der wir die Vorlage einfügen, in die wir die Änderungen einfügen.
@Component ({ Selektor: 'meine-App' }) @View ({ Vorlage: '<h1> Hallo {{name}} </ h1>' })
Da unser Compiler auf Änderungen überwacht und einige davon einbezogen haben, ist es normal, dass in unserer Konsole einige Aktivitäten zu sehen sind.
Jetzt müssen wir nur noch die Deklaration unserer Klasse vornehmen und die Objekte im Konstruktor initialisieren, die in der Ansicht geleert werden. Schließlich verwenden wir die Funktion bootstrap (), die für das Rendern der Komponenten auf unserer Seite verantwortlich ist.
Klasse myComponent { name: string; Konstruktor () { this.name = 'Jonathan'; } } Bootstrap (myComponent);
Wir haben bereits unseren Code Typescript fertig und wenn wir unseren Ordner einchecken, müssen wir ein JavaScript haben, das das Ergebnis unserer Kompilierung der .ts ist. 
3. HTML erstellen
Zum Abschluss müssen wir den HTML- Code erstellen , die erforderlichen Importe ausführen und die von uns deklarierten Selektoren in unsere .ts-Datei aufnehmen. Dazu fügen wir die Datei system.js hinzu , mit der wir den Import unserer Datei durchführen können. Sehen wir uns den Inhalt unseres HTML- Codes an :
<html> <head> <title> Winkel 2 in 10 Minuten </ title> <script src = "https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"> </ script> <script src = "https://jspm.io/[email protected]"> </ script> <script src = "https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"> </ script> </ head> <body> <my-app> </ my-app> <script> System.import ('application'); </ script> </ body> </ html>
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 localhost: 8080 ausgelöst, und wir können auf unsere Anwendung zugreifen.
Wir werden sehen, dass die in unserer Datei TypeScript definierten Daten diejenigen sind, die in unsere Anwendung eingefügt wurden. Auf diese Weise trennen wir die Logik unserer Anwendung und können ein sauberes HTML-Dokument erstellen, das nur die Selektoren verarbeitet, die wir dank Angular 2 erstellt haben. Dies gibt uns eine funktionierende Anwendung optimaler und effizienter Weg mit möglichst geringem Aufwand.
