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;

 

Introduction to TypeScript

Made with Slides.com