Cross Cutting Concerns in Angular -- Talk at dotnet cologne in Mai 2018

- Sample: https://github.com/manfredsteyer/angular-cross-cutting-dotnet-cologne-2018

- More: http://www.softwarearchitekt.at

Transcript

1. Cross Cutting Concerns in Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Cross Cutting? Often technical requirements Need to be respected all-around Maintainability: Central Implementation
4. Contents • Router Guards • HttpInterceptor • Direktiven
5. Router Guards Page ▪ 5
6. What are Guards? • Services • Can prevent the Activation or Deactivation of a Route Page ▪ 6
7. Guards Result: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
8. Configure Guards Page ▪ 8 const APP_ROUTES: Routes = [ { path: '/flight-booking', component: FlightBookingComponent, canActivate: [AuthGuard], children: [ { path: 'flight-edit/:id', component: FlightEditComponent, canDeactivate: [FlightEditGuard] }, […] ] ]
9. Provider for Guards Page ▪ 9 @NgModule({ providers: [ FlightEditGuard, AuthGuard ], […] }) export class XYModule { }
10. DEMO Page ▪ 10
11. Http- Interceptors
12. Idea • Providing a hook for HttpClient • Modify requests and responses globally • Including Headers, e. g. for Auth. • Parsing Data Formats, like XML • Error Handling • Caching • …
13. Interceptor Chain Logic (HttpRequest) Interceptor Interceptor Request Response
14. DEMO Sending Access Token for Auth Global Error Handler for Auth
15. Directives
16. Warning Directive
17. Goal <button (clickWithWarning)="delete()" warning="really?">
18. Directive @Directive({ selector: '[clickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { […] }
19. Directive @Directive({ selector: '[clickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { @Input() warning: string = 'Are you sure?'; @Output() clickWithWarning = new EventEmitter(); […] }
20. Directive @Directive({ selector: '[clickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { @Input() warning: string = 'Are you sure?'; @Output() clickWithWarning = new EventEmitter(); @HostBinding('class') cssClass: string = 'btn btn-danger'; […] }
21. Directive @Directive({ selector: '[clickWithWarning]' }) export class ClickWithWarningDirective implements OnInit { @Input() warning: string = 'Are you sure?'; @Output() clickWithWarning = new EventEmitter(); @HostBinding('class') cssClass: string; @HostListener('click', ['$event']) handleClick($event): void { if (confirm(this.warning)) { this.clickWithWarning.emit(); } } }
22. DEMO
23. Summary Implement CCC centraly Guards Interceptors Directives
24. Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer