Presentation of framework Angular
Télécharger en tant que pptx, pdf0 j'aime469 vues
A detailed presentation from beginner to expert level on the angular javascript framework.
Contenu connexe
Tendances (20)
Similaire à Presentation of framework Angular (20)
Plus de Lhouceine OUHAMZA (10)
Dernier (20)
Presentation of framework Angular
- 1. 1 •Lhouceine OUHAMZA • Développeur JAVA / JavaScript • ouhamza.web.pro@gamil.com Angular: @Ouhamza
- 2. Angular: @Ouhamza 2 1. Quel est L’Angular ? 2. Les versions 3. TypeScript 4. Architecture d’angular 5. Module & Composant & Directives & Pipe & Modèle 6. Http & Service 7. Input & Output 8. Routing 9. Programmation réactive 10. Rxjs 11. Tests 12. Bonnes pratiques 13. Conclusion
- 4. Angular: @Ouhamza Single Page Application 4
- 6. Angular: @Ouhamza Features 6 Angular 2 Angular 4 Angular 5 Angular 6 Angular 7 Sortie en 2016 Sortie en 2017 Paru le 1 novembre 2017 Paru le avril 2018 Paru le octobre 2018 Réécriture complète de Angular 1 De nombreuses améliorations de performances sont apportées pour réduire la taille du code généré par le compilateur AOT. exportAs: Dans Angular 5, plusieurs noms prennent en charge les directives et les composants. RxJS 6 Angular 7 a ajouté un nouveau compilateur - Compatibility Compiler (ngcc) Entièrement écrit en TypeScript Les fonctions d'animation sont séparées de @angular/core à @angular/animation HttpClient: jusqu’à utiliser Angular 4.3 @ angular / HTTP qui est maintenant amorti et dans Angular 5, un nouveau module appelé HttpClientModule. providedIn property in injectable decorator @Injectable({ providedIn: 'root'}) Introduire un nouveau Pipe appelé - KeyValuePipe Basé sur les composants au lieu de contrôleur Else block dans *ngIf introduit: Angular 5 prend en charge la version TypeScript 2.3. Modifications de la CLI: deux nouvelles commandes ont été introduites: ng update <package> Ng add Angular 7 prenant désormais en charge TypeScript 2.9. Il supporte l’ES6 il aide les développeurs à supprimer les codes inutiles de leurs applications Il utilise angular.json au lieu de .angular-cli.json
- 7. Angular: @Ouhamza TypeScript 7 • Angular 2+ est construit en TypeScript. • Collaboration officielle entre Microsoft et Google. • SuperSet d'EcmaScript 6. • Améliorations par rapport à es6
- 9. Angular: @Ouhamza Comment l'application démarre 9
- 11. Angular: @Ouhamza Le decorateur @NgModule 11
- 16. Angular: @Ouhamza Template HTML: Liaisons de données 16
- 17. Angular: @Ouhamza Communiquer avec le back-end 17
- 20. Angular: @Ouhamza HttpClientModule 20 Nouvelles Fonctions Les intercepteurs Les Réponses retournent les données JSON. Return data.json(); Les méthodes (get,post….) sont génériques. <User> Le mise à jour de package: ‘@angular/common/http’….
- 21. Angular: @Ouhamza Structure d’une application 21
- 22. Angular: @Ouhamza Structure d’une application 22
- 23. Angular: @Ouhamza Routing Routes est une fonctionnalité qui aide votre application à devenir une application à page unique. il redirige l'utilisateur vers un autre composant sans recharger la page. 23
- 26. Angular: @Ouhamza Structure de projet Angular 26
- 27. Angular: @Ouhamza Impérative VS Réactive 27 • Permet aux fonctions de s’exécuter en arrière plan. • Passer immédiatement non bloquant.
- 29. Angular: @Ouhamza RxJS, / ReactiveX (netflix) / reactive.streams.org 29 Rxjs-compat (old version) Rxjs 6.0 ( angular 6 +) Npm install rxjs-compat S’installe par défaut Observable, Subject ….. Sont importés à partir ‘rxjs/x’. Le tous est importés à partir ‘rxjs’. Les opérations sont dans le package ‘rxjs/add/observable/x’ Le tous dans ‘rxjs/operators’. Syntaxe pour ajouter operations: .oper() .pipe( oper(), oper() ) catch catchError Throw throwError Switch switchAll Finally finalize Développement réactive:
- 30. Angular: @Ouhamza Observable vs promise 30
- 34. Angular: @Ouhamza Observable: opérateurs des tableaux 34
- 38. Angular: @Ouhamza Test avec jasmine 38
- 39. Test avec protractor Angular: @Ouhamza 39
- 41. Angular: @Ouhamza Bonnes pratiques 41 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 42. Angular: @Ouhamza Bonnes pratiques 42 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 43. Angular: @Ouhamza Bonnes pratiques 43 Charger les modules à la demande. 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 44. Angular: @Ouhamza Bonnes pratiques 44 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 45. Angular: @Ouhamza Bonnes pratiques 45 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer Mise en place
- 46. Angular: @Ouhamza Bonnes pratiques 46 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 47. Angular: @Ouhamza Bonnes pratiques 47 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 48. Angular: @Ouhamza Bonnes pratiques 48 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer
- 49. Angular: @Ouhamza Bonnes pratiques 49 1. Folder by Feature 2. Lazy loading 3. Detection de changement OnPush 4. AOT compilation 5. Webpack bundle analyzer • Identifier rapidement les librairies volumineuses • Trouver les alternatives: bundlephobia • Mise en place: