What is Angular version 4?
2 likes533 views
Angular version 4 is an upgrade from version 2, featuring improvements in size and speed while maintaining compatibility with TypeScript 2.x. It incorporates some minor breaking changes and new features, with a focus on simplicity in upgrading through Angular CLI. The document also outlines commands for building applications and provides resources for further learning.
What is Angular version 4?
- 1. PeopleSpace 4 April 2017 What is Angular version 4?
- 2. PS Tech Workshops • Angular Bootcamp, April 29th & 30th • Intro to React, May 5th & 6th • 20% off tonight only with discount code: • ROCKNCODER20 • http://peoplespace.us/javascript/
- 3. Troy Miles • Troy Miles aka the RocknCoder • Over 38 years of programming experience • Speaker and author • bit.ly/rc-jquerybook • [email protected] • @therockncoder • Now a lynda.com Author!
- 4. Build Mobile Apps! • Develop mobile apps with Ionic and AngularJS • Learn the Ionic CLI • Fetch data via ajax • Deploy your app to Android & iOS • bit.ly/ionicvideo
- 6. Follow Me • Talks • Webcasts • Free stuff • Tips, tricks, tools • and general code nerd stuff • @therockncoder
- 7. Agenda • Call me Angular • From v2 to v4 • Changes • Let’s build a web app • Summary
- 8. Call me Angular • Google is asking everyone to stop calling it: • Angular 2 • Angular 4 • Angular whatever • Call it Angular • and call version 1, AngularJS
- 9. From v2 to v4 • This is a minor update • It does have few breaking changes • The version updated to 4 to bring all of the main components up to the same version • (the router was at version 3.3)
- 10. Changes • Smaller & faster • Animation package pulled out of core • *ngIf and *ngFor • Angular Universal part of angular • TypeScript 2.x compatibility
- 12. Linux/Mac • npm install @angular/{common,compiler,compiler- cli,core,forms,http,platform-browser,platform- browser-dynamic,platform-server,router,animations} @latest typescript@latest --save
- 13. Windows • npm install @angular/common@latest @angular/ compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform- browser@latest @angular/platform-browser- dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save
- 14. Future Versions Date Stable Release Compatibility * Sept/Oct 2017 5.0.0 ^4.0.0 Mar 2018 6.0.0 ^5.0.0 Sept/Oct 2018 7.0.0 ^6.0.0
- 15. My Versions app command my version git git —version 2.11.0 node.js node -v 7.7.2 npm npm —v 4.1.2 angular cli ng -v 1.0.0
- 16. Angular CLI Tool Command New App ng new <app-name> Web Server ng serve Unit Test ng test End to End Test ng e2e Dev Build ng build dev Production Build ng build prod
- 17. Create New Components Component Command Class ng g class my-new-class Component ng g component my-new-component Directive ng g directive my-new-directive Enum ng g enum my-new-enum Interface ng g interface my-new-interface Module ng g module my-module Pipe ng g pipe my-new-pipe Service ng g service my-new-service
- 18. package.json Component Command core-js modular standard library for JavaScript rxjs reactive extensions for JavaScript zone.js change detection angular2-moment angular wrapper for moment.js hammerjs support touch gestures codelyzer set of tslint rules for static code analysis
- 19. naming convention • Angular apps are usually built using lowercase kebab naming convention • words are lowercase, dash as separator • final word is the thing’s type, a dot is its separator • if the thing is a class, no final word • contact-details.component.ts
- 20. Webpack • Open source module bundler • Replaces System.JS • Works with JS, CSS, and HTML • Minifies, Concatenates, and Bundles
- 21. repos & gists • https://github.com/Rockncoder/gh-stars • https://github.com/Rockncoder/github-stars • https://gist.github.com/rockncoder
- 22. GitHub Search API • https://api.github.com/search/ • Show project based on stars • Display project’s name, stars, size, language, last update • Able to page forward and back • Use Angular Material for design
- 23. Application Root Directory • All of the commands, for all of the tools are designed work on the application root directory • If used anywhere else bad things will happen • be sure you are in the app root • double check that you are in the app root
- 25. Links • https://angular.io/ • https://material.angular.io/ • https://cli.angular.io/
- 26. Summary • Angular version 4 is an upgrade of version 2 • It is smaller and faster • The angular CLI makes it easy to get started