Angular-styleguide: .assistant de composant

Créé le 11 févr. 2016  ·  5Commentaires  ·  Source: johnpapa/angular-styleguide

Avec la sortie d'Angular 1.5, nous pouvons utiliser le raccourci .component() pour créer des directives de composant.
Avez-vous des suggestions pour l'utiliser ?

Je suis un grand adepte de votre guide de style depuis un certain temps et voici comment je les écris habituellement.

Les petits, sans avoir besoin d'un contrôleur, j'aime écrire le modèle dans le même fichier que la valeur de retour d'une fonction hissée

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

Pour les plus avancés, j'aime mettre le modèle dans un fichier séparé et utiliser la propriété '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');
    }

  }

}());

Je suis également curieux de connaître votre opinion sur le crochet $onInit et comment pensez-vous que les composants devraient être testés.

Merci

Angular 1

Commentaire le plus utile

Je peux seconder, merci @gkalpak . @softsimon, vous pouvez simplement sauter cette ligne d'en haut :
.controller('ActivePlacesController', ActivePlacesController);

Je suis aussi un grand fan de ce guide de style.

@xavhan pour $onInit J'utiliserais cette façon dans votre exemple :

vm.$onInit = activate;

function activate() {
}

Je pourrais l'appeler init et ne pas l'activer à partir de la v1.5.0.

Je suis également curieux de savoir ce que @johnpapa pense à ce sujet, appréciez vos conseils à l'avance.

Tous les 5 commentaires

(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 cette façon, le contrôleur peut être testé.
Personnellement, je préfère cette façon.

(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 cette façon, le contrôleur peut être testé.

@softsimon : v1.5.0 introduit ngMock#$componentController , vous n'avez donc pas besoin d'enregistrer le contrôleur séparément pour des raisons de testabilité :smiley:

Je peux seconder, merci @gkalpak . @softsimon, vous pouvez simplement sauter cette ligne d'en haut :
.controller('ActivePlacesController', ActivePlacesController);

Je suis aussi un grand fan de ce guide de style.

@xavhan pour $onInit J'utiliserais cette façon dans votre exemple :

vm.$onInit = activate;

function activate() {
}

Je pourrais l'appeler init et ne pas l'activer à partir de la v1.5.0.

Je suis également curieux de savoir ce que @johnpapa pense à ce sujet, appréciez vos conseils à l'avance.

:+1: pour

vm.$onInit = activate;

function activate() {
}

fermé pour #766 pour être le lieu de discussion des composants

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

jansepke picture jansepke  ·  12Commentaires

jusefb picture jusefb  ·  9Commentaires

amiceli picture amiceli  ·  7Commentaires

kdekooter picture kdekooter  ·  8Commentaires

bampakoa picture bampakoa  ·  3Commentaires