What’s new in angular 2 - From FrontEnd IL Meetup

© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

What’s new in angular 2.0

Ran Wahle

Angular 1.x Angular 2.0 building blocksComponentsData bindingDIGetting ready tips

Agenda

My first reaction…

Angular 1.x

Based on ES5Based on jqLite (subset of jQuery)Low performance

Why break something that works?

New standardsPerformanceConsultants needs to make a living

Angular 1.x pains

$scopeHeavy data binding mechanismIt is all directives

Angular 2.0

ES 6ComponentsNew databindingNew DI

Components

AngularJs 2.0 is built upon HTML5 WebComponents Each component is a javascript class (function in es5)It has a selector, view and a

import {Component, View, bootstrap} from 'angular2/angular2';

// Annotation sectionComponent({ selector: 'my-app'})View({ template: '<h1>Hello {{ name }}</h1>'})// Component controllerclass MyAppComponent { name: string;

constructor() { this.name = 'Alice'; }}

bootstrap(MyAppComponent);

Meet the componentDependency

injection

“controller”

view

<my-app></my-app>

Use the component

Angular 2.0 bootstrapping

Create a componentCreate a template Bootstrap your componentUse transpiler

Angular 1.x bootstrapping

Create moduleCreate a controller Create HTML templateRegister your controller in a moduleBootstrap your module in your application

Demo

Component

DI

Using ES6 / typescript importNo need for double DI

Need to load the JS codeThe component needs to be injected to the module

Import the directiveUse directive inside the view

import {Component, View, bootstrap, For} from 'angular2/angular2‘ or another external module;

template: `<ul> <li *ng-for="#name of names"> {{ name }} </li> </ul>`, directives: [NgFor]}

Import and directives

Data Binding

No two way binding[attribute](events)#local variables

No ng-x are needed

Demo

Data Binding

Change Detection

Based on Object.observe Organized as treeEnahanced performance for immutable objects

Change Detection1.x 2.0

How to get ready?

There are no migration paths (yet)Be as modular a possibleUse controllerAs syntax and reduce the use of $scopeComponentize your app

AngularJs 1.x will continue to evolve so no rush…

Resources

http://angular.ioChange detection By Victor Savkinhttps://www.youtube.com/watch?v=jvKGQSFQf10My blog: http://blogs.Microsoft.co.il/ranw

Angular 2.0 is completely differentIt is based on standards that aren’t readyIt can be used now for tests No release date yet