19.08.2016Yusuf Koraman - Software Architecture

ANGULAR2

Content

Angular2 What?, When ? Why?

Concept. Difference between AngularJs & Angular2 Angular2 Change Detections Break Time (10 min) Demo (Task Manager) Upgrading From Angular 1.x Angular2 Performance Benchmark QUESTIONS?

Angular2 What? Why? When?

• It is written entirely in Typescript. • Not an update for Angular 1.x. • Announced @ March 2014• Simpler than Angular 1 and has far fewer concepts, making it easier to

understand• Angular2 is designed from the ground-up for mobile and optimized for

memory efficiency and less CPU cycles.• Angular2 is a «design pattern».• Not Released Yet. @BETA

Mobile Support

IONIC2 - @Beta NativeScript with Angular2

Concepts

Concepts - Components

Component - Lifecycle

Concepts – DI

Differences between AngularJs & Angular2

• Angular 1.x was not built with mobile support, Angular2 is mobile oriented.

• Angular 1.x is easy to setup. Angular2 is dependent of other libraries

• Angular 1.x’s controllers and $scope are gone

Differences between AngularJs & Angular2

Differences between AngularJs & Angular2

• Say goodbye to ng-app. The only way to bootstrap angular is via code.

Differences between AngularJs & Angular2

Differences between AngularJs & Angular2

• ng-repeat is replaced with *ngFor.• Angular2 uses camelCase syntax – Ex: ng-class ngClass – ng-mode ngModel.

• Angular2 directly uses the valid HTML DOM element properties and events (major change)

Differences between AngularJs & Angular2

In Angular 1.x, ng-model is used for two way data binding, but with Angular2 it is replaced with [(ngModel)].

Differences between AngularJs & Angular2

• In Angular 1.x, we can define a services via different ways.(Factory,Service,etc.)

• In Angular 2, class is the only way to define a service.

• Routing• ng-href => [routerLink]• Performance

Angular2 Change Detections

Angular2 Change Detections

Angular2 Change Detections

• Basically application state change can be caused by three things

• Events - click, submit, …• XHR - Fetching data from a remote server• Timers - setTimeout(), setInterval()• They are all asynchronous.

Angular2 Change Detections

Angular2 Change Detections

• Who notifies Angular?* Zones* Each component has

its own change detector

Angular2 Change Detections

Angular2 Change Detections

Angular2 Change Detections

Immutable Objects• We’ll always get a new reference with that

change, as the original object is immutable.

Angular2 Change Detections

Angular2 Change Detections

Observables • They don’t give us new references when a

change is made. Instead, they fire events we can subscribe to in order to react to them.

Angular2 Change Detections

What’s the problem?

Angular2 Change Detections

Angular2 Change Detections

Angular2 Change Detections

Break Time – 10 min.

DEMO

(Task Manager)

Upgrading From Angular 1.x

• Creating a new Angular2 project.• Upgrading with The Upgrade Adapter• https://

angular.io/docs/ts/latest/guide/upgrade.html

Angular 2 Performance Benchmark

http://stefankrause.net/js-frameworks-benchmark/

Questions