Angular Training
Rafał Brzoska && Michał Dudak
Wprowadzenie
Co nowego w Angularze
Komponenty
Data Binding
Typescript
Semantic Versioning
Szkolenie
-
Angular CLI
-
TypeScript
-
Komponenty i Data binding
-
Style i konfiguracja aplikacji
-
Moduły
-
Router
-
Dyrektywy
-
Serwisy
-
Użycie zewnętrznych modułow
-
Komunikacja z API
-
Własna dyrektywa
-
Formularze
Home (lista produktów)
Strona Edycji/Dodawania
Feedback Form
Dodatki
Aplikacja - Panel Admina Sklepu
git clone -b fptraining-1 https://github.com/rbrzoska/fp-angular-training.git . npm install -g @angular/cli // ng -v ng new [nazwa_projektu] --ng4 -dir=web cd web ng serve // ng build -w
Angular CLI
<head>
<style>
.container[_ngcontent-ikt-1] { ... }
</style>
</head>
<body>
<my-app>
<song-track _nghost-ikt-1>
<div _ngcontent-ikt-1 class="container"></div>
</song-track>
</my-app>
</body>Angular CLI
TypeScript
-
Typy
-
Klasy
-
Dekoratory
-
Interfejsy
-
Moduły
Komponenty
-
WebComponent
-
Component Tree
-
Root Component
-
Component Inheritance
Komponenty
-
rozszerzenie dyrektywy
-
dekorator @Component
-
deklaracja w ngModule
-
component LifeCycle
Komponenty
-
selector: 'element-name'
-
template: `Hello {{name}}` templateUrl: 'my-component.html' -
styles: ['.error { color: red }'] styleUrls: ['my-component.css'] -
changeDetection: (OnPush, Default)
-
encapsulation: (Emulated, Native, None)
Komponenty
-
@Input() myProperty;
-
@Output() myEvent = new EventEmitter();
-
@HostListener('click', ['$event']) onClick(e) {...} -
@ViewChild(myPredicate) myChildComponent;
-
@ContentChild(myPredicate) myChildComponent;