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

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 https://www.youtube.com/watch?v=gnmwybaybhi ng-europe, October 2014

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

Forget anything you know about AngularJS?

About me Jonas Bandi jonas.bandi@ivorycode.com Twitter: @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!

LoDash React Angular 2 Bootstrap AngularJS 2006 2009 2011 2012 2013 2016 1995

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. uicomponents, unidirectional data flow )

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

Angular Key Concepts AngularJS Angular 2 controllers components (ng 1.5) directives data-binding services dependency injection components components directives data-binding / data-flow services dependency injection

Angular Key Concepts AngularJS Angular 2 controllers components (ng 1.5) components JavaScript Function DDO ES2015 class

ToDo-App Component New-ToDo Component ToDo-List Component

Angular 2 Components Components are the main building-block of Angular 2. + + @Component Template Class Metadata = Component

A Simple Component import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>my First Angular 2 App</h1>' }) export class AppComponent { }

AngularJS Angular 2 Controller -> Component 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 2 Component (ng 1.5) -> 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(); }...

Directives & Components A directive is a construct, that is embedded into html and has a special meaning for the framework. Directives Components Structural Directives Attribute Directives Component is a composes Directive

Angular Key Concepts AngularJS Angular 2 directives directives a lot of directives (i.e ng-click, ng-focus, ng-blur, ng-keyup ) many directives from ng1 are not needed in ng2 templates

AngularJS vs. Angular 2: Directives The generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete. AngularJS Angular 2 <div ng-style={color:'red'}> <img ng-src="{{ctrl.path}}"> <a ng-href= {{ctrl.link}}"> ng-click="saveperson(person)" ng-focus="updatesummary()" ng-blur="commit()" ng-keyup="updatecalculation()" <div [style.color]="color"> <img [src]="path"> <a [href]="link"> (click)="saveperson(person)" (focus)="updatesummary()" (blur)="commit()" (keyup)="updatecalculation()" https://docs.angularjs.org/api/ng/directive https://angular.io/docs/ts/latest/api/

Structural Directives Use html as a template AngularJS Angular 2 ng-repeat, ng-if *ngfor, *ngif <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>

Angular Key Concepts AngularJS Angular 2 data-binding data-binding / data-flow generic property & event binding interpolation & 2-way databinding interpolation & 2-way databinding $scope uni-directional data-flow

Databinding DOM (Template) Interpolation {{value}} Property Binding [property]="value" Event Binding (event)="handler" Two Way Binding [(ngmodel)]="value" component

Nested Components: Uni-Directional Data-Flow State should be explicitly owned by a component. Parent Component Child Component state properties go in @Input() Child Component update @Output() logic out events come A parent component passes state to children Children should not edit state of their parent Children notify parents (events, actions ) Angular formalises unidirectional data-flow with @Input() and @Output() properties.

Angular Key Concepts AngularJS Angular 2 services services a function registered as factory, service or provider ES2015 class

Services Objects that perform a specific job. AngularJS Instantiated by Angular. Angular 2 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 []; }...

Angular Key Concepts AngularJS Angular 2 dependency injection DI based on naming dependency injection DI based on types (using TypeScript and Decorators) Singletons Hierarchical DI

Dependency Injection AngularJS Angular 2 registration: var app = angular.module('todoapp'); app.factory('todoservice', todoservice); function todoservice() {... } @Injectable() export class ToDoService {... } injection: app.controller('todocontroller', ToDoController); ToDoController.$inject = ['todoservice']; function ToDoController(todoService) {... } @Component({ selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { constructor(private todoservice:todoservice){}... }

controllers components (ng 1.5) directives data-binding services dependency injection Angular Key Concepts AngularJS Angular 2 components components Many key concepts remain the same. directives data-binding / data-flow services dependency injection But the implementation has changed.

There is more AngularJS Angular 2 filters Pipes 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 jspm webpack Angular 2

Angular is distributed through NPM To get Angular on your development machine, you have to install Node.JS. Node Package Manger https://www.npmjs.com/

Multi-Language ES5 2015

Language Choices no com- pilation compilation ES5 2015 weakly typed (optional) strongly typed

To pack or (not) to pack? 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

Build Toolchain Typically you need a front-end build for transpilation and module bundling.

Angular 2 aspires to be a platform classic web-apps for desktops server side rendering https://universal.angular.io/ progressive web-apps for mobile (web workers, cache, push, offline) https://mobile.angular.io/ dev tooling https://cli.angular.io/ installed mobile apps (hybrid) installed mobile apps (native integrations) installed desktop apps https://github.com/nathanwalker/angular2-seed-advanced

Is Angular 2 ready for production? October 2014: Initial announcement of Angular 2 December 2015: Angular 2 released as beta May 2016: Angular 2 Release Candidate 0 June 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 - 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 http://blog.jonasbandi.net/2016/06/ng2-router.html

Questions? Jonas Bandi jonas.bandi@ivorycode.com Twitter: @jbandi Tomorrow: DevDay Workshop - Hands On Angular 2 Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript