Angular-styleguide: .component helper

Creado en 11 feb. 2016  ·  5Comentarios  ·  Fuente: johnpapa/angular-styleguide

Con el lanzamiento de Angular 1.5 podemos usar el atajo .component () para crear directivas de componentes.
¿Tiene alguna sugerencia sobre la forma de utilizarlo?

He sido un gran seguidor de tu guía de estilo durante algún tiempo y así es como suelo escribirlas.

Los pequeños, sin la necesidad de un controlador, me gusta escribir la plantilla dentro del mismo archivo que el valor de retorno de una función elevada

(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 los más avanzados, me gusta poner la plantilla en un archivo separado y usar la propiedad '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');
    }

  }

}());

También tengo curiosidad por saber tu opinión sobre el gancho $ onInit y cómo crees que deberían probarse los componentes.

Gracias

Angular 1

Comentario más útil

Puedo segundo, gracias @gkalpak . @softsimon , simplemente puede omitir esta línea desde arriba:
.controller('ActivePlacesController', ActivePlacesController);

También soy un gran admirador de esta guía de estilo.

@xavhan por $onInit Yo usaría de esta manera en tu ejemplo:

vm.$onInit = activate;

function activate() {
}

Podría llamarlo init y no activarlo desde v1.5.0.

También tengo curiosidad por saber qué piensa @johnpapa sobre esto, agradezco su orientación de antemano.

Todos 5 comentarios

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

  }

}());

De esta forma se puede probar el controlador.
Personalmente prefiero esta forma.

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

}());

De esta forma se puede probar el controlador.

@softsimon : v1.5.0 presenta ngMock # $ componentController , por lo que no tiene que registrar el controlador por separado por el bien de la prueba: smiley:

Puedo segundo, gracias @gkalpak . @softsimon , simplemente puede omitir esta línea desde arriba:
.controller('ActivePlacesController', ActivePlacesController);

También soy un gran admirador de esta guía de estilo.

@xavhan por $onInit Yo usaría de esta manera en tu ejemplo:

vm.$onInit = activate;

function activate() {
}

Podría llamarlo init y no activarlo desde v1.5.0.

También tengo curiosidad por saber qué piensa @johnpapa sobre esto, agradezco su orientación de antemano.

: +1: para

vm.$onInit = activate;

function activate() {
}

cerrado para que # 766 sea el lugar para la discusión de componentes

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

kdekooter picture kdekooter  ·  8Comentarios

Foxandxss picture Foxandxss  ·  13Comentarios

jansepke picture jansepke  ·  12Comentarios

bampakoa picture bampakoa  ·  3Comentarios

Bekt picture Bekt  ·  13Comentarios