正しくしましょう。 猫をお願いします。
いくつかの開発チームは、Angular 2.0で十分な時間を費やしました。これは私たちのものとほぼ同じです（ 注：Ionicチーム ）。 私たちは、Angular 2がまだプレアルファの状態にあったIonic 2の設計に戻り、Angular 1よりも優れた、より高速で標準に準拠した有望なモバイルWebフレームワークを手に入れたいと考えました。
Ionic 2での作業中に理解した最も重要なことは、Angular 2とAngular 1の高レベルの類似性であり、これを理解することで、Angular 1からAngular 2への切り替えがはるかに容易になります。実際、それ自体は新しいフレームワークではありません。 これは私たちが精通しており、私たちがとても愛している新しいAngular標準です。
1つのフレームワーク、多くの標準
Angularは、Angular 1、Angular 2、Angular Dartとともに、1つのES5標準に基づくフレームワークから、概念フレームワーク、または多くの標準を備えたデザインパターンに移行しました。
ES5、ES6 / TypeScript、およびDartの少なくとも3つの主要言語に基づいて、Angularスタイルでユーザーインターフェイスとフロントエンドアプリケーションを設計できますが、ES6 / TypeScriptは事実上のAngular標準になっています。
上記の各言語でAngularアプリケーションがどのように機能するかを詳しく見ると、多くの類似点に気づくでしょう。 例を見てみましょう。
例
スコープまたはコンテキストからプロパティを取得するには、次のようにします。
角度1：
<span> {{todaysDate | date}}</span>
角ダーツ：
<span> {{todaysDate | date}}</span>
角度2：
<span> {{todaysDate | date}}</span>
何か気づいたことがありますか？ それらはまったく同じです！ もっと複雑な例を試してみましょう。 曲のリストがあるとします：
Angular 1およびAngular Dartでは、これは次のようになります。
<ion-list> <ion-item ng-repeat="song in songs" ng-click="openSong(song)"> {{song.artist}} - {{song.title}} <span ng-if="song.isFavorite"><i class="icon ion-heart"></i></span> </ion-item> </ion-list>
そしてAngular 2では（Ionic 2と一緒に）：
<ion-list> <ion-item *ngFor="#song of songs" (click)="openSong(song)"> {{song.artist}} - {{song.title}} <span *ngIf="song.isFavorite"><ion-icon name="heart"></ion-icon></span> </ion-item> </ion-list>
さて、さて、ここですでに多くの違いが見られます。 しかし、これらの違いは明確に定義されています。ng -repeatは 、アスタリスク*を持つngForに変わりました。これは、この要素をテンプレートとして指定するために使用されます（N回繰り返されます）。
ループは「 in 」ではなく「 of 」を使用してリスト値を取得します。 ES6およびTypeScriptにさらに近い。 Angular 2から、属性（つまり：ng-repeat、ng-if、ng-show）の書き込みにkebab-casingを使用しなくなりました（ 注：ここでの書き込みの構文が「まあまあ」の場合）など）。 開発者は、より明確な名前に移行することにしました。 （ それについての詳細（eng） ）
Angular 1標準をAngular 2構文変換に適用すると、Angular 1およびAngular 2と概念的に同一のコードが得られます。Angularにすでに精通していると仮定すると、このコードを見てすぐに理解できます彼はそうします。
コンポーネントの例
ほとんどのAngularユーザーはAngular 2自体にテンプレートを見つけることができますが、Angular 1からのディレクティブ/コントローラのインストールに代わる新しいコンポーネントモデルには、さらに大きな変更が加えられています。
角度1の場合：
.controller('HomeCtrl', function($scope) { // }) .directive('profileImage', [function() { // ... }])
Angular 2では、すべてがコンポーネントであるため、コンポーネントにコントローラーを含め、さらにディレクティブを含めるという単純な変換を適用できます。
Angular 2はTypeScriptおよびES6標準に準拠しているため、「コンポーネント」をテンプレートを含むことができるクラスとして定義します。 上記の例（Angular 1）と同様に、Angular 2のコードは次のようになります。
import {Component} from 'angular2/core'; @Component({ selector: 'home', template: '<div> </div>' }) export class HomeComponent { }
そして、Angular 2のコンポーネントとしてのAngular 1のディレクティブ：
@Component({ selector: 'profile-image', template: '<div>profile image</div>' }) export class ProfileImageComponent { }
しかし、スコープはどうですか？
Angular 1では、スコープは実際にはユーザーインターフェイスの特定の領域で利用可能な「コンテキスト」にすぎませんでした。 たとえば、 profileImageディレクティブは、現在のユーザーをスコープまたはコンテキストの一部として参照し、ユーザープロフィール画像をレンダリングします。
この概念は、Angular 2とまったく同じですが、ES6のクラスインスタンスデータの自然な概念を使用している点が異なります。 Angularは、通常のコンテキストシステムから標準ベースのアプローチに移行しました。 これは、JavaScriptがそれを可能にするために進化したためです（少しTypeScriptの装飾魔法により、コードがさらにきれいになります）。
export class ProfileImageComponent { @Input() user; clickFace() { // this.user, , $scope.user Angular 1 } }
Angular 2では、コンポーネントのデータを処理するために使い慣れた$スコープシステムを使用する必要がなくなりました。 ES6とTypeScriptのおかげで、今では無料で入手できます！
*もちろん、概念は大幅に簡素化されていますが、エンドユーザーにとっては本当に行動の自由です！
エントリーしきい値の削減
Angular 1のベテランは、Angular 1に対処するのがどれほど難しかったかを忘れがちです。私は、これらのあいまいな用語がどのようなものかを理解するために、多くの休みから1か月休憩を取らなければなりませんでした。彼らは本当に意味します。
Angularを初めて使用し、Angular 2から始める開発者は、Angular 2を習得するのに特別な知識を必要としません。 彼は、Angular 1のこれらの難解な用語をすべてスキップし、すぐにES6 / TypeScript仕様コードに飛び込むことができます。
さらに、使い慣れたモジュラーシステムがないため、Angular 2コードは残りのES6エコシステムと容易に連携し、サードパーティによるインストールとインポートが非常に簡単になります （ 注：ここでは、側の誰かによるコードのサポートを意味し、サードパーティの開発者 ）。
Angular 1の後に人生はありますか？
開発者がAngular 1構文からAngular 2構文に心理的な移行を行った後、彼らはすでにAngular 2を知っていることがわかると思います。両方の概念はほとんど同一であり、類似性はテンプレートとコンポーネントに限定されません。 ユーザーがパイプ 、依存性注入、サービスを深く掘り下げるとすぐに、多くの類似点が見つかります。
偶然の一致が非常に多いため、Angularに基づいているため、Ionic 2をIonic 1のように見せようとしました。 しかし、今では新しい、さらに良い実装だけです！ これまでのところ、移行は非常に順調に進んでおり、ダストが落ち着いてAngular 2 APIが本当に安定した瞬間に、Angular 2がヒットになっていると楽観しています。
Angular 2は間違いなく最高のAngularです！