Embed Size (px)
Citation preview
Nagaraju Sangam
Angular Buff @ ADP
Speaker at various Front End Meetups
Errors?? God Only Knows
Errors are ignored 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, crazy work arounds for minification
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.
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
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
AtScriptType 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.
Angular 2.0 doesn’t have two-way data binding like 1.x
two-way data binding can be achieved with the combination of event & property bindings:
<input type='text' [value]=‘ename' (keyup)=‘ename=$event.target.value' />
In short :
<input type='text' [value]=‘ename' (keyup)=‘ename=$event.target.value' />
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
Decorative Directives
Template Directives
Following annotations are used to create directives.
@Directive
@Component
http://www.2ality.com/2014/10/typed-javascript.html
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://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);
}
}
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();
}
}
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
