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 5

2,051 views

Published on

Presentation about changes in Angular major release 5. Describes the most important features introduced and changes both in Angular and Angular CLI.

Published in: Software
  • Be the first to comment

Angular 5

  1. 1. Angular 5 has arrived… Bartłomiej Narożnik
  2. 2. Bartłomiej Narożnik - Angular 5 2 Patch: 4.4.6 - No Features, No Breaking Changes Minor: 4.4.0 - New Features, No Breaking Changes Major: 5.0.0 - New Features, Potential Breaking Changes
  3. 3. Bartłomiej Narożnik - Angular 5 3 1. Marking parts of your application as pure. 2. Removing angular decorators from runtime code. Enabled by default for CLI production build. --no-build-optimizer
  4. 4. Bartłomiej Narożnik - Angular 5 4 Angular compiler as a TypeScript transform (TS 2.3) 40% faster builds (95% for angular.io 40s -> <2s) ng serve –aot
  5. 5. Bartłomiej Narożnik - Angular 5 5 ServerTransferStateModule BrowserTransferStateModule
  6. 6. Bartłomiej Narożnik - Angular 5 6 • Support more DOM manipulations out of the box within server side contexts • Improved support for 3rd party JS and Component libraries that aren’t server-side aware
  7. 7. Bartłomiej Narożnik - Angular 5 7 @Component({ provider: [{provide: SOME_TOKEN, useFactory: () => null}] }) export class MyComponent { } @Component({ provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}] }) export class MyComponent { }
  8. 8. Bartłomiej Narożnik - Angular 5 8 //Before ReflectiveInjector.resolveAndCreate(providers); //After Injector.create(providers);
  9. 9. Bartłomiej Narożnik - Angular 5 9 platformBrowserDynamic() .bootstrapModule( AppModule, {ngZone: 'noop'}) .then( ref => {} );
  10. 10. Bartłomiej Narożnik - Angular 5 10
  11. 11. Bartłomiej Narożnik - Angular 5 11 fullTemplateTypeCheck option <div>{{ 11.1 | lowercase }}</div> -> Argument of type '11.1' is not assignable to parameter of type 'string' <input [(ngModel)]="book.title" required #bookCtrl="ngModel"> <div *ngIf="bookCtrl.hasEror('required')">Title required</div> -> Property 'hasEror' does not exist on type 'NgModel'. Did you mean 'hasError'?
  12. 12. Bartłomiej Narożnik - Angular 5 12 platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false }); @Component({ selector: 'my', templateUrl: './my.component.html', preserveWhitespaces: false }) export class MyComponent { ... }
  13. 13. Bartłomiej Narożnik - Angular 5 13 <div ngPreserveWhitespaces> whitespaces preserved here <span> and here </span> </div> <a>Spaces</a>&ngsp;<a>between</a>&ngsp;<a>links.</a> <a>before</a>&ngsp;&ngsp;&ngsp;<a>after</a>
  14. 14. Bartłomiej Narożnik - Angular 5 14 • <pre> tags are not affected  • Defaults to true… for now. • Removes about 6% of generated code
  15. 15. Bartłomiej Narożnik - Angular 5 15
  16. 16. Bartłomiej Narożnik - Angular 5 16 • Typed Response body access • JSON as default (no need to parse) • Interceptors • Immutable Request/Response • Progress Events • Better Unit Testing
  17. 17. Bartłomiej Narożnik - Angular 5 17 @angular/http module officially deprecated replaced by @angular/common/http HttpHeaders and HttpParams accept object literals
  18. 18. Bartłomiej Narożnik - Angular 5 18 // using classes const headers = new HttpHeaders().set('X-Option', 'true'); http.get(url, { headers }); const params = new HttpParams().set('test', 'true'); http.get(url, { params }); // without classes http.get(url, { headers: {'X-Option': 'true'} }); http.get(url, { params: {'test': 'true'} });
  19. 19. Bartłomiej Narożnik - Angular 5 19
  20. 20. Bartłomiej Narożnik - Angular 5 20 GuardsCheckStart, GuardsCheckEnd ActivationStart, ActivationEnd ResolveStart, ResolveEnd ChildActivationStart, ChildActivationEnd
  21. 21. Bartłomiej Narożnik - Angular 5 21 class MyComponent { constructor(public router: Router, spinner: Spinner) { router.events.subscribe(e => { if (e instanceof ChildActivationStart) { spinner.start(e.route); } else if (e instanceof ChildActivationEnd) { spinner.end(e.route); } }); } }
  22. 22. Bartłomiej Narożnik - Angular 5 22 @NgModule({ providers: [ RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' } ) ] }) *Scheduled for 5.1
  23. 23. Bartłomiej Narożnik - Angular 5 23
  24. 24. Bartłomiej Narożnik - Angular 5 24 Caching • static assets • external resources • route redirection • dynamic content Strategies • freshness • performance
  25. 25. Bartłomiej Narożnik - Angular 5 25 import { SwPush } from '@angular/service-worker'; subscribeToPush() { // Requesting messaging service to subscribe current client (browser) this.swPush .requestSubscription({ serverPublicKey: this.VAPID_PUBLIC_KEY }) .then(pushSubscription => { // Passing subscription object to our backend this.pushService.addSubscriber(pushSubscription) .subscribe( res => { console.log('[App] Add subscriber request answer', res); } ); }); }
  26. 26. Bartłomiej Narożnik - Angular 5 26 import { SwUpdate } from '@angular/service-worker'; this.swUpdate.checkForUpdate() .then(() => { console.log('[App] checkForUpdate completed') }) this.swUpdate.activateUpdate() .then(() => { console.log('[App] activateUpdate completed') this.winRef.nativeWindow.location.reload() })
  27. 27. Bartłomiej Narożnik - Angular 5 28 • Angular now uses data from Common Locale Data Repository (CLDR) instead. • No need for intl polyfil • Old pipes in DeprecatedI18NPipesModule • Locale parameter in all i18n pipes • Default locale en-US
  28. 28. Bartłomiej Narożnik - Angular 5 29 import {LOCALE_ID} from '@angular/core'; import {registerLocaleData} from '@angular/common'; import localePl from '@angular/common/locales/pl-PL'; registerLocaleData(localePl); @NgModule({ ... providers: [ { provide: LOCALE_ID, useValue: 'pl-PL' }, ] ... })
  29. 29. Bartłomiej Narożnik - Angular 5 30 • New formats (long, longDate, longTime, full, fullDate, fullTime) • Timezone support • Locale support <!-- common usage using pre-defined format string --> <span>{{ d | date: 'shortDate' }}</span> <!-- en-US: 1/18/17 --> <!-- specific locale --> <span>{{ d | date: 'shortDate': null: 'pl' }}</span> <!-- pl-PL: 18/1/17 --> <!-- custom format string --> <span>{{ d | date: 'M/d/yy': null: 'pl' }}</span> <!-- pl-PL: 18/1/17 -->
  30. 30. Bartłomiej Narożnik - Angular 5 31 Field type Format Example value v4 v5 Eras Narrow A for AD G GGGGG Months Narrow S for September L MMMMM Week day Narrow M for Monday E EEEEE Timezone Long location Pacific Standard Time z Not available Timezone Long GMT GMT+01:00 Z ZZZZ
  31. 31. Bartłomiej Narożnik - Angular 5 32
  32. 32. Bartłomiej Narożnik - Angular 5 33 <input name="title" ngModel [ngModelOptions]="{updateOn: 'blur'}"> <form [ngFormOptions]="{updateOn: 'submit'}">
  33. 33. Bartłomiej Narożnik - Angular 5 34 new FormGroup(value, {updateOn: 'blur'})); new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
  34. 34. Bartłomiej Narożnik - Angular 5 35
  35. 35. Bartłomiej Narożnik - Angular 5 36 animations: [ trigger('query', [ transition( '* => start', [ query( '.item', [style({ opacity: 0 }), animate('2s', style({ opacity: 1 }))], { limit: -3 } ), ]), ]), ]
  36. 36. Bartłomiej Narożnik - Angular 5 37 //Before transition('0 => 1, 1 => 2, 2 => 3, 3 => 4', ...) //After transition(':increment')
  37. 37. Bartłomiej Narożnik - Angular 5 38 export const expandTypo = [ trigger('expandTypo', [ transition(':leave', [ animate('150ms cubic-bezier(0.4, 0.0, 1, 1)', style({ height: 0, opacty: 0 // <-- typo here, could also be anything random })) ]) ]) ];
  38. 38. Bartłomiej Narożnik - Angular 5 39 //Before import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/filter'; shortTitles = allBooks .map(book => book.title) .filter(title => title.length < 20); //After import { Observable } from 'rxjs/Observable'; import { map, filter } from 'rxjs/operators'; shortTitles = allBooks.pipe( map(book => book.title), filter(title => title.length < 20), );
  39. 39. Bartłomiej Narożnik - Angular 5 40 • Weekly patch version • Monthly minor version • Major version every 6 months (backwards compatible) • Almost 9000 commits in total • ~9 commits per day (1932 commits between versions 4 and 5)
  40. 40. Bartłomiej Narożnik - Angular 5 41
  41. 41. Bartłomiej Narożnik - Angular 5 42
  42. 42. @bart_naroznik Bartłomiej Narożnik - Angular 5 43 No matter how impressive the lift-off is, it’s the landing that counts..

×