Angular 2: What’s new?Jonas Bandi, IvoryCode GmbH

Once upon a time …

… the world was peacefully creating applications with AngularJS …

…but change was lurking in the maze of a mailing list …

https://groups.google.com/forum/#!search/misko$20Hevery$20may$2022$202013/polymer-dev/4RSYaKmbtEk/uYnY3900wpIJ

… then the threat became real …

ng-europe, October 2014https://www.youtube.com/watch?v=gNmWybAyBHI

https://twitter.com/kevindente/status/527500820603232257

Forget anything you know about AngularJS?

About me …Jonas Bandi

jonas.bandi@ivorycode.comTwitter : @jbandi

- Freelancer: www.ivorycode.com- Dozent an der Berner Fachhochschule seit 2007- Trainer bei Digicomp für AngularJS und Angular 2- In-House Kurse & Coachings für Web-Technologien im Enterprise (UBS,

Postfinance, Mobiliar, BIT, SBB ... )

AngularJS is a powerful Framework …

… but it is old!

1995

2006

2009

2011 2013 20162012

AngularJSBootstrap

LoDash React Angular 2

https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

The web has changed since 2009…

2015

Angular 2 is a new implementation of the concepts behind AngularJS …

… for the modern web.

… but Angular 2 is not an update to AngularJS.

Angular 2 is built upon the modern web:

2015

- web workers- shadow dom

Angular 2 is built for the modern web:

• mobile browsers• modern browsers• server-side rendering

Angular 2 improves over AngularJS:• faster• easier to use & learn• built on proven best practices (i.e. ui-

components, unidirectional data flow …)

The core concepts of Angular 2 are clean and easy to learn …

Angular Key Concepts

controllers components

data-binding data-binding / data-flowdirectives directives

servicesdependency injection

servicesdependency injection

components (ng 1.5) components

AngularJS Angular 2

Angular Key Concepts

controllerscomponents

components (ng 1.5)

AngularJS Angular 2

ES2015 classJavaScript Function

DDO

ToDo-App Component

New-ToDo Component

ToDo-List Component

Angular 2 Components

Template Class Metadata

+ += Component

@Component

Components are the main building-block of Angular 2.

A Simple Component

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

@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}

var app = angular.module('todoApp');app.controller('todoController', ToDoController); ToDoController.$inject = ['ToDoService']; function ToDoController(todoService) { var ctrl = this; ctrl.newToDo = new ToDoItem(); ctrl.todos = todoService.getToDos();

...

@Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService]}) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoService:ToDoService){} ngOnInit() { this.todos = this.todoService.loadToDos(); } ...

AngularJS Angular 2Controller -> Component

var app = angular.module('todoApp');app.component('TodoApp', { templateUrl: 'todo-app.html', controller: TodoAppComponent});ToDoController.$inject = ['ToDoService']; function TodoAppComponent(todoService) { var ctrl = this; ctrl.newToDo = new ToDoItem(); ctrl.todos = todoService.getToDos(); ...

@Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService]}) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoService:ToDoService){} ngOnInit() { this.todos = this.todoService.loadToDos(); } ...

AngularJS Angular 2

Component (ng 1.5) -> Component

Directives & ComponentsA directive is a construct, that is embedded into html and has

a special meaning for the framework.

Directives

Components StructuralDirectives

AttributeDirectives

Component Directiveis a

composes

Angular Key Concepts

directives directives

AngularJS Angular 2

many directives from ng1 are not

needed in ng2 templates

a lot of directives (i.eng-click,ng-focus,ng-blur,ng-keyup…)

AngularJS vs. Angular 2: DirectivesThe generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete.

https://docs.angularjs.org/api/ng/directive https://angular.io/docs/ts/latest/api/

<divng-style={color:'red'}><imgng-src="{{ctrl.path}}"><ang-href=“{{ctrl.link}}">

<div[style.color]="color"><img[src]="path"><a[href]="link">

ng-click="savePerson(person)"ng-focus="updateSummary()"ng-blur="commit()"ng-keyup="updateCalculation()"

(click)="savePerson(person)"(focus)="updateSummary()"(blur)="commit()"(keyup)="updateCalculation()"

AngularJS Angular 2

Structural DirectivesUse html as a template

<ul class="todo-list" > <li ng-repeat="todo in ctrl.todos"> {{todo.title}} <button class="remove-button" ng-click="ctrl.removeToDo(todo)"> x </button> </li> </ul>

<ul class="todo-list" > <li *ngFor="let todo of todos"> {{todo.title}} <button class="remove-button" (click)="removeToDo(todo)"> x </button> </li> </ul>

AngularJS Angular 2

ng-repeat,ng-if *ngFor,*ngIf

Angular Key Concepts

data-binding data-binding / data-flow

AngularJS Angular 2

interpolation & 2-way databinding interpolation & 2-way databinding

uni-directional data-flow$scope

generic property & event binding

DatabindingInterpolation

Property Binding

Event Binding

Two Way Binding

{{value}}

[property]="value"

(event)="handler"

[(ngModel)]="value"

DOM (Template)

component

Nested Components: Uni-Directional Data-FlowState should be explicitly owned by a component.

• A parent component passes state to children

• Children should not edit state of their parent

• Children “notify” parents (events, actions …)

Child Component Child Component

Parent Component

state

properties

go in

logic

events come

out

update

@Input()

@Output()

Angular formalises unidirectional data-flow with @Input() and @Output() properties.

Angular Key Concepts

services services

AngularJS Angular 2

a function registered as factory, service or

providerES2015 class

ServicesObjects that perform a specific job.

Instantiated by Angular.

var app = angular.module('todoApp');app.factory('toDoService', toDoService); function toDoService() { 'use strict'; return { getToDos: getToDos, addToDo: addToDo, removeToDo: removeToDo }; ...

@Injectable() export class ToDoService { loadToDos():Array<ToDo> { var loadedToDos = JSON.parse( localStorage .getItem(TODOS_KEY) ); return loadedToDos || []; } ...

AngularJS Angular 2

Angular Key Concepts

dependency injection dependency injection

AngularJS Angular 2

DI based on namingDI based on types

(using TypeScript and Decorators)

Singletons Hierarchical DI

Dependency Injection

var app = angular.module('todoApp');app.factory('toDoService', toDoService); function toDoService() { ... }

@Injectable() export class ToDoService { ... }

AngularJS Angular 2

@Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService]}) export class TodoApp implements OnInit { constructor(private todoService:ToDoService){} ... }

app.controller('todoController', ToDoController); ToDoController.$inject = ['toDoService']; function ToDoController(todoService) { ... }

registration:

injection:

Angular Key Concepts

controllers components

data-binding data-binding / data-flowdirectives directives

servicesdependency injection

servicesdependency injection

components (ng 1.5) components

AngularJS Angular 2

Many key

concepts

remain t

he same.

But the

implement

ation ha

s changed

.

There is more …

filters Pipes

AngularJS Angular 2

http with Promises http with RxJs (Promises still supported)

Routing (template centered)

Hierarchical Component Router

… …

The core concepts of Angular 2 are clean and easy to learn …

… but setting up a full Angular project can be quite complicated today.

Angular JS

AngularJS: an effective tool but not elegant …

SystemJS

2015

webpack

jspm

Angular 2

Angular is distributed through NPM

Node Package Manger

To get Angular on your development machine, you have to install Node.JS.

https://www.npmjs.com/

2015

ES5

Multi-Language

Language Choices

ES5

2015

weakly typed strongly typed(optional)

no com-pilation compilation

Angular for ES2015 & TS relies on ES2015 modules. There is no support for ES2015 modules in browsers today. A module-system is mandatory.

VS.SystemJS

To pack or (not) to pack?

Build Toolchain

Typically you need a front-end build for

transpilation and module bundling.

Angular 2 aspires to be a platform

progressive web-apps for mobile(web workers, cache, push, offline)

https://mobile.angular.io/

classic web-apps for desktops

installed mobile apps (hybrid)

installed mobile apps (native integrations)

server side renderinghttps://universal.angular.io/

installed desktop apps

https://github.com/NathanWalker/angular2-seed-advanced

dev toolinghttps://cli.angular.io/

Is Angular 2 ready for production?October 2014: Initial announcement of Angular 2

December 2015: Angular 2 released as betaMay 2016: Angular 2 Release Candidate 0June 2016: Angular 2 Release Candidate 2

What is missing:- Router (!)- Offline Compilation & Build Toolchain- internationalization- 3rd Party Ecosystem

https://www.reddit.com/r/angularjs/comments/4i2n3k/angular_2_was_never_ready_for_a_release_candidate/

The Router Debacle

http://blog.jonasbandi.net/2016/06/ng2-router.html

- Dez 2014: New Router announced for Angular 1.4 and Angular 2

- June 2015: New Router is deprecated- Angular 2 beta is developed with the

Component router- March 2016: Component Router is

released for Angular 1.5- May 2016: Component Router is

deprecated. Router 2.0 is part of Angular 2 RC1

- June 2016: Router 2.0 is deprecated, Router 3.0 is announced

Jonas Bandijonas.bandi@ivorycode.com

Twitter : @jbandi

Tomorrow: DevDay Workshop - Hands On Angular 2

Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript

Questions?