Angular 2+ / Angular 4+

Przydatne linki

Polecana ścieżka nauki na początek:

1. ( też preferuję JS, ale TypeScript aż tak nie boli :P na pewno mniej niż pisanie w Angular w JS )
2. Angular Quickstart tutorial
3. Angular CLI tutorial
4. Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch
5. Angular 2 Fundamentals Egghead
6. Angular Official tutorial (cały!)
7. Angular Official Guide (cały!)
8. Własna aplikacja :D
9. Angular Official Guide Advanced (w trakcie tworzenia aplikacji)
10. Angular Official Cookbook (w trakcie tworzenia aplikacji)
11. Ewentualnie też na Egghead jest całkiem dobry videokurs o Angular 2 Directives.

Angular CLI

angular-cli on github.com

npm install -g angular-cli
ng new PROJECT_NAME
ng serve
ng g component COMPONENT_NAME
ng g service SERVICE_NAME
    

Syntax

Property binding

PROPERTY BINDING is a binding in which data flows one way from the data source (the expression hero === selectedHero) to a property of class.

[class.selected]="hero === selectedHero"
[(ngModel)]="selectedHero.name"
[hero]="selectedHero"

Structural directives

*ngIf="selectedHero"
*ngFor="let hero of heroes"

Other directives

(click)="onSelect(hero)"
[(ngModel)]="selectedHero.name"

Decorators and others

@HostListener
@HostBinding
EventEmitter<boolean>() // type

@Input
@Output

@Injectable()
@Component()

Components interaction

Child class:

import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'my-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}
    

import { Component }      from '@angular/core';
@Component({
  selector: 'vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
    <my-voter *ngFor="let voter of voters"
      [name]="voter"
      (onVoted)="onVoted($event)">
    </my-voter>
  `
})
export class VoteTakerComponent {
  agreed = 0;
  disagreed = 0;
  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}