Angular 2

Key concepts and getting started

Maxim Salnikov

@webmaxru

  • Google Developer Expert in Angular

  • AngularJS Oslo Meetup Organizer

Products from the future

UI Engineer at ForgeRock

State of the web front-end

Angular 1

Next generation framework

(back to 2009)

47K

Under active development

Following standards

Transclusion

 

Angular Modules

 

Controllers, Scopes, Directives

Shadow DOM

 

ES2015 Modules

 

[Web]Components

performance

Today, Angular2 is 5x faster than Angular 1

Miško Hevery, 2/10/15

Change detection

Web workers

Server-side rendering

Views caching

Flexibility

Cross platform

Key concepts

Components

Dependency injection

Template syntax

Data flow

Forms

ROUTING

Components

Your app is a tree of self-describing components

App

Feedback

Place

Place

Place

Guide

Places

Component code

We tell Angular that ES2015 class is a component by attaching metadata to it.

import {Component} from 'angular2/core';

@Component({
  selector: 'guide',
  template: `
	<h1>Hello {{city}}!</h1>
	`,
})
export class GuideComponent {

  constructor() {
    this.city = 'Riga'
  }

}

Dependency injection

Allows you to depend on interfaces, not concrete types, this results in more decoupled code and improves testability.

import { PlacesService } from './places.service';
@Component({
  providers: [PlacesService],
  ...
})
constructor(private _placesService: PlacesService) { ... }

Template syntax

(eventBinding)

[propertyBinding]

#localTemplateVariable

{{interpolation}}

[(ngModel)]

<h1 *ngIf="city">
  Hello {{'dear ' + city}}!
</h1>
<input [(ngModel)]="city" #cityName>
<button (click)="cityName.style.color='red'" [disabled]="!city">
  Color me
</button>

*ngIf

Is it valid HTML?

HTML Syntax Spec: Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, """, "'", ">", "/", "=", the control characters, and any characters that are not defined by Unicode.

YES!

+ Fallback to canonical prefix- syntax exists

Data flow

Input properties usually receive data values. Output properties expose event producers, such as EventEmitter objects.

Place

Place

Place

Places

EXPOSE Events

receive data

@Input() name: string;
@Output() visit: EventEmitter<any> = new EventEmitter();
<place [name]="place.name" (visit)="logVisited($event.name)"></place>

Forms

Template-driven

  • Using [(ngModel)] heavily
  • Angular1-like
  • Validation logic is declared in the template

Super simple, codeless

Validation logic can not be unit tested

Promotes mutability

<form #templateDrivenForm="ngForm">

Forms

Model-driven

  • Using Control, ControlGroup, FormBuilder classes
  • Validation logic is declared in the class

We can unit test the form validation logic

We can build reactive UIs

?

<form [ngFormModel]="modelDrivenForm">

Links

Coding fun

Paldies!

Maxim Salnikov

@webmaxru

Angular 2: Key concepts and getting started - Riga

By Maxim Salnikov

Angular 2: Key concepts and getting started - Riga

  • 3,490