What is Angular version 4?
•
2 likes•530 views
Angular continues to be one of the most popular frameworks for building modern web applications. The impending release of Angular version 4 has many developers in a panic. What is Angular version 4? What happened to version 3? Do I have to learn a bunch of new stuff? Will my code break? Well, fear not Angular fans. We have answers and more. In this mini-session, we'll explain where we came from and where we are going. And more importantly, we have code samples. We will show you some of the latest cool stuff including the new *ngIf, animations, TypeScript 2.2 support, and the revised router. And prove to you most of the changes to Angular are pretty modest and shouldn't require much if any code changes.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to What is Angular version 4?
Similar to What is Angular version 4? (20)
More from Troy Miles
More from Troy Miles (20)
Recently uploaded
Recently uploaded (20)
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 • rockncoder@gmail.com • @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