Angular-styleguide: .componentヘルパー

Angular 1.5のリリースでは、.component（）ショートカットを使用してコンポーネントディレクティブを作成できます。
それを使用する方法について何か提案はありますか？

私はしばらくの間あなたのスタイルガイドの大ファンでした、そしてここに私が通常それらを書く方法があります。

小さなもの、コントローラーを必要としない、私は持ち上げられた関数の戻り値と同じファイル内にテンプレートを書くのが好きです

(function() {
  'use strict';

  var componentConfig = {
    template: generateTemplate(),
    bindings: {
      kpiVal: '=',
      kpiLabel: '=',
    },
  };

  angular
    .module('app.utils.kpi')
    .component('sfKpi', componentConfig);

  //
  function generateTemplate() {
    return [
      '<div class="sf_kpi">',
      '  <div class="sf_kpi__number">{{ $ctrl.kpiVal }}</div>',
      '  <div class="sf_kpi__label">{{ $ctrl.kpiLabel }}</div>',
      '</div>',
    ].join('');
  }
}());

より高度なものについては、テンプレートを別のファイルに入れて、「templateUrl」プロパティを使用するのが好きです。

(function() {
  'use strict';

  var componentConfig = {
    templateUrl: 'components/active-places/active-places.widget.html',
    controller: controller,
  };

  angular
    .module('app.widget.activeplaces')
    .component('activePlaces', componentConfig);

  /* <strong i="12">@ngInject</strong> */
  function controller($log, activityService) {
    var vm = this;

    vm.activities = [];
    vm.isLoading = true;

    vm.doFunnyStuff = doFunnyStuff;

    activate();

    function activate() {
      $log.info('👊 activating activePlaces component');

      activityService.getActivites()
        .then(fetchData)
        .catch(handleError)
        .finally(stopLoader);

      //
      function fetchData(activities) {
        vm.activities = activities;
        $log.log('👓 activePlaces activities fetched: ', activities);
      }
      function handleError(err){
        $log.error('💥 problem fetching activePlaces data', err);
      }
      function stopLoader() {
        vm.isLoading = false;
        $log.info('💪 activePlaces component started');
      }
    }

    // methods
    function doFunnyStuff() {
      vm.activities.push('yolo');
    }

  }

}());

$ onInitフックについてのあなたの意見と、コンポーネントをどのようにテストする必要があると思いますか。

ありがとう