Blue Flower

Chercher

component dans AngularJS

1. Généralités

Un composant (component) est fondamentalement une directive qui utilise une configuration plus simple. On peut considérer un composant comme un widget c'est à dire un morceau de code HTML qu'on peut réutiliser à  différents endroits  de l'application Web. De  façon générale un composant contient une vue et un contrôleur . Au sein du  contrôleur (Controller) on a  la logique métier liée à une vue exposée à l'utilisateur.  Un composant angularJS est défini par la méthode   ".component ()" qui prend deux arguments:  le premier est le nom du composant et le second est un objet qui contient une paire "clé/valeur", qui définit quelle vue, le contrôleur associé associé à la vue et un certain nombre d'éléments comme:

var myApp = angular.module("myApp",[]);
myApp
.component("customer", { templateUrl: "customer.html", controller : customerController,
controllerAs: "cust", // c'est un nom alternative utilisé pour désigner le controller bindings:{ var1:'@', // var1 acceptera uniquement des paramètres de type String var2:'<', // à utiliser lors de liaisons unidirectionnelles lorsque nous voulons
// simplement lire une valeur à partir d'une scope  parent et sans  le mettre à jour
var3:'=", // à utiliser lors d'une  liaison de données bidirectionnelle. Cela signifie que
// si on met à jour cette variable dans la scope du composant,
// la modification sera reflétée sur la scope  parent.
var4: "&" // Call-back à utiliser au cas où le composant aurait besoin d'envoyer quelque chose à son scope parent
},
require:{
parent: '^parentComponent' // voir détail ci-dessous
}
});

Dans certains cas, on peut être emmené à accéder aux données d'un composant parent à l'intérieur d'un composant fils. Ceci peut être réalisé en utilisant la méthode  "require" (voir ci-dessus) ; et ainsi on a la référence du contoller du composant parent et on l'utilise  dans le controller du composant fils.
Ici «myApp» est le nom de l'application  et "customer" est le nom du composant; et l'appel du composant dans le fichier html principal se fait comme suit:

<customer></customer>

Chaque composant contrôle uniquement sa propre vue et ses propres données: un composant ne doit jamais modifier les données ou DOM qui sont hors de son scope (propre portée). Normalement, dans AngularJS, il est possible de modifier les données n'importe où dans l'application via l'héritage de "$scope" et via des "$watch". Ceci est pratique, mais peut également entraîner des problèmes lorsqu'il n' y a pas de clarté sur la partie de l'application concernée par la modification des données. C'est pourquoi les composants utilisent des "scope" isolée. 

Dans angularJS, à partir de de la version 1.7, on doit faire en sorte qu' une application soit un arbre de composants: idéalement, toute l'application devrait être un arbre de composants qui implémentent des entrées et des sorties clairement définies et ce qui diminue les liaisons de données bidirectionnelles ( two way data-binding). De cette façon, il est plus facile de prédire quand les données changent et quel est l'état d'un composant

Les liaisons @, <, = et &

Dans l'objet défini par "bindings" au sein de l'objet caractérisant un composant, on peut définir comment le composant va interagir avec les composants qui seront en relation lui ; le composant est soit utilisé par un autre composant et dans ce cas il est le composant enfant soit il utilise un autre composant et il est donc considéré comme le composant parent.
La liaison @
C'est' une liaison très simple entre   scope du composant parent et les  scopes des composants enfants et cela sans aucun "watcher", de quelque manière que ce soit; cela veut dire toute mise à jour dans le scope du composant  parent n'affectera pas le scope enfant et vice versa (voir exemple à suivre); ce type de liaison concerne uniquement  des paramètres de type string;  L'utilisation de cette liaison @ crée une variable interne remplie avec la valeur de l'attribut.
La liaison <
Ici on est en présence d'une liaison  à sens unique qui va du composant parent au composant enfant. Les mises à jour dans le scope du composant parent sera propagées au composant enfant, mais l'inverse n'est pas possible c'est à dire que les mises à jour dans les scopes des composants enfants impactent uniquement   les scopes des composants enfants.
La liaison =
Cette liaison est le fameux two way-binding.
La liaison &
est maintenant utilisé pour une liaison de sortie. Selon la documentation du composant, il doit être utilisé pour référencer la méthode de la portée parent. Au lieu de manipuler la portée des enfants, appelez simplement la méthode parente avec les données mises à jour!...........

précédent