序文として、これをお読みになる皆さんと皆さんはすでにAngular 1（新しいバージョンでは単にAngularとは対照的に、AngularJSと呼ばれています）を快適に使用していると想定しています。とはいえ、Angular 2+の追加機能と主な違いのいくつかを見てみましょう。
- 彼らは角度を付けました
cli。
を実行すると、新しいプロジェクトを開始できng new [app name]ます。ng serve
詳しくはhttps://github.com/angular/angular-cliを実行してプロジェクトを提供できます。
- 角度コードはES6 Typescriptで記述され、実行時にブラウザーでJavaScriptにコンパイルされます。
これを完全に理解するために、私の回答の最後にあるリソースリストを確認することをお勧めします。
- プロジェクトの構造
基本的な構造では、app/tsほとんどの作業を行うフォルダーがありapp/js、app/jsフォルダーファイルには.js.map拡張子が付いています。ブラウザーはネイティブのtypescriptを読み取れないため、デバッグのために「.ts」ファイルをブラウザーに「マップ」します。
更新：ベータ版ではありません。プロジェクトの構造が少し変更されました。ほとんどの場合、angular cliを使用している場合は、src/app/フォルダーで作業し
ます。スタータープロジェクトには、次のものが含まれます。
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css：固有に使用する必要があるCSSファイルcomponent.html
app.component.html：ビュー（app.component.jsで宣言された変数）
app.component.spec.ts：テストに使用app.component.ts
app.component.ts：にバインドするコードapp.component.html
app.module.ts：これは、アプリを開始するものであり、すべてのプラグイン、コンポーネント、サービスなどを定義します。これは、app.jsAngular 1 と同等です。
プロジェクトファイルの定義またはエクスポートに使用されるindex.ts
追加情報：
プロのヒント：実行ng generate [option] [name]して、新しいサービス、コンポーネント、パイプなどを生成できます。
また、tsconfig.jsonファイルはプロジェクトのTSコンパイルルールを定義するため重要です。
私がまったく新しい言語を学ばなければならないと思っているなら？...ええと...ちょっと、TypeScriptはJavaScriptのスーパーセットです。恐れることはありません。開発を容易にするためにあります。ほんの数時間遊んだだけで十分に理解できたようで、3日後にはすべて落ちてしまいました。
- Angular 1ディレクティブの場合と同様に、HTMLにバインドします。したがって、
$scopeおよびのような変数$rootScopeは廃止されました。
暗示されている可能性があります。Angular 2はまだMV *ですが、コードをテンプレートにバインドする方法として' components ' を使用します。たとえば、次のようにします
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
ここで、importステートメントをv1コントローラーでの依存性注入と考えてください。を使用importしてパッケージをインポートします。ここでは、にバインドするをimport {Component}作成するcomponentことになりますHTML。
と@Componentを持っているデコレータに注目してください。ここでは、v1を使用するように使用していると考えてください。ここで、の名前は、HTMLにバインドするために使用するものです。selectortemplateselector$scopedirectivesselector
<my-app> </my-app>
<my-app>テンプレートで宣言されているもののプレースホルダーとして機能する、使用するカスタムタグの名前はどこにありますか。すなわち）<h1> Hello World! </h1>。これはv1では次のようになります。
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
次のように、これらのタグの間に何かを追加して、ロードメッセージを生成することもできます。
<my-app> Loading... </my-app>
次に、読み込み中のメッセージとして「Loading ...」と表示されます。
で宣言されているのtemplateは、タグHTML内で使用するパスまたは生のHTMLですselector。
Angular 1のより完全な実装は次のようになります：
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
v1では、これは次のようになります。
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
これが私がv2について本当に気に入っていることです。ディレクティブはv1では私にとって学習曲線が急であることを発見し、それらを理解しても、CSS意図したとおりにレンダリングされないことがよくありました。これの方がずっと簡単だと思います。
V2では、v1の場合よりも簡単にアプリを分割できるため、アプリのスケーラビリティが容易になります。Angular v1に複数のパーツを置くのではなく、1つのファイルにすべての作業パーツを含めることができるので、このアプローチが好きです。
プロジェクトをv1からv2に変換するのはどうですか？
開発チームから聞いたところによると、v1プロジェクトをv2に更新する場合は、廃止予定のblobを削除して、$scopesをselectorsに置き換えるだけです。このビデオは役に立ちました。これは、v2は、モバイルに強いフォーカスを持っているような角度チームと並んで作業しているイオンチームの一部でありますhttps://youtu.be/OZg4M_nWuIkこのことができます願っています。
更新： Angular 2の公式実装が浮上したので、例を追加して更新しました。
更新2：これはまだ人気のある質問のようですので、angular 2を使い始めたときに非常に役立つリソースがあると思いました。
役立つリソース：
ES6の詳細については、ニューボストンのECMAScript 6 / ES6の新機能のチュートリアルをチェックすることをお勧めします-YouTubeプレイリスト
Typescript関数を記述してJavascriptにコンパイルする方法を確認するには、Typescript言語Playgroundを確認してください。
Angular 1の同等性がAngular 2で何であるかを関数ごとに分類した関数を確認するには、Angular.io-クックブック-A1 A2クイックリファレンスを参照してください