Introduction à la feuille de triche Angular 2
Angular 2 est un framework open-source qui a été construit sur JavaScript. Il a été principalement utilisé pour développer des applications Web frontales. C'est le successeur d'AngularJS. Il est écrit en TypeScript. Il est développé par Google. Angular 2 est construit sur du JavaScript moderne qui utilise ES6. Angular 2 offre de meilleures capacités de gestion des événements, des modèles puissants, une meilleure prise en charge des appareils mobiles et des applications Web de bureau. Il est également compatible avec les appareils mobiles et sur toutes les plateformes comme Windows, Mac et Linux.
Angular 2 possède des fonctionnalités clés pour développer des applications qui sont des composants, des caractères dactylographiés et des services. Angular 2 a différents composants qui sont des modules, des composants, des modèles, des métadonnées et un service. Les composants aident à intégrer l'application dans de nombreux modules et permettent de maintenir l'application plus longtemps. Les différents codes ont été maintenus et utilisés par différents modules d'application pris en charge par fonctionnalité de service. Les modules aident à diviser l'application en un élément logique codé pour effectuer une tâche particulière.
Commandes et contenu sur la feuille de triche Angular 2
La feuille de triche Angular 2 possède une bibliothèque complète, évolutive, extensible, interactive et contient de nombreuses méthodes intégrées pour calculer les opérations courantes. Il existe différentes syntaxes pour les modèles, NgModules, directives intégrées, formulaires et autres configurations disponibles comme ci-dessous:
| Syntaxe du modèle | LA DESCRIPTION |
| Il lie la propriété 'valeur' au résultat de l'expression 'nom' | |
| Il lie l'attribut 'rôle' au résultat d'expression 'mon rôle' | |
| Il appellera la méthode read Text, lorsque l'événement click est déclenché. | |
| Il lie la propriété à une chaîne interpolée | |
|
Bonjour mon nom)) | Il lie le contexte à une chaîne interpolée |
| Il configure la liaison bidirectionnelle. | |
|
… | * le symbole transforme l'élément actuel en une température incorporée. |
|
Étudiant: ((étudiant? .Sname)) | ? L'opérateur de navigation indique que le champ étudiant est facultatif |
| Il lie la largeur de la propriété de style pour exprimer le résultat mysize. | |
| Utilisé pour la liaison de données et l'expression de liaison d'événement dans le modèle. | |
|
N ° de voiture: ((vehicleNumber | myCarNuFormat)) | Il transforme la valeur actuelle du numéro de véhicule via le tube mycarNuformat. |
| Il désambiguïser l'élément d'un composant HTML | |
| Il lie la présence de classe sur l'expression de la vérité. |
NgModules: - Les différentes directives Ngmodule sont:
| Directives | LA DESCRIPTION |
| @NgModule ((déclarations ..)) | Il définit un module qui contient des directives, etc. |
| déclarations: (MyRedComponent, MyBlueComponent, MyDatePipe) | Il indiquera la liste des composants, directives et tuyaux appartenant à ce module. |
| exportations: (MyRedComponent, MyDatePipe) | Il listera les composants et les tuyaux visibles pour importer ce module |
| importations: (BrowserModule, SomeOtherModule) | Il listera les modules à importer dans ce module |
| fournisseurs: (MyService, (fournir:…)) | Il fournit la liste des fournisseurs d'injection de dépendance visibles à la fois au contenu du module |
| entryComponents: (SomeComponent, OtherComponent) | Il fournira la liste des composants non référencés dans un modèle accessible. |
Il existe d'autres directives et détecteurs de changement de composant et crochets de cycle de vie disponibles qui peuvent être implémentés comme les méthodes de classe sont les suivantes:
| Directives | La description |
| constructeur (myService: MyService, …) (…) | Il est utilisé pour injecter des dépendances. |
| ngOnChanges (changeRecord) (…) | Il est appelé après chaque modification des propriétés d'entrée et avant le traitement du contenu ou des vues enfants |
| ngOnInit () (…) | Il est appelé après constructeur et initialisation des propriétés |
| ngDoCheck () (…) | Il est appelé à chaque fois que les propriétés du composant ou des directives sont vérifiées. Il est utilisé pour prolonger l'exécution d'un contrôle douanier. |
| ngAfterContentInit () (…) | Il est appelé après ngOninit lorsque le contenu des composants ou des directives a été initialisé. |
| ngAfterContentChecked () (…) | Il est appelé après chaque vérification du contenu du composant ou de la directive. |
| ngAfterViewInit () (…) | Il est appelé après ngaftercontentint lorsque la directive vues de composant et vues enfant a été initialisée. |
| ngAfterViewChecked () (…) | Elle est appelée après chaque vérification des vues des composants et des vues enfants dans laquelle se trouve déjà la directive. |
| ngOnDestroy () (…) | Il est appelé une fois, avant de détruire l'instance. |
Trucs et astuces gratuits pour utiliser les commandes Angular 2 Cheat Sheet: -
- Dans la feuille de triche Angular2, platformBrowserDynamic (). BootstrapModule (AppModule); aide à amorcer l'application, en utilisant le composant root can à partir du spécifié.
- Dans Angular2, bootstrap: (MyAppComponent) répertorie les composants à démarrer lorsque ce module est démarré.
- ceci est une directive intégrée dans angualr2 pour supprimer ou recréer une partie de l'arborescence Dom en fonction de l'expression.
- il transforme l'élément de liste et son contenu en modèle et il est utilisé pour instancier une vue pour chaque élément de la liste.
- «ConditionExpres sion»> cette directive est utilisée pour sélectionner les modèles en fonction de la valeur de l'expression ou en termes simples comme basculer la casse en oups.
- , ces directives vous permettent d'attribuer des styles à un élément HTML à l'aide de CSS et ce CSS peut être directement accessible.
- cette directive lie les classes CSS de l'élément aux valeurs de carte approuvées.
- cette directive fournit la liaison, l'analyse et la validation bidirectionnelles pour les contrôles de formulaire.
- selector: '.cool-button: not (a)' Ceci est une configuration de directive qui spécifie le sélecteur CSS qui identifie cette directive dans le modèle. Il ne prend pas en charge le sélecteur parent-enfant.
- pro viders: (MyService, (provide:…)) il fournit la liste des fournisseurs d'injection de dépendances pour directive et enfants.
- (provide: MyService, useClass: MyMockService) il définira ou remplacera le fournisseur pour le service à la classe.
- (fournir: Ma valeur, utilisez Valeur: 4) il définira ou remplacera la valeur du fournisseur à 4
Conclusion - Feuille de triche angulaire 2
La feuille de triche Angular 2 a beaucoup de fonctionnalités et de directives différentes, des modules sont disponibles pour le développement qui aident à rendre l'application plus interactive pour que les utilisateurs et les développeurs puissent suivre les problèmes et les fonctionnalités. Il est étendu et réutilisable pour d'autres applications. Angular2 utilise le tapuscrit qui est complètement différent de la version précédente d'AngularJS.
La feuille de triche angulaire 2 est plus facile à apprendre car sa courbe d'apprentissage est simple et droite pour les débutants et pour les étudiants. La connaissance de JavaScript serait un avantage lors de l'utilisation d'angular pour le développement. Il est toujours bon de se recycler.
Articles recommandés
Ceci a été un guide pour Angular 2 Cheat Sheet ici, nous avons discuté du contenu et des commandes ainsi que des trucs et astuces gratuits de Angular 2 Cheat Sheet. Vous pouvez également consulter l'article suivant pour en savoir plus -
- Le cheat sheet d'UNIX
- Aide-mémoire HTML
- Aide-mémoire CCNA
- Aide-mémoire JQuery