web-dev-qa-db-ja.com

AngularJS vs Angular

数ヶ月前、私はAngularを勉強することにしました。少し進歩してそれを使ってアプリを作成したとき、私はAngular 2が開発者プレビューに入っていることに気付いたので、リリースされるまでには時間がかかります。 Angular 2はAngular 1と互換性がなく、多くの変更があるので、問題はAngularで開発を続けるのが良いことです。 _ 1.xまたは開発を始めますAngular 2？

市場で最新のバージョンや最新の言語を使用する必要はないのは事実ですが、この場合、アプリはまだ小さいので問題なく変更することができます。

angularjsangular
129
emmanuel sio

あなたとこれを読んでいるすべての人はすでにAngular 1（ 今はAngularJS 、新しいバージョンでは単にAngularとは対照的に）。そうは言っても、Angular 2+の追加と主な違いをいくつか見てみましょう。

  1. 追加されたangular cliname __。

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

  1. あなたのangularコードはES6 TypeScriptで記述され、実行時にブラウザのJavascriptにコンパイルされます。

これを完全に把握するには、回答の下部にあるリソースリストを確認することをお勧めします。

  1. プロジェクト構造

基本構造では、ほとんどの作業を行う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：component.htmlに固有のCSSファイル

app.component.html：ビュー（app.component.jsで宣言された変数）

app.component.spec.ts：app.component.tsのテストに使用

app.component.ts：app.component.htmlにバインドするコード

app.module.ts：これはアプリを起動し、すべてのプラグイン、コンポーネント、サービスなどを定義する場所です。これは、 Angular 1のapp.js

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

追加情報：
プロのヒント：ng generate [option] [name]を実行して、新しいサービス、コンポーネント、パイプなどを生成できます。

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

考えているならまったく新しい言語を学ばなければならないのですか？...ええと...ちょっと、TypeScriptはJavaScriptのスーパーセットです。怖がらないでください。開発を容易にするためにあります。ほんの数時間遊んだ後、私はそれを十分に把握しているように感じ、3日後にそれをすべてダウンさせました。

  1. 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 {}

ここでは、importname__ステートメントをv1コントローラーへの依存性注入と考えてください。 importname__を使用してパッケージをimportします。import {Component}は、componentname__にバインドしたいHTMLname__を作成すると言います。

@Componentデコレータにselectorname__とtemplatename__があることに注意してください。ここで、selectorname__を、v1 directivesname__を使用するように使用する$scopeとして考えてください。selectorname__の名前は、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>

次に、読み込みメッセージとして「Loading ...」が表示されます。

templatename__で宣言されているのは、HTMLname__タグのselectorname__で使用するパスまたは生のHTMLです。

Angular 1のより完全な実装は、次のようになります。

HTML

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

V1では、これは次のようになります

JS

angular.module('controller', [])



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

これはv2で本当に気に入っていることです。 v1ではディレクティブは私にとって急な学習曲線であり、それらを理解させたときでさえ、私が意図したものではなくCSSname__レンダリングすることがしばしばありました。これはずっと簡単だと思います。

V2では、v1の場合よりも簡単にアプリを分割できるため、アプリのスケーラビリティが容易になります。 angular v1に複数のパーツを配置するのではなく、1つのファイルにすべての作業パーツを配置できるため、このアプローチが気に入っています。

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

開発チームから聞いたところによると、v1プロジェクトをv2に更新する場合は、非推奨のblobを削除して、$scopesをselectorname__sに置き換えます。このビデオは役に立ちました。 v2がモバイルに重点を置いているため、Ionicチームとangularチームと並んで作業しています https://youtu.be/OZg4M_nWuIk これが役立つことを願っています。

UPDATE：Angular 2の公式実装が表面化したため、例を追加して更新しました。

更新2：これはまだ人気のある質問のようですので、angular 2。

役立つリソース：

ES6の詳細については、The New Bostonの ECMAScript 6/ES6 New Features Tutorials-YouTube Playlist をチェックすることをお勧めします。

TypeScript関数を記述し、それらがJavascriptにコンパイルされる方法を確認するには、 TypeScript language Playground をチェックしてください。

Angular 1の等価性がAngular 2にあるものの機能別の機能を確認するには、 Angular.io-Cookbook -A1 A2 Quick Reference を参照してください。

144
garrettmac

Angular 1とAngular 2について知っておくと役立ちます。

Angular 2は、Angular 1よりも多くの利点があることが証明されています。

  • それは完全にコンポーネントベースです。
  • より良い変更検出
  • AOT（Ahead of Time）コンパイルはレンダリング速度を向上させます。

  • TypeScriptはAngular 2アプリケーションの開発に使用できます

  • Angular 2はAngular 1よりもパフォーマンスが優れています。

  • Angular 2にはAngular 1より強力なテンプレートシステムがあります。

  • Angular 2には、より単純なAPI、遅延ロード、より簡単なデバッグがあります。

  • Angular 2はAngular 1よりもはるかにテストしやすいものです。

  • Angular 2は入れ子になったコンポーネントを提供します。

  • Angular 2は、3つ以上のシステムをまとめて実行する方法を提供します。

  • 等々..

32
Anil Singh

Angular 2とAngular 1は基本的に同じ名前の異なるフレームワークです。

angular 2は、Web標準の現在の状態とWebの将来の状態（ES6\7、免疫力、コンポーネント、シャドウDOM、サービスワーカー、モバイル互換性、モジュール、TypeScriptなど）に対応しています。

angular 2は、コントローラ、$ scope、ディレクティブ（@componentアノテーションに置き換えられます）、モジュールの定義、そしてng-repeatのような単純なものでさえも、同じように残されていません。

いずれにせよ、変更は良好で、角度1.xには問題があり、角度2は将来のWeb要件に対応する準備が整っています。

まとめると - 角度1.xプロジェクトを今すぐ始めることはお勧めできません - 後で角度2に移行する必要があるため、これを行うのはおそらく最悪の時間です。 2、グーグルはすでに角度2でプロジェクトを立ち上げており、あなたがプロジェクトを終了するまでに角度2はすでにスポットライトの中にあるはずです。もっと安定したものが欲しいなら、JSフレームワークとしてreact\Elmとfluxを考えることができます。

角度2は素晴らしいものになるだろう、それは間違いなくです。

13
Ran Sasportas

完璧なフレームワークはありません。欠陥についてはAngular 1 here および here で読むことができます。しかし、それは悪いことを意味するものではありません。問題は、どの問題を解決するかです。軽量で、データバインドが制限されているシンプルなアプリをすばやく展開する場合は、 sage に進み、Angular 1を使用します。Angular 1が構築されました6年前にラピッドプロトタイピングを解決しました。ユースケースが複雑な場合でも、Angular 1を使用できますが、複雑なWebアプリの構築に関するニュアンスとベストプラクティスに注意する必要があります。学習目的でアプリを開発している場合は、Angularの将来がどこにあるかということから、Angular 2に移行することをお勧めします。

7
csp

Angular v2およびReactJの際立った特徴の1つは、どちらも新しいWebコンポーネント開発アーキテクチャを採用したことです。これが意味するのは、私たちが今や独立したWebコンポーネントを作成し、それをこのWebコンポーネントと同じ技術スタックを持つ世界のどのWebサイトにもプラグアンドプレイできるということです。クール！ええ、とてもかっこいいです。 :)

Angular v2のもう1つの最も顕著な変更点は、その主要な開発言語がTypeScript以外にないということです。 TypeScriptはMicrosoftのもので、2015年のJavaScript（またはECMAScript 6/ES 6）のスーパーセットですが、非常に有望な機能がいくつかあります。このチュートリアルを読んだ後は、TypeScriptをもう少し詳しく（もちろん面白いことに）チェックアウトすることをお勧めします。

ここで私はAngular v1とAngular v2を相互に関連付けようとしている人たちが読者をさらに混乱させ、私の控えめな意見ではAngular v1とAngular v2は2つの異なるフレームワークとして扱われるべきです。 Angular v2にはWebアプリケーションを開発するというWebコンポーネントの概念がありますが、Angular v1にはコントローラを使用する必要があり、（残念ながら）幸いなことにコントローラは存在しません。 Angular v2。

5
Ammar Hasan

気をつけることの一つは、TypeScriptを使うことです。

私は私のインターンでコルドバと角度1をし、今私は角度2をしていると思います。角度2は私の考えではより構造化されているので傾向になると思います。 Angular 1.xには、非常に使いやすくすることができるパーソナライズされた指令がたくさんあります。

それが役に立てば幸い。

3
Bob Zhang

Angular 2は1よりもはるかに優れています。Webコンポーネントのサポート、TypeScriptの使用、インターフェースの優れたシンプルさなどの点で、私はAngular 2を使用してプロジェクトを開始することにしました。角度2には（Apacheでのルーティングの例からは）ドキュメントがほとんどまたはまったくないという問題があることに気付いたので、角度2のドキュメントおよびコミュニティは角度2の最大の落とし穴であり、十分に開発されていません。

あなたがより短いプロジェクトであなたが新しい問題を調査する時間を余裕があるならば、あなたが短い期限のために迅速にサイトを上げる必要があるならよく知られた角度1を使いなさいあなたがAngular 2に参加するよりもAngular 2コミュニティに与えるかもしれない貢献を考えるならば、ボーナスになりましょう。

0
Tomas Katz