web-dev-qa-db-fra.com

Qu'est-ce qu'un composant dans AngularJS?

Je faisais quelques lectures sur les directives et je me demandais quelle était la distinction entre une directive et un composant, quand j'ai découvert qu'il y avait beaucoup de composants dans AngularJS.

Il y a un composant de fonction, un composant de type, un composant de service, un composant de filtre, un composant de fournisseur, etc. et tester des simulations. Cela tendait à rendre les choses plus confuses. Je n'ai pas pu trouver de définition d'un "composant" dans la documentation Angular qui expliquerait les distinctions entre les types de composants répertoriés.

Alors, qu'est-ce qu'un "composant" dans AngularJS? Est-ce quelque chose d'aussi simple que des blocs de code réutilisables?

Soit dit en passant, j'utilise actuellement Angular version 1.4.2.

angularjsangularjs-components
9
James Drinkard

Les composants angulaires ont été introduits dans la version 1.5.

Un composant est une version simplifiée d'une directive. Il ne peut pas faire de manipulation dom (pas les méthodes de liaison ou de compilation) et "replace" a également disparu.

Les composants sont "restrict: E" et ils sont configurés à l'aide d'un objet (et non d'une fonction).

Un exemple:

  app.component('onOffToggle', {
    bindings: {
      value: '=',
      disabled: '='
    },
    transclude: true,
    template: '<form class="form-inline">\
                       <span ng-transclude></span>\
                       <switch class="small" ng-model="vm.value" ng-disabled="vm.disabled"/>\
                     </form>',
    controllerAs: 'vm',
    controller: ['$scope', function($scope) {
      var vm = this;
      $scope.$watch("vm.disabled", function (val) {
        if (!val) {
          vm.value = undefined;
        }
      })
    }]
  });

Pour en savoir plus: https://toddmotto.com/exploring-the-angular-1-5-component-method/

16
Stefan Norberg

Venant d'un OOP Java, j'essayais de faire la distinction entre les différents composants Angularjs, y compris les modules. Je pense que la meilleure réponse que j'ai trouvée à propos des modules était 13 étapes vers la modularisation Angularjs

Dans un contexte AngularJS, la modularisation est une organisation par fonction plutôt que par type. Pour comparer, étant donné les tableaux temps = [60, 60, 24, 365] et argent = [1, 5, 10, 25, 50], les deux sont du même type, mais leurs fonctions sont complètement différentes.

Cela signifie que vos composants (contrôleurs, filtres, directives) vivront dans des modules plutôt que partout où ils vivent maintenant.

Alors oui, pour notre code 1.4x, les composants sont des blocs de code réutilisable, mais dans notre contexte de version 1.4x, je vois le modèle de module comme une structure récurrente à ces blocs de code dans Angularjs, bien qu'ils ne soient pas considérés comme de vrais composants jusqu'à la version 1.5. La façon dont ces modules sont implémentés vous donne le type de composant, c'est-à-dire qu'une structure d'implémentation de contrôleurs le distinguera d'un service ou d'un fournisseur, si cela a du sens. Je pense également que les documents Angularjs auraient dû aborder cette question.

Voici le modèle de base que je vois répété dans le code Angularjs:

(function () {
    // ... all vars and functions are in this scope only
    // still maintains access to all globals
}());

Voici un excellent article sur le modèle de module Javascript en profondeur .

8
James Drinkard