AngularJS vs. Eckig

Lassen Sie mich Vorwort mit den Worten, ich nehme an, Sie und alle, die Sie Lesen werden, ist dies bereits komfortabel mit Winkel-1 (jetzt bezeichnet als AngularJS, im Gegensatz zu einfach Winkel für die neueren Versionen). That being said, lassen Sie uns in einige der Ergänzungen und wesentliche Unterschiede in den Winkel-2+.

1. Sie hat eine eckige cli.

Können Sie ein neues Projekt starten durch ausführen ng new [app name].
Sie können Ihr Projekt durch ausführen ng serve
erfahren Sie hier mehr: https://github.com/angular/angular-cli

1. Ihre eckigen code ist geschrieben in ES6 Typoskript und kompiliert zur Laufzeit mit Javascript im browser.

Einen vollständigen überblick über diese empfehle ich Auschecken einige der Ressource-Liste habe ich unten in meiner Antwort.

1. Projektstruktur

In eine einfache Struktur, Sie haben eine app/ts Ordner, wo werden Sie tun die meisten Ihrer arbeiten und ein app/js finden Sie in der app/js Ordner Dateien mit einem .js.map Erweiterung. Sie "Karte" Ihre ".ts" - Dateien in Ihrem browser Debuggen, da Ihr browser nicht Lesen kann, native Typoskript.

Update: Es ist aus der beta. Die Projekt-Struktur ein wenig verändert, in den meisten Fällen, und wenn Sie den Winkel-cli, arbeiten Sie in der
src/app/ Ordner. Im starter-Projekt, haben Sie die folgenden.

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

app.Komponente.css: CSS-Datei, die Sie verwenden sollten spezifische, auf die component.html

app.component.html: Ein Blick in die (deklarierte variable in der app.component.js)

app.Komponente.spec.ts: für den Test verwendet werden app.component.ts

app.Komponente.ts: der code, der an app.component.html

app.- Modul.ts: Das ist es, was startet Ihr die app und definieren Sie alle plugins, Komponenten, Dienste, etc. Dies ist das äquivalent der app.js im Winkel 1

index.ts verwendet, um zu definieren oder export von Projekt-Dateien

Zusätzliche Informationen:

Pro-Tipp: Sie können laufen ng generate [option] [name] zu generieren, neue Dienstleistungen, Teile, Rohre, etc.

Auch die tsconfig.json Datei ist wichtig, da es definiert, TS kompilieren Regeln für Ihr Projekt.

Wenn Sie denken ich eine ganz neue Sprache lernen?... Äh... irgendwie, TypeScript ist eine Obermenge von JavaScript. Nicht einschüchtern lassen; es ist da, um Ihre Entwicklung zu erleichtern. Ich fühlte mich wie ich hatte Sie einen guten Einblick in die auf es nach ein paar Stunden spielen mit ihm, und hatte sich nach 3 Tagen.

1. Binden Sie auf Ihrer HTML-ähnlich wie würden Sie, wenn in einem Winkelbereich 1 der Richtlinie. So variabel wie $scope und $rootScope wurden abgelehnt.

Diese einer möglicherweise wurden Sie stillschweigend. Winkel-2 ist immer noch ein MV* aber Sie werden mit 'Komponenten' als einen Weg zum binden von code, um Ihren Vorlagen, zum Beispiel, nehmen Sie die folgenden

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

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

    export class AppComponent {}

Hier denken die import - Anweisung als die dependency injection in ein v1-controller. Verwenden Sie import zu import Ihre Pakete, wo die import {Component} sagt Sie werden so eine component Sie möchten, um eine Bindung zu Ihrem HTML.

Beachten Sie die @Component decorator haben Sie eine selector und template. Hier denken die selector als Ihre $scope, die Sie verwenden, wie Sie verwenden, v1 directives wo der name des selector ist, was Sie zu binden, um Ihren HTML-wie so

<my-app> </my-app>

Wo <my-app> ist der name des benutzerdefinierten Tags, die Sie verwenden, die als Platzhalter für das, was ist, erklärt in Ihrer Vorlage. D. H.) <h1> Hello World! </h1>. In der Erwägung, dass diese würde wie folgt Aussehen in v1:

HTML

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

JS

$scope.hello = "Hello World!"

Auch können Sie hinzufügen, etwas, was zwischen diesen tags zu generieren, die eine be-Nachricht, wie diese:

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

Dann erscheint auf dem display "Laden..." als die be-Nachricht.

Beachten Sie, dass das, was deklariert template ist der Pfad oder die raw-HTML, die Sie verwenden werden in Ihrer HTML in Ihrem selector tag.

---

Eine vollständige Umsetzung der Drehbewegung der 1 wäre mehr wie folgt Aussehen:

HTML

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

In v1 würde dies so Aussehen

JS

angular.module('controller', [])



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

Dies ist, was ich wirklich wie über v2. Ich fand Richtlinie war eine steile Lernkurve für mich in v1 und selbst wenn, ich hatte Sie herausgefunden, ich hatte oft das CSS Rendern nicht, wie ich es wollte. Ich finde das ist viel einfacher.

V2 ermöglicht eine einfachere Skalierbarkeit der app, denn Sie können brechen bis der app einfacher, als könnte man in v1. Ich mag diesen Ansatz, so haben Sie alle Ihre arbeitenden Teile in einer Datei, im Gegensatz zu mehreren im Winkel-v1.

Was über die Konvertierung Ihres Projekts von v1 zu v2?

---

Von dem, was ich gehört habe von dem Entwicklungs-team, wenn Sie möchten, aktualisieren Sie Ihr Projekt v1 auf v2 werden Sie einfach gehen Sie durch und löschen von veralteten blobs und ersetzen Sie Ihre $scopes mit selectors. Ich fand das video hilfreich. Es ist mit einigen der Ionischen team arbeitet Seite an Seite mit der eckigen team als v2 einen stärkeren Fokus auf mobile https://youtu.be/OZg4M_nWuIk Hoffe, das hilft.

UPDATE: ich aktualisiert, die durch hinzufügen von Beispielen als offizielle Implementierungen von Winkel 2 aufgetaucht.

UPDATE 2: Dies scheint immer noch eine beliebte Frage, so dass ich dachte, ich würde einige Ressource, die fand ich sehr hilfreich, wenn ich begann, mit Winkel 2.

Hilfreiche Ressourcen:

Mehr auf ES6, empfehle ich Check-out Die Neue Boston ECMAScript 6 /ES6 Neue Features Tutorials - YouTube-Playlist

Schreiben Typoskript Funktionen und sehen, wie Sie kompilieren zu Javascript check-out die Typescript-Sprache-Spielplatz

Um zu sehen, eine Funktion von Funktion Aufschlüsselung, was die Winkel-1 Gleichwertigkeit wird in Winkel-2 finden Sie in der Eckig.io - Kochbuch -A1 A2 Quick Reference

Winkel 2 und Winkel-1 ist im Grunde ein anderen Rahmen mit dem gleichen Namen.

Winkel 2 ist mehr bereit, für den aktuellen Stand der web-standards und die zukünftige Entwicklung des web ( ES6\7, immutiablity, Komponenten, shadow DOM, service-Mitarbeiter, mobile-Kompatibilität, Module, Typoskript und so weiter und so weiter... )

Winkel 2 getötet, viele der wichtigsten Funktionen in den Winkel-1 wie - Controller, $Umfang, Richtlinien (ersetzt mit @component Annotationen), die Modul-definition, und vieles mehr, selbst einfache Dinge wie ng-repeat ist nicht Links, das gleiche, wie es war.

keiner Weise, ändern ist gut, Winkel-1.x hatte es Mängel, und der Winkel 2 ist mehr bereit für die Zukunft web-Anforderungen.

um es zusammenzufassen - ich nicht empfehlen, Sie zu Beginn einer Winkel-1.x-Projekt nun, das ist vermutlich die Schlimmste Zeit, es zu tun, da müssen Sie später migrieren zu Winkel 2, ich legen Sie Sie Meinung über Winkel-als zu wählen eckig 2, google hat bereits ein Projekt gestartet, mit Winkel-2, und durch die Zeit, die Sie beenden das Projekt eckig 2 sollte schon im Rampenlicht stehen.
wenn Sie etwas stabiler, kann man darüber nachdenken, reagieren\elm und flux als JS-frameworks.

eckig 2 wird be awesome, das ist kein Zweifel.

Der eine stand-out-Funktion in Eckige v2 und auch in ReactJs ist, dass Sie beide angenommen haben, die neue Web-Komponenten-Architektur in der Entwicklung. Was dies bedeutet ist, dass wir jetzt erstellen unabhängige Web-Komponenten und plug-and-play, die auf jede website in der Welt, hat die gleichen Technologie-stack der Web-Komponente. Cool! yeah sehr cool. 🙂

Den anderen auffälligste änderung in der Winkelgeschwindigkeit v2 ist, dass es primär die Entwicklung der Sprache ist nichts anderes als Typoskript. Obwohl Typoskript gehört zu Microsoft, und es ist eine Obermenge von JavaScript 2015 (oder ECMAScript6/ES6), aber es hat einige features, die sehr vielversprechend sind. Ich würde empfehlen, die Leser zur Kasse Typoskript ein bisschen detail (die ist lustig-Kurs) nach der Lektüre dieses tutorial.

Hier würde ich sagen, dass die Jungs versuchen, miteinander Winkel v1 und Winkelgeschwindigkeit v2 weiter zu verwirren den Leser, und meiner bescheidenen Meinung nach, Gewinkelt v1 und Winkelgeschwindigkeit v2 behandelt werden sollten als zwei verschiedene frameworks. In Winkel-v2, wir haben Web-Komponenten " Konzept der Entwicklung von web-Anwendungen, während in Eckigen v1 haben wir zum spielen mit Controller und (leider oder zum Glück) kein Controller vorhanden sind in Eckige v2.

Winkel-2 viel besser als 1, atlist in dem, was es bietet, Unterstützung für web-Komponenten, mit Typoskript, Performance und Einfachheit der Schnittstelle, war der Grund, warum ich beschlossen, ein Projekt zu starten, mit Winkel-2. wie auch immer, aus der sich gehen, ich erkannte, es gibt Probleme in Winkel-2 (von exmple-routing mit apache), die sehr wenig oder keine Dokumentation verfügbar ist, damit die Dokumentation und die Gemeinschaft der Winkel 2 ist das größte Hindernis für die Winkel 2, da es nicht genügend entwickelt.

Ich würde sagen, wenn Sie brauchen, um eine Website schnell für eine kurze Frist den gut bekannten Winkel 1, wenn Ihr in ein längeres Projekt und kann es sich leisten, die Zeit, zu untersuchen, neue Fragen (die Sie könnte die erste Begegnung, das könnte ein bonus sein, wenn Sie denken, dass der Beitrag, den Sie geben könnten, um den Winkel-2-Gemeinde) gehen als bei Winkel 2.