Qu'est-ce que Angular 2?
Pour créer des applications Web en HTML et JavaScript, un framework JavaScript est utilisé, appelé Angular 2, qui a été construit par Google. Lorsque vous travaillez avec des applications d'une seule page, les obstacles auxquels vous êtes souvent confronté peuvent être surmontés en utilisant Angular 2.
Modules dans Angular 2
Dans une application, les limites logiques sont regroupées par Angular 2. Les fonctionnalités peuvent être séparées en différents modules au lieu de tout regrouper dans une seule application. Voici quelques-unes des parties par lesquelles un module est composé de–
- Pour accéder aux fonctionnalités de l'application, les composants à charger sont informés dans Angular JS à l'aide du tableau Bootstrap. Le composant doit être déclaré dans le tableau d'amorçage de sorte que dans l'application Angular JS, il puisse être utilisé avec d'autres composants.
- Les tuyaux, les dérivés, les composants, etc. sont exportés via le tableau d'exportation pour être utilisés dans d'autres modules.
- À partir d'autres modules Angular JS, la fonctionnalité peut être importée à l'aide du tableau d'importation.
L'architecture d'Angular 2
L'anatomie d'une application Angular 2 est décrite par le schéma ci-dessus. La fonctionnalité de l'application est définie par chaque composant qui constitue la frontière logique. Les fonctionnalités entre les composants sont partagées à l'aide de services en couches.
Un composant est défini par classe, modèle et métadonnées. Les propriétés et méthodes se composent de la classe. La fonctionnalité de la classe est étendue et elle est décorée à l'aide de métadonnées. La vue HTML de l'application peut être définie à l'aide du modèle.
Cette application possède un module racine et plusieurs composants qui séparent la fonctionnalité.
Semblable au module Root Angular, le module de fonctionnalité a plusieurs composants qui distribuent la fonctionnalité.
Dans une application JS angulaire, le morceau de code logique est défini par les composants.
- La liaison et les dérivés sont effectués par le modèle qui contient le code HTML de l'application et rend la vue de l'application.
- Les propriétés et méthodes sont présentes dans la classe qui prend en charge la vue de l'application et sont définies dans TypeScript. Il a le nom de classe, le nom de propriété, le type de propriété et la valeur.
- Avec un décorateur, les métadonnées sont définies et contiennent les données supplémentaires.
Angular 2 Caractéristiques
La puissance d'un HTML est étendue à l'aide d'un élément HTML personnalisé appelé directive. Les directives dans Angular 2 sont ngif et ngFor.
- Les éléments sont ajoutés au code HTML à l'aide de l'élément ngif dans les scénarios réels, mais ne seront pas ajoutés s'il est évalué à False. Représenté par.
- Sur la base de la condition de boucle for, l'élément ngFor est utilisé.
La liaison de données est l'une des fonctionnalités d'Angular 2. Dans une propriété d'une classe, la propriété d'une balise HTML peut être une liaison.
Dans Angular 2, la gestion des erreurs est une option pour les applications. La bibliothèque catch ReactJS est incluse et la fonction catch est utilisée. Voici le code de gestion des erreurs.
Pour la fonction Gestionnaire d'erreurs, le lien est contenu par la fonction catch. À la console, l'erreur est envoyée par la fonction de gestion des erreurs. L'exécution se poursuit après que l'erreur est renvoyée dans le programme principal. Cela redirige l'erreur vers la console.
Les utilisateurs sont dirigés vers différentes pages à l'aide du routage après qu'une option a été choisie dans la page principale.
En cela, les données pourraient être transformées à l'aide de plusieurs filtres et tuyaux.
- Pour convertir en minuscules.
- Pour convertir en majuscules.
- À partir d'une chaîne d'entrée, une donnée peut être découpée. La position de départ de la tranche est arbitrée par le début et la position de fin est référée par la fin.
- La chaîne d'entrée peut être convertie au format de date à l'aide de la fonction de date.
- Au format monétaire, la chaîne d'entrée est convertie à l'aide de la fonction monétaire.
- Au format pourcentage, la chaîne d'entrée est convertie avec la fonction pourcentage.
Des tuyaux personnalisés peuvent également être créés à l'aide d'Angular 2.
- Le nom du canal est défini par le nom du canal.
- La classe de tuyau personnalisée est définie par la classe Pipe.
- Pour travailler avec le tuyau, la fonction de transformation est utilisée.
- Au tuyau, les paramètres sont passés par Paramètres.
- Le type de retour du canal est défini par le type de retour.
Le cycle de vie d'Angular 2
De son lancement à la fin de l'application, l'application Angular 2 a son cycle de vie.
Ce diagramme illustre le cycle de vie complet d'Angular 2. Ci-dessous la description.
- La modification de la valeur d'une propriété liée aux données est décrite par la méthode ngOnChanges.
- Après qu'Angular affiche les propriétés liées aux données, lors de l'initialisation du composant, la méthode ngOnInit est appelée.
- Lorsque Angular lui-même n'a pas pu détecter les changements, le ngDoCheck est utilisé pour la détection.
- Dans la vue du composant, lorsque le contenu externe est projeté par Angular, le ngAfterContentInit est appelé en réponse.
- Une fois que le contenu projeté est vérifié par Angular, le ngAfterContentChecked est appelé en réponse.
- Une fois que les vues du composant et les vues enfant sont initialisées par Angular, le ngAfterInit est appelé.
- Le ngAfterViewChecked est appelé après que les composants et les vues enfants ont été vérifiés par Angular.
- Avant la destruction de la directive ou du composant par l'Angular, les ONG détruisent ce qui est la phase de nettoyage qui est appelée.
Les services sont une autre propriété d'Angular 2 qui est utilisée lorsque divers modules ont besoin d'une fonctionnalité commune. Parmi divers modules, la fonctionnalité de la base de données pourrait être réutilisée. La fonctionnalité de base de données pourrait être utilisée par ce service créé.
Pourquoi avons-nous besoin d'Angular 2?
- Angular 2 fournit des fonctionnalités qui aident au débogage et à la compréhension du code, le développement et l'expérience d'édition seraient également améliorés.
- Le codage devient plus cohérent avec l'aide d'Angular 2.
- Angular 2 offre des capacités de liaison étendues. Sa fonction de liaison de propriété permet de contrôler DOM. La réaction à tout événement de la vue peut être obtenue à l'aide de la liaison d'événement.
- Angular 2 offre une capacité de routage complète.
- Angular 2 dispose d'une documentation complète et d'un support communautaire qui fournit une solution à presque tous les problèmes rencontrés.
Conclusion
Angular 2 est l'un des frameworks de développement web les plus recherchés et celui dont vous avez besoin pour construire votre prochaine application web.
Articles recommandés
Ceci est un guide de Qu'est-ce que Angular 2?. Nous discutons ici de l'introduction, des fonctionnalités des modules dans Angular 2, Angular 2 ainsi que du cycle de vie d'Angular 2. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus–
- Comment installer Angular 2?
- Langage de programmation R
- Types de sites Web
- Types d'hébergement Web