AngularjsとAngular 2の主な違い
この記事では、第一世代のAngularjsとAngular 2の主な違いを比較しています。現在、AngularJSプロジェクトを使用していて、移行する必要があるかどうかわからない場合は、この記事が始めるのに役立ちます。近年、Angularは、シングルページアプリケーション（SPA）およびプログレッシブWebアプリケーション（PWA）を開発するためのフレームワークおよびプラットフォームとして急速に開発されています。AngularJSは、宣言的なプログラミングに基づいたビルビューの概念です。これには、アプリケーションのビジネスロジックからDOM操作を分離する必要があります。これには、それ自体に多くの利点があります。ただし、Angularjsには、パフォーマンスとそれが最下部でどのように機能するかに関して多くの欠点があります。そのため、開発チームは1年間コードをゼロから書き直し、2016年後半にAngular 2をリリースしました。ほとんどの開発者は、Angular 2は、元のAngularjsとはほとんど似ていない別のプラットフォームであると考えています。 AngularjsとAngular 2を比較して比較しましょう。
フレームワークアーキテクチャ
Angularjsは、モデル、ビュー、コントローラーを含む従来のMVC（モデルビューコントローラー）アーキテクチャに従います。
Angularは、コンポーネントベースのアーキテクチャを採用しています。各角度アプリケーションには、ルートコンポーネントと呼ばれる少なくとも1つのコンポーネントがあります。各コンポーネントには、ビジネスロジックを処理する関連クラスと、ビューレイヤーを表すテンプレートがあります。複数の密接に関連するコンポーネントを積み重ねてモジュールを作成できます。各モジュール自体が機能ユニットを形成します。
図で見ることができるように、コンポーネントはテンプレートにバインドされています。コンポーネントは、TypeScriptクラスを使用して構成され、@Component Annotationを使用してテンプレートを添付します。 Angularの依存関係注入サブシステムを使用して、サービスをコンポーネントに注入できます。 Angularのモジュールの概念は、AngularJSモジュールとは大きく異なります。 Ngmoduleは、機能ユニットを定義する容器です。 Ngmoduleには、コンポーネント、サービス、その他の機能を含めることができます。その後、モジュールユニットをインポートして他のモジュールとともに使用できます。
angularjsでは、テンプレートはHTMLで記述されています。動的にするために、プロパティ、タグ、フィルター、フォームコントロールなどのAngularJS固有のコードを追加できます。さらに、前述の双方向データ結合技術をサポートします。次のコードスニペットは、テンプレートでのディレクティブと二重ブレースの使用を示しています。
、
依存関係注射は、依存関係を満たし、必要に応じてコンポーネントに注入する責任のある設計パターンです。これにより、コンポーネントへの依存関係をハードコードする必要性が回避されます。 AngularJSには、コンポーネントの作成、依存関係の注入、およびすべての依存関係のリストの解析を担当するインジェクターサブシステムがあります。必要に応じて、次のコンポーネントを注入できます
値 メソッドは同じままですが、Angularには古いDIモードとは異なる新しい依存関係噴射システムがあります。 Angularの依存関係注射は、プロバイダーと宣言を含む@NGMODULEの配列を介して管理されます。宣言配列は、コンポーネントと命令を宣言するスペースです。依存関係とサービスは、プロバイダーアレイを介して登録されます。 の配列にcontactListServiceを登録する必要があります。次に、次のようにサービスをコンポーネントに注入する必要があります。
ここでは、Angularにコンポーネントのコンストラクターにサービスを注入するように指示します。
さらに、TypeScriptは、クラス、インターフェイス、デコレーター（クラスデコレーター、属性デコレータ、パラメーターデコレータ）にも人気があります。 Angularは、タイプスクリプトクラスを使用してコンポーネントを定義します。 @Componentは、クラスデコレータを使用してメタデータをコンポーネントに接続する方法の一般的な例です。通常、これには、テンプレートセレクタータグ、TemplateUrl、プロバイダーの配列などのコンポーネント構成の詳細が含まれているため、関連する依存関係をコンポーネントに挿入できます。
より良いツールサポートは、開発者が物事をより速く構築し、全体的な開発ワークフローに追加するのに役立ちます。たとえば、コマンドラインインターフェイス（CLI）は、アプリケーションをゼロから作成するのにかかる時間を大幅に短縮できます。同様に、IDE、テキストエディター、テストキットなど、開発を容易にするのに役立つ他のツールがあります。 Angularjsには公式のCLIはありませんが、多くのサードパーティのジェネレーターとツールが利用可能です。 IDEの場合、WebstormとAptanaは開発者の間で人気のある選択肢です。あなたが私のような場合は、Submlime Text Editorなどの通常のテキストエディターをカスタマイズして、正しいプラグインを追加できます。 AngularJSには、NG-Inspectorと呼ばれるデバッグおよびテスト用のブラウザ拡張機能があります。 AngularJS構造は、サードパーティモジュールへのアクセシビリティを可能にします。 AngularJSモジュールをホストするためのオープンソースプロジェクトであるngmodules.orgに、すべての一般的なNGモジュールを見つけることができます。 Angularには、AngularJよりも多くのツールサポートがあります。新しいプロジェクトを初期化し、それらを提供し、生産用に最適化されたパッケージを構築できる公式CLIがあります。詳細については、GitHubのAngular CLIを読むことができます。 AngularはJavaScriptの代わりにTypeScriptを使用するため、Visual StudioはIDEとしてサポートされています。それだけではありません。また、開発サイクルの特定の側面を自動化および高速化するのに役立つ多くのIDEプラグインとスタンドアロンツールもあります。デバッグのためのAugury、コード分析のためのNGREV、コード検証のためのコードエリザーなどはすべて非常に有用なツールです。
Angularjsには多くの欠陥があります（ほとんどがパフォーマンス関連）が、かつては迅速なプロトタイピングの選択肢でした。ただし、AngularJSに戻ったり、AngularJSプロジェクトを維持したりすることは意味がありません。まだ移住していない場合は、そうすることを検討する必要があります。
AngularjsおよびAngular FAQ（FAQ） （FAQパーツは、長すぎて擬似オリジナルの要件と一致しないため、以下に省略されています。PAQパーツは、必要に応じてオプションで保持または再編成できます。 。）<div ng-app>
<div ng-controller="MyController">
<input ng-model="foo" value="bar"></input>
<button ng-click="changeFoo()">{{buttonText}}</button>
</div>
<🎜>
</div><script>、および<style>を除き、テンプレートで動作します。さらに、テンプレートバインディング、テンプレート補間、テンプレートステートメント、属性バインディング、イベントバインディング、双方向結合などの機能もあります。組み込みの属性命令（NGCLASS、NGSTYLE、NGMODELなど）および組み込み構造命令（NGIF、NGFOROF、NGSWITCHなど）もテンプレートの一部です。 <base>
<title>工場
angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
// ...
}])
.directive('directiveName', ['depService', function(depService) {
// ...
}])
.filter('filterName', ['depService', function(depService) {
// ...
}]);app.module.ts
providersimport { Component } from '@angular/core';
import { Contact } from './contact';
import { ContactListService } from './contactlist.service';
@Component({
selector: 'app-contacts-list',
template: `
<div *ngFor="let contact of contacts">
{{contact.id}} - {{contact.name}} - {{contact.number}}
</div>
`
})
export class ContactListComponent {
contacts: Contact[];
constructor(contactlistService: ContactListService) {
this.contacts = contactlistService.getcontacts();
}
}<div ng-app>
<div ng-controller="MyController">
<input ng-model="foo" value="bar"></input>
<button ng-click="changeFoo()">{{buttonText}}</button>
</div>
<🎜>
</div>
以上がAngularjsおよびAngular 2：詳細な比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
