�ݺ�ߣ

Kwestie techniczne
organizacja szkolenia

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

"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

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)

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

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”

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));
}
}

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;
}

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";
}

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));

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

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

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 zdeﬁniowany

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)

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
) {
/* ... */
}
}

@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

@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
}

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);

"Komponent kontroluje wycinek obszaru ekranu,
który��możemy nazwać widokiem i deﬁniuje
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

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)
}
}

@Component({
selector: 'todo-input',
template: '...'
})
export class Hello {
@Input() item: MyTodoType;
}
// lub: 
@Component({
inputs: ['item'],
template: '...'
})
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>

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({
outputs: ['completed'],
....
@Component({
template: '...'
})
@Output() completed:
EventEmitter<boolean> = new EventEmitter<boolean>();
}

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)]

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 {}

@Directive
• Dyrektywa modyﬁkuje 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 modyﬁkację jego szablonu

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:

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

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

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,

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 zdeﬁniowane w ten sposób usługi,
nie��będzie��szukał ich instancji wyżej w drzewie komponentów,
tylko powoła nowe

Routing: definicja
• Routing (dostępny z '@angular/router') dostarczamy do aplikacji
jako ModuleWithProviders
• Przekazujemy do niego tablicę Route Deﬁnition 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

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>`})

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 oﬁcjalnej dokumentacji  
(https://angular.io/docs/ts/latest/guide/style-guide.html)
• Większość uwag to sugestie, warto przeanalizować, czy
odpowiadają naszym potrzebom

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?

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ń

�ݺ�ߣ

Angular 4 pragmatycznie

Recommended

More Related Content

What's hot (20)

Similar to Angular 4 pragmatycznie (20)

More from Sages (18)

Angular 4 pragmatycznie