This project was generated with Angular CLI version 14.2.7.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
- Lazy Loading Structure
- Angular Material
- Resolvers
- Reusable components
- Custom Pipes
- Directives
- Angular Animations
ng new awesome-components --style=scss --skip-tests=true --routing
- AppName
awesome-components
- Style SCSS
- Don't generate test
- Generate Automaticly routing file
ng ng add @angular/material
- Add @angular/material at project with configuration :
Deep Purple/Amber
theme- Angular Material typography styles
- Include and enable animations
CoreModule et SharedModule (pour une architecture propre)
- ng g m core
- ng g m shared
SocialMediaModule will be first feature module (lazy-loaded)
- ng g m social-media --routing
HeaderComponent (global header app), in CoreModule
-
ng g c core/components/header
-
ng g c shared/components/comments --export Le flag --export ajoute automatiquement CommentsComponent aux exports de SharedModule. Pratique, non ?
core-module content global elements (header, comments, ...) = src > app > core
- components ex: header
- models
feature-module content features (form, list, ...) = src > app > feature-module-name
- components
- models
- resolvers
- services
shared-module content shared = src > app > shared
- animations
- components
- directives
- pipes
- modules ex: material
Background image: https://s3.eu-west-1.amazonaws.com/course.oc-static.com/courses/7471281/blurred-bg.jpeg
- Utilisez
query
pour cibler les différents enfants de l'élément animé. - Déclenchez des animations en parallèle avec
group
, ou en série avecsequence
. - Étalez des animations de liste avec
stagger
. - Déclenchez l'animation d'un élément enfant avec
animateChild
. - Rendez vos animations réutilisables avec
animation
, et utilisez-les avecuseAnimation
. - Ajoutez des paramètres à vos animations avec la string interpolation, et passez des arguments pour ces paramètres via un objet de configuration passé à
useAnimation
.
Les resolvers font partie du routing d'une application Angular. Quand un utilisateur navigue vers une route qui a besoin de récupérer des données, le resolver effectue la requête, et la navigation ne se termine que lorsque les données sont arrivées.
- Un resolver est un outil de routing qui est appelé lorsqu'un utilisateur cherche à accéder à la route où il est placé.
- Le resolver récupère des données avant d'afficher la route souhaitée via sa méthode resolve() .
- Cette méthode retourne les données sous forme soit d'Observable, soit de Promise, ou "en vrac".
- Le resolver est enregistré au niveau de la configuration de routing, et est associé à une clé d'objet.
- Le component cible de la route utilise ensuite l'Observable data de ActivatedRoute pour récupérer les données via cette même clé.
- https://openclassrooms.com/fr/courses/7471281-perfectionnez-vous-sur-angular/7718026-preparez-le-module
Un nouveau feature module ComplexFormModule ;
il doit être lazy-loaded ;
il n'aura qu'une seule route et un seul component :
ComplexFormComponent
; il faut pouvoir y accéder par un lien dans le header ; ce nouveau module aura besoin de deux nouveaux components Material :MatCheckbox
etMatRadio
;
1 - Create new module
ng g m complex-form --routing
2 - Create newpath
inAppRoutingModule
for lazy loading{ path: 'complex-form', loadChildren: () => import('./complex-form/complex-form.module').then(m => m.ComplexFormModule) },
3 - Create new link inHeader
Complex Form
4 - Create new component
ng g c complex-form/components/complex-form
5 - Assign component to the empty route ofComplexFormModule
inComplexFormRoutingModule
const routes: Routes = [ { path: '', component: ComplexFormComponent } ];
6 - ImportSharedModule
inComplexFormModule
to use export shared module 7 - Add service inComplexFormModule
providers
mat-card.main-form
mat-card.form-card*5>mat-card-title