Angular: Komponentenorientierte Webanwendungen

Angular ist das beliebte Single-Page-Application-Framework von Google. Es basiert auf Webtechnologien und läuft daher auf allen Plattformen, auf denen ein Browser ausgeführt werden kann: Das schließt Desktopbetriebssysteme wie Windows, macOS oder Linux, aber auch die mobilen Systeme iOS oder Android mit ein. Angular orientiert sich am bewährten Konzept der Komponentenorientierung. Entwickler aus dem .NET-Umfeld schaffen dank XAML-Hintergrundwissen einen schnellen Umstieg in die Webwelt. Christian Liebel von Thinktecture zeigt Ihnen die Basics der Angular-Entwicklung, damit Sie direkt in ihre Projekte starten können.

Transcript

1. Angular Komponentenorientierte Webanwendungen Christian Liebel @christianliebel Consultant
2. The image part with relationship ID rId12 was not found in the file. The image part with relationship ID rId12 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Raum Pragmatische Microservices-Architekturen mit ASP.NET Core Web APIs, SignalR & Co. Christian Weyer DI, 25. September 2018, 10.30 bis 11.30 Gutenberg 2+3 Serverless-Architekturen: Event-basierte Microservices mit Azure Functions & Co. Christian Weyer DI, 25. September 2018, 11.45 bis 12.45 Gutenberg 2+3 Angular: Komponentenorientierte Web- Anwendungen Christian Liebel DI, 25. September 2018, 14.15 bis 15.15 Zagreb B Progressive Web Apps: Next Step for Web-based Cross- Platform Applications Shmuela Jacobs DI, 25. September 2018, 16.00 bis 17.00 Zagreb B WebAssembly und Blazor: Wie .NET jetzt auch den Browser erobert? Sebastian Gingter, Christian Liebel DI, 25. September 2018, 17.15 bis 18.15 Gutenberg 1
3. Hello, it’s me. Angular Komponentenorientierte Webanwendungen Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain
4. Angular ist das beliebte Single-Page-Application- Framework von Google. Es basiert auf Webtechnologien und läuft daher auf allen Plattformen, auf denen ein Browser ausgeführt werden kann: Das schließt Desktop- Betriebssysteme wie Windows, macOS oder Linux, aber auch die mobilen Systeme iOS und Android mit ein. Angular orientiert sich am bewährten Konzept der Komponentenorientierung. Entwickler aus dem .NET-Umfeld schaffen dank XAML- Hintergrundwissen einen schnellen Umstieg in die Webwelt. Christian Liebel von Thinktecture zeigt Ihnen die Basics der Angular-Entwicklung, damit Sie direkt in ihre Projekte starten können. Angular Komponentenorientierte Webanwendungen Angular SPA Cross-Platform Komponentenorientierung
5. 1. What is Angular? Komponentenorientierte Webanwendungen Angular
6. SPA Framework Cross- Platform Platform- agnostic Open- source What is Angular? Komponentenorientierte Webanwendungen Angular
7. Technical Basis Angular Komponentenorientierte Webanwendungen Angular
8. Application Segmentation UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Angular Komponentenorientierte Webanwendungen Angular
9. Platform-agnostic Angular Angular App Application Layer Rendering Layer Web Worker Server Browser NativeScript … Komponentenorientierte Webanwendungen Angular
10. Versioning Scheme Semantic versioning: MAJOR.MINOR.PATCH • MAJOR: (Possible) breaking change • MINOR: New feature, backwards-compatible • PATCH: Bug fix, backwards-compatible Angular Komponentenorientierte Webanwendungen Angular
11. Release Schedule Time-based release schedule (6 months) • March/April: even version • September/October: odd version • Automated update tooling Deprecation Policy • Compatibility to previous major version (1 year) • Long-Term Supported Version (critical fixes/security patches only) • 4.x (Oct 2017–18, 1.5 years in total) Angular Komponentenorientierte Webanwendungen Angular
12. 2. Why SPA? Komponentenorientierte Webanwendungen Angular
13. Properties • Fat clients (i.e., load everything they need to run during bootstrap) • A change of the view does not lead to a server-side page navigation Single-Page Web Applications (SPA) Komponentenorientierte Webanwendungen Angular
14. Advantages • Very performant • Works offline • No special server requirements (i.e., serving static files is sufficient) Disadvantages • Some logic (i.e., computation- intensive) can only be run on a server (connection required) • Logic is transfered to the client (code can’t be kept secret) Single-Page Web Applications (SPA) Komponentenorientierte Webanwendungen Angular
15. Architecture Single-Page Web Applications (SPA) Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS Komponentenorientierte Webanwendungen Angular
16. Cross-Platform Support Single-Page Web Applications (SPA) JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Cordova Electron Komponentenorientierte Webanwendungen Angular
17. Progressive Web App support out of the box • No app stores anymore! • Web App = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Single-Page Web Applications (SPA) Komponentenorientierte Webanwendungen Angular
18. 3. Angular CLI Komponentenorientierte Webanwendungen Angular
19. Features Extremely easy and fast setup (Almost) no configuration E2E and unit test support out of the box npm install -g @angular/cli Angular CLI Komponentenorientierte Webanwendungen Angular
20. Create a new project ng new myApp cd myApp Serve project ng serve Test project ng test Lint project (“StyleCop”) ng lint Angular CLI Komponentenorientierte Webanwendungen Angular DEMO
21. Cross-Platform Tooling Microsoft Visual Studio Code Microsoft Visual Studio JetBrains WebStorm Notepad vi … Online editor: StackBlitz Angular Komponentenorientierte Webanwendungen Angular CLI
22. 4. Modules Komponentenorientierte Webanwendungen Angular
23. Application Segmentation UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Modules Komponentenorientierte Webanwendungen Angular ≈ Assembly
24. Angular Building Blocks UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Modules Components Directives Pipes High-Level Services Low-Level Services Komponentenorientierte Webanwendungen Angular
25. @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Modules Components Directives Pipes Modules Services Komponentenorientierte Webanwendungen Angular
26. 5. Bindings Komponentenorientierte Webanwendungen Angular
27. UI references a property on the component instance that should be interpolated Or: UI references a method on the component instance that should be called on a certain event Automatically updates UI when the model is updated Keeps presentation and model in sync Data Binding Komponentenorientierte Webanwendungen Angular
28. public void btnCalc_click() { lblVal.Text = value1 + value2; } btnCalc lblVal Komponentenorientierte Webanwendungen Angular
29. {{ Moustache Syntax Komponentenorientierte Webanwendungen Angular
30. Das Ergebnis ist <strong>{{ value1 + value2 }}</strong>. Handlebars Komponentenorientierte Webanwendungen Angular
31. Interpolation Let’s try some bindings! 1. {{ 'hallo' }} 2. {{ 3 }} 3. {{ 17 + 4 }} 4. {{ alert('boom') }} Bindings Komponentenorientierte Webanwendungen Angular DEMO
32. Interpolation Component view (HTML) {{ value }} Component logic (TS) @Component(/* … */) export class AppComponent { public value = 'Hello'; } Bindings Komponentenorientierte Webanwendungen Angular
33. [ ] ( ) More Bindings Komponentenorientierte Webanwendungen Angular
34. Pass data in Bind to a certain property of a DOM node or component/directive Property Binding [ ] Komponentenorientierte Webanwendungen Angular
35. <div [style.backgroundColor]="color">Test</div> Property Binding Komponentenorientierte Webanwendungen Angular DEMO
36. More options Define attributes on a DOM element and bind value <button [attr.aria-label]="'Help'">Help</button> Bind class existance to a certain value <div [class.done]="done">Todo</div> Bind a style property to a certain value <button [style.width.px]="300">I’m 300px wide!</button> Angular Komponentenorientierte Webanwendungen Property Bindings
37. Get data out Bind to a certain event of a DOM node or component/directive Event Binding ( ) Komponentenorientierte Webanwendungen Angular
38. public onClick(): void { alert('Hello!'); } public onMouseMove(): void { console.log('Hello!'); } <button (click)="onClick()" (mousemove)="onMouseMove()">Click me.</button> Event Binding Komponentenorientierte Webanwendungen Angular DEMO
39. Magic value: $event Contains the event arguments <div (click)="onClick($event)"></div> Event Binding ( ) Komponentenorientierte Webanwendungen Angular
40. [( )] Angular Kickstart Two-Way Binding
41. {{ value }} <form> <input type="text" [(ngModel)]="value" name="value"> </form> Angular Kickstart Two-Way Binding DEMO
42. 6. Pipes Komponentenorientierte Webanwendungen Angular
43. UI-related Re-usable Manipulate binding values for the view without changing the underlying value (one-way) {{ value | pipe }} UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Komponentenorientierte Webanwendungen Angular
44. Principle Pipes Value Pipe Transformed Value Komponentenorientierte Webanwendungen Angular ≈ Value Converter
45. Principle Pipes Hello UppercasePipe HELLO Komponentenorientierte Webanwendungen Angular
46. Built-in Pipes • uppercase • lowercase • date • number • percent • currency • json Pipes Komponentenorientierte Webanwendungen Angular
47. Built-in Pipes {{ value | uppercase }} à HELLO // number = 3.14 {{ number | percent }} à 314% {{ number | currency }} à $ 3.14 {{ number | number:'0.5' }} à 3.14159 Pipes Komponentenorientierte Webanwendungen Angular
48. Custom Pipes Create a new pipe: ng generate pipe yell (or: ng g p yell) Pipes Komponentenorientierte Webanwendungen Angular
49. 7. Components Komponentenorientierte Webanwendungen Angular
50. UI-related Re-usable Custom DOM element HTML Template <app-todo></app-todo> UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Komponentenorientierte Webanwendungen Angular
51. Principle Components Input 1 Component Output A Input 2 Output B Input 1 Component Komponentenorientierte Webanwendungen Angular
52. Creating a new component: ng generate component todo (or: ng g c todo) Components Komponentenorientierte Webanwendungen Angular DEMO
53. @Component({ selector: 'app-todo', templateUrl: './todo.component.html', //template: '<strong>inline template</strong>', styleUrls: ['./todo.component.css'] }) export class AppComponent { } Components Komponentenorientierte Webanwendungen Angular
54. <app-todo></app-todo> @Component({ selector: 'app-todo', templateUrl: './todo.component.html', styleUrls: ['./todo.component.css'] }) export class AppComponent { } Components Komponentenorientierte Webanwendungen Angular
55. 8. Input/Output Komponentenorientierte Webanwendungen Angular
56. Bindings for component state/events [ ] ( ) Input/Output Komponentenorientierte Webanwendungen Angular
57. We want to pass arbitrary data to components: <app-todo [todo]="todo"></app-todo> Input Komponentenorientierte Webanwendungen Angular DEMO
58. Component Perspective <app-todo [todo]="todo"></app-todo> @Input() public todo; Input Komponentenorientierte Webanwendungen Angular
59. Property Bindings If you want to bind a static string to a property, you can use a simplified form by leaving out the square brackets. Instead of <p [title]="'test'"></p> Use <p title="test"></p> Angular Komponentenorientierte Webanwendungen Input
60. We want to get informed about custom events: <app-todo (done)="onDone()"></app-todo> Output Komponentenorientierte Webanwendungen Angular
61. Component Perspective <app-todo (done)="onDone($event)"></app-todo> @Output() public done = new EventEmitter<any>(); // done.next(todo); @Output('done') public doneEmitter = new EventEmitter<any>(); Output Komponentenorientierte Webanwendungen Angular DEMO
62. 9. Structural Directives Komponentenorientierte Webanwendungen Angular
63. UI-related Re-usable Manipulate DOM structure <app-todo *myDirective></app-todo> UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Komponentenorientierte Webanwendungen Angular
64. Repeat DOM Node <ul> <li *ngFor="let todo of todos">{{ todo.name }}</li> </ul> Angular Komponentenorientierte Webanwendungen *ngFor
65. Repeat DOM Node <ul> <li>Wash my clothes</li> <li>Tidy up the room</li> <li>Mine bitcoin</li> </ul> Angular Komponentenorientierte Webanwendungen *ngFor [ "Wash my clothes" "Tidy up the room" "Mine bitcoin" ] DEMO
66. 10. Debugging Komponentenorientierte Webanwendungen Angular
67. Angular Komponentenorientierte Webanwendungen Debugging Breakpoints Stepping Call Stack Watch Immediate Window …
68. Tour of Heroes https://angular.io/tutorial Bonus Material Komponentenorientierte Webanwendungen Angular
69. Thank you for your kind attention. Christian Liebel @christianliebel Consultant Angular Komponentenorientierte Webanwendungen