Angular-styleguide: घटक सहायक

कोणीय 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('');
  }
}());

अधिक उन्नत लोगों के लिए मैं टेम्पलेट को एक अलग फ़ाइल में रखना चाहता हूं और 'टेम्पलेट यूआरएल' संपत्ति का उपयोग करना चाहता हूं।

(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 हुक के बारे में आपकी राय के बारे में भी उत्सुक हूं और आपको क्या लगता है कि घटकों का परीक्षण कैसे किया जाना चाहिए।

धन्यवाद