質問

数ヶ月前、私はAngularを勉強することに決めました。Angular 2はDeveloper previewなので、リリースされるのは時間の問題だと思いつつ、事前学習とアプリの作成を行っていました。Angular 2はAngular 1と互換性がなく、変更点も多いので、Angular 1.xで開発を続けるか、Angular 2の開発を始めるか、どちらが良いのか、という問題です。

常に最新のバージョン、最新の言語である必要はないのですが、今回はアプリがまだ小さいので、問題なく変更することができました。

どのように解決するのですか？

前置きが長くなりましたが、あなたやこれを読んでいる人はすでにAngular 1を快適に使っていると仮定しています( と呼ばれるようになりました。 アンギュラJS とは異なり、単に アンギュラー を使用します）。とはいえ、Angular 2+で追加されたものと主な違いについて説明しましょう。

1. 彼らはアンギュラー cli .

を実行することで、新しいプロジェクトを開始することができます。 ng new [app name] . を実行することで、プロジェクトを提供することができます。 ng serve はこちらをご覧ください。 https://github.com/angular/angular-cli

1. あなたのアンギュラーコードはES6 Typescriptで書かれ、実行時にブラウザのJavascriptにコンパイルされます。

このことを完全に把握するには、私の回答の一番下にあるリソースリストをチェックすることをお勧めします。

1. プロジェクト構成

<ストライク 基本的な構造では app/ts フォルダーを作成し、その中に app/js の中にある app/js フォルダのファイルは .js.map という拡張子を持つ。ブラウザはネイティブのタイプスクリプトを読むことができないので、デバッグのためにあなたの ".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.js Angular 1では

index.ts プロジェクトファイルの定義やエクスポートに使用します。

追加情報です。

プロからのアドバイス：あなたが実行することができます ng generate [option] [name] を使用して、新しいサービス、コンポーネント、パイプなどを生成することができます。

また tsconfig.json ファイルは、プロジェクトのTSコンパイルルールを定義するものであり、重要です。

もし、あなたが 全く新しい言語を学ばなければならないのですか？ ... TypeScriptはJavaScriptのスーパーセットです。 開発しやすくするためにあるのです。 私は、数時間遊んだだけでよく理解できたと感じ、3日後にはすべてを習得していました。

1. Angular 1のディレクティブと同じように、HTMLにバインドします。つまり、以下のような変数です。 $scope と $rootScope は非推奨となりました。

これは暗黙の了解になっているかもしれませんね。Angular 2はまだ MV*の場合 を使用することになりますが、' コンポーネント をテンプレートにコードをバインドする方法として、例えば、次のようにします。

    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 デコレータを使用している場合は selector と template . ここで selector をあなたの $scope を使用するように、v1 directives ここで selector は、次のようにHTMLにバインドするために使用するものです。

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

すると、"と表示されます。 ロード中... "をロードメッセージとして表示します。

で宣言されていることに注意してください。 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!"
})

v1 ではディレクティブの学習が大変でした。 CSS のレンダリングは、私が意図した方法とは異なります。この方がずっとシンプルだと思います。

V2では、v1よりも簡単にアプリを分割できるため、アプリのスケーラビリティが向上します。angular v1では複数のファイルがあったのに対し、このアプローチではすべての作業パーツを1つのファイルにまとめることができるので気に入っています。

プロジェクトをv1からv2に変換するのはどうですか？

開発チームから聞いたところでは、v1 プロジェクトを v2 にアップデートする場合、非推奨の blob を削除して $scope を selector s. この動画が参考になりました。v2がモバイルに強くフォーカスしているため、angularチームと肩を並べて働いているIonicチームの何人かが出演しています。 https://youtu.be/OZg4M_nWuIk お役に立てれば幸いです。

UPDATEしてください。 Angular 2の正式な実装が表面化したので、例を追加して更新しました。

UPDATE 2: これはまだよくある質問のようなので、私がangular 2で作業を始めたときに非常に役に立ったリソースを紹介しようと思います。

役に立つリソース

ES6の詳細については、The New Bostonの記事をチェックすることをお勧めします。 ECMAScript 6 / ES6 新機能チュートリアル - YouTube プレイリスト

Typescript の関数を書いて、それがどのように Javascript にコンパイルされるかを見るには、以下のサイトをチェックしてください。 タイプスクリプト言語プレイグラウンド

Angular 1とAngular 2の等価性を機能ごとに見るには、以下のサイトを参照してください。 Angular.io - クックブック -A1 A2 クイックリファレンス