Angular 2

Key concepts and getting started

Maxim Salnikov

@webmaxru

  • Google Developer Expert in Angular

  • AngularJS Oslo Meetup Organizer

  • Mobileera.rocks conf organizer

Products from the future

UI Engineer at ForgeRock

State of the web front-end

Angular 1

Next generation framework

(back to 2009)

50K

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

offline compilation

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 '@angular/core';

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

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

}

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 FormGroup, FormControl, FormBuilder classes
  • Validation logic is declared in the class

We can unit test the form validation logic

We can build reactive UIs

?

<form [formGroup]="modelDrivenForm">

Resources

github.com/angular/quickstart

Today's demo

quickstart

Coding fun

Thank you!

Maxim Salnikov

@webmaxru

Getting started with Angular2

By Maxim Salnikov

Getting started with Angular2

On this presentation first we'll go shortly through history of Angular for better understanding what Angular2 was introduced for and why it's not backward-compatible with 1.x. Then we'll list key concepts of Angular2 like cross-component communication, one-directional data flow, user input handling and url routing and others. As a result of our practical hands-on tour we'll discuss the main tools for making our Angular2 life easier and build a functioning app.

  • 1,916