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 $ وكيف تعتقد أنه يجب اختبار المكونات.

شكرا