Angular2

transcript

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

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

• 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)

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

• 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

• 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.

• Who notifies Angular?* Zones* Each component has

its own change detector

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

change, as the original object is immutable.

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.

What’s the problem?

Break Time – 10 min.

(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

Angular2

Technology