Explication détaillée des étapes de développement de composants Angular2

Cette fois, je vais vous apporter un guide détaillé étape par étape des composants de développement Angular2. Quelles sont les précautions pour les composants de développement Angular2 ? Voici des cas pratiques, jetons un coup d'oeil.

Tout d'abord, parlons brièvement des responsabilités et du statut des composants dans le framework ng1 à ng2 :

Une caractéristique majeure de ng1 - les directives, qui sont divisées en types d'attributs et balises Type, type CSS et type d'annotation. Les composants écrits dans les classes et les commentaires CSS ne sont probablement pas utilisés par la plupart des gens, tandis que les instructions de type attribut et les instructions de type étiquette sont l'un des contributeurs à la popularité de ng1 dans l'univers. Dans ng2, les instructions de type balise sont simplement séparées, mises à niveau selon le style des forces émergentes telles que vue et les composants appelés, et utilisées pour gérer tout ce qui concerne la vue (DOM), y compris l'affichage des données et Animation. Les instructions d'attribut sont utilisées pour améliorer les fonctions des composants, telles que la réception des entrées de l'utilisateur et la réponse aux clics de l'utilisateur et à d'autres événements. En fait, de nombreuses fonctions intégrées dans ng2 sont des instructions basées sur des attributs - ngFor, ngIf, etc., et les composants dépendent davantage de projets spécifiques, il est donc approprié d'utiliser des composants basés sur des projets pour écrire des interfaces visibles par les utilisateurs. Dans le même temps, les composants doivent également gérer le routage. Le routage frontal peut être considéré comme une modification dynamique du DOM. Après avoir formulé les règles dans le routage ng2, il restitue ou détruit dynamiquement différents composants pour obtenir un changement de page frontale.

Parlons ensuite de la façon dont j'ai utilisé les composants ng2 pour créer un site Web dans mon projet précédent :

1 Selon la pratique officielle, chaque application doit avoir un composant racine.

2. Différenciez le routage frontal. Chaque entrée de routage pointe vers un composant et chaque composant affiche une page.

3. À mesure que le projet se développe, un seul module ne peut pas répondre à la classification métier, donc la route racine guide le chargement paresseux de chaque sous-module, puis les sous-routes du sous-module. -module pointe vers des sous-composants spécifiques et affiche leurs pages respectives.

4. En vous concentrant sur une seule page rendue par un seul sous-composant, vous pouvez en fait encapsuler certains blocs de balises réutilisables dans un nouveau composant (tels que des éléments de données complexes qui nécessitent une traversée ngFor) .

5. J'ai découvert que certains composants (tels que les boutons latéraux ou les boîtes modales de message) peuvent en fait être utilisés par l'ensemble du projet, et ceux-ci doivent être encapsulés dans des composants partagés globalement.

Je pense toujours que c'est un peu déroutant. La raison est probablement le nom du composant, car dans le framework ng2, tout, des pages de routage aux entrées de données, utilise des composants et des déclarations. pareil, il est donc inévitable qu'il y ait une confusion.

Il n'y a pas d'autre choix que de continuer à subdiviser les composants par moi-même, l'auteur a donc divisé les composants de ng2 en quatre catégories :

Composants de page

• Lorsqu'il s'agit de routage, nous nous soucions uniquement de faire correspondre les règles de routage et de rendre l'interface. Ces composants ne nécessitent pas de paramètre de sélecteur lors de la déclaration (seul le positionnement de l'itinéraire ne nécessite pas de balises spécifiques)

• Recevez

  paramètres de routage ou résolvez des données, essayez de ne pas faire d'autres demandes d'interaction commerciale et ne définissez pas de variables d'entrée et de sortie

Composants de mise en page

• Modules utilisés pour subdiviser les pages Si la page est simple, vous pouvez omettre directement l'utilisation de composants d'unité. Il doit y avoir des paramètres de sélecteur spécifiques car

  doit être utilisé dans les composants de la page.

n'est pas responsable de l'obtention des données de routage ou de résolution, et essayez de ne pas demander de données mais de transmettre les données via l'entrée ou de répondre aux événements via la sortie. doit être complété dans le composant de mise en page autant que possible (pas aussi difficile que de le placer dans le composant de page) Chaos, et chaque composant de mise en page ne peut pas s'influencer mutuellement)

Le composant unitaire

doit avoir son propre sélecteur, généralement réutilisable dans son propre module, modifié par diverses instructions d'attributs
sert à simplifier les balises répétées au niveau de l'unité, telles que chaque élément de données dans les données de liste obtenues. L'affichage de l'interface peut être encapsulé dans un composant d'unité
qui est uniquement responsable de la transmission des données et. l'afficher via l'entrée et répondre aux événements via la sortie vers le composant de mise en page externe ou le composant de page pour le traitement

Composants partagés

Il doit y avoir un sélecteur, un composant partagé par l'ensemble du projet. Il est relativement gratuit à mettre en œuvre et vise à réduire la complexité de l'ensemble du projet et à faciliter la maintenance
• .

• sont plus adaptés, comme les fenêtres contextuelles de message, le chargement de barre de progression , etc.

• La plupart des attributs- les instructions basées ont en fait la même fonction. Elles sont relativement générales et peuvent être traitées de la même manière que les composants partagés, sauf que les composants partagés ont des vues spécifiques et que les instructions partagées ne sont utilisées que pour implémenter des fonctions communes

En fait, il n'y a aucune difficulté technique. Cela implique simplement une chose : la disposition des répertoires de projets est très importante.

ng2 ne reconnaît pas autant de types de composants que l'auteur a subdivisés pour cela. Ces catégories sont à voir par vous-même. Le mode de réalisation spécifique est un projet basé sur ce système de classification

Structure de répertoires . .

L'auteur a ajouté des signes plus et des signes moins devant les noms de dossiers, ce qui peut être considéré comme ma propre structure de répertoires apparemment étrange.

L'explication est la suivante : le terme + le plus externe représente le répertoire de l'ensemble du module de chargement paresseux. Les composants du répertoire avec un signe plus à l'intérieur représentent les composants de la page, et ceux sans aucun symbole représentent les composants de mise en page. le répertoire avec le numéro représente le composant unitaire. Le composant unitaire peut être utilisé dans l'ensemble du module de chargement différé, il se trouve donc directement sur la couche la plus externe du répertoire de chargement différé, tandis que les composants de mise en page sont tous dans le répertoire de même niveau du répertoire de chargement différé. composant de page spécifique.

Le résumé est qu'après avoir mis de côté l'apparence d'ES6 et de TypeScript, l'utilisation des composants ng2

n'est pas techniquement difficile. Cet article est purement une expérience maladroite. Bien sûr, l'actuel de l'auteur. L'expérience est encore loin d'être suffisante. J'espère avoir des informations plus approfondies après avoir étudié en profondeur le code source de ng2 dans le cadre du développement futur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS implémente un fondu d'entrée et de sortie uniforme des images

Comment convertir des nombres et chaînes en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!