Développer votre première application Angular (v14)

Maîtriser le développement SPA : Boostrap, HTML, CSS, Typescript et Angular

4.85 (123 reviews)
Udemy
platform
Français
language
Web Development
category
Développer votre première application Angular (v14)
814
students
14.5 hours
content
Jul 2022
last update
$19.99
regular price

What you will learn

Découvrir le HTML

Découvrir le CSS

Découvrir le framework Twitter Bootstrap

Savoir créer une application Web avec Angular

Comprendre le B-A-Ba d'Angular

Savoir différencier SPA (Single Page Application) de MPA (Multiple Page Application)

Créer une API bouchon

Créer une SPA

Découvrir le TypeScript

Apprendre les forces et faiblesses de Javascript

Apprendre la programmation POC : Programmation Orientée Composant

Why take this course?

Angular, Bootstrap, tout ça pour faire un site web ?


<Mise à jour pour angular 14>

<Mise à jour pour angular 13>

<Mise à jour pour angular 12>

<Mise à jour pour angular 11>

<Mise à jour pour angular 10>


Vous avez envie de vous mettre à Angular, framework Google réputé, pour faire des applications SPA.
Mais par quel bout le prendre ? Le framework vous paraît costaud à appréhender ?


Vous souhaitez en savoir plus, tout en apprenant à créer un site web professionnel ?

Vous avez envie de devenir développeuse, développeur FullStack ?!


Cette formation est faite pour vous, pour bien démarrer dans le développement web, Full Stack!


En résumé

Bienvenue dans cette formation pour apprendre à créer des applications web FullStack, avec Angular, BootStrap !

A travers la mise en place d'une application web mobile (un Selfie à Wookie), nous apprendrons à créer :

  1. Une application web dite SPA (Programmation Orientée Composant) , professionnelle

  2. Une application web fonctionnant sur Linux ou Windows

  3. Une architecture logicielle propre, professionnelle et évolutive


Ce qui est couvert

Nous apprendrons plusieurs notions super fun, et essentielles pour la création de sites web professionnels :

  • Mettre en place une page d'accueil propre et bien pensée

  • La formation initiale HTML 5 : les principaux composants, la logique HTTP

  • L'apprentissage des bases du CSS 3 : les flex grid, la logique de grille, les animations, ...

  • L'apprentissage des fondamentaux Angular, dans sa dernière version (pour l'instant 14)

  • Créer des pages dynamiques, branchées à API REST

  • Créer un site internet pensé pour les moteurs de recherche d'aujourd'hui

  • Apprendre et utiliser un framework css reconnu : Bootstrap

  • Comment déployer notre site internet, notre application mobile sur un serveur

  • Mettre en place des tests unitaires de votre application : côté Angular


Durant toute la formation

Chaque session vous guidera pas à pas, dans la réalisation de notre application de Selfie à Wookie.

Pour compléter l'aventure, vous aurez accès à l'ensemble des sources du projet, section après section, pour bien avancer, et ne jamais se sentir perdu-e (c'est un de mes buts premiers, en tant que votre hôte, votre formateur).


A la fin de la formation

Vous aurez réalisé une application web !

Vous aurez une application de Selfie à Wookie : Instagram n'a qu'à bien se tenir :D

Et surtout : vous saurez créer des sites web avec Angular, Boostrap !


Et c'est vous qui l'aurez réalisé, étape après étape, pas à pas !


Vous commencez quand ? :=)

Content

Bienvenue ! Présentation .. à vos marques, prêt-e ?

Introduction
Qui je suis, et pourquoi moi
Comment je fonctionne ?
Ce que nous allons apprendre
Première quête : on installe Visual Code
Seconde quête : Une première page html
XP gagnés !! :)

Premiers pas en HTML

Notre but : concevoir une première maquette
Une maquette
Et le http, c'est quoi ?
Découverte html
Structure obligatoire et explications
Comment découper sa page
Les divs
Live server
Les images
Section / article : théorie
Section / article : pratique
Correction de l'exercice
XP gagnés !! :)

Découvrons le css

Notre but : embellir la page, la rendre sexy (enfin un peu)
CSS : déjà on peut en mettre dans chaque balise
Changement de la couleur de la taille de font
Correction
On souhaite l'appliquer à plusieurs éléments : comment ?
Découverte de la notion de classe
On va chercher à utiliser le css par fichier
Bravo
XP gagnés !! :)

Découverte du CSS - Partie 2 - RD

C'est quoi le responsive design
Une dernière règle css, plusieurs classes sur une meme balise
Les points importants du RD en CSS / Html
Découvrons le flex
D'autres possibilités que le flex
Une seconde notion très importante : le media query
C'est à vous, améliorer notre page d'accueil
Correction : footer et header
Correction row et col
Correction : auto margin
media query
Ne plus se prendre la tête : un framework css
Bravo
XP gagnés !! :)

Découverte Git

Démarrage mission
Problèmes rencontrés
Présentation git
Git local => Actions importantes : init / commit
Un nouveau commit et le log
Revert
Travail à plusieurs à distance : github
Git clone / git push
Git pull
Notion de branches : pourquoi / univers paralleles
Deux branches de base : master / dev
Git merge branch
Git push -u
Git repo conseillé
Bravo !
XP gagnés !! :)

Découvrons bootstrap

Démarrage mission
Rappel des notions autour du responsives + css
"installation"
"decouverte rapide"
notion de grille => row + col + container
prépara grid + col + article
ajout image
Mise à jour header
Ajout footer article
ajout nav
ajout footer principal
modal
cacher bloc si petit taille
Bravo
XP gagnés !! :)

Découvrons Angular

Démarrage mission
Le chargement d'une page, ça se passe comment ?
Et si on découpait ça en composants ?
On va installer angular, c'est quoi ?
Présentation npm / node
Installation angular
typescript ?
On change le titre de la page
Bravo
XP gagnés !! :)

Découvrons Angular +

Démarrage mission
Le point essentiel : le component, la vue
Apprendre à se repérer dans Angular
Résultat des comptes
Résultat des comptes (suite)
Revenons à la vue - Premiere condition
ng for
Retour exo/boss, avec selfie et wookie
ng else
Bravo
XP gagnés !! :)

Découvrons Angular + boostrap

Démarrage mission
Intégrer du css + js : les différentes voies
Intégrer du js + css depuis la SPA
Intégrer du js + css depuis angular .json
Choisir entre les deux
Le css par composant
Bravo !
XP gagnés !! :)

Découvrons Angular + n composants

Démarrage mission
Notion de multi composants / POC
Explication composant
Un menu - premier vrai composant
Un second composant: le listing des wookies
On améliore avec le html qu'on avait
On finalise la beauté avec le container
Sous composant par selfie
Découverte d'input
Bravo
XP gagnés !! :)

Découvrons Angular + n composants (bis)

Démarrage mission
On a besoin de savoir ce qu'il se passe dans la boite noire
ViewChild
EventEmitter
Souscrire et oubli du Ouput
Input amélioré et passage de témoin
Bravo
XP gagnés !! :)

Découvrons Angular + Un service et l'injection de dépendances

Démarrage mission
Présentation, on veut requêter la base de données
Notion de service
Injection de dépendance
Correction boss
Bravo
XP gagnés !! :)

Découvrons Angular + Un service et http client

Démarrage mission
Découvertes d'apis + découverte postman
Postman et mock server
RxJs, découverte
le Of de rxjs
le interval + map
Utilisation du http client
Notion de CORS
Bravo
XP gagnés !! :)

Découvrons Angular - Une première approche des formulaires

Démarrage mission
Nous souhaitons pouvoir ajouter un selfie
Correction affichage composant ajout
Découvrons la notion de TDF - Binding bidirectionnel
Découvrons la notion de TDF - Binding bidirectionnel
Ajout du formulaire
Contrôler l'affichage : css si erreur
Et si on ajoutait des infos par champ
Correction
Bravo
XP gagnés !! :)

Découvrons Angular - Plusieurs modules

Démarrage mission
Pourquoi un module ?
Les différents types de module
Ajout d'un module SelfieModule
Des erreurs importantes à corriger
Correction : ajouter un SharedModule avec le FormsModule
Bravo
XP gagnés !! :)

Découvrons Angular - Utilisation d'une librairie externe

Démarrage mission
On souhaite pouvoir accéder à la webcam
Ajouter prise photo
Correction : Envoie des données au server - Mise à jour
Bravo
XP gagnés !! :)

Découvrons Angular - Avoir plusieurs chemins

Démarrage mission
Une route côté Angular, c'est quoi ?
RoutingModule et Route
Des routes spéciales : Main et NotFound
Améliorer notre menu
Répartition des routes par module
Redirection de route
Bravo
XP gagnés !! :)

Découvrons Angular - Avoir plusieurs chemins - niveau 2

Démarrage mission
Avoir une url dédiée + faire une redirection côté composant
Récupérer l'id depuis le composant et aller chercher le wookie
Correction ensemble
Bravo
XP gagnés !! :)

Découvrons Angular - Livrer en production

Démarrage mission
Que peut-on faire
build prod
build prod suite
deploy
Bravo !
XP gagnés !! :)

Découvrons Angular - Fin première étape

Niveau 100 atteint !
Bravo à vous !
La suite
La suite bis
La suite tres

Reviews

Rémi
May 3, 2023
Evan nous transmet sa passion pour le dev, le côté fun fait vraiment passer la formation pour un jeu et on s'éclate.
Sophie
November 22, 2022
J'apprécie la pédagogie, la manière d'aborder le sujet et de nous immerger dans l'expérience du projet. La diction et le ton sont hyper agréables à écouter, ce qui compte quand on "passera" 14,5h ensemble.
Damien
June 28, 2022
Ce n'est pas la première formation d'Evan que je suis Son mode opératoire est assez original, peut-être déstabilisant au départ. mais il ne faut pas s'arrêter à ça son cour est solide et maitrisé et je suis sorti des 8h sur GIT satisfait d'avoir assimilé de façon naturelle tout ce que je recherchais Au bout de quelques vidéos sur cette formation Angular je sais que je suis encore à la bonne adresse :)
Lilian
May 15, 2022
La formation de par son principe/approche et son aspect ludique est une vraie réussite, mais il y a un moment où si vous n'avez pas déjà de (très) bonnes bases, vous serez perdus. Je m'explique, on fait le B-A-BA du HTML, du CSS, de Bootstrap, puis on installe Angular. Vraiment étape par étape. Comme expliquer dans la description, on revoit les bases de HTML, on est vraiment dans "l'apprentissage des bases de CSS3" et on apprendre à « utiliser Bootstrap », et je ne vois pas comment quelqu’un qui serait vraiment en découverte dans cette partie pourrait réussir à ensuite suivre la partie sur Angular.0 Je suis un débutant mais j'ai déjà suivi des formations entières sur HTML, CSS, JS et Bootstrap, et dans la 1ère moitié de la formation ici on revoit (même si pas de manière exhaustive) le B-A-BA et honnêtement même sans avoir jamais vu de HTML ou de CSS on est vraiment guidé et il est possible de tout suivre sans soucis. Tout est expliqué. Par contre, dans mon cas, ce qui m'intéressait particulièrement c'était de pouvoir découvrir doucement Angular, en comprendre les bases et y aller pas à pas, mais dès la section 8 (et surtout à partir de la 11), j'ai été complétement noyé et j'ai totalement perdu pied, car on nous parle de concepts/notions et/ou autres technologies dont on a jamais entendu parlés (si on est pas déjà dans le métier depuis quelques temps au moins) et on se retrouve à devoir comprendre la structure du projet, dev ou prod, les tests, savoir lire du json, comprendre le typescript (gros point noir pour moi car on "tape" du TS mais honnêtement si on en a pas de connaissances avant on ne sait même pas que c'est bien du TS qu'on utilise), connaître les directives, les décorateurs etc... Ce n'est pas tant le fait qu'il y ait bcq à apprendre, ce n'est pas le soucis, mais c'est surtout que l'approche pas à pas est délaissée, et à part en suivant d'autres formations en parallèle, on est perdu. Ce n'est pas ce que j'espérais de cette formation. Il y a aussi régulièrement des petits soucis que j'ai rencontrés car même si une partie a été ajoutée sur comment Installer Angular v13, je pense qu'il y a eu d'autres updates à d’autres endroits qui peuvent être mineures mais qui bloquent à certains moments même si l'on tape exactement ce que l'on voit durant la formation (dans l'immédiat je pense par ex à l'erreur "Type 'null' is not assignable to type 'T'" que j'ai réussi à résoudre après recherches en ajoutant "strictNullChecks=false" dans tsconfig.json... Au final la partie qui m'intéressait le plus a été celle sur lequel j'ai le sentiment d'avoir le moins appris (à partir de la section 15 je me suis retrouvé à simplement recopier le code présenté dans le cours sans plus rien comprendre des explications) ... Je ne souhaite pas baisser la note de cette formation et c'est pour ça que je ne mettrai pas de note basse, mais clairement je suis déçu et je préfère avertir les personnes "débutantes" qui n’ont que des connaissances en HTML, CSS, SB et JS : ce ne sera pas suffisant pour pouvoir suivre la partie Angular... Par contre je pense que plus tard je pourrais revenir sur cette formation et apprendre des choses.
Sébastien
May 6, 2022
La pédagogie d'Evan est très bonne pour expliquer les différents concepts. J'ai aussi apprécié les moments de challenge pour se tester. Merci pour cette formation.
Nicolas
April 19, 2022
Très complet sur Angular. Evan est un formateur enthousiaste et pédagogue qui donne envie d'apprendre. Merci pour cette formation.
Pierre
February 8, 2022
Pour poser le décor, je suis développeur novice autodidacte. J'apprends donc uniquement par le biais de formations de ce genre. J'ai eu l'occasion (malheureusement...) d'en suivre plusieurs avant celle-ci, et je dois avouer que la pédagogie d'Evan, sans doute grâce à sa passion de former et à ses connaissances, est juste excellente. Si à cela on ajoute la partie gamifiée et le projet (instagram à Wookies, trop fort !) qui donnent envie d'avancer, c'est juste top !! Je pars de zéro, j'ai sans doute eu besoin de plus de temps que quelqu'un qui a déjà beaucoup des notions abordées dans ce tuto, mais, franchement, si on suit les conseils d'Evan pour le cours et qu'on fait les exercices sérieusement, même si ça prend plus de temps, c'est vraiment bénéfique ! Un grand merci à toi Evan de m'avoir plongé dans cet univers. Grâce à toi (ou à cause de toi ... ;) ), j'ai envie d'en savoir toujours plus et de réussir à maîtriser ce framework que j'ai adoré !!
FOUCRAS
September 27, 2021
Très satisfait de la formation. Je trouve que Evan fait un cours très didactique et vivant, avec des explications claires, j'ai plusieurs cours de lui, jamais j'ai été déçu. Merci.
Saadry
August 13, 2021
Parce que j'apprécie la logique et la structure du professeur. La cadence du cours pourrait être un peu plus rapide pour certain mais je préfère bien voir les bases. Très bon instructeur. Merci pour ce cours.
Elise
June 11, 2021
Un professeur pédagogue, intéressant et enjoué. Le cours est présenté de façon ludique et bien détaillé. Ce fut une très agréable session d'apprentissage !
Issa
May 24, 2021
Bojour, Merci pour la formation mais comme on dit-on peut toujours mieux faire. Les points d'amélioration à faire c'est surtout sur la partie backend pourquoi ne pas mettre un serveur comme je l'ai fait sur la formation:
Thierry
May 17, 2021
Tout m'a l'air bien clair et oui, c'est bien ce que je voulais, une petite révision HTML - CSS et introduction à JavaScript, continuons....
A.Be
January 13, 2021
Oops j'avais juste mis une note, avant la critique de la formation, ma faute :red:. Pour la critique, je n'ai pas fini la formation (j'en suis a 50% a peu près - manque de temps, et pratique, sur angular et d'autres technologies du net me ralentissent mon apprentissage), donc de ce fait je voulais pas m'avancer sur un avis hatif. Cependant, sur ce que j'ai pu voir, je suis plutôt satisfait, le cours est plutôt complet et le formateur agréable en ce qui concerne la compréhension des sujets traités (bonne explications, pointe d'humour appréciable, etc). Bref je regrette pas, du moins pour le moment. Juste un petit détail un peu ennuyeux, le thème sur VSCode (Cobalt ?) est pas très lisible, en particulier sur des grands écran à distance (respectable), surtout du au fait de la couleur et de la petite taille de police. A part ce détail, rien à dire. Voilà et désolé du retard pour la critique.
Sebastien
January 1, 2021
2eme cours que je prend avec ce prof (le 1er étant Maitriser ASP.NET Core) Toujours une bonne Dynamique. Top

Charts

Price

Développer votre première application Angular (v14) - Price chart

Rating

Développer votre première application Angular (v14) - Ratings chart

Enrollment distribution

Développer votre première application Angular (v14) - Distribution chart
3541380
udemy ID
10/2/2020
course created date
12/18/2020
course indexed date
Bot
course submited by