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>