AngularJS
Composants
Recherche…
Paramètres
| Paramètre | Détails |
|---|---|
| = | Pour utiliser la liaison de données bidirectionnelle. Cela signifie que si vous mettez à jour cette variable dans la portée de votre composant, la modification sera répercutée sur la portée parent. |
| < | Liaisons unidirectionnelles lorsque nous voulons simplement lire une valeur d'une étendue parent et ne pas la mettre à jour. |
| @ | Paramètres de chaîne. |
| Et | Pour les rappels au cas où votre composant aurait besoin de générer quelque chose dans son étendue parent. |
| - | - |
| Crochets LifeCycle | Détails (nécessite angular.version> = 1.5.3) |
| $ onInit () | Appelé sur chaque contrôleur après que tous les contrôleurs d'un élément aient été construits et que leurs liaisons ont été initialisées. C'est un bon endroit pour mettre le code d'initialisation pour votre contrôleur. |
| $ onChanges (changesObj) | Appelé à chaque mise à jour des liaisons unidirectionnelles. Le changesObj est un hachage dont les clés sont les noms des propriétés liées qui ont été modifiées et les valeurs sont un objet de la forme { currentValue, previousValue, isFirstChange() } . |
| $ onDestroy () | Appelé sur un contrôleur lorsque son étendue contenant est détruite. Utilisez ce hook pour libérer des ressources externes, des montres et des gestionnaires d'événements. |
| $ postLink () | Appelé après que l'élément de ce contrôleur et ses enfants ont été liés. Ce hook peut être considéré comme analogue aux hooks ngAfterViewInit et ngAfterContentInit dans Angular 2. |
| $ doCheck () | Appelé à chaque tour du cycle de digestion. Fournit une opportunité pour détecter et agir sur les changements. Toutes les actions que vous souhaitez entreprendre en réponse aux modifications que vous détectez doivent être appelées à partir de ce hook; implémenter ceci n'a aucun effet sur l'appel de $ onChanges. |
Remarques
Le composant est un type particulier de directive qui utilise une configuration plus simple adaptée à une structure d'application basée sur des composants. Les composants ont été introduits dans Angular 1.5, les exemples de cette section ne fonctionneront pas avec les anciennes versions d'AngularJS.
Un guide complet du développeur sur les composants est disponible sur https://docs.angularjs.org/guide/component
Composants de base et crochets LifeCycle
Qu'est-ce qu'un composant?
- Un composant est fondamentalement une directive qui utilise une configuration plus simple et qui convient à une architecture basée sur des composants, ce qui est l’objet d’Angular 2. Considérez un composant comme un widget: un morceau de code HTML que vous pouvez réutiliser à différents endroits de votre application Web.
Composant
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
Balisage
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Utilisation de données externes dans le composant:
Nous pourrions ajouter un paramètre pour passer un nom à notre composant, qui serait utilisé comme suit:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
Balisage
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
Utilisation des contrôleurs dans les composants
Jetons un coup d'œil à la façon d'ajouter un contrôleur.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
Balisage
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
Les paramètres transmis au composant sont disponibles dans la portée du contrôleur juste avant $onInit fonction $onInit ne soit appelée par Angular. Considérez cet exemple:
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
Dans le modèle ci-dessus, cela rendrait "Bonjour John, je suis MacJohn!".
Notez que $ctrl est la valeur par défaut angulaire des controllerAs si aucun n'est spécifié.
Utiliser "require" comme objet
Dans certains cas, vous devrez peut-être accéder aux données d'un composant parent à l'intérieur de votre composant.
Cela peut être réalisé en spécifiant que notre composant nécessite ce composant parent, le requis nous donnera une référence au contrôleur de composant requis, qui peut ensuite être utilisé dans notre contrôleur comme indiqué dans l'exemple ci-dessous:
Notez que les contrôleurs requis sont garantis prêts uniquement après le hook $ onInit.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
N'oubliez pas que cela crée un lien étroit entre l'enfant et le parent.
Composants en JS angulaire
Les composants d'angularJS peuvent être visualisés sous la forme d'une directive personnalisée (<html> dans une directive HTML, et quelque chose comme ceci sera une directive personnalisée <ANYTHING>). Un composant contient une vue et un contrôleur. Le contrôleur contient la logique métier liée à une vue, que l'utilisateur voit. Le composant diffère d'une directive angulaire car il contient moins de configuration. Une composante angulaire peut être définie comme ceci.
angular.module("myApp",[]).component("customer", {})
Les composants sont définis sur les modules angulaires. Ils contiennent deux arguments, One est le nom du composant et le second est un objet qui contient une paire de valeurs-clés, qui définit quelle vue et quel contrôleur il va utiliser comme ceci.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" est le nom de l'application que nous construisons et le client est le nom de notre composant. Maintenant, pour l'appeler dans le fichier HTML principal, nous allons le mettre comme ça
<customer></customer>
Maintenant, cette directive sera remplacée par la vue que vous avez spécifiée et la logique métier que vous avez écrite dans votre contrôleur.
REMARQUE: Rappelez que le composant prend un objet comme second argument tandis que directive prend une fonction de fabrique comme argument.