Introduction to Angular js 2.0

Introduction to Angular js 2.0

• 1.
   
• 2.
  Nagaraju Sangam Angular Buff@ ADP nagaraju_sangam@yahoo.co.i n Speaker at various Front End Meetups nagaraju.sangam@gmail.com
• 3.
   Verbose, steeplearning 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
• 4.
   To knockoff 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.
  Routing Services DI Directives ES5 & ES6+ ServerSide Angular Change Detection Web workers Promises Testing Material design RxJsTypes Annotations
• 6.
  Angular JS 1.xAngular JS 2.0 Controllervs $scopeecives Component Class Service Simple Class Angular Modules ES6 Modules Directive
• 7.
   Converts sourcecode 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
• 8.
  ES 6 ES 5 Type s Annotatio ns AtScript Type script
• 9.
  Angular 1.X Angular2.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.
  @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.
   Routing happensat 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
• 12.
   Component Directives Decorative Directives  Template Directives Following annotations are used to create directives.  @Directive  @Component http://www.2ality.com/2014/10/typed-javascript.html
• 13.
  Service is asimple 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
• 14.
  http://www.2ality.com/2014/10/typed-javascript.html Http is availableas 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); } }
• 15.
   Dependencies canbe 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(); } }
• 16.
  Main-thread (Browser+App+Angular Dom renderer) messages Childthread (Angular stuff – house keeping etc)
• 17.
   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
• 18.
  https://github.com/nasangam