Angular from Zero to Mastery - Training (Intermediate)
Download as PPTX, PDF0 likes74 views
Angular training covers building complete web apps with Angular including core concepts like components, services, routing and forms. The training will cover setting up the development environment, building the app architecture with modules, components and services, and implementing key features like data binding, communication between components, dependency injection, pipes, directives and HTTP requests. The trainees will then apply these concepts to build a mini travel app for Algeria with authentication, user profiles and admin features using techniques like reactive forms, Angular Material and Flex Layout.
![Data binding
- {} Interpolation
- [] Property Binding
- Event Binding
- two-way data binding
the four forms of data binding
markup](https://image.slidesharecdn.com/forminiangular-11-20-220717163042-491df156/85/Angular-from-Zero-to-Mastery-Training-Intermediate-22-320.jpg)
![Directives
Angular templates are dynamic. When Angular renders them, it transforms
the DOM according to the instructions given by directives.
A directive is a class with a @Directive() decorator.
In addition to components, there are two other kinds of
directives: structural and attribute.
Structural Directive Attribute Directives
*ngIF ; *ngFor; *ngSwitch [(ngModel)]
ngStyle, ngClass](https://image.slidesharecdn.com/forminiangular-11-20-220717163042-491df156/85/Angular-from-Zero-to-Mastery-Training-Intermediate-29-320.jpg)
Angular from Zero to Mastery - Training (Intermediate)
- 1. ANGULAR FROM ZERO TO MASTERY Algiers 22/11/2020 Presented By Smail LOUNES
- 4. By the end .. Cover most Angular notions Be able to build a complete web app with Angular
- 6. Introduction
- 7. 3-Tier Architecture Presentation Layer Buisness Layer Data Layer Frontend Backend
- 9. OVERVIEW
- 10. What's Angular ? Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. angular.io
- 11. Why Angular ? 67,4 k Made with Angular DEVELOP ACROSS ALL PLATFORMS SPEED & PERFORMANCE INCREDIBLE TOOLING, HIGH PRODUCTIVITY LARGE COMMUNITY
- 13. Angular app architecture Module Component Child- Component Child- Component Service Component Service1 Service2
- 14. ECOSYSTEM
- 15. Setting Up The Dev Environnement Settting Up Git Download the git installer for your specific computing platform https://git-scm.com/downloads Text Editor of your choice https://code.visualstudio.com/ Web Browser Node.JS & NPM Angular requires NodeJS http://nodejs.org/ Install Angular CLI Command line interface for Anngular % npm install -g @angular/cli
- 16. First Application Generate the application Open it with IDE Configure Angular CLI Configure & run the application % ng new project-name
- 18. MAIN CONCEPTS
- 19. Angular Main Building Blocks
- 20. Component, templates and views View
- 21. Component life cycle hook View Encapsulation Create a new component Component Interaction next
- 22. Data binding - {} Interpolation - [] Property Binding - Event Binding - two-way data binding the four forms of data binding markup
- 23. Listen to child event with @Output binding Inject Child component into parent as a ViewChild Pass data from parent to child with @Input binding Communication via a Service next NgOnChanges()
- 24. Services A Service is a class with @Injectable decorator encompassing any value, function, or feature that an app needs. A service has a well-defined purpose. It should do something specific and do it well. Angular distinguishes components from services to increase modularity and reusability A component can delegate certain tasks to services, such as fetching data from the server, validating user input ...
- 25. Dependency Injection Process of HeroService injection tree-shaking
- 26. Generate a new service Parent and children communicate via a service Provide a Service on a specific module/component
- 27. Pipes A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view https://angular.io/api?type=pipe
- 28. Use some of Angular pipes (date, currency, lowercase ...) Define a new pipe
- 29. Directives Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator. In addition to components, there are two other kinds of directives: structural and attribute. Structural Directive Attribute Directives *ngIF ; *ngFor; *ngSwitch [(ngModel)] ngStyle, ngClass
- 30. *ngIF; *ngFor; *ngStyle; *ngClass Directives
- 33. Setting up wildcard routes Displaying 404 Page Define some routes Redirects routerLink Router, AcitvatedRoute LazyLoading Router resolver
- 34. FROMS
- 35. Forms in Angular Angular supports two (2) design approches for interactive forms : Template-driven forms Reactive forms Applications uses forms to enable users to log in, update profile, to enter sensitive information and to perform many other data-entry tasks
- 38. HTTP Client
- 39. HttpClient service @angular/co mmon/http Http requests Use the Angular client HTTP API to access back-end services
- 40. Http Client use cases Setting up a mock server
- 41. RxJS
- 43. MATERIAL
- 44. Modals and Pop-ups Icons Customizing theme Add some Angular Material components Buttons Snackbar Sidebar
- 45. FLEX LAYOUT
- 47. JWT
- 48. Authentication - Application should know who the user is Authorization - Application should know what user can do JWT – Json Web Token JWT token contains information about a user DON'T STORE PASSWORDS AS PLAIN TEXT ! Bearer eyJhbG ciOiIUzI1NiIsInR 5cCI6IkpXVCJ9. eyJzdWIiOiIxMj Server
- 49. JWT interceptor Add AuthGuard (managing route access) Mock Authentication
- 50. PWA
- 51. SSR
- 52. Facilitate web crawlers through search engine optimization (SEO) Improve performance on mobile and low-powered devices Show the first page quickly with a first-contentful paint (FCP) Why use server-side rendering?
- 55. Mini Project
- 56. FROM ZERO TO MASTERY ANGULAR Mini-Project • SPÉFICATIONS Bref Resumé Spécifications fonctionnelles Spécifications techniques • ARCHITECTURE • MAQUETTES DU PROJET SOMMAIRE
- 57. Spéficiations Fontionnelles • L'application doit permettre de lister les lieux touristiques d'Algérie • Permet de les filtrer Par Wilaya/Catégorie • L'application doit permettre d'afficher le détails d'un lieu (Nom, Description, infos, Images, etc) • Elle doit permettre à un utilisateur de créer un compte et de s'authentifier • L'application doit permettre à un utilsateur authentifié d'ajouter un nouveau spot, modifier ces infos et le supprimer • L'application permet d'ajouter ou de supprimer un spot aux/de favoris • ... Non-fontionnelles • L'application web doit etre développé avec Angular • L'interface de l'application doit etre résponsive et ergonomique • Elle doit adopter le Material Design • Elle doit supporter le design RTL La solution 'Dzair' consiste en une application web qui exhibe les différents monuments et lieux touristiques ( musées, plages, parcs, restaurants, etc) de l'Algérie