<div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar"></input>
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  <??>
</div>

、<script>、および<style>を除き、テンプレートで動作します。さらに、テンプレートバインディング、テンプレート補(bǔ)間、テンプレートステートメント、屬性バインディング、イベントバインディング、雙方向結(jié)合などの機(jī)能もあります。組み込みの屬性命令（NGCLASS、NGSTYLE、NGMODELなど）および組み込み構(gòu)造命令（NGIF、NGFOROF、NGSWITCHなど）もテンプレートの一部です。 <base> <title>

依存関係注射は、依存関係を満たし、必要に応じてコンポーネントに注入する責(zé)任のある設(shè)計パターンです。これにより、コンポーネントへの依存関係をハードコードする必要性が回避されます。 AngularJSには、コンポーネントの作成、依存関係の注入、およびすべての依存関係のリストの解析を擔(dān)當(dāng)するインジェクターサブシステムがあります。必要に応じて、次のコンポーネントを注入できます

値

工場
service
プロバイダー
定數(shù)
• サービス、指示、フィルターは、工場の方法を使用して注入できます。これが工場の方法の例です。ファクトリーメソッドは、mymoduleという名前のモジュールに登録されています：

メソッドは同じままですが、Angularには古いDIモードとは異なる新しい依存関係噴射システムがあります。 Angularの依存関係注射は、プロバイダーと宣言を含む@NGMODULEの配列を介して管理されます。宣言配列は、コンポーネントと命令を宣言するスペースです。依存関係とサービスは、プロバイダーアレイを介して登録されます。

angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);

の配列にcontactListServiceを登録する必要があります。次に、次のようにサービスをコンポーネントに注入する必要があります。

ここでは、Angularにコンポーネントのコンストラクターにサービスを注入するように指示します。 app.module.ts providers

import { 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();
  }
}

さらに、TypeScriptは、クラス、インターフェイス、デコレーター（クラスデコレーター、屬性デコレータ、パラメーターデコレータ）にも人気があります。 Angularは、タイプスクリプトクラスを使用してコンポーネントを定義します。 @Componentは、クラスデコレータを使用してメタデータをコンポーネントに接続する方法の一般的な例です。通常、これには、テンプレートセレクタータグ、TemplateUrl、プロバイダーの配列などのコンポーネント構(gòu)成の詳細(xì)が含まれているため、関連する依存関係をコンポーネントに挿入できます。

<div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar"></input>
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  <??>
</div>

より良いツールサポートは、開発者が物事をより速く構(gòu)築し、全體的な開発ワークフローに追加するのに役立ちます。たとえば、コマンドラインインターフェイス（CLI）は、アプリケーションをゼロから作成するのにかかる時間を大幅に短縮できます。同様に、IDE、テキストエディター、テストキットなど、開発を容易にするのに役立つ他のツールがあります。

Angularjsには公式のCLIはありませんが、多くのサードパーティのジェネレーターとツールが利用可能です。 IDEの場合、WebstormとAptanaは開発者の間で人気のある選択肢です。あなたが私のような場合は、Submlime Text Editorなどの通常のテキストエディターをカスタマイズして、正しいプラグインを追加できます。 AngularJSには、NG-Inspectorと呼ばれるデバッグおよびテスト用のブラウザ拡張機(jī)能があります。 AngularJS構(gòu)造は、サードパーティモジュールへのアクセシビリティを可能にします。 AngularJSモジュールをホストするためのオープンソースプロジェクトであるngmodules.orgに、すべての一般的なNGモジュールを見つけることができます。

Angularには、AngularJよりも多くのツールサポートがあります。新しいプロジェクトを初期化し、それらを提供し、生産用に最適化されたパッケージを構(gòu)築できる公式CLIがあります。詳細(xì)については、GitHubのAngular CLIを読むことができます。 AngularはJavaScriptの代わりにTypeScriptを使用するため、Visual StudioはIDEとしてサポートされています。それだけではありません。また、開発サイクルの特定の側(cè)面を自動化および高速化するのに役立つ多くのIDEプラグインとスタンドアロンツールもあります。デバッグのためのAugury、コード分析のためのNGREV、コード検証のためのコードエリザーなどはすべて非常に有用なツールです。

Angularjsには多くの欠陥があります（ほとんどがパフォーマンス関連）が、かつては迅速なプロトタイピングの選択肢でした。ただし、AngularJSに戻ったり、AngularJSプロジェクトを維持したりすることは意味がありません。まだ移住していない場合は、そうすることを検討する必要があります。

AngularjsおよびAngular FAQ（FAQ）

（FAQパーツは、長すぎて擬似オリジナルの要件と一致しないため、以下に省略されています。PAQパーツは、必要に応じてオプションで保持または再編成できます。 。）