Introduction to Angular for students A quick overview about Angular components, modules, structure, architecture and router

1. Senior Frontend Lead
@Vermegsince 2014
Angular Expert
NodeJs Expert
GDG Member since 2011
Angular Community Member
NodeJS Developer Advocate
Speaker
@JerbiSaif

2. 2
What’s Angular?

3. 3
What’s Angular

4. 4
What’s Angular

6. 6
Architecture Overview

7. Architecture
Overview
Components Oriented Architecture

8. Architecture
Overview
ModulesComponents
Services
Directives
Pipes
Routing

9. Architecture
Overview
Modules
Contains:
• Components declarations
• Services providers
• Routing config
• Modules imports
ng generate module [module-name]

10. Architecture
Overview
Contains:
• Template & styles
• Logic
• Data
• Forms a part from the DOM Tree
Components
ng generate component [cmp-name]

11. Architecture
Overview
Contains:
• Template & styles
• Logic
• Data
• Forms a part from the DOM Tree
Components
<main-component>
<cmp1> <cmp2>
<cmp-details> <cmp-view> <cmp-widget>

12. Architecture
Overview
Attach a behavior to element in the
DOMDirectives
ng generate directive [directive-name]

13. Architecture
Overview
Takes data as input and transform it
to a desired outputPipes
ng generate pipe [pipe-name]

14. Architecture
Overview
Enable navigation between different
viewsRouting
ng generate module [module] --routing

15. Architecture
Overview
Encapsulate your business logic
Interact with external world
Consumes other services
Services
ng generate service [service-name]

16. 16
Before starting

17. Code Editor
https://angular.io

18. Angular RxJsTypeScript HTML & CSS

19. 19
Enjoy 
Any Question ?