Comment construire vos composants angulaires et les utiliser partout

Angular est le deuxième framework basé sur Javascript Front-end le plus utilisé (le premier si nous comptons AngularJs et Angular 2+), Angular est un framework supporté par Google. Il a été publié en 2016 après avoir presque entièrement réécrit sa version précédente AngularJs publiée le 2010. L'une des principales caractéristiques d'Angular était la capacité de développement pour plusieurs plates-formes: Web, mobile et bureau natif. Alors, qu'est-ce qui rend Angular attrayant?

Angular est plus que de simples outils, il fournit également des modèles de conception permettant de construire votre application de manière bien structurée. Organiser le code de manière angulaire en modules, les modules rendent une application séparée en fonctionnalités et en morceaux réutilisables. Cela permet également de charger et de diviser les tâches au sein des membres de l'équipe en fonction des rôles appropriés.

Les composants angulaires sont extensibles et découplés, ce qui permet aux utilisateurs de composer plusieurs composants simples et facilement remplaçables pour créer des composants plus complexes, en séparant clairement la manipulation de présentation et la logique de l'application.

Créons notre premier composant angulaire.

Pour créer notre projet, nous devons installer AngularCLI (npm install -g @ angular / cli), puis nous créons notre nouveau projet avec:

ng new

Le projet créé contiendra:

  • Le projet angulaire par défaut.
  • Toutes les dépendances sont installées dans le dossier du module de noeud
  • Test des fichiers pour chaque composant.

Créons un composant qui aura 2 entrées pour initialiser les variables du composant d’hébergement (à partir d’autres frameworks / bibliothèques) et envoyer un événement pour mettre à jour une de ces valeurs dans son hôte, afin de simuler un scénario d’interaction complet.

Maintenant que notre composant angulaire fonctionne, nous pouvons le construire en tant que composant Web à l'aide d'un élément angulaire; c’est une fonctionnalité qui permet de conditionner les composants angulaires en tant qu’éléments personnalisés introduits avec la version angulaire 6.

Pour pouvoir le faire, vous devez d'abord installer des dépendances.

npm install - save @ angular / elements
npm install - save @ webcomponents / webcomponentsjs
npm install - save document-register-element

Dans le fichier angular.json, vous devez importer le fichier document-register-element.js.

La prochaine étape consiste à modifier la façon dont nos bootstraps AppModule. Pour cela, nous devons renommer le tableau de démarrage en entryComponents afin d'empêcher AppComponent de démarrer avec le module.

Ensuite, créez l'injecteur d'élément personnalisé import Injector à partir de @ angular / core et createCustomElement à partir de @ angular / elements; cette fonction retourne une classe NgElementConstructor que nous lions à une balise HTML spécifique.

Enfin, nous devons ajouter ngDoBootstrap pour remplacer la fonction d’amorçage.

L'injecteur est une référence au contexte du module. Cela permet à tous les éléments créés dans la même application de partager le même contexte et de former une seule application angulaire. Ils peuvent communiquer entre eux, partager le routeur, utiliser le même magasin NgRx…

Vous pouvez trouver l'exemple complet sur mon dépôt github

Utilisez votre élément Custom angulaire dans un composant VueJs:

Pour utiliser votre élément personnalisé Angular dans un composant VueJs, vous devez importer vos fichiers js construits et le fichier styles.css dans le fichier index.html du dossier public.

Ensuite, vous pouvez utiliser comme n'importe quel autre composant ou balise HTML en l'ajoutant simplement au modèle HTML de votre composant. Dans cet exemple, nous allons montrer comment ce composant interagit avec son hôte, en recevant des données en tant qu'entrée et en émettant des événements lorsque sa valeur change, ou en modifiant la valeur de sa variable hôte à l'aide de la liaison bidirectionnelle.

Utilisez votre élément personnalisé angulaire dans Polymer:

Pour utiliser l'élément Custom angulaire dans un composant Polymer, vous devez importer les fichiers Javascript construits. main, runtime, polyfills et runtime et placez la balise dans le modèle html du composant.

Comme vous pouvez le voir dans cet exemple, nous utilisons la liaison bidirectionnelle pour interagir avec le composant angulaire. Notez que, comme expliqué dans la documentation Polymer; Pour établir une liaison bidirectionnelle avec des éléments natifs ou des éléments non Polymer qui ne respectent pas cette convention de dénomination d'événement, vous pouvez spécifier un nom d'événement de modification personnalisé dans l'annotation à l'aide de la syntaxe suivante:

target-prop = "{{hostProp :: target-change-event}}"

Utilisez votre élément personnalisé angulaire intégré dans le composant React

Pour utiliser l'élément Custom angulaire, vous devez importer les fichiers Javascript construits, puis vous pouvez les utiliser en tant que composant normal dans votre composant.

Comme vous pouvez le constater, nous communiquons à l'aide d'événements personnalisés pour communiquer entre l'hôte et le composant enfant.

Utiliser l'élément personnalisé angulaire avec Javascript simple

Pour utiliser votre élément personnalisé Angular Custom intégré, il vous suffit de l'importer dans un fichier html comme tout autre code javascript, d'importer les fichiers polyfill, runtime et scripts.

Nous pouvons changer la valeur des attributs avec Javascript comme n'importe quel élément HTML, écouter les événements et changer d'autres parties du DOM.

Merci d'avoir lu cet article. Vous pouvez trouver les exemples complets dans ce référentiel. Cela inclut le code pour les exemples et un moyen d'exécuter les exemples localement si vous souhaitez expérimenter.

Si vous avez des commentaires ou souhaitez ajouter quelque chose à cet article, n'hésitez pas à ajouter un commentaire ici.

Vous pouvez aussi me suivre sur twitter.