Introduction to Angular js 2.0

AngularJS 2.0

Nagaraju SangamAngular Buff @

ADP

[email protected]

Speaker at various Front End Meetups

Me?

[email protected]

Problems with Angular 1.X

Verbose, steep learning curve Different ways to create different things Not an elegant dependency injection Route: No built-in partial view support using ng-route Issues with Scope & child scopes Dirty checking Issues with digest cycles: $scope.apply(); Two way data binding: Max of 2000 bindings. Errors are ignored in templates. jqLite: No direct modification of dom??? dropped in 2.0 Directives supports “EACM” only no way to use selectors. modules : No built-in module loading No inheritance supported for angular modules

Why re-write?

To knock off many old components. i.e. $scope, $rootScope, services, controllers, modules, jqLite etc. To leverage latest ECMA Script standards To leverage modern browser capabilities. Improve many areas with different approaches with past expirience.

What’s new?

Routing

Services

DI

Directives

ES5 & ES6+

Server Side Angular

Change Detection

Web workers

PromisesTesting

Material design

RxJsTypes

Annotations

What’s new?

Angular JS 1.x Angular JS 2.0

Controllervs

$scopeecives

Component Class

Service Simple Class

Angular Modules ES6 Modules

Directive

Transpilers

Converts source code from one programming language to other. ES6 to ES5 Transpilers

Traceur Typescript Flow Babel Dart

Angular2 apps should be written in ES6. since the browsers doesn’t support ES6 you can use any of the above transpiler to convert it to ES5.

Google and Microsoft are working together to make type script as a standard for developing angular2.0 apps.

http://www.2ality.com/2014/10/typed-javascript.html

AtScript vs Type script

ES6

ES5

Type s

Annotations

AtScript Type script

Change Detection

Angular 1.X

Angular 2.0

Change detection happens at DOM node level onlyChange in one node triggers dirty checking at all other nodes.

Change detection can happen at component level as well.Change in one component triggers dirty checking in other nodes below the current node…Change detection strategy can be configured at component level

Change Detection

@Component({ selector: <string>‘,

changeDetection: ‘<string>’

})

@View({ template: ‘<string>’})

export class <className>{ constructor() { }}

The changeDetection property defines, whether the change detection will be checked every time or only when the component tells it to do so.

Watchtower.js is used for change detection.

Routing

Routing happens at component level, for each different route different component can be loaded into RouterOutlet directive, it is similar to ui-view in angular 1.X.

@RouteConfig([ { path: '/', redirectTo: '/sponsers' }, { path: '/sponsers', component: Sponsers, as: 'sponsers'}, //sponsers & attendees are components { path: '/attendees', component: Attendees, as: 'attendees'}])

<router-outlet></router-outlet>

Router-Link is similar to hg-href in 1.X.

<a [router-link]="[\'/attendees\']" router-params="">attendees</a>

JSON based route config 404 support QueryString support Lyfecycle events routeResolver

Directives

Component Directives Decorative Directives Template Directives

Following annotations are used to create directives. @Directive @Component

http://www.2ality.com/2014/10/typed-javascript.html

Services

Service is a simple ES6 class in Angular2, these services should be injected into components via Dependency Injection.

Sponsers-Service.ts

export class SponsersService{ constructor() { } getData(){ return ['cisco','intel','flipkart']; }}

http://www.2ality.com/2014/10/typed-javascript.html

Http

http://www.2ality.com/2014/10/typed-javascript.html

Http is available as a separate module in alpha 35: https://code.angularjs.org/2.0.0-alpha.35

Eg:

import {Http, httpInjectables} from 'angular2/http';@Component({selector: 'http-app', viewBindings: [httpInjectables]})@View({templateUrl: 'people.html'})class PeopleComponent { constructor(http: Http) { http.get('people.json') .toRx() .map(res => res.json()) .subscribe(people => this.people = people); }}

DI

Dependencies can be specifies as parameters: eg: function(@Inject(<svcName>) s) Component dependencies should be listed in bindings property of @Component

annotation. Template dependencies should be listed in directives property of @View annotation.

http://www.2ality.com/2014/10/typed-javascript.html

import {Component, View, Injector} from 'angular2/angular2';import { NgFor } from 'angular2/angular2';import {SponsersService} from 'services/sponsers-service';

@Component({ selector: 'sponsers', bindings:[SponsersService]})

@View({ template: '<ul><li *ng-for="#item of data">{{item}}</li></ul>', directives:[NgFor]})

export class Sponsers { data; constructor(@Inject(SponsersService) s) { this.data = s.getData(); }}

Webworkers…Main-thread

(Browser+App+Angular Dom renderer)

messages

Child thread(Angular stuff – house keeping etc)

References… http://angular.io www.victorsavkin.com www.tryangular2.com http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0 http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html

Demos…

https://github.com/nasangam

Thank you…