Angular 6, Angular Material et RxJS 6 par la pratique
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Angular 6, Angular Material et RxJS 6 par la pratique

Codeconcept
39,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici une formation Angular en vidéo ! Grâce à cette formation complète vous allez apprendre : 

  • 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

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.
 

Au programme de cette formation Angular 6

Ce cours 100% en vidéo et en ligne, vous permettra de les prendre en main Angular par la pratique en créant une application de A à Z.
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éerons de toute de pièce, service épaulé par un modèle afin de profiter du typage fort
  • à 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 est aussi 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 !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 

Le développement est un savoir faire pas 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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Angular Material
Chapitre 3
Le routage
Chapitre 4
Angular Material (suite)
Chapitre 5
Création d'un service et d'un modèle
Chapitre 6
Les formulaires
Chapitre 7
RxJS 6

Plan détaillé du cours

Chapitre 1 : Introduction
28m16s
 
Leçon 1Démo de l'application créée durant la formation
Leçon 2Génération de notre application Angular avec Angular CLI
Leçon 3Tour du propriétaire de l'application générée par Angular CLI
Leçon 4Tour du propriétaire de l'application générée par Angular CLI (suite)
Leçon 5Démo (fin)
Chapitre 2 : Angular Material
16m02s
 
Leçon 1Installation d'Angular Material
Leçon 2Material Sidenav
Chapitre 3 : Le routage
16m12s
 
Leçon 1Génération de components
Leçon 2Implémentation du routage
Chapitre 4 : Angular Material (suite)
38m17s
 
Leçon 1Utilisation d'une Angular Material Card
Leçon 2Génération d'un Material Dashboard
Leçon 3Personnalisation du Material Dashboard
Leçon 4Génération d'une Material Data Table
Leçon 5Ajout d'un prix au data source et implémentation du tri sur le prix
Chapitre 5 : Création d'un service et d'un modèle
46m59s
 
Leçon 1Création du service quick-lunch.service.ts
Leçon 2Création du modèle "Food"
Leçon 3Consommation de notre service
Leçon 4Afficher le contenu propre à chaque type de nourriture
Leçon 5Formatage du prix à l'aide du pipe "currency" et utilisation du séparateur "mat-divider"
Leçon 6Formatage du prix à l'aide du pipe "currency" et utilisation du séparateur "mat-divider"
Chapitre 6 : Les formulaires
50m31s
 
Leçon 1Imports et variables requises par Reactive Forms
Leçon 2Liaison d'un FromGroup à un formulaire côté template
Leçon 3Angular Material datepicker
Leçon 4Datepicker en français
Leçon 5Angular Material Select
Leçon 6Template driven form
Leçon 7Soumission du formulaire
Leçon 8Flag contrôlant l'affichage successif des formulaires
Chapitre 7 : RxJS 6
1h08m
 
Leçon 1Présentation de RxJS
Leçon 2Utiliser les opérateurs
Leçon 3Les opérateurs tap() et map()
Leçon 4HttpClient
Leçon 5L'opérateur switchMap() pour aplatir un Observable d'Observable
Leçon 6Filtrer
Leçon 7Typer fortement les requêtes Http
Leçon 8Générer une Material Card par EveningEvent
Chapitre 8 : Communication entre components
38m54s
 
Leçon 1Communication parent vers enfant à l'aide de @Input()
Leçon 2Finalisation du template du component enfant
Leçon 3Communication enfant vers parent à l'aide de @Output()
Leçon 4Output() fin

Aperçus

Avis des apprenants

Détail des avis
15
Apprenants
1
Commentaire
4/5
Note moyenne
5/5
0
4/5
1
3/5
0
2/5
0
1/5
0
Jeremie Seguillon
Jeremie Seguillon
Publié le 30/07/2019
C'est mieux de passer par une formation théorique Angular (à partir de la version 2) avant d'attaquer cette pratique. Par contre c'est parfait pour appliquer l'ensemble de la théorie que vous aurez vu auparavant.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Angular

Quel est le niveau requis pour suivre ce tuto ?

débutant

Bonjour, je ne vois pas de partie pour la mise en production ? En parlez-vous s'il vous plait ? Merci!

Bonjour, Il n'y a pas de section dédiée à la mise en production. Celle-ci se résume à la commande "ng build --prod" qui permet de générer dans un répertoire "/dist" le code à uploader sur un serveur. Dans certains cas, il faut en outre configurer des redirections sur le serveur. Mais là, les choses varient en fonction du serveur (Apache, IIS, Nginx). Bref, étant développeur, j'étiquette et je pousse aux intégrateurs qui déploient. Si vous devez déployer par vous même, il faut alors vous référer à la documentation d'Angular qui comporte une section spécifique à chacun des serveurs les plus connus (de nouveau Apache, IIS, Nginx) https://angular.io/guide/deployment#fallback

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données