Angular Training

Rafał Brzoska

Bottega IT Minds

Rafał Brzoska

Senior Software Developer @ Future Processing
Angular Trainer @ FutureProcessing & Bottega IT Minds
Speaker (ngPoland, 4developers, FDD)
Angular, JS, TS

Agenda

Wprowadzenie
Komponenty, Szablony komponentów,
Dyrektywy wbudowane
Pipes (filtry)
Routing
Serwisy
HttpClient
RxJS
Formularze( Template driven, Reactive )
Dependency Injection
Moduły (NgModule) i architektura
Testy
Własne dyrektywy i dynamiczne komponenty
Zarządzanie stanem
Biblioteki

Imię i nazwisko
Aktualnie pracuję na stanowisku … i zajmuję się …
Mam doświadczenie w …
Moja znajomość zagadnień z agendy szkolenia …
Spodziewam się, że w trakcie szkolenia …
{ będę przeprowadzony/na | będę podejmować decyzje |
będziemy uczyć się od siebie wzajemnie w grupie | będziemy konfrontować podejścia |
będziemy „układać puzzle” | będziemy „budować z klocków ” }
Oczekuję, że po szkoleniu …
{ posiądę metody działania | pojawi się wiele nowych pomysłów |
posiądę solidne podstawy }
Oczekuję od prowadzącego...
{ będzie towarzyszem | będzie ukazywał możliwości | będzie umożliwiał wgląd |
będzie podawał przykłady | będzie pomagał w odkryciach |
będzie pomagał coś stworzyć | będzie prowadził Eksperyment }
Moje główne pytanie: Jak? Co? Po co? Kiedy? Dlaczego?

Wprowadzenie

Angular 1.x => AngularJS
Angular 2+ => Angular
Semantic Versioning
TypeScript
RxJS
Change Detection (Zone.js)
Komponenty
Ogromny ekosystem modułów utrzymywany przez Google
Angular CLI (Schematics!!)
Wsparcie dla PWA, SSR, Mobile (NativeScript), WebWorkers, Material, CDK

Typescript

Typowanie
Inferencja typów
ES6...ESNext
Rozszerzone Klasy
Dekoratory
Wsparcie IDE

Typy podstawowe

string
boolean
number
array
enum
tuple
any
void
null i undefined
never

Typy zaawansowane

interfejsy
kombinacje typów
typy generyczne
inferencja
duck typing
type guards

Interface

interface MyCustomType {
    name: string;
}

interface TestType {
    testNum: number;
    testType: MyCustomType;
}

interface ClassInterface {
    myFn(): void;
    mySecondFunction(num: number): string;
}

Class

class Greeter {
    greeting: string;
    
    constructor(message: string, private userId: number) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world", 1);

Type

type C = { a: string, b?: number }

type stringOrNumber = string | number // Union Type

Generics

function myGenericFunction<T>(arg: T): T {
    return arg;
}

class CustomList<T> {
    private list: T[];

    push(element: T) { list.push(element) };

    getELements(): T[] {
        return this.list;
    }
}

Angular CLI

Schematics
Aplikacje
Biblioteki
Preprocesory CSS
AOT
Inteligentne generowanie kodu
...

Angular CLI

ng new
ng generate
ng serve
ng build
ng test
ng add
ng update
ng deploy

ng generate

component (c)
directive (d)
service (s)
module (m)
guard (g)
pipe, class, interface ...
--inline-style
--inline-template
--no-spec
--flat
--routing

Budowa Aplikacji

Drzewo Komponentów

Root

Komponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component

...

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  // template: '<div></div>',
  // styles: [`.btn { color: red }`],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  providers: [DataService]
})
...

NgModule

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Routing

Root Routes, Child Routes
Route (path, component, redirect, data)
<router-outlet>
Router Links
Router Services (ActivatedRoute, ActivatedRouteSnapshot)
Guards (CanActivate, CanDeactivate, CanLoad, Resolve…)
Lazy Loading (loadChildren: lazy loaded module)

Routing

const routes: Routes = [
  { path: 'home', component: HomeComponent }
];

...
imports: [ RouterModule.forRoot(routes) ],

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/kontakt">Kontakt</a>
  <a [routerLink]="['/about']">About</a>
</nav>


<router-outlet></router-outlet>

AppModule

AppComponent/NavigationComponent

Szablony

<p> {{ title }} </p>

<my-component [myInput]="inputData"></my-component>

<my-component (myOutput)="outputHandler($event)"></my-component>

<h1 #myTemplateReference></h1>

Interpolacja

Input - property binding

Output - event binding

template reference variable

Input/Output

@Component({
  selector: 'child-component',
  template: `
    <h3>{{user.name}} says:</h3>
    <p>I, {{user.name}}, am at your service, {{masterName}}.</p>
    <button (click)="handleClick()">Say Hello</button>
  `
})
export class ChildComponent {
  @Input() user: User;
  @Input('master') masterName: string;
  @Output() sayHello = new EventEmitter<string>();

  handleClick() {
     this.sayHello.emit(this.user.name)
  }
}

ChildComponent

Input/Output

@Component({
  selector: 'ParentComponent',
  template: `
    <child-component
      [user]="user"
      [master]="master"
      (sayHello)="handleSayHello($event)">
    </child-component>
  `
})
export class ParentComponent {
  user = { name: 'Alojzy' };
  master = 'Majster';
  handleSayHello(name: string) { alert(name) }
}

ParentComponent

Lifecycle Hooks

Dyrektywy

ngIf
ngFor
ngClass
ngSwitch

ngIf

<div *ngIf="show; else elseBlock">Pokaz to jesli show = true</div>

<ng-template #elseBlock>Pokaż jesli show = false</ng-template>


<div *ngIf="warunek">...</div>

<ng-template [ngIf]="warunek"><div>...</div></ng-template>

*ngIf

[ngIf]

* przy dyrektywie dodaje <ng-template> i upraszcza notacje

ngFor

<ul>
  <li *ngFor="let user of users">{{user.name}}</li>
</ul>

<ng-template ngFor let-user 
             [ngForOf]="users" 
             [ngForTrackBy]="trackById">
  <div {{user.name}}</div>
</ng-template>

* przy dyrektywie dodaje <ng-template> i upraszcza notacje

ngClass

<element [ngClass]="'className1 className2'">...</element>

<element [ngClass]="['className1', 'className2']">...</element>

<element 
  [ngClass]="{'className1 ': true, 'className2 ': true, 'className3 ': false}">
  ...
</element>


<div [class.isOnline]="isOnline">Status</div>

<div [style.color]="isOnline ? 'red' : 'green'">Status</div>

Attribute binding

ngSwitch

<container [ngSwitch]="myNumber">
  <element *ngSwitchCase="1"> jeden </element>
  <element *ngSwitchCase="2"> dwa </element>

  <element *ngSwitchDefault>jakiś numer</element>
</container>

Pipe

AsyncPipe
DatePipe
JsonPipe
LowerCasePipe, UpperCasePipe, TitleCasePipe, SlicePipe
CurrencyPipe, DecimalPipe, PercentPipe
...

<pre> {{ myObject | json }} </pre>

<p> {{ jakasData | date | uppercase }} </p>

<p> {{ myNumber | currency:'USD' }} </p>

Serwisy

Dekorator @Injectable
Domyślnie jako Singleton
Globalny dla całej aplikacji (providedIn: 'root')
Konieczny wpis do 'providers' w NgModule

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

Serwisy

class MyComponent {
  users: User[];

  constructor(private userService: UserService) { }

  someFunction() { this.users = this.userService.getUsers() }
}

HttpClient

// import in AppModule
import: [... HttpClientModule]

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyDataService {
  constructor(private http: HttpClient) { }

  getMyData() {
    this.http.get('http://url...')
  }
}

AppModule

Data Service

RxJS

Observable, Observer, Subject
Obsługuje Strumień danych
Cancel, Retry
fromEvent, fromPromise, toPromise
Reactive Forms
Angular HTTP Client
Cold vs Hot Observable
Ponad 100 operatorów

Observable

Funkcja która przekazuje observerowi dane ze strumienia

let myObservable = new Observable( observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

i udostępnia metodę subscribe w której przekazujemy observera

myObservable.subscribe(observer)

Observer

Obiekt posiadający 3 metody: next, complete, error

myObservable.subscribe({
  next: () => ... ,
  error: () => ... ,
  complete: () => ...
});

lub poprostu zestaw tych metod podawanych osobno

myObservable.subscribe(
() => ..., // next
() => ..., // error
() => ...  // complete
);

Subject

Jest Observablem

let mySubject = new Subject();
mySubject.subscribe(observer);

i jednocześnie jest observerem

mySubject.next(1);
mySubject.complete();
mySubject.error(error);

Cold vs Hot Observable

Cold - Observable 'produkuje' dane i przy każdym subscribe podaje ten sam strumień

new Observable( observer => {
  observer.next(1);
  observer.next(2);
});

Hot - Observable reaguje na zewnętrzne źródło danych (np Event) i zamienia go w strumień


let element = document.getElementById('myButton');

const myHotObservable = new Observable(obs => 
  element.addEventListener('click', e => obs.next(e))
)

myHotObservable.subscribe(x => console.log(x));

Cold vs Hot Observable

Cold - generuje dane tylko po subscribe

Hot - generuje dane bez względu na to czy ktoś je zasubskrybował czy nie

Cold - może mieć jednocześnie tylko jednego observera i jeden subscribe (unicast)

Hot - może mieć kilku observerow i kilka subscribe (multicast)

Angular Observable

httpClient
Router.events
AbstractControl.valueChanges
ActivatedRoute.params
EventEmitter (@Output)

Formularze

Template Driven Forms
Reactive Forms

Template Driven Forms

import { FormsModule }   from '@angular/forms';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import 
  ],
....
})
export class AppModule { }

Template Driven Forms

 <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
      <input name="myName" ngModel required #myName="ngModel">
      <input name="age" ngModel>
      <button>Submit</button>
</form>

<p>Name value: {{ myName.value }}</p>
<p>Name valid: {{ myName.valid }}</p>
<p>Form value: {{ myForm.value | json }}</p>
<p>Form valid: {{ myForm.valid }}</p>

https://github.com/angular/angular/blob/6.1.9/packages/forms/src/directives/ng_form.ts#L27-L193

Szablon + dyrektywa NgForm

Reactive Forms

import { ReactiveFormsModule }   from '@angular/forms';
 
@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule // <-- import 
  ],
....
})
export class AppModule { }

Reactive Forms

export class UserFormComponent {
  userForm = new FormGroup({
    myName: new FormControl(''),
    age: new FormControl(''),
  });
}

FormControl & FormGroup

export class UserFormComponent {
  constructor(private fb: FormBuilder){}
  userForm = fb.group({
    myName: '',
    age: '',
  });
}

FormBuilder

Reactive Forms

<form [formGroup]="userForm">
  
  <label>
    Name:
    <input type="text" formControlName="myName">
  </label>

  <label>
    Age:
    <input type="number" formControlName="age">
  </label>

</form>

Szablon

NgModule

Feature Module	Declarations	Providers	Exports	Imported by

Domain	Yes	Rare	Top component	Feature, AppModule
Routed (Lazy Loaded)	Yes	Rare	No	None
Routing	No	Yes (Guards)	RouterModule	Feature (for routing)
Service (Core)	No	Yes	No	AppModule
Shared (Widget)	Yes	Rare	Yes	Feature

NgModule

Module Type	Declarations	Providers	Exports	Imported by

Domain (Feature)	Yes	Rare	Top component	Feature, AppModule
Routed (Lazy Loaded Feature)	Yes	Rare	No	None
Routing	No	Yes (Guards)	RouterModule	Feature (for routing)
Service (Core)	No	Yes	No	AppModule
Shared (Widget)	Yes	Rare	Yes	Feature

Podstawy Angulara

By Rafał Brzoska

Angular Training

Agenda

Wprowadzenie

Typescript

Typy podstawowe

Typy zaawansowane

Interface

Class

Type

Generics

Angular CLI

Angular CLI

ng generate

Budowa Aplikacji

Drzewo Komponentów

Komponent

@Component

NgModule

Routing

Routing

Szablony

Input/Output

Input/Output

Lifecycle Hooks

Dyrektywy

ngIf

ngFor

ngClass

ngSwitch

Pipe

Serwisy

Serwisy

HttpClient

RxJS

Observable

Observer

Subject

Cold vs Hot Observable

Cold vs Hot Observable

Angular Observable

Formularze

Template Driven Forms

Template Driven Forms

Reactive Forms

Reactive Forms

Reactive Forms

NgModule

NgModule

Podstawy Angulara

More from Rafał Brzoska