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 hook에 대한 귀하의 의견과 구성 요소를 어떻게 테스트해야 한다고 생각하는지 궁금합니다.

감사 해요