JavaScript
初心者
AngularJS

AngularJSでコンポーネントを使用する方法を書いてみた(JavaScript版)

コンポーネントとは

AngularJSを使用する上で重要な概念としてコンポーネントがあります。
ざっくりコンポーネントを利用するとどんな事が実現できるかというと
簡単にhtml内に他のhtmlとjsの処理を利用できます。

コンポーネントのメリットとして以下の点が挙げられます
・コードの再利用性向上
・機能修正が簡単に
・作業効率アップ

デメリットとして以下の点が挙げられます
・書き方が特殊で習得するのに他と比べて時間がかかる

コンポーネントのキホン

コンポーネントの書く上で大事なファイルはController.htmlとComponent.jsの2ファイルです。
下のコードはbasicController.htmlがbasicComponent.jsを使用するように処理を書いてます。

basicComponent.js
angular.module('myApp')
  .component('basicComponent', basicComponent);

class basicComponentClass {
  constructor() {}
}

basicComponentClass.$inject = [];

var basicComponent = {
  controller: basicComponentClass,
  templateUrl: 'component/basicComponent.html',
  binding: {
    param: '<'
  }
}
basicController.html
<basic-component param="'hogehoge'"></basic-component> //属性としてコンポーネントを使用

上記のようなコードを書き、実行すると<basic-component~の部分でbasicComponent.htmlを表示できるようになります。

バインディングについて

先程のコードで説明を省きましたが、コンポーネントを使う際に便利なのがバインディングです。
バインディングはcomponentを利用する際にコントローラーからパラメータを渡すことが可能です。
パラメータを使うためにはまず、コンポーネントで受け口を作る必要があります。作り方は以下のコード。(上のコードにも書いてあります)

basicComponent.js内
binding: {
  param: '<'
}

これで受け口を作れたのでコントローラーから使用してみましょう。
使用するのは以下のコードのparam部分で使用したいパラメータの指定と実際の値を渡しています。

basicController.html
<basic-component param="'hogehoge'"></basic-component> //属性としてコンポーネントを使用

注意

以下のようにキャメルケースでバインディングを設定した場合

binding: {
  hoge: '<',
  fugaFuga: '<'
}

使用方法としては以下のように大文字の部分を"-小文字"に変換して書きます。

<basic-component hoge="'1'" fuga-fuga="2"></basic-component>