BETA

[Angular 基礎]アーキテクチャの構成要素

投稿日:2020-01-16
最終更新:2020-01-16

この記事の概要

  • Angular のアーキテクチャの構成要素について要約しています。

筆者について

  • 主にサーバサイド開発を経験しており、フロントエンドは React に少し触れたことのある程度です。

参照した情報源

https://angular.jp/guide/architecture (ページ下部のアーキテクチャ構成図がわかりやすいです)

用語

NgModule

  • Angular の構成要素をとりまとめるためのモジュールです。
  • NgModule には以下が含まれます。
    • Component や Service といった、Angular アプリケーションの構成要素。
    • Angular アプリケーションの構成要素をとりまとめ、コンパイルするための機能。

Component

  • 画面の構成要素を定義するための Class です。
  • Component には HTML や CSS を紐付けることができます。紐付けには @Component を利用します。

Service

  • Component から呼び出される機能を定義するための Class です。
  • Service をComponent へ埋め込むことができます。Component は、自身に埋め込まれた Service を呼び出す事ができます(正しくは「依存性の注入」と言いますが、直感的に理解するために「埋め込む」という表現を用いて説明しています)。
  • Service には、埋め込み先の Component を定義することが出来ます。定義には @Injectable を利用します。

テンプレート

  • 画面の構成要素を定義するためのファイルで、主に HTML を用いて記載します。

ディレクティブ

  • テンプレート上にデータを表示したり、ロジックを記載するためのマークアップ記法。テンプレートファイル内で利用可能です。

イベントバインディング

  • 画面上でのボタンクリックやテキスト入力に応じて、データを更新するための仕組みです。

プロパティバインディング

  • データの計算結果をHTMLに反映するための仕組みです。

Router

  • URL と Component を関連付けることで、Angular アプリケーションにおけるルーティングを実現します。
  • データの状態に応じたルーティングを定義することも出来ます。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@sutoneaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう