Presentation prepared by Tomasz Sułkowski

2. Kwestie techniczne
organizacja szkolenia

3. • Prowadzący szkolenie
• Tomasz Sułkowski
• Trener IT
• FrontEnd Engineer
• Cel i plan szkolenia
• Obowiązki bieżące
• Pytania, dyskusje, potrzeby
• Elastyczność zagadnień

4. Narzędzia

5. "Node Package Manager"
• system zarządzania zależnościami dla server-side js i client-side js
• zależności opisywane z dokładnością do wersji w pliku package.json
(nowy projekt tworzymy poleceniem npm init)
• npm install
- instaluje pakiety, których jeszcze nie ma w projekcie
• npm update
- sprawdza, czy istnieją nowsze wersje pakietów i instaluje
• npm install nazwa-pakietu --save lub --save-dev
- instaluje pakiet, dodaje go do package.json
przydatne skróty:
npm init -y , npm i -S , npm i -D

6. ECMAScript 6
ECMAScript 2015

7. ECMAScript 2015
• Kolejna (po ECMAScript 5) wersja standardu JavaScript
• Największe dotychczas rozwinięcie tego języka
• Od 2015 aktualizacje standardu będą wydawane co roku
• ECMAScript 2016 jest znacznie mniejszą ewolucją
• 5 etapów do implementacji propozycji:
Strawman (0) –> Proposal (1) –> Draft (2) –> Candidate (3) –> Finished (4)

8. ES2015 - wsparcie
http://kangax.github.io/compat-table/es6

9. ES2015 - narzędzia
• Kod ECMAScript 2015 możemy transpilować
dla starszych przeglądarek
• Do wyboru: Traceur, TypeScript, Babel
• Warto:
• szybki rozwój js, więcej możliwości już dziś, mniej
boilerplate code, ...
• „Transpilers are here to stay”

10. ES2015 - arrow functions
// Domyślnie - zwraca wyrażenie
var odds = myArr.map(v => v + 1);
var nums = myArr.map((v, i) => v + i);
var pairs = myArr.map(v => ({even: v, odd: v + 1}));
// Deklaracje umieszczamy w klamrach
nums.forEach(v => {
if (v % 5 === 0) fives.push(v);
});
// Leksykalne this
var bob = {
_name: "Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
}

11. ES2015 - klasy
class Student extends Person {
constructor(name, age, major) {
super(name, age);
this.major = major;
}
greet(greeting) {
console.log(greeting, this.name);
}
get year() {
return (new Date()).getFullYear() - this.age;
}
set age(age) {
this.age = parseInt(age);
}
static defaultAge() {
return 18;
}

12. ES2015 - let, const
function f() {
let x;
{
// let i const mają zasięg blokowy
const x = "sneaky";
// const nie może zmienić referencji
x = "foo";
}
// błąd, nie można ponownie zdefiniować
let x = "inner";
}

13. ES2015 - moduły
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
export default var name = "Math module";
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import name from "lib/math";
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

14. TypeScript

15. TypeScript
• Superset ECMAScrtipt 2015
• … z elementami ES2016 i 2017
• … oraz z silnym typowaniem
• Konieczna jest transpilacja (do ES2015, ES5 lub ES3)
• Błędy w typach wyłapywane na etapie kompilacji i przez IDE
• Instalacja: npm i -g typescript
• Kompilacja: tsc my-app.ts
• Linting: npm i -D tslint

16. TypeScript: użycie z bibliotekami js
• Możemy korzystać z zewnętrznych bibliotek bez potrzeby
ich modyfikacji
• Potrzebujemy definicji ich interfejsów
• Przechowujemy je w plikach *.d.ts
• Publikowane pliki definicji dla popularnych bibliotek
instalujemy za pomocą npm

17. TypeScript: typy
typ: przykładowe wartości:
boolean true, false
number liczby, Infinity, NaN
string znaki, ciągi znaków
[] tablice innych typów, np. number[], boolean[]
{} obiekt
undefined nie zdefiniowany

18. TypeScript: typy
typ: przykładowe wartości:
enum wylistowanie, np. { Admin, Publisher, User }
any dowolny typ
void nic
-
w przypadku braku określenia typu,
TypeScript może się go "domyślić" (type inference)

19. TypeScript: klasy
class Person {
dateOfBirth: number; // publiczna własność
private verified: boolean; // prywatna własność
constructor(
name: string, // definicja parametru
public city: string, // i publicznej własności
age?: number // parametr opcjonalny
) {
/* ... */
}
}

20. Angular 4

21. Moduły

22. @NgModule
• Narzędzie do organizacji struktury aplikacji
• Zawierają powiązane ze sobą komponenty, dyrektywy i pipes
• Wszystkie podstawowe funkcjonalności Angulara są zawarte
w modułach (FormsModule, HttpModule, RouterModule)
• Mogą być lazy- lub eager loaded
• Aplikacja zawiera jeden główny moduł, który służy do jej
wystartowania (bootstrap) i importuje pozostałe moduły
• Deklarujemy jako klasę z dekoratorem @NgModule

23. @NgModule
interface NgModule {
providers : Provider[]
lista usług dostępnych w danym module
declarations : Array<Type<any>|any[]>
lista komponentów, dyrektyw i pipes dostępnych w danym module
exports : Array<Type<any>|any[]>
lista komponentów, dyrektyw i pipes, które moduł udostępnia na zewnątrz
imports : Array<Type<any>|ModuleWithProviders|any[]>
lista innych modułów, które eksportują potrzne nam rzeczy
bootstrap : Array<Type<any>|any[]>
root component modułu - główny komponent głównego modułu
}

24. Bootstrapping the app
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }
from '@angular/platform-browser-dynamic';
@NgModule({
imports: [ BrowserModule ]
})
export class AppModule { }
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

25. Komponenty

26. "Komponent kontroluje wycinek obszaru ekranu,
który możemy nazwać widokiem i definiuje
reużywalne bloki składowe UI w aplikacji."
• Podstawowa koncepcja aplikacji w Angular 2
• Cała aplikacja jest drzewem komponentów
TodoApp
TodoApp
TodoForm
TodoItem
TodoItem
TodoItem

27. Komponent
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `<div>Hello my name is {{name}}.
<button (click)="greet()">Greet</button></div>`
})
export class MyComponent {
constructor() {
this.name = 'Max'
}
greet() {
console.log('My name is', this.name)
}
}

28. @Component({
selector: 'todo-input',
template: '...'
})
export class Hello {
@Input() item: MyTodoType;
}
// lub:
@Component({
selector: 'todo-input',
inputs: ['item'],
template: '...'
})
export class Hello {
item: MyTodoType;
}
Komponent: komunikacja "do"
// przekazywanie przez zmienną:
<todo-input [item]="myItem"></todo-input>
// przekazywanie wartości bezpośrednio
<todo-input item="Kupić chleb"></todo-input>

29. Komponent: komunikacja "z" - zdarzenia
<todo-input (completed)="saveProgress(item)"></todo-input>
// alternatywna składnia - dlatego nie prefixujemy zdarzeń "on"
<todo-input on-completed="saveProgress(item)"></todo-input>
// lub:
@Component({
selector: 'todo-input',
outputs: ['completed'],
....
@Component({
selector: 'todo-input',
template: '...'
})
export class Hello {
@Output() completed:
EventEmitter<boolean> = new EventEmitter<boolean>();
}

30. Komponent: komunikacja w obie strony
<input [ngModel]="name" (ngModelChange)="name=$event">
// Skrócony zapis:
<input [(ngModel)]="name">
• Połączenie komunikacji "z" i "do"
• Wykorzystujemy do tego dyrektywę ngModel
[(ngModel)]

31. Używanie komponentów
• Aby móc wykorzystać komponent w szablonie innego
komponentu, należy dodać go do listy używanych dyrektyw
• a w celu użycia w innych modułach - wyeksportować
@NgModule({
declarations: [
TodoInputComponent,
TodoListComponent,
TodoComponent
],
imports: [ ],
exports: [ TodoComponent ]
})
class MySharedModule {}

32. Dyrektywy

33. @Directive
• Dyrektywa modyfikuje DOM* zmieniając jego wygląd
lub zachowanie
• W Angular wyróżniamy 3 rodzaje dyrektyw:
1. Komponenty - dyrektywy z szablonami
2. Dyrektywy atrybutowe - zmieniają zachowanie
komponentu/elementu ale nie wpływają na jego szablon
3. Dyrektywy strukturalne - zmieniają zachowanie
komponentu/elementu przez modyfikację jego szablonu

34. Dyrektywy atrybutowe
<div [ngStyle]="{'font-size': mySize+'px'}">...</div>
<div [ngStyle]="{'font-size.px': mySize}">...</div>
<div [ngStyle]="myStyle">...</div>
• ngStyle:
<div [ngClass]="'first second'">...</div>
<div [ngClass]="['first', 'second']">...</div>
<div [ngClass]="{first: true, second: -1, third: 0}">...
• ngClass:

35. Dyrektywy strukturalne
<template [ngIf]="condition">
<div>{{ hero }}</div>
</template>
• Służą do modyfikacji struktury DOM
- dodawania i usuwania elementów
// Skrócony zapis:
<div *ngIf="completed"> ✓ </div>

36. Dyrektywy strukturalne
<div *ngFor="let item of todoList; let i = index"> ... </div>
• Wbudowane dyrektywy strukturalne:
<div *ngIf="completed"> ✓ </div>
<div [ngSwitch]="item.status">
<p *ngSwitchCase="'completed'"> Completed <p>
<p *ngSwitchCase="'in-progress'"> Working on it <p>
<p *ngSwitchDefault="'in-progress'"> Working on it <p>
</div>
dostępne wartości: index, first, last, even, odd

37. Usługi

38. Wstrzykiwanie zależności
Klasę rozszerzoną dekoratorem (np. @Injectable)
@Injectable()
class TodosService {
constructor() {}
}
class TodoItemComponent {
constructor(ts: TodosService) {} // skrócony zapis
// constructor(@Inject(TodosService) ts) {} // pełen zapis
}
… i zarejestrowaną jako provider
… możemy wstrzyknąć do konstruktorów innych klas
@NgModule({
providers: [
TodoService,

39. Wstrzykiwanie zależności - Singletons?
• Domyślnie mechanizm DI zwraca singletony
• Możemy jednak utworzyć więcej iniektorów
• Uzyskując, analogicznie jak w przypadku komponentów, strukturę
drzewiastą
@Component({
providers: [Todos]
})
• Komponent, który ma zdefiniowane w ten sposób usługi,
nie będzie szukał ich instancji wyżej w drzewie komponentów,
tylko powoła nowe

40. Routing

41. Routing: definicja
• Routing (dostępny z '@angular/router') dostarczamy do aplikacji
jako ModuleWithProviders
• Przekazujemy do niego tablicę Route Definition Object
export const routing: ModuleWithProviders =
RouterModule.forRoot(appRoutes);
const appRoutes = [
{path: '', component: HomePageComponent},
{path: 'users/:id', component: UserProfileComponent}
]
• gdzie tablica zawiera elementy opisane interfejsem Route

42. Routing: wyświetlanie
• Komponent pasujący do aktualnej ścieżki zostanie załadowany
wewnątrz komponentu RouterOutlet
• Za generowanie adresu na potrzeby linku odpowiada dyrektywa
router-link
@Component({
selector: 'main-app',
template: `<main>
<a [routerLink]="['/Contact']"
routerLinkActive="active">Contact</a>
<div style="border: 1px solid black">
<router-outlet></router-outlet>
</div>
</main>`})

43. Angular 4 Style Guide
• Zestaw wskazówek dotyczących sposobu pisania aplikacji
w Angular 4
• Styleguide dla AngularJS był rozwijany przez społeczność i
dostępny na GitHubie
• Styleguide dla Angular 4 jest mocniej wspierany przez twórców
frameworka i dostępny w ramach oficjalnej dokumentacji
(https://angular.io/docs/ts/latest/guide/style-guide.html)
• Większość uwag to sugestie, warto przeanalizować, czy
odpowiadają naszym potrzebom

44.
Zapoznaj się z ofertą szkoleniową
Podczas naszych szkoleń:
- pracujemy w grupach 4-8 osobowych
- program może być dostosowany do oczekiwań grupy
- rozwiązujemy i odpowiadamy na indywidualne pytania uczestników
- mamy dużo więcej czasu :)
Chcesz wiedzieć więcej?

45.
I odbierz na nie zniżkę w wysokości 35%
• Angular 2 - budowanie nowoczesnych i wydajnych aplikacji
przeglądarkowych
• Budowanie wydajnych i nowoczesnych aplikacji webowych w
oparciu o React, Flux i powiązane technologie
• Efektywne tworzenie aplikacji webowych z wykorzystaniem
AngularJS, HTML5 i JavaScript
Wybierz jedno z poniższych szkoleń