Angular 2Sami Suo-Heikki19.5.2016

What is Angular 2?

What is Angular 2?JavaScript Framework

Cross platform

Fully component based

Built from the ground up with TypeScript

Native ES6 modules

Supports server-side prerendering

One framework.Mobile and Desktop.

Agenda for today

Architecture of Angular 2 app

Build your application with Angular CLI

Comparison to other JS frameworks

Useful tools

Architecture of Angular 2 app

Component

Binding

Service

Router

Directive

ComponentEncapsulate the template, data and the behaviour of a view.

Component

import { Component } from '@angular/core';

@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}

Component

import { Component } from '@angular/core';

@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}

Component

import { Component } from '@angular/core';

@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}

Component

import { Component } from '@angular/core';

@Component({ selector: 'hello-world', template: 'Hello {{name}}!'})export class HelloWorldComponent { constructor() { this.name = 'World!'; }}

Component

Component Dom

Binding

Component Dom

name = “World” <h1> {{name}} </h1>

Binding

Component Dom

onClick() { ...}

<input (click)=”onClick()”>

Two-way data binding

<input [(value)]="todo.text">

ServiceReusable data service in your application.

ServiceData AccessLoggingBusiness LogicConfiguration

RouterResponsible for navigation.

Router

@Routes([ {path: '/my-route', component: MyRouteComponent}, {path: '/my-other-route', component: MyOtherComponent},])

Router

@Routes([ {path: '/my-route', component: MyRouteComponent}, {path: '/my-other-route', component: MyOtherComponent},])

Router

@Routes([ {path: '/my-route', component: MyRouteComponent}, {path: '/my-other-route', component: MyOtherComponent},])

DirectiveModify DOM elements and/or extend their behaviour.

@Component({ selector: 'my-app', template: ` <vaadin-pie-chart> … </vaadin-pie-chart> `})

@Component({ selector: 'my-app', template: ` <vaadin-pie-chart> … </vaadin-pie-chart> `, directives: [VaadinCharts,DataSeries]})

@Component({ selector: 'my-app', template: ` <vaadin-pie-chart> … </vaadin-pie-chart> `, directives: [VaadinCharts,DataSeries]})

Build your app with Angular CLIcli.angular.io

Angular CLI

1. npm install -g angular-cli2. ng new PROJECT_NAME3. ng serve4. ng generate route my-hero5. ng build

(Demo with Angular CLI)

Comparison to other frameworks

vs

Simplicity

Simplicity

Simplicity

Simplicity

Functionality

Simplicity

Functionality

Simplicity

Functionality

Simplicity

Functionality

Convenience

Simplicity

Functionality

Convenience

Simplicity

Functionality

Convenience

vs

Simplicity

Functionality

Convenience

Simplicity

Functionality

Convenience

Simplicity

Functionality

Convenience

Simplicity

Functionality

Convenience

Useful tools

augury.angular.io

angular.io/styleguide

cli.angular.io

mobile.angular.io

May the be with you