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.
- 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
- 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.
- 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.
- 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