Angular js 2.0

Nagaraju Sangam
AngularBuff@ ADP
nagaraju_sangam@yahoo.co.i
n
Speakerat various FrontEnd Meetups
nagaraju.sangam@gmail.com

 Script Errors?? God Only Knows 
 Errors in templates?? Even God doesn’t know..!!! 
 Different ways to create different things: provider, factoy, service, value, constant
 Opinionated, Verbose, steep learning curve
 Everything is singleton 
 Not an elegant dependency injection
 Route: No built-in partial view support using ng-route , Routing based on template, not directives
 Issues with Scope & child scopes
 Dirty checking
 Issues with digest cycles: $scope.apply();
 Two way data binding: Max of 2000 bindings.
 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

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

Routing
Services
DI
Directives
ES5 & ES6+
Server Side
Angular
Change Detection
Web workers
Promises
Testing
Material design
RxJsTypes
Annotations

Angular JS 1.x Angular JS 2.0
Controllervs
$scopeecives
Component Class
Service Simple Class
Angular Modules ES6 Modules
Directive
Filters Pipes

 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

ES
6
ES
5
Type
s
Annotatio
ns
AtScript
Type script

Angular 1.X Angular 2.0
 Change detection happens at DOM node level
only
 Change 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

@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 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

 Component Directives
 Attribute Directives
 Structural Directives
Following annotations are used to create directives.
 @Directive
 @Component

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 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‘)
.subscribe(people => this.people = people);
}
}

 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.
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();
}
}

Main-thread
(Browser+App+Angular Dom renderer)
messages
Child thread
(Angular stuff – house keeping etc)

 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

https://github.com/nasangam

Angular js 2.0

More Related Content

What's hot (20)

Similar to Angular js 2.0 (20)

Recently uploaded (20)

Angular js 2.0