Angular Basics II

These slides introduce you to Angular.

The corresponding workshop was given at Angular Meetup Leipzig:
https://www.meetup.com/de-DE/Angular-Meetup-Leipzig/events/260636253/

Description (German)
---------------------------

Angular Ramp Up ist eine zweiteilige Workshop-Reihe, in der wesentliche Techniken über Angular vermittelt werden, um dich fit für das nächste Projekt zu machen.
Du lernst die wichtigen Elemente von Angular kennen und wendest sie direkt in deinem eigenen Testprojekt an.

Folgende Techniken werden wir gemeinsam erlernen und ausprobieren:

* Was ist Angular?
* Was ist TypeScript?
* Wieso ist Angular so beliebt?
* Was sind Components?
* Wie kommunizieren Components untereinander?
* Dependency Injection in Angular
* Wie nutze ich HTTP-Backends?
* Wie baue ich eine solide Navigation zwischen mehreren Views auf?

Rock On & Code 😎

Transcript

1. co-IT.eu GmbH Inspire To Change Gregor Woiwode @GregOnNet Angular Solid Foundations Part 2
2. Angular Conference ng-de.org Berlin • 30 - 31 August, 2019
3. Components RECAP
4. Purpose C O M P O N E N T S To g g le All Prepare Workshop Hold the Workshop ToDo App Representation & Interaction
5. Purpose C O M P O N E N T S Representation
6. Purpose CO M P O N E N T S Interaction
7. Think in features N G U L A R T o g g le All Prepare Workshop Hold the Workshop ToDo App Header ToDos
8. Think in small building blocks N G U L A R T o g g le All Prepare Workshop Hold the Workshop ToDo App Title ToDo Un-/ Complete
9. Group wisely NGULAR T o g g le All Prepare Workshop Hold the Workshop ToDo App List Item
10. Declaration COMPONENTS import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-todo', "// ""... }) export class TodoComponent { @Output() update = new EventEmitter(); }
11. Start Application C L I & B a c ke n d npm start -- --open Watch out! npm start An gu l a r C l i e n t Ba cke n d
12. HANDS ON Create a new Todo
13. Component Tree COMPONENTS AppComponent TodoComponent TodoQuickAddComponent (create)
14. A ToDo Component ANGULAR CLI ng generate component todo-quick-add
15. Instrument Forms COMPONENTS FormsModule We will use Angular‘s Forms API. That‘s why the Corresponding Module needs to be imported. @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} a p p.m od u l e.t s
16. Create a Todo COMPONENTS <form (ngSubmit)="emitCreate(text)"> <input type="text" #text /> <button type="submit"> CREATE </button> </form> t o d o -q u i ck -a dd . co m p o n e n t .h t m l export class TodoQuickAddComponent { @Output() create = new EventEmitter<Todo>(); emitCreate( textControl: HTMLInputElement ) { this.create.emit({ text: textControl.value, isComplete: false }); } } t o d o -q u i ck -a d d . co m p o n e n t .t s
17. Create a Todo COMPONENTS app.component.html <app-todo-quick-add (create)="createTodo($event)"> </app-todo-quick-add> <app-todo [todo]="todo” ... (create)="..." Take the created todo & add it to the list ⚠ contains the todo
18. Create a Todo COMPONENTS app.component.ts createTodo(todo) { this.todos = [""...this.todos, todo]; } Spread Operator ""... Destructure a list and create a new one
19. Type safety through interfaces Ty p e S c r i p t export interface TodoDraft { title ?: string; text: string; isComplete: boolean; } optional property
20. Add Type safety ANGULAR CLI ng generate interface models/todo-draft
21. HANDS ON Add custom types
22. Think in features N G U L A R Features are organized in modules, @NgModules.
23. Think in features N G U L A R Where are our @NgModules? What is our feature?
24. Generate @NgModule ANGULAR CLI ng generate module todos
25. NgModule Basics COMPONENTS @NgModule({ declarations: [], exports: [], imports: [CommonModule] }) export class TodosModule {} R e g i s t e r C o m p o n e n t s S h a re C o m p o n e n t s I n s t r u m e n t M o d u l e s
26. HANDS ON Tidy up
27. Services N G U L A R ToDosComponent TodoComponent TodoQuickAddComponent Service BACKEND Load Aggregate Transform Filter
28. Generate Service ANGULAR CLI ng generate service todos/lib/todos
29. @Injectable for @Component Service @Injectable({ providedIn: 'root' }) export class TodosService { ... } @Component({ "/* ""..."*/ }) export class TodosComponent implements OnInit { todos: TodoDraft[]; constructor( private service: TodosService ) {} ngOnInit(): void { this.tasks = this.service.getAll(); ); } t odos.ser vi ce .t s t o do s. co m p o n e n t .t s
30. HANDS ON Handle todos in the service
31. HTTP NGULAR Asynchronous operations are handled with RxJs.
32. RxJs impact on Angular NGULAR Http Forms Animations Routing
33. Motivation to become an RxJS expert N G U L A R Learn the RxJs-API and you can master each Angular module.
34. Observable N G U L A R Learn the RxJs-API and you can master each Angular module.
35. Instrument Forms COMPONENTS HttpClientModule We will use Angular‘s HttpClient to interact with an HTTP-API. @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, FormsModule, HttpClientModule, TodosModule ], bootstrap: [AppComponent] }) export class AppModule {} a p p.m od u l e.t s
36. Usage of HttpClient HTTP private endpoint = 'http://localhost:3000/tasks'; constructor( private http: HttpClient ) {} getAll(): Observable<Todo[]> { return this.http .get<Todo[]>(this.endpoint); } ngOnInit(): void { "// TODO: Handle subscription this.todosService.getAll() .subscribe( todos "=> this.todos = todos, error "=> "/* error occured "*/ () "=> "/* stream completes "*/ ); } t odos.ser vi ce .t s t o do s. co m p o n e n t .t s
37. HANDS ON Get reactive with HtppClient
38. Recapitulation COMPONENTS Features are organized with NgModules Use export to share a Component with other Modules Declare types explicitly with Interfaces Services set up data to be used by the Component Subscribe and unsubscribe from Observables
39. co-IT.eu GmbH Inspire To Change @GregOnNet Thank you for listening speakerdeck.com/gregonnet/angular-basics-ii
40. Sources CREDITS - Keynote AngularConnect 2018 by Igor Minar - Photos from Unsplash by - Dan Gold - Yoal Desurmont - angular.io