Angular-styleguide: .component 助手

创建于 2016-02-11 · 5评论 · 资料来源: johnpapa/angular-styleguide

随着 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 钩子的看法以及你认为应该如何测试组件。

谢谢

Angular 1

资料来源

xavhan

👍6

最有用的评论

我可以第二，谢谢@gkalpak 。 @softsimon你可以简单地从上面跳过这一行：
.controller('ActivePlacesController', ActivePlacesController);

我也是这个风格指南的忠实粉丝。

@xavhan for $onInit我会在你的例子中使用这种方式：

vm.$onInit = activate;

function activate() {
}

我可能会称它为init而不是从 v1.5.0 激活。

我也很好奇@johnpapa对此有何

attilacsanyi 于 2016-02-17

👍2

所有5条评论

(function() {
  'use strict';

  var componentConfig = {
    bindings: {
        data: '<'
    },
    templateUrl: 'components/active-places/active-places.widget.html',
    controller: 'ActivePlacesController as vm',
  };

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

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

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

    vm.doFunnyStuff = doFunnyStuff;

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

  }

}());

这样就可以测试控制器。
我个人更喜欢这种方式。

(function() {
  'use strict';

    angular
        .module('app.widget.activeplaces')
        .component('activePlaces', {
            bindings: {
                data: '<'
            },
            templateUrl: 'components/active-places/active-places.widget.html',
            controller: 'ActivePlacesController as vm',
         })
        .controller('ActivePlacesController', ActivePlacesController);

    function ActivePlacesController($log, activityService) {
        var vm = this;

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

        vm.doFunnyStuff = doFunnyStuff;

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

}());

softsimon 于 2016-02-17

这样就可以测试控制器。

@softsimon ： v1.5.0引入了ngMock#$componentController ，因此您不必为了可测试性而单独注册控制器 :smiley:

gkalpak 于 2016-02-17

👍1

我可以第二，谢谢@gkalpak 。 @softsimon你可以简单地从上面跳过这一行：
.controller('ActivePlacesController', ActivePlacesController);

我也是这个风格指南的忠实粉丝。

@xavhan for $onInit我会在你的例子中使用这种方式：

vm.$onInit = activate;

function activate() {
}

我可能会称它为init而不是从 v1.5.0 激活。

我也很好奇@johnpapa对此有何

attilacsanyi 于 2016-02-17

👍2

:+1: 对于

vm.$onInit = activate;

function activate() {
}

juristr 于 2016-03-09

关闭 #766 成为组件讨论的地方

johnpapa 于 2016-09-05

此页面是否有帮助？

0 / 5 - 0 等级

Angular-styleguide: .component 助手

最有用的评论

所有5条评论

相关问题