Angular-styleguide: .Komponenten-Helfer

Mit der Veröffentlichung von Angular 1.5 können wir die Verknüpfung .component() verwenden, um Komponentendirektiven zu erstellen.
Haben Sie Vorschläge zur Verwendung?

Ich bin seit einiger Zeit ein großer Anhänger Ihres Styleguides und so schreibe ich ihn normalerweise.

Kleine, ohne dass ein Controller benötigt wird, schreibe ich das Template gerne in dieselbe Datei wie den Rückgabewert einer hochgezogenen Funktion

(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('');
  }
}());

Für Fortgeschrittene lege ich die Vorlage gerne in eine separate Datei und verwende die Eigenschaft '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');
    }

  }

}());

Ich bin auch neugierig auf Ihre Meinung zum $onInit-Hook und wie sollten Ihrer Meinung nach Komponenten getestet werden.

Vielen Dank