30 seconds of angular
1.0.0
COLLECTION ONTRAGE D'UTILISATION ANNIPLET UTILISÉ que vous pouvez comprendre en 30 secondes ou moins.
Extraits de débutant
Extraits intermédiaires
Extraits avancés
Les énumérations sont excellentes mais ils ne sont pas visibles dans les modèles angulaires par défaut. Avec cette petite astuce, vous pouvez les rendre accessibles.
enum Animals {
DOG ,
CAT ,
DOLPHIN
}
@ Component ( {
...
} )
export class AppComponent {
animalsEnum : typeof Animals = Animals ;
}
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Modèles d'énumération
Consultez la feuille de triche angulaire ou (version alternative) contenant de nombreuses informations utiles condensées en un seul endroit.
La liste de contrôle angulaire contient également la liste des erreurs courantes commises lors du développement d'applications angulaires.
https://malcoded.com/angular-cheat-sheet/,https://angular.io/guide/cheatsheet,https://angular.io/guide/styleguide
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Fiche de triche
Déboguez l'état des composants dans la console du navigateur en fonctionnant:
ng . probe ( $0 ) . componentInstance
$0- Le nœud Dom est-il actuellement sélectionné dans les outils de développement ($1pour le précédent et ainsi de suite).
Avec un moteur Ivy Renderer:
ng . getComponent ( $0 ) https://blog.angularindepth.com/everything-you-need-to-know-about-debugging-angular-applications-d308ed8a51b4
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: conseils bons à savoir
Si vous utilisez une valeur ViewEncapsulation qui est différente de la valeur par défaut, il pourrait être intimidant de définir la valeur manuellement pour chaque composant.
Heureusement, vous pouvez le configurer à l'échelle mondiale lorsque vous démêlez votre application:
platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
{
// NOTE: Use ViewEncapsulation.None only if you know what you're doing.
defaultEncapsulation : ViewEncapsulation . None
}
] ) ;
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: style de configuration
Pour agir sur les balayages, les casseroles et les pinhces ainsi que les autres gestes mobiles, vous pouvez utiliser hammerjs avec HostListener Decorator, ou une reliure d'événement,
npm install hammerjs@ HostListener ( 'swiperight' )
public swiperight ( ) : void {
// Run code when a user swipes to the right
} Voici des échantillons sur la façon d'utiliser toutes les liaisons d'événements hammerjs , vous pouvez également utiliser ces événements avec un HostListener :
<!-- pan events -->
< div (pan) =" logEvent($event) " > </ div >
< div (panstart) =" logEvent($event) " > </ div >
< div (panmove) =" logEvent($event) " > </ div >
< div (panend) =" logEvent($event) " > </ div >
< div (pancancel) =" logEvent($event) " > </ div >
< div (panleft) =" logEvent($event) " > </ div >
< div (panright) =" logEvent($event) " > </ div >
< div (panup) =" logEvent($event) " > </ div >
< div (pandown) =" logEvent($event) " > </ div >
<!-- pinch events -->
< div (pinch) =" logEvent($event) " > </ div >
< div (pinchstart) =" logEvent($event) " > </ div >
< div (pinchmove) =" logEvent($event) " > </ div >
< div (pinchend) =" logEvent($event) " > </ div >
< div (pinchcancel) =" logEvent($event) " > </ div >
< div (pinchin) =" logEvent($event) " > </ div >
< div (pinchout) =" logEvent($event) " > </ div >
<!-- press events -->
< div (press) =" logEvent($event) " > </ div >
< div (pressup) =" logEvent($event) " > </ div >
<!-- rotate events -->
< div (rotate) =" logEvent($event) " > </ div >
< div (rotatestart) =" logEvent($event) " > </ div >
< div (rotatemove) =" logEvent($event) " > </ div >
< div (rotateend) =" logEvent($event) " > </ div >
< div (rotatecancel) =" logEvent($event) " > </ div >
<!-- swipe events -->
< div (swipe) =" logEvent($event) " > </ div >
< div (swipeleft) =" logEvent($event) " > </ div >
< div (swiperight) =" logEvent($event) " > </ div >
< div (swipeup) =" logEvent($event) " > </ div >
< div (swipedown) =" logEvent($event) " > </ div >
<!-- tap event -->
< div (tap) =" logEvent($event) " > </ div > https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/hammer_gestres.ts,http://hammerjs.github.io/api/#hammer.manager,https://angular.io/apiform-browsser/hamggerg
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: gestes composants de conseils bons à savoir
Vous pouvez créer son propre composant d'assistance et l'utiliser au lieu de *ngIf .
@ Component ( {
selector : 'loader' ,
template : `
<ng-content *ngIf="!loading else showLoader"></ng-content>
<ng-template #showLoader>? Wait 10 seconds!</ng-template>
`
} )
class LoaderComponent {
@ Input ( ) loading : boolean ;
}Pour l'exemple d'utilisation:
< loader [loading] =" isLoading " > ? ? ? </ loader >Notez que le contenu sera évalué avec impatience, par exemple dans l'extrait ci-dessous
destroy-the-worldsera créé avant même que le chargement ne commence:
< loader [loading] =" isLoading " > < destroy-the-world > </ destroy-the-world > </ loader > https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b,https://blog.angularindepth.com/https-medium-om-thomasburleson-animated-ghosts-bfc045a51fba
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: conseils modèles de composants bons à savoir
Avec ng-content vous pouvez transmettre tous les éléments à un composant. Cela simplifie la création de composants réutilisables.
@ Component ( {
selector : 'wrapper' ,
template : `
<div class="wrapper">
<ng-content></ng-content>
</div>
` ,
} )
export class Wrapper { } < wrapper >
< h1 > Hello World! </ h1 >
</ wrapper > https://medium.com/p/96a29d70d11b
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: composants de conseils bons à savoir
*ngIf prend également en charge la déclaration else .
< div *ngIf =" isLoading; else notLoading " > loading... </ div >
< ng-template #notLoading > not loading </ ng-template >
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: modèles NGIF
Naviguez avec les paramètres matriciels:
Le routeur accédera à /first;name=foo/details
< a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
link with params
</ a > https://stackblitz.com/edit/angular-xvy5pd
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: routage
Dans certains cas, les propriétés @Input et @Output peuvent être nommées différemment des entrées et sorties réelles.
< div
pagination
paginationShowFirst =" true "
(paginationPageChanged) =" onPageChanged($event) " >
</ div > @ Directive ( { selector : '[pagination]' } )
class PaginationComponent {
@ Input ( 'paginationShowFirst' )
showFirst : boolean = true ;
@ Output ( 'paginationPageChanged' )
pageChanged = new EventEmitter ( ) ;
}Remarque: utilisez-le à bon escient, voir StyleGuide Recommander
https://angular.io/guide/styleguide#style-05-13
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: modèles de composants
L'opérateur de navigation sûre aide à prévenir les exceptions de référence nul dans les expressions de modèles de composants. Il renvoie la valeur de la propriété de l'objet s'il existe ou null autrement.
< p > I will work even if student is null or undefined: {{student?.name}} </ p >{{a?.b?.c}} En dessous sera compilé.
(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));Angular / Angular # 791
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Conseils de gestion des propriétés de l'objet
Pour éviter les opérations coûteuses, nous pouvons aider Angular à suivre les éléments ajoutés ou supprimés IE Personnaliser l'algorithme de suivi par défaut en offrant une option de suivi à NGForof.
Vous pouvez donc fournir votre fonction de suivi personnalisée qui renverra un identifiant unique pour chaque élément itéré. Par exemple, une valeur clé de l'élément. Si cette valeur clé correspond à la précédente, Angular ne détectera pas les modifications.
TrackBy prend une fonction qui a des args d'index et d'élément .
@ Component ( {
selector : 'my-app' ,
template : `
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
</ul>
`
} )
export class AppComponent {
trackByFn ( index , item ) {
return item . id ;
}
}Si un suivi est donné, les pistes angulaires changent par la valeur de retour de la fonction.
Maintenant, lorsque vous modifiez la collection, Angular peut suivre les éléments qui ont été ajoutés ou supprimés en fonction de l'identifiant unique et ne créent / ne détruisent que des éléments modifiés.
https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: performance des composants de conseils bons à savoir
Sous le capot angulaire compile les directives structurelles en éléments de template Ng, par exemple:
<!-- This -->
< div *ngFor =" let item of [1,2,3] " >
<!-- Get expanded into this -->
< ng-template ngFor [ngForOf] =" [1,2,3] " let-item =" $implicit " > </ ng-template >La valeur transmise à la directive * ngfor est écrite à l'aide de microsyntax. Vous pouvez en savoir plus dans les documents.
Découvrez également un outil interactif qui montre l'expansion par Alexey Zuev
https://angulaire
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Directive structurelle de la pointe Microsyntax
Parfois, nous devons travailler avec chaque contrôle unique est un formulaire. Voici comment cela peut être fait:
function flattenControls ( form : AbstractControl ) : AbstractControl [ ] {
let extracted : AbstractControl [ ] = [ form ] ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
const children = Object . values ( form . controls ) . map ( flattenControls ) ;
extracted = extracted . concat ( ... children ) ;
}
return extracted ;
}Pour des exemples d'utilisation:
// returns all dirty abstract controls
flattenControls ( form ) . filter ( ( control ) => control . dirty ) ;
// mark all controls as touched
flattenControls ( form ) . forEach ( ( control ) =>
control . markAsTouched ( { onlySelf : true } ) ) ; https://angular.io/guide/reactive-forms
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: les formulaires réactifs conseils à savoir
Il est vraiment facile d'ajouter des raccourcis clavier dans le modèle:
< textarea (keydown.ctrl.enter) =" doSomething() " > </ textarea > < input (keydown.enter) =" ... " >
< input (keydown.a) =" ... " >
< input (keydown.esc) =" ... " >
< input (keydown.shift.esc) =" ... " >
< input (keydown.control) =" ... " >
< input (keydown.alt) =" ... " >
< input (keydown.meta) =" ... " >
< input (keydown.9) =" ... " >
< input (keydown.tab) =" ... " >
< input (keydown.backspace) =" ... " >
< input (keydown.arrowup) =" ... " >
< input (keydown.shift.arrowdown) =" ... " >
< input (keydown.shift.control.z) =" ... " >
< input (keydown.f4) =" ... " > https://alligator.io/angular/binding-keyup-keydown-events
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: conseils bien à savoir
Chaque composant angulaire rendu est enveloppé dans un élément hôte (qui est le même que le sélecteur du composant).
Il est possible de lier les propriétés et les attributs de l'élément hôte à l'aide de décorateurs @hostbinding, par exemple
import { Component , HostBinding } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `
<div>Use the input below to select host background-color:</div>
<input type="color" [(ngModel)]="color">
` ,
styles : [
`:host { display: block; height: 100px; }`
]
} )
export class AppComponent {
@ HostBinding ( 'style.background' ) color = '#ff9900' ;
}
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: composants
Généralement, nous obtenons une instance de service par toute l'application. Il est également possible de créer une instance de service par composant ou directif.
@ Component ( {
selector : 'provide' ,
template : '<ng-content></ng-content>' ,
providers : [ Service ]
} )
export class ProvideComponent { } @ Directive ( {
selector : '[provide]' ,
providers : [ Service ]
} )
export class ProvideDirective { } https://angular.io/guide/hierarchical-dependency-injection#component-level-injectors,https://stackblitz.com/edit/angular-cdk-happy-animals
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Conseils Composants Injection de dépendance
Il est possible d'ajouter des écouteurs d'événements mondiaux dans vos composants / directives avec HostListener . Angular s'occupera de se désabonner une fois votre directive détruite.
@ Directive ( {
selector : '[rightClicker]'
} )
export class ShortcutsDirective {
@ HostListener ( 'window:keydown.ArrowRight' )
doImportantThings ( ) {
console . log ( 'You pressed right' ) ;
}
}Vous pouvez avoir plusieurs liaisons:
@ HostListener ( 'window:keydown.ArrowRight' )
@ HostListener ( 'window:keydown.PageDown' )
next ( ) {
console . log ( 'Next' )
}Vous pouvez également passer des paramètres:
@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
console . log ( 'Pressed right on this element: ' + target )
}
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: composants d'événements
Parfois, vous devez avoir accès au document global.
Pour simplifier les tests unitaires, Angular le fournit par injection de dépendance:
import { DOCUMENT } from '@angular/common' ;
import { Inject } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `<h1>Edit me </h1>`
} )
export class AppComponent {
constructor ( @ Inject ( DOCUMENT ) private document : Document ) {
// Word with document.location, or other things here....
}
} https://angular.io/api/common/document
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: injection de dépendance
Voici le moyen d'informer l'utilisateur qu'il existe des champs avec des valeurs non valides.
Formgroup de fonction markFieldsAsTouched ou formary comme argument.
function markFieldsAsTouched ( form : AbstractControl ) : void {
form . markAsTouched ( { onlySelf : true } ) ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
Object . values ( form . controls ) . forEach ( markFieldsAsTouched ) ;
}
}Il est très utile de consulter une méthode plus générale accédant à tous les contrôles de formulaire imbriqués par Thekiba pour travailler avec des contrôles.
https://angular.io/guide/reactive-forms
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Conseils de validation des formulaires réactifs bons à savoir
EventEmitters utilisé pour @Output 's ne sont que des observables avec une méthode EMIT.
Cela signifie que vous pouvez simplement utiliser une instance Observable à la place, par exemple, nous pouvons câbler directement les changements de valeur de contrôle de forme:
readonly checkbox = new FormControl ( ) ;
@ Output ( ) readonly change = this . checkbox . valueChanges ;
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: sorties de pointe
Il est possible de prendre un modèle comme @Input pour un composant pour personnaliser le rendu
@ Component ( {
template : `
<nav>
<ng-container *ngTemplateOutlet="template"></ng-container>
</nav>
` ,
} )
export class SiteMenuComponent {
@ Input ( ) template : TemplateRef < any > ;
} < site-menu [template] =" menu1 " > </ site-menu >
< ng-template #menu1 >
< div > < a href =" # " > item1 </ a > </ div >
< div > < a href =" # " > item2 </ a > </ div >
</ ng-template >Remarque:
ng-contentdoit être utilisé pour la plupart des cas et il est plus simple et plus déclaratif. N'utilisez cette approche que si vous avez besoin d'une flexibilité supplémentaire qui ne peut pas être réalisée avec NG-Content.
https://blog.angular-university.io/angular-ng-template-ng-contrainer-ngtremplateoutlet
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: modèle
Par défaut, Angular dépouille tous les espaces blancs dans des modèles pour enregistrer les octets. Généralement, c'est sûr.
Pour des cas rares lorsque vous devez préserver les espaces, vous pouvez utiliser l'attribut spécial ngPreserveWhitespaces :
< div ngPreserveWhitespaces >
(___()'`;
/, /`
jgs \"--\
</ div >Vous pouvez également utiliser l'option PreserveWhitespaces sur un composant.
https://twitter.com/mgechev/status/1108913389277839360
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: pourboire
Bien que la meilleure façon de réutiliser votre code soit de créer un composant, il est également possible de le faire dans un modèle.
Pour ce faire, vous pouvez utiliser ng-template avec la directive *ngTemplateOutlet .
< p >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ p >
< button >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ button >
< ng-template #fancyGreeting >
Hello < b > {{name}}! </ b >
</ ng-template > https://angulaire
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: modèles
Si vous avez besoin d'un pipe personnalisé, avant d'en créer un, envisagez de consulter le package NGX Pipes qui a 70+ pipes personnalisées déjà implémentées.
Voici quelques exemples:
< p > {{ date | timeAgo }} </ p >
<!-- Output: "last week" -->
< p > {{ 'foo bar' | ucfirst }} </ p >
<!-- Output: "Foo bar" -->
< p > 3 {{ 'Painting' | makePluralString: 3 }} </ p >
<!-- Output: "3 Paintings" -->
< p > {{ [1, 2, 3, 1, 2, 3] | max }} </ p >
<!-- Output: "3" --> https://github.com/danrevah/ngx-pipes
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: bibliothèque de tuyaux de pointe
Vous pouvez utiliser des liaisons de propriétés avancées pour définir des valeurs de style spécifiques en fonction des valeurs de propriété des composants:
< p [style.background-color] =" 'green' " >
I am in green background
</ p >
< p [style.font-size.px] =" isImportant ? '30' : '16' " >
May be important text.
</ p > <!-- Width in pixels -->
< div [style.width.px] =" pxWidth " > </ div >
<!-- Font size in percentage relative to the parent -->
< div [style.font-size.%] =" percentageSize " > ... </ div >
<!-- Height relative to the viewport height -->
< div [style.height.vh] =" vwHeight " > </ div >
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: styles
Semblable à la façon dont vous pouvez se lier à double sens [(ngModel)] vous pouvez lier à double sens la propriété personnalisée sur un composant, par exemple [(value)] . Pour le faire, utilisez la dénomination appropriée des entrées / sorties:
@ Component ( {
selector : 'super-input' ,
template : `...` ,
} )
export class AppComponent {
@ Input ( ) value : string ;
@ Output ( ) valueChange = new EventEmitter < string > ( ) ;
}Ensuite, vous pouvez l'utiliser comme:
< super-input [(value)] =" value " > </ super-input >
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: liaison des conseils
Il est possible d'exécuter une tâche asynchrone avant le début de l'application par fournir une fonction de retour de fonction à l'aide du jeton APP_INITIALIZER .
@ NgModule ( {
providers : [
{
provide : APP_INITIALIZER ,
useValue : functionReturningPromise
multi : true
} ,
} )
export class AppModule { }
https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e,https://angular.io/api/core/app_initializer
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: pourboire
À des fins de test, vous voudrez peut-être injecter l'objet window.location dans votre composant. Vous pouvez y parvenir avec un mécanisme InjectionToken personnalisé fourni par Angular.
export const LOCATION_TOKEN = new InjectionToken < Location > ( 'Window location object' ) ;
@ NgModule ( {
providers : [
{ provide : LOCATION_TOKEN , useValue : window . location }
]
} )
export class SharedModule { }
//...
@ Component ( {
} )
export class AppComponent {
constructor (
@ Inject ( LOCATION_TOKEN ) public location : Location
) { }
} https://itnext.io/testing-browser-window-location-in-angular-application-e4e8388508ff ,https://angular.io/guide/dependency-injection
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: test d'injection de dépendance
Il est possible d'utiliser @ViewChild (également @ViewChildren et @ContentChild/Children ) pour interroger les composants de différents types en utilisant l'injection de dépendance.
Dans l'exemple ci-dessous, nous pouvons utiliser @ViewChildren(Base) pour obtenir des instances de Foo et Bar .
abstract class Base { }
@ Component ( {
selector : 'foo' ,
providers : [ { provide : Base , useExisting : Foo } ]
} )
class Foo extends Base { }
@ Component ( {
selector : 'bar' ,
providers : [ { provide : Base , useExisting : Bar } ]
} )
class Bar extends Base { }
// Now we can require both types of components using Base.
@ Component ( { template : `<foo></foo><bar></bar>` } )
class AppComponent {
@ ViewChildren ( Base ) components : QueryList < Base > ;
} https://www.youtube.com/watch?v=prrgo6f0cjs
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: Conseils bons à savoir Composants Injection de dépendance
Angular nous permet de contrôler la façon dont la précharge du module est gérée.
Il existe 2 stratégies fournies par @ Angular / Router : PreloadAllModules et NoPreloading . Ce dernier a activé par défaut, ne précharge que les modules paresseux à la demande.
Nous pouvons remplacer ce comportement en fournissant une stratégie de préchargement personnalisée: dans l'exemple ci-dessous, nous préchargez tous les modules inclus si la connexion est bonne.
import { Observable , of } from 'rxjs' ;
export class CustomPreloading implements PreloadingStrategy {
public preload ( route : Route , load : ( ) => Observable < any > ) : Observable < any > {
return preloadingConnection ( ) ? load ( ) : of ( null ) ;
}
}
const routing : ModuleWithProviders = RouterModule . forRoot ( routes , {
preloadingStrategy : CustomPreloading
} ) ;Notez que l'exemple ci-dessus ne serait pas très efficace pour les applications plus grandes, car elle préchargera tous les modules.
https://angulaire u / personnalisé-preloading-strategy-for-angular-modules-b3b5c873681a, https: //coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: routeur
Il est possible d'utiliser des balises SVG dans votre composant angulaire, pour créer de beaux graphiques et visualisations. Il y a 3 choses que vous devez savoir:
attr < circle [attr.cx] =" x " [attr.cy] =" y " > </ circle >// Not: < child-component > </ child-component >
< g child-component > </ g > @ Component ( { selector : '[child-component]' } )@ Component ( {
selector : '[child-component]' ,
template : `<svg:circle></svg:circle>`
} )
Démo interactif de cet extrait | ⬆ Retour en haut | Tags: pourboire SVG
