Angular-styleguide: .component helper

Criado em 11 fev. 2016  ·  5Comentários  ·  Fonte: johnpapa/angular-styleguide

Com o lançamento do Angular 1.5, podemos usar o atalho .component () para criar diretivas de componentes.
Você tem alguma sugestão de como usá-lo?

Há algum tempo que sou um grande seguidor do seu guia de estilo e aqui está como normalmente os escrevo.

Pequenos, sem a necessidade de um controlador, gosto de escrever o modelo dentro do mesmo arquivo que o valor de retorno de uma função içada

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

Para os mais avançados, gosto de colocar o modelo em um arquivo separado e usar a propriedade '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');
    }

  }

}());

Também estou curioso para saber sua opinião sobre o gancho $ onInit e como você acha que os componentes devem ser testados.

Obrigado

Angular 1

Comentários muito úteis

Posso concordar , thx @softsimon, você pode simplesmente pular esta linha acima:
.controller('ActivePlacesController', ActivePlacesController);

Eu também sou um grande fã deste guia de estilo.

@xavhan por $onInit Eu usaria desta forma no seu exemplo:

vm.$onInit = activate;

function activate() {
}

Posso chamá-lo de init e não ativar a partir da v1.5.0.

Também estou curioso para saber o que Sua orientação com antecedência.

Todos 5 comentários

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

  }

}());

Desta forma, o controlador pode ser testado.
Pessoalmente, prefiro assim.

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

}());

Desta forma, o controlador pode ser testado.

@softsimon : v1.5.0 introduz o ngMock # $ componentController , então você não precisa registrar o controlador separadamente para fins de testabilidade: smiley:

Posso concordar , thx @softsimon, você pode simplesmente pular esta linha acima:
.controller('ActivePlacesController', ActivePlacesController);

Eu também sou um grande fã deste guia de estilo.

@xavhan por $onInit Eu usaria desta forma no seu exemplo:

vm.$onInit = activate;

function activate() {
}

Posso chamá-lo de init e não ativar a partir da v1.5.0.

Também estou curioso para saber o que Sua orientação com antecedência.

: +1: para

vm.$onInit = activate;

function activate() {
}

fechado para # 766 para ser o local para discussão de componentes

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

kdekooter picture kdekooter  ·  8Comentários

Foxandxss picture Foxandxss  ·  13Comentários

jansepke picture jansepke  ·  12Comentários

Bekt picture Bekt  ·  13Comentários

annabellor picture annabellor  ·  9Comentários