Vor Monaten habe ich beschlossen, Angular zu studieren. Als ich einige Fortschritte gemacht und eine App damit erstellt habe, wurde mir klar, dass Angular 2 in der Entwicklervorschau enthalten ist. Es ist also eine Frage der Zeit, bis es veröffentlicht wird. Da Angular 2 nicht mit Angular 1 kompatibel sein wird und es viele Änderungen gibt, ist die Frage, ob es besser ist, die Entwicklung mit Angular 1.x fortzusetzen oder mit der Entwicklung von Angular 2 zu beginnen.

Es ist eine Tatsache, dass wir nicht immer die neueste Version oder die neueste Sprache auf dem Markt verwenden müssen, aber in diesem Fall ist die App immer noch klein, sodass ich sie problemlos ändern kann.

Lassen Sie mich vorab sagen, ich gehe davon aus, dass Sie und alle, die dies lesen werden, bereits mit Angular 1 ( jetzt AngularJS genannt , im Gegensatz zu Angular für die neueren Versionen) zufrieden sind . Lassen Sie uns dennoch auf einige der Ergänzungen und Hauptunterschiede in Angular 2+ eingehen.

1. Sie fügten einen Winkel hinzu cli.

Sie können ein neues Projekt starten, indem Sie es ausführen ng new [app name]. Sie können Ihr Projekt bedienen, indem Sie ng serve hier weitere Informationen ausführen : https://github.com/angular/angular-cli

2. Ihr Winkelcode ist in ES6 Typescript geschrieben und wird zur Laufzeit im Browser mit Javascript kompiliert.

Um dies vollständig zu verstehen, empfehle ich, einige der Ressourcenlisten zu lesen, die ich am Ende meiner Antwort habe.

3. Projektstruktur

In einer Grundstruktur haben Sie einen app/tsOrdner, in dem Sie die meiste Arbeit erledigen, und einen Ordner mit einer Erweiterung app/jsin den app/jsOrdnerdateien .js.map. Sie "ordnen" Ihre ".ts" -Dateien Ihrem Browser zum Debuggen zu, da Ihr Browser kein natives Typoskript lesen kann.

Update : Es ist aus der Beta. Die Projektstruktur hat sich in den meisten Fällen etwas geändert. Wenn Sie die Winkel-CLI verwenden, arbeiten Sie im src/app/Ordner. In einem Starterprojekt haben Sie Folgendes.

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css : CSS-Datei, die Sie speziell für die verwenden solltencomponent.html

app.component.html : Eine Ansicht (Variable, die in app.component.js deklariert ist)

app.component.spec.ts : wird zum Testen verwendetapp.component.ts

app.component.ts : Ihr Code, an den gebunden wirdapp.component.html

app.module.ts : Dies ist der Startschuss für Ihre App und wo Sie alle Plugins, Komponenten, Dienste usw. definieren. Dies entspricht dem app.jsin Angular 1

index.ts zum Definieren oder Exportieren von Projektdateien

Zusätzliche Informationen:
Pro-Tipp: Sie können ng generate [option] [name]neue Services, Komponenten, Pipes usw. generieren.

Die tsconfig.jsonDatei ist auch wichtig, da sie TS-Kompilierungsregeln für Ihr Projekt definiert.

Wenn Sie denken, ich muss eine ganz neue Sprache lernen? ... Äh ... irgendwie ist TypeScript eine Obermenge von JavaScript. Lass dich nicht einschüchtern; Es ist da, um Ihre Entwicklung zu erleichtern. Ich hatte das Gefühl, dass ich es nach nur wenigen Stunden gut verstanden hatte und nach 3 Tagen alles erledigt hatte.

4. Sie binden an Ihren HTML-Code ähnlich wie in einer Angular 1-Direktive. So variabel wie $scopeund $rootScopeveraltet.

Dieser, den Sie vielleicht impliziert haben. Angular 2 ist immer noch ein MV *, aber Sie verwenden " Komponenten ", um Code an Ihre Vorlagen zu binden. Nehmen Sie beispielsweise Folgendes

    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}

Stellen Sie sich die importAnweisung hier als Ihre Abhängigkeitsinjektion in einem v1-Controller vor. Sie verwenden importdiese Option, um Ihre Pakete zu importieren , in denen angegeben ist, import {Component}dass Sie eine erstellen componentmöchten, die Sie an Ihre binden möchten HTML.

Beachten Sie den @ComponentDekorateur, den Sie ein selectorund haben template. Stellen Sie sich das selectorals Ihr vor $scope, das Sie verwenden, wie Sie v1 verwenden, directiveswobei der Name von das selectorist, was Sie verwenden, um wie folgt an Ihren HTML- Code zu binden

<my-app> </my-app>

Wo <my-app>ist der Name Ihres benutzerdefinierten Tags, das Sie verwenden und das als Platzhalter für das dient, was in Ihrer Vorlage deklariert ist? dh) <h1> Hello World! </h1>. Während dies in Version 1 wie folgt aussehen würde:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

Sie können zwischen diesen Tags auch etwas hinzufügen, um eine Lademeldung wie folgt zu generieren:

<my-app> Loading... </my-app> 

Dann wird " Laden ... " als Lademeldung angezeigt .

Beachten Sie, dass in templatedem Pfad oder dem unformatierten HTML-Code deklariert wird, den Sie HTMLin Ihrem selectorTag verwenden.

Eine umfassendere Implementierung von Angular 1 würde eher so aussehen:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

In v1 würde das ungefähr so ​​aussehen

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

Das gefällt mir an v2 sehr gut. Ich fand, dass Direktive in Version 1 eine steile Lernkurve für mich war, und selbst wenn ich sie herausgefunden hatte, hatte ich oft das CSSRendering nicht so, wie ich es beabsichtigt hatte. Ich finde das viel einfacher.

V2 ermöglicht eine einfachere Skalierbarkeit Ihrer App, da Sie Ihre App einfacher aufteilen können als in Version 1. Ich mag diesen Ansatz, da Sie alle Ihre Arbeitsteile in einer Datei haben können, anstatt mehrere in Winkel v1 zu haben.

Was ist mit der Konvertierung Ihres Projekts von v1 nach v2?

Nach dem, was ich vom Entwicklungsteam gehört habe, werden Sie, wenn Sie Ihr v1-Projekt auf v2 aktualisieren möchten, nur veraltete Blobs löschen und Ihre $scopes durch selectors ersetzen . Ich fand dieses Video hilfreich. Es ist mit einigen der Ionic-Teams, die Seite an Seite mit dem Angular-Team arbeiten, da sich v2 stärker auf mobile https://youtu.be/OZg4M_nWuIk konzentriert. Ich hoffe, dies hilft.

UPDATE: Ich habe durch Hinzufügen von Beispielen aktualisiert, da offizielle Implementierungen von Angular 2 aufgetaucht sind.

UPDATE 2: Dies scheint immer noch eine beliebte Frage zu sein, daher dachte ich nur, ich hätte eine Ressource, die ich sehr hilfreich fand, als ich anfing, mit Angular 2 zu arbeiten.

Hilfreiche Ressourcen:

Weitere Informationen zu ES6 finden Sie in den ECMAScript 6 / ES6-Tutorials zu den neuen Funktionen von The New Boston - YouTube Playlist

Um Typescript-Funktionen zu schreiben und zu sehen, wie sie zu Javascript kompiliert werden, besuchen Sie den Typescript-Sprachspielplatz

Informationen zur Funktionsaufschlüsselung der Angular 1-Äquivalenz in Angular 2 finden Sie in der Kurzreferenz Angular.io - Cookbook -A1 A2

Es könnte Ihnen helfen, den Vergleich von Angular 1 mit Angular 2 zu verstehen.

Der Angular 2 hat gegenüber Angular 1 viele Vorteile:

• Es ist vollständig komponentenbasiert.
• Bessere Änderungserkennung
• Die AOT-Kompilierung (Ahead of Time Compilation) verbessert die Rendergeschwindigkeit.
• TypeScript wird hauptsächlich zur Entwicklung von Angular 2-Anwendungen verwendet.
• Angular 2 bietet eine bessere Leistung als Angular 1.
• Angular 2 verfügt über ein leistungsfähigeres Schablonensystem als Angular 1.
• Angular 2 verfügt über einfachere APIs, verzögertes Laden und einfacheres Debuggen.
• Winkel 2 ist viel testbarer als Winkel 1.
• Winkel 2 bietet verschachtelte Komponenten.
• Winkel 2 bietet die Möglichkeit, mehr als zwei Systeme zusammen auszuführen.
• Und so weiter...

Angular 2 und Angular 1 sind grundsätzlich unterschiedliche Frameworks mit demselben Namen.

Angular 2 ist besser auf den aktuellen Stand der Webstandards und den zukünftigen Stand des Webs vorbereitet (ES6 \ 7, Unveränderlichkeit, Komponenten, Schatten-DOM, Servicemitarbeiter, mobile Kompatibilität, Module, Typoskript usw.).

Winkel 2 hat viele Hauptmerkmale in Winkel 1 zerstört - wie Controller, $ scope, Direktiven (ersetzt durch @ component-Annotationen), die Moduldefinition und vieles mehr, selbst einfache Dinge wie ng-repeat haben nicht das Gleiche wie es war.

In jedem Fall ist die Änderung gut, Angular 1.x hatte Fehler und Angular 2 ist besser für die zukünftigen Webanforderungen gerüstet.

Um es zusammenzufassen: Ich empfehle Ihnen nicht, jetzt ein Winkel-1.x-Projekt zu starten. Dies ist wahrscheinlich der schlechteste Zeitpunkt, da Sie später zu Winkel 2 migrieren müssen. Ich habe mich für Winkel entschieden, als Winkel zu wählen 2, Google hat bereits ein Projekt mit Winkel 2 gestartet, und wenn Sie das Projekt beenden, sollte Winkel 2 bereits im Rampenlicht stehen. Wenn Sie etwas stabileres wollen, können Sie sich React \ Elm und Flux und Redux als JS-Frameworks vorstellen.

Winkel 2 wird großartig sein, das besteht kein Zweifel.

Kein Rahmen ist perfekt. Sie können hier und hier über Fehler in Angular 1 lesen . Das heißt aber nicht, dass es schlecht ist. Die Frage ist, welches Problem Sie lösen. Wenn Sie eine einfache, schnelle und leichtgewichtige App mit begrenzter Nutzung der Datenbindung schnell einführen möchten, fahren Sie mit Angular 1 fort. Angular 1 wurde vor 6 Jahren entwickelt, um Rapid Prototyping zu lösen, was ziemlich gut funktioniert. Auch wenn Ihr Anwendungsfall komplex ist, können Sie Angular 1 verwenden. Dann sollten Sie sich jedoch der Nuancen und Best Practices beim Erstellen einer komplexen Web-App bewusst sein. Wenn Sie eine App für Lernzwecke entwickeln, würde ich vorschlagen, zu Angular 2 zu wechseln, da dort die Zukunft von Angular liegt.

Das herausragende Merkmal in Angular v2 und auch in ReactJs ist, dass beide die neue Architektur der Webkomponenten-Entwicklung übernommen haben. Dies bedeutet, dass wir jetzt unabhängige Webkomponenten erstellen und diese per Plug-and-Play auf jede Website der Welt übertragen können, die über denselben Technologie-Stack wie diese Webkomponente verfügt. Cool! ja sehr cool :) :)

Die andere auffälligste Änderung in Angular v2 ist, dass die primäre Entwicklungssprache keine andere als TypeScript ist. TypeScript gehört zwar zu Microsoft und ist eine Obermenge von JavaScript von 2015 (oder ECMAScript6 / ES6), hat aber einige Funktionen, die sehr vielversprechend sind. Ich würde den Lesern empfehlen, TypeScript nach dem Lesen dieses Tutorials etwas detaillierter zu testen (was natürlich Spaß macht).

Hier würde ich sagen, dass die Leute, die versuchen, Angular v1 und Angular v2 miteinander in Beziehung zu setzen, die Leser weiter verwirren, und meiner bescheidenen Meinung nach sollten Angular v1 und Angular v2 als zwei verschiedene Frameworks behandelt werden. In Angular v2 haben wir das Konzept von Web-Components, Webanwendungen zu entwickeln, während wir in Angular v1 mit Controllern spielen müssen und (leider oder zum Glück) in Angular v2 keine Controller vorhanden sind.

Eine Sache zu beachten ist, dass angle2 die Verwendung von Typoskript ist.

Ich habe Angular1 mit Cordova in meinem Praktikanten gemacht und jetzt mache ich Angular2. Ich denke, Angular2 wird der Trend sein, da es meiner Meinung nach strukturierter ist, aber die Nachteile sind, dass es nur wenige Ressourcen gibt, auf die Sie sich beziehen können, wenn Sie Probleme oder Schwierigkeiten haben. Angular 1.x verfügt über unzählige personalisierte Anweisungen, die sehr einfach zu verwenden sind.

Ich hoffe es hilft.

Angular 2 ist viel besser als 1, zumindest was das Angebot betrifft: Die Unterstützung von Webkomponenten unter Verwendung von Typoskript, Leistung und allgemeiner Einfachheit der Benutzeroberfläche war der Grund, warum ich beschlossen habe, ein Projekt mit Angular 2 zu starten Ich habe festgestellt, dass es in Winkel 2 Probleme gibt (z. B. Routing mit Apache), für die nur sehr wenig oder gar keine Dokumentation verfügbar ist. Daher ist die Dokumentation und Community von Winkel 2 die größte Gefahr für Winkel 2, da sie nicht ausreichend entwickelt ist.

Ich würde sagen, wenn Sie eine Site für eine kurze Frist schnell erstellen müssen, verwenden Sie den bekannten Winkel 1, wenn Sie sich in einem längeren Projekt befinden und sich die Zeit leisten können, neue Probleme zu untersuchen (auf die Sie möglicherweise als Erste stoßen Dies könnte ein Bonus sein, wenn Sie an den Beitrag denken, den Sie der Angular 2-Community geben könnten, als mit Angular 2.