![import { Component, OnInit, Input, Output,
EventEmitter } from '@angular/core';
@Component({
…
})
export class Component1Component implements OnInit {
@Input() data: string[];
@Output() selected = new EventEmitter<string>();
constructor() {}
ngOnInit() {}
onClick(item: string) {
this.selected.emit(item);
}
}
COMPONENT](https://image.slidesharecdn.com/meetup-skillvalue-angular6-180615061247/85/Meetup-SkillValue-Angular-6-Bien-demarrer-son-application-11-320.jpg)
![Organisation intra-app
index.ts imports/exports
index.tsts
import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';
import { Component3Component } from './component3/component3.component';
export const components = [
Component1Component,
Component2Component,
Component3Component
];
export * from './component1/component1.component';
export * from './component2/component2.component';
export * from './component3/component3.component';](https://image.slidesharecdn.com/meetup-skillvalue-angular6-180615061247/85/Meetup-SkillValue-Angular-6-Bien-demarrer-son-application-30-320.jpg)
![Organisation intra-app
index.ts imports/exports
my.module.tsts
import * as fromComponents from './components';
@NgModule({
exports: [
...fromComponents.components,
],
declarations: [
...fromComponents.components,
]
})
export class MyModule {}](https://image.slidesharecdn.com/meetup-skillvalue-angular6-180615061247/85/Meetup-SkillValue-Angular-6-Bien-demarrer-son-application-31-320.jpg)
![Organisation intra-app
Feature module
feature.module.tsts
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { FeatureRoutingModule } from './feature.routing';
import * as fromComponents from './components';
import * as fromContainers from './containers';
import * as fromGuards from './guards';
@NgModule({
imports: [SharedModule, FeatureRoutingModule],
exports: [],
declarations:
[...fromComponents.components, ...fromContainers.containers],
providers: [...fromGuards.guards]
})
export class FeatureModule {}](https://image.slidesharecdn.com/meetup-skillvalue-angular6-180615061247/85/Meetup-SkillValue-Angular-6-Bien-demarrer-son-application-35-320.jpg)
![Organisation intra-app
Feature module
feature.routing.tsts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import * as fromContainers from './containers';
const routes: Routes = [
{ path: '', component: fromContainers.Container1Component
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeatureRoutingModule {}](https://image.slidesharecdn.com/meetup-skillvalue-angular6-180615061247/85/Meetup-SkillValue-Angular-6-Bien-demarrer-son-application-36-320.jpg)
![Organisation intra-app
lazy-loaded features modules
core.routing.tsts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
{ path: '**', redirectTo: 'feature' },
{
path: 'feature',
loadChildren: '../feature/feature.module#FeatureModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: false })],
exports: [RouterModule]
})
export class CoreRoutingModule {}](https://image.slidesharecdn.com/meetup-skillvalue-angular6-180615061247/85/Meetup-SkillValue-Angular-6-Bien-demarrer-son-application-38-320.jpg)
Meetup SkillValue - Angular 6 : Bien démarrer son application
- 1. ANGULAR 6 ARCHITECTURE & ORGANISATION DU CODE Thibault Even - Expert Angular
- 2. ENVIRONNEMENT • Typescript Language • Visual Studio Code • Angular CLI • Plugins pour les projets Angular
- 3. • Angular Language Service • angular2-inline • angular v6 snippets • prettier • Material icon Theme / vscode-icons • tslint • trailing spaces Plugins que j’utilise
- 4. pack de plugins • Extensions packs et essentials packs
- 5. FROM SCRATCH • Modules et composants • Commandes CLI • Architecture des dossiers
- 7. MODULE 1 COMPONENT PIPE/ DIRECTIVE/ GUARDS Modules et composants MODULE 2 MODULE 0 déclaration import export
- 8. DOMAIN MODULE ROUTING MODULE CORE MODULE Import unique dans app.module Mettre tout les .forRoot() des modules tierce SHARED MODULE Import dans tout les features modules Composants et module partagés par les features modules FEATURE MODULE Généralement attaché directement au app.module ou indépendant par lazy-loading Gère toute une partie de l’application : interface + échange de donnée. ex : les commandes de produits Commun à quelques features modules Module en charge d’une fonctionnalité particulière qui regroupe plusieurs components, services… Module chargé de la déclaration des routes Attaché à un feature module, optionnel, le forRoot doit être dans le CoreModule
- 9. COMPONENT CONTAINER Composant chargé de récupérer et diffuser la donnée dans les autres sous-composants En relation avec le state-management ou les services, pas d’input/output Composant pouvant être utiliser dans plusieurs application différentes Ils ne demandent jamais la donnée directement, ils ont des input et output pour les événements à envoyer au composant parent
- 10. import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { Observable } from ‘rxjs'; import { FeatureService } from ‘../../services/feature.service'; import { Users } from '../../models/jsonpldr.model'; @Component({ … }) export class Container1Component implements OnInit { users$: Observable<Users>; constructor(private api: FeatureService) {} ngOnInit() { this.users$ = this.api.getUsers(); } CONTAINER
- 11. import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ … }) export class Component1Component implements OnInit { @Input() data: string[]; @Output() selected = new EventEmitter<string>(); constructor() {} ngOnInit() {} onClick(item: string) { this.selected.emit(item); } } COMPONENT
- 12. Commandes CLI •ng new •ng serve •ng generate •ng build •ng update •ng add
- 13. Commandes CLI : New ng new ng6-project --style=scss
- 14. Commandes CLI : Serve ng serve --port=4200
- 16. Commandes CLI : Generate ng generate component module directive guard pipe service library application
- 17. Commandes CLI : Generate ng generate <schematics> --dryRun L’option dryRun alias -d
- 18. Commandes CLI : Generate ng generate library mysharedlib --prefix=my La nouveauté : library
- 19. Commandes CLI : Build ng build --prod ng build --prod --build-optimizer dist
- 20. Commandes CLI : Update ng update ng update rxjs
- 21. Commandes CLI : Add ng add @angular/material Ajout de la librairie ET intégration dans le code + ajout de générateurs
- 22. Architecture ng6 : Multi App ng generate application mysecondapp
- 23. Commandes CLI : WIKI github.com/angular/angular-cli/wiki
- 24. Architecture angular 6 src (Main app) projects (librairies, sub app) Partage des librairies entre applications, maintenances indépendantes
- 25. Organisation intra-app app core shared app.module.tsts Core / Shared principes
- 26. Organisation intra-app Core Module - unique import, root modules cfg core containers core.module.tsts app app.component.tsts app.component.scss
- 27. Organisation intra-app shared components shared.module.tsts Shared Module - Composants / librairies transverses pipes directives
- 30. Organisation intra-app index.ts imports/exports index.tsts import { Component1Component } from './component1/component1.component'; import { Component2Component } from './component2/component2.component'; import { Component3Component } from './component3/component3.component'; export const components = [ Component1Component, Component2Component, Component3Component ]; export * from './component1/component1.component'; export * from './component2/component2.component'; export * from './component3/component3.component';
- 31. Organisation intra-app index.ts imports/exports my.module.tsts import * as fromComponents from './components'; @NgModule({ exports: [ ...fromComponents.components, ], declarations: [ ...fromComponents.components, ] }) export class MyModule {}
- 32. Organisation intra-app app core shared app.module.tsts Libs folder libs - domain modules directory
- 33. Organisation intra-app app core shared app.module.tsts Domain / Features modules principes feature module
- 35. Organisation intra-app Feature module feature.module.tsts import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { FeatureRoutingModule } from './feature.routing'; import * as fromComponents from './components'; import * as fromContainers from './containers'; import * as fromGuards from './guards'; @NgModule({ imports: [SharedModule, FeatureRoutingModule], exports: [], declarations: [...fromComponents.components, ...fromContainers.containers], providers: [...fromGuards.guards] }) export class FeatureModule {}
- 36. Organisation intra-app Feature module feature.routing.tsts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import * as fromContainers from './containers'; const routes: Routes = [ { path: '', component: fromContainers.Container1Component } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class FeatureRoutingModule {}
- 37. Organisation intra-app lazy-loaded features modules app.component.htmlhtml <router-outlet></router-outlet>
- 38. Organisation intra-app lazy-loaded features modules core.routing.tsts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; export const routes: Routes = [ { path: '**', redirectTo: 'feature' }, { path: 'feature', loadChildren: '../feature/feature.module#FeatureModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { useHash: false })], exports: [RouterModule] }) export class CoreRoutingModule {}
- 39. Rxjs 6 refactoring des imports // CREATION - RECREATION import { Observable, throwError, BehaviorSubject } from ‘rxjs'; // OPERATORS import { catchError, tap, map, retry, delay } from 'rxjs/operators';
- 40. Rxjs 6 using .pipe getUsers() { return this.httpClient .get<Users>(this.api_url + '/users', { observe: 'response' }) .pipe( delay(2000), tap(response => console.log(response)), map(response => response.body), retry(2), catchError((error: HttpErrorResponse) => throwError(error)) ); }
- 41. Pour aller plus loin • https://github.com/ngrx/platform - State management - Redux pattern • https://docs.nestjs.com/ - Nodejs framework inspiré par Angular • https://www.apollographql.com/ - GraphQL client pour angular et bien d’autres • http://reactivex.io/rxjs/manual/overview.html#choose-an- operator - Aide interactive pour choisir le bon operator Rxjs • angular universal / angular PWA / angular Element / Electron / Cordova /Capacitor
- 42. MERCI A bientôt ! Thibault Even - Expert Angular @thibault_ev www.linkedin.com/in/thibault-even-543b3520