1. Angular
Mouad.elfakir@gmail.com
Mouad EL Fakir

2. What is Angular ?
Angular is a development platform for building
mobile and desktop web applications using
Typescript/JavaScript and other languages.

3. AngularJS vs Angular
AngularJS Angular
$scopes No $scope
Controllers based Ui Components based UI
JavaScript TypeScript
No mobile support Mobile support (mobile oriented architecture)
Js library Framework

4. Version of Angular ?
1.x 2.x 4.x 5.x

5. Version of Angular ?
1.x
2.x 4.x 5.x
?

6. Version of Angular ?

7. Where is Angular 3 ?

8. Current Angular Version

9. Browsers Support & Polyfills

10. Concepts overview
API
.ts
Services
.ts
.ts
.ts
.html
.css
.ts
.html
.css
Components
.ts
.ts.ts
.ts
Models
Transpiler
ModuleLoader
Index.html
Inject
AppModule

11. Angular Modules
• @angular/cli
• @angular/animations
• @angular/common
• @angular/core
• @angular/compiler
• @angular/forms
• @angular/http
• @angular/platform-browser
• @angular/platform-browser-dynamic
• @angular/router
• @angular/upgrade

12. What is Webpack ?
•Modules Loader
•Modules Bundler
•Loaders :
•babel-loader
•css-loader
•ts-loader

13. What is Zone.js ?
•Zones definition
•Stack trace logging
•Change detection

14. TypeScript & Transpilation
•Browsers doesn’t understand
Typescript and ES6 yet.
•Easy to use for Java developers.
•Transpilation != Compilation.
ES5
ES6
TYPESCRIPT

15. Build : AOT & JIT
•JIT -> Just-in-Time
•IOT -> Ahead-of-Time

16. Build bundles
•inline.bundle.js
•main.bundle.js
•polyfills.bundle.js
•vendor.bundle.js
•styles.bundle.js
•scripts.bundle.js

17. @angular/cli command
• ng new [project]
• ng generate component [component]
• ng generate service [service]
• ng generate directive [directive]
• ng generate pipe [pipe]
• ng generate class [class]
• ng generate interface [interface]
• ng generate enum [enum]
• ng serve
• ng build [--prod] [--aot]
• ng test
• ng lint

18. TypeScript & ES6 features
• Let
• Const
• Template Strings
• Fat Arrow Functions
• For of
• Class & Interface
• Decorators
• Modules
• Types

19. Application Overview
Header
Footer
Side
Nav
Component
Component
Component
Component
Component
Component
Component
Component
Grid

20. Component Lifecycle

21. ReactiveX (RxJS)
Observable.from({1, 2, 3})
.filter(i -> i < 2)
.map(i -> i + 1)
.subscribe(i -> print(i))
.catch(err -> `error is ${err}`)
.finally('completed')

22. Redux
Action Reducer Store
UI

23. 01010100 01101000 01100001 01101110 01101011 01110011