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.

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

11. upgrading is easy

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

24. Let’s build something

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