Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introduction to Angular js 2.0

1 434 vues

Publié le

Introduction to Angular JS 2.0, this deck was created for JS Channel Bangalore Meetup dated 29 Aug 2015

Publié dans : Technologie
  • Soyez le premier à commenter

Introduction to Angular js 2.0

  1. 1.  
  2. 2. Nagaraju Sangam Angular Buff @ ADP nagaraju_sangam@yahoo.co.i n Speaker at various Front End Meetups nagaraju.sangam@gmail.com
  3. 3.  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
  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. http://www.2ality.com/2014/10/typed-javascript.html
  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.  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
  12. 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. 13. 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
  14. 14. 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); } }
  15. 15.  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(); } }
  16. 16. Main-thread (Browser+App+Angular Dom renderer) messages Child thread (Angular stuff – house keeping etc)
  17. 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. 18. https://github.com/nasangam