Angular 6, Angular Material et RxJS 6 par la pratique

Développez une application Angular 6 à l'aide d'Angular Material, des nouvelles commandes d'Angular CLI 6 et de RxJS 6

4.15 (337 reviews)
Udemy
platform
Français
language
Web Development
category
Angular 6, Angular Material et RxJS 6 par la pratique
1,393
students
5 hours
content
Jun 2018
last update
$19.99
regular price

What you will learn

A développer une application moderne et responsive avec Angular 6

A mettre en oeuvre les bonnes pratiques en créant services, interfaces, modèles ...

A articuler toutes les notions abordées dans un cas pratique : en créant une véritable application

A être en position de force par rapport aux entreprises et recruteurs cherchant des développeuses et développeurs à la pointe de la technologie

Why take this course?

Angular est en V6 depuis le 3 mai 2018. Ce qui caractèrise cette version est la mise à disposition de nombreux outils qui vous permettront d'être plus productif. Ce cours vous permettra de les prendre en main par la pratique en créant l'application baptisée "restaurangular". Cette application pourrait correspondre à la commande d'un client propriétaire de restaurant. Nous la créerons ensemble, ce qui vous permettra de voir ou revoir la programmation web à l'aide du framework Angular.

Vous apprendrez notamment à :
- à créer un menu latéral à l'aide de la nouvelle commande "ng add" apparue avec Angular CLI 6
- à présenter sous forme de table permettant tri et pagination les plats proposés à la carte
- à générer un dashboard, à le personnaliser et le peupler à l'aide d'un service que nous créérons de toute de pièce, service épaulé par un modele afin de profiter du typage fort
- a prendre en main les nombreux modules d'Angular Material afin d'obtenir de créer des interfaces graphiques à l'allure professionnelle
- à créer un module de réservation qui illustrera la création de formulaires de type template driven form et reactive form
- à se se familiariser avec la nouvelle syntaxe et la nouvelle organisation des nombreux opérateurs de RxJS également en v6, la célèbre librairie abondamment utilisée par le framework Angular
Et tout cela, avec le support du code source fourni sur un repo github.

Le développement est un savoir faire, pas de la théorie : montez en compétence ou progressez en développement Angular à l'aide de cette formation orientée projet.

Content

Introduction

Génération de notre application Angular avec Angular CLI
Tour du propriétaire de l'application générée par Angular CLI
Tour du propriétaire de l'application générée par Angular CLI (suite)

Angular Material

Installation d'Angular Material
Material Sidenav

Le routage

Génération de components
Implémentation du routage

Angular Material (suite)

Utilisation d'une Angular Material Card
Génération d'un Material Dashboard
Personnalisation du Material Dashboard
Génération d'une Material Data Table
Ajout d'un prix au data source et implémentation du tri sur le prix

Création d'un service et d'un modèle

Création du service quick-lunch.service.ts
Création du modèle "Food"
Consommation de notre service
Afficher le contenu propre à chaque type de nourriture
Formatage du prix à l'aide du pipe "currency" + séparateur "mat-divider"
Afficher le contenu de chaque type de nourriture

Les formulaires

Imports et variables requises par Reactive Forms
Liaison d'un FromGroup à un formulaire côté template
Angular Material datepicker
Datepicker en français
Angular Material Select
Template driven form
Soumission du formulaire
Flag contrôlant l'affichage successif des formulaires

RxJS 6

Présentation de RxJS
Utiliser les opérateurs
Les opérateurs tap() et map()
HttpClient
L'opérateur switchMap() pour aplatir un Observable d'Observable
Filtrer
Typer fortement les requêtes Http
Générer une Material Card par EveningEvent

Communication entre components

Communication parent vers enfant à l'aide de @Input()
Finalisation du template du component enfant
Communication enfant vers parent à l'aide de @Output()
Output() fin

Bonus

Coupons vers des formations complémentaires

Screenshots

Angular 6, Angular Material et RxJS 6 par la pratique - Screenshot_01Angular 6, Angular Material et RxJS 6 par la pratique - Screenshot_02Angular 6, Angular Material et RxJS 6 par la pratique - Screenshot_03Angular 6, Angular Material et RxJS 6 par la pratique - Screenshot_04

Reviews

Bruno
May 6, 2021
Cours sympa qui explique bien les concepts décrit dans un cadre ludique et agréable. Les explications sont claires et l'apprentissage par la pratique est un vrai plus. En petit bémol, j'aurais aimé pouvoir profiter de plus d'explications sur rxjs et aussi la communication entre composants avec Viewchild.
Noël
February 27, 2021
Le plan du cours est très bien. Les parties Observable et Input/Output sont excellentes. Maintenant il y a un peu trop de répétitions pour des concepts assez simples, des débogages en " live ", des non-réponses aux questions. Maintenant pour le design : celui-ci est MAUVAIS d'autant plus qu'il occupe une bonne partie du cours. On repart donc avec une application non finie alors que les concepts sont sympas. En plus il n'y a pas de petits exercices de mise en application avec ensuite la correction. Tout cela est vraiment dommage et va à l'inverse de la pédagogie. Je viens de me rendre compte que le coupon de réduction n'est pas valide et là la note tombe automatiquement à 1 étoile : désolé.
Souftek
November 20, 2020
Beaucoup de temps perdu à expliquer des choses déjà dites ou évidentes, à écrire tout au clavier (faites du copier coller, ou écrivez hors caméra) ou à faire du css ! Sinon la formation est idéale pour des débutants
Didier
March 4, 2020
Une bonne visite des concepts de Agular et de RxJs avec de bonnes explications sur les notations. La partie accès aux datasources ou services est manquante. Merci pour ce cours et le matériel sur GitHub.
Bidias
February 7, 2020
Merci Pour Cette formation , jai ete vraiment satisfait vu le fait que je n'avais jamais touche a angular, mais grace aux explications detaillees de l'enseigant, tout est bien au chaud dans ma tete a present, Merci Vraiment Beaucoup pour cette formation que je recommande fortement a tous ceux qui souhaitent faire la rencontre de @angular!
Thom
November 5, 2018
Première découverte d'angular, je recommande ce cours complet et bien expliqué. Samir est un prof pédagogue et sympatique, ses cours sont top! Merci ;)
Thierry
October 30, 2018
excellent pédagogue qui arrive à me faire comprendre des concepts complexes avec beaucoup de simpllicité
Jordan
October 22, 2018
Excellent cours. C'est dommage de ne pas avoir abordé ce cours avec Firebase et AngularFire. Obligé de rétrograder sur "Angular 5, Firebase, AngularFire 5 et Angular Material" du même formateur. J'aurais aimé avoir le tout en un seul cours.
Laurent
October 5, 2018
La partie Design est laissée au strict minimum et ne reflète pas la réalité d'une application en production pour un client. Même si ce n'est pas l'objectif de cette formation. On nous montre quand même une application.
Tanniou
August 22, 2018
Toujours un cours clair avec ce formateur. J’y vais les yeux fermés à chaque achat d’un de ses nouveaux tutoriels
Lf
August 21, 2018
Très bon cours pour débuter avec Angular 6, la pédagogie et les compétences techniques du formateur ne sont plus à démontrer. Bravo !
Jordan
August 3, 2018
Très peu convaincu par l'application finale (thème et fonctionnalités). Dommage que certains aspects aient été survolés et que les tests aient été mis de côté.
Christophe
July 20, 2018
Très bonnes formation. Je pense que dans les prochaine versions d'angular pourrions nous avoir une formation d'un niveau plus élevée ? sinon top :)
Zakaria
July 1, 2018
Je suis carrément un fan des tuto Angular de Samir, (il y a d'autres tuto) mais ceux d'angular sont tellement bien expliqués. Je recommande (et au resto aussi) les tutos pour ceux qui aiment s'entrainer, apprendre, ou s'initier à de l'angular.
Marc
June 29, 2018
Une fois de plus, le cours est de qualité.. Je n'ai vraiment rien à redire, vous êtes un formateur génial !

Charts

Price

Angular 6, Angular Material et RxJS 6 par la pratique - Price chart

Rating

Angular 6, Angular Material et RxJS 6 par la pratique - Ratings chart

Enrollment distribution

Angular 6, Angular Material et RxJS 6 par la pratique - Distribution chart

Related Topics

1700684
udemy ID
5/17/2018
course created date
11/1/2019
course indexed date
Bot
course submited by