Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js 2.0 beta


Published on

This presentation was a lab session in Google Hyderabad

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Angular js 2.0 beta

  1. 1.  
  2. 2. Nagaraju Sangam AngularBuff@ ADP n Speakerat various FrontEnd Meetups
  3. 3.  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
  4. 4.  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.
  5. 5. Routing Services DI Directives ES5 & ES6+ Server Side Angular Change Detection Web workers Promises Testing Material design RxJsTypes Annotations
  6. 6. Angular JS 1.x Angular JS 2.0 Controllervs $scopeecives Component Class Service Simple Class Angular Modules ES6 Modules Directive
  7. 7.  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.
  8. 8. ES 6 ES 5 Type s Annotatio ns AtScript Type script
  9. 9. 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
  10. 10. @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.
  11. 11.  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=$' />  In short : <input type='text' [value]=‘ename' (keyup)=‘ename=$' />
  12. 12.  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
  13. 13.  Component Directives  Decorative Directives  Template Directives Following annotations are used to create directives.  @Directive  @Component
  14. 14. 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']; } }
  15. 15. Http is available as a separate module in 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); } }
  16. 16.  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) { = s.getData(); } }
  17. 17. Main-thread (Browser+App+Angular Dom renderer) messages Child thread (Angular stuff – house keeping etc)
  18. 18.     
  19. 19.