What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka
7 likes•1,593 views
The document discusses the release of Angular 4, detailing updates and changes from Angular 2, including the adoption of semantic versioning and improved performance features. It highlights enhancements such as new animation packages, form features like email validation, and TypeScript compatibility. The document also explains the implications of these updates for developers and the ease of upgrading to Angular 4.
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tutorial | Edureka
- 2. EDUREKA ANGULAR CERTIFICATION TRAINING 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 CERTIFICATION TRAINING www.edureka.co/angular-js Angular 4
- 4. EDUREKA ANGULAR CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING www.edureka.co/angular-js Angular 4: What’s New ? ? ?
- 9. EDUREKA ANGULAR CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING *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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING 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 CERTIFICATION TRAINING www.edureka.co/angular-js Upgrading Angular Application
- 20. EDUREKA ANGULAR CERTIFICATION TRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback