Création de Composants AngularJS Hautement Réutilisables
Préparation de votre application AngularJS pour Angular
Pas de doute si vous allez créer une nouvelle application aujourd’hui, vous pourriez commencer avec Angular construit sur Typescript (Angular 2 +). Cependant, avec des milliers d’AngularJS (Angulaire 1.X) applications toujours en production, AngularJS ne va nulle part pour le moment. En fait, AngularJS voit toujours le développement et le soutien continus de l’équipe.
** MISE À JOUR **
Angular est actuellement à la v6 et convient bien aux applications de grande production. Si vous créez une nouvelle application aujourd’hui, veuillez consulter Angular 6+.
Consultez notre nouveau guide pour Créer des composants Hautement réutilisables Avec Angular
Les développeurs pourraient également privilégier la riche communauté de développeurs et les bibliothèques open source autour d’AngularJS plutôt que de plonger dans de nouvelles et limitées. Il y a plusieurs raisons pour lesquelles vous voudrez peut-être créer une application dans AngularJS. Si la migration de votre application ng1 vers ng2+ est sur le radar, pensez à la composante de votre application comme condition préalable à votre migration.
Nouvelles fonctionnalités depuis la version 1.5.x ont été ajoutés rétroactivement, principalement la prise en charge des composants et la liaison de données unidirectionnelle. Nous verrons comment maximiser ces fonctionnalités pour créer des composants hautement réutilisables pour vos applications AngularJS qui s’alignent plus près du nouveau framework Angular.
Organisation des composants
Il est facile de se perdre dans le composant this, composant that hoopla. L’une des pièces les plus critiques à comprendre est quel composant devrait être responsable de quoi.
Gardez les composants au niveau de la page comme force motrice derrière une vue tout en utilisant des composants réutilisables ou “muets” pour s’occuper des tâches courantes.
Cela permet de conserver la logique spécifique à la page pour un seul composant tout en encapsulant tout le code de routine et les fonctionnalités en morceaux réutilisables.
L’une des plus grandes erreurs que j’ai vues est de transmettre des données à des composants enfants qui modifient les données, supposent un cas d’utilisation très spécifique ou communiquent via des services partout. Cela les rend finalement difficiles à comprendre / tester et non réutilisables du tout car ils deviennent codés en dur pour des cas d’utilisation spécifiques.
Votre premier composant “Hello World”
Le composant le plus simple possible ressemblerait à ceci. Remarquez à quel point ces directives sont similaires.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
Il est à noter que les directives sont toujours disponibles pour les développeurs. Dans de rares cas, vous voudrez toujours utiliser une directive de modèle sur un composant. Peut-être si vous étiez dépendant d’une phase de compilation ou de liaison …. mais les directives devraient être utilisées comme attributs pour ajouter d’autres fonctionnalités à un composant – par exemple, vous souhaiteriez peut-être ajouter une sécurité basée sur les autorisations si un composant devait être disponible ou non pour un utilisateur.
En cas de doute, privilégiez le modèle de composant. Vous souhaitez construire votre application sous la forme d’un arbre de composants. Voir les documents AngularJS pour plus d’informations sur les composants et les directives. Les directives doivent être considérées comme des composants sans modèles utilisés pour améliorer les composants.
Options de liaison
Les paramètres des composants sont transmis via la propriété bindings. Similaire à l’ancienne façon d’attribuer des variables de portée de directive.
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
Communication de composants
Supposons que nous créions une application messenger. La vue principale est un composant au niveau de la page avec un composant de liste de contacts réutilisable. Nous voulons utiliser le composant liste de contacts dans d’autres domaines de notre application, il est donc important de le rendre aussi réutilisable que possible.
Le composant liste de contacts a un seul but. Pour afficher la liste des contacts disponibles à partir du serveur et afficher les sélections effectuées.
Le composant messenger doit accepter les sélections effectuées à partir du composant liste de contacts et les ajouter à sa liste de destinataires.
