What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka

What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka

• 2.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Agenda Angular Releases 1 Why not Angular 3 ? 2 It’s just Angular!!! 3 What’s new??? 4 Demo 5
• 3.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Angular 4
• 4.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Angular 4 Coming into Picture … • Changing from version 2 to version 4 … won’t be like changing from Angular 1 • It will simply be a change in some core libraries that demand a major SEMVER version change • There will be proper deprecation phases to allow developers to adjust their code X . Y . Z Semantic Versioning Major Change Minor Change Patch Update Back in September, the Angular team also announced they will switch to Semantic Versioning (SEMVER)
• 5.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Tentative Release Schedule The Angular team committed to time based releases that occur in three cycles: • patch releases every week • 3 monthly minor release after each major release • a major release with easy-to-migrate-over breaking changes every 6 months
• 6.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Why not Angular 3? • Due to this misalignment of the router package’s version, the team decided to go straight for Angular v4 • In this way again, all the core packages are aligned which (easier to maintain and avoid confusion in future) • The core Angular libraries are all versioned the same way except routes Modules Version 2 Router Version 3 So… they decided to go with Angular 4
• 7.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js It’s Just Angular Team announced that from now on, you should address Angular versions 2.0.0 or later as simply “Angular”… #ItIsJustAngular Angular adopted Semantic Versioning and is backwards compatible with 2.x.x Even upgrading TypeScript dependency from v1.8 to v2.1/v2.2 and compile Angular with it, would cause a breaking change
• 8.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Angular 4: What’s New ? ? ?
• 9.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Animation *ngIf & *ngFor Form Features TypeScript Compatibility Source Maps Packaging Changes Functions Smaller & Faster
• 10.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Smaller & Faster View Engine • Changes were done under the hood to what AOT generated code looks like • Purpose is to reduce the size of the generated code for app components by averagely 60 percent • During the candidate period release, many developers that migrated to 4, reduced their production bundles by hundreds of kilobytes Angular 2 Bundle Angular 4 Bundle 100x 40x Smaller & Faster Animation *ngIf & *ngFor Form Features
• 11.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Animation Animation Package • Angular team has pulled animations out of @angular/core and into their own package • Add animations to main NgModule by importing BrowserAnimationsModule from @angular/platform- browser/animations Animation Module Importing Properties Smaller & Faster Animation *ngIf & *ngFor Form Features
• 12.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING *ngIf & *ngFor Enhanced *ngIf and *ngFor The template binding syntax now supports a couple helpful changes: • You can now use an if/else style syntax • Assign local variables such as when unrolling an observable Else Statement Loading block Smaller & Faster Animation *ngIf & *ngFor Form Features
• 13.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Form Features Email type input New features in Forms Now you have email validator in forms to validate email instead of using pattern.Smaller & Faster Animation *ngIf & *ngFor Form Features
• 14.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING TypeScript Compatibility TypeScript 2.1 and 2.2 compatibility: • Angular has also been updated to a more recent version of TypeScript • This improves the speed of ngc and users will get better type checking throughout your application TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
• 15.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Source Maps l Whenever an error occurs in one of templates, source maps are generated with meaningful context in terms of the original template Template < > Updated Template < > Changes Errors source maps are generated with a meaningful context in terms of the original template TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
• 16.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Packaging Changes Packaging Changes Flat ES Modules (Flat ESM / FESM) • Angular now ship flattened versions of modules • It helps in tree-shaking, reducing the size of your generated bundles, and speed up build, transpilation and loading Experimental ES2015 Builds • Angular now also ship packages in the ES2015 Flat ESM format • This option is experimental and opt-in. • Developers have reported up to 7% bundle size savings when combining these packages with Rollup TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
• 17.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Upgrade to Angular 4 Ready to upgrade 4.0.0 • Updating to 4 is easy • This will work for most use cases TypeScript Compatibility Source Maps Packaging Changes Upgrade to Angular 4
• 18.
  www.edureka.co/angular-jsEDUREKA ANGULAR CERTIFICATIONTRAINING Creating Angular 4 Application Create an app in v4! Use ng new command along with --ng4 option to create a new app
• 19.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Upgrading Angular Application
• 20.
  EDUREKA ANGULAR CERTIFICATIONTRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback