Slide 1

Slide 1 text

co-IT.eu GmbH Inspire To Change Gregor Woiwode @GregOnNet Angular Solid Foundations Part 2

Slide 2

Slide 2 text

Angular Conference ng-de.org Berlin • 30 - 31 August, 2019

Slide 3

Slide 3 text

Components RECAP

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Purpose C O M P O N E N T S Representation

Slide 6

Slide 6 text

Purpose CO M P O N E N T S Interaction

Slide 7

Slide 7 text

Think in features N G U L A R T o g g le All Prepare Workshop Hold the Workshop ToDo App Header ToDos

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Group wisely NGULAR T o g g le All Prepare Workshop Hold the Workshop ToDo App List Item

Slide 10

Slide 10 text

Declaration COMPONENTS import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-todo', "// ""... }) export class TodoComponent { @Output() update = new EventEmitter(); }

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

HANDS ON Create a new Todo

Slide 13

Slide 13 text

Component Tree COMPONENTS AppComponent TodoComponent TodoQuickAddComponent (create)

Slide 14

Slide 14 text

A ToDo Component ANGULAR CLI ng generate component todo-quick-add

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Create a Todo COMPONENTS CREATE 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(); 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

Slide 17

Slide 17 text

Create a Todo COMPONENTS app.component.html

Slide 18

Slide 18 text

Create a Todo COMPONENTS app.component.ts createTodo(todo) { this.todos = [""...this.todos, todo]; } Spread Operator ""... Destructure a list and create a new one

Slide 19

Slide 19 text

Type safety through interfaces Ty p e S c r i p t export interface TodoDraft { title ?: string; text: string; isComplete: boolean; } optional property

Slide 20

Slide 20 text

Add Type safety ANGULAR CLI ng generate interface models/todo-draft

Slide 21

Slide 21 text

HANDS ON Add custom types

Slide 22

Slide 22 text

Think in features N G U L A R Features are organized in modules, @NgModules.

Slide 23

Slide 23 text

Think in features N G U L A R Where are our @NgModules? What is our feature?

Slide 24

Slide 24 text

Generate @NgModule ANGULAR CLI ng generate module todos

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

HANDS ON Tidy up

Slide 27

Slide 27 text

Services N G U L A R ToDosComponent TodoComponent TodoQuickAddComponent Service BACKEND Load Aggregate Transform Filter

Slide 28

Slide 28 text

Generate Service ANGULAR CLI ng generate service todos/lib/todos

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

HANDS ON Handle todos in the service

Slide 31

Slide 31 text

HTTP NGULAR Asynchronous operations are handled with RxJs.

Slide 32

Slide 32 text

RxJs impact on Angular NGULAR Http Forms Animations Routing

Slide 33

Slide 33 text

Motivation to become an RxJS expert N G U L A R Learn the RxJs-API and you can master each Angular module.

Slide 34

Slide 34 text

Observable N G U L A R Learn the RxJs-API and you can master each Angular module.

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Usage of HttpClient HTTP private endpoint = 'http://localhost:3000/tasks'; constructor( private http: HttpClient ) {} getAll(): Observable { return this.http .get(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

Slide 37

Slide 37 text

HANDS ON Get reactive with HtppClient

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

co-IT.eu GmbH Inspire To Change @GregOnNet Thank you for listening speakerdeck.com/gregonnet/angular-basics-ii

Slide 40

Slide 40 text

Sources CREDITS - Keynote AngularConnect 2018 by Igor Minar - Photos from Unsplash by - Dan Gold - Yoal Desurmont - angular.io