Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: Développer votre première application Angular (v14)
Rating: 4.5 (135 reviews)

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

Created byEvan BOISSONNOT - C# Angular JS TypeScript Git Godot

Last updated 7/2022

French

What you'll 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

Course content

21 sections • 199 lectures • 14h 16m total length

Introduction1:45
Présentation, navigation dans la formation
Qui je suis, et pourquoi moi1:53
Dynamique, expérience, passionné .net
Comment je fonctionne ?2:07
Jeux / Missions / Points
Ce que nous allons apprendre4:20
Du html, du css, du bootstrap
Du angular :)
Première quête : on installe Visual Code5:12
Installation de Visual Code
Seconde quête : Une première page html3:27
Création d'une première page html
Seconde quête ! :)
XP gagnés !! :)0:17

Notre but : concevoir une première maquette0:24
C'est parti, nouvelle quête !
Une maquette4:32
Entre outils dédiés, et from scratch à la main
Et le http, c'est quoi ?9:21
Rapide tour de http, avant et aujourd'hui
Découverte html6:10
Explication du html : ça doit avoir du sens
Structure obligatoire et explications5:22
meta, title, body, head ..
Comment découper sa page4:42
Comment bien découper sa page pour effectuer un maquettage
Les divs7:12
On reprend la première page, et on ajoute un titre, un sous titre + div et image
Live server3:52
Découvrons et installons Live Server
Les images7:29
Les images en html
Section / article : théorie3:26
Utilisation des balises articles et sections, vive le html 5
Section / article : pratique2:24
On teste et utilise
Correction de l'exercice4:16
XP gagnés !! :)0:17

Notre but : embellir la page, la rendre sexy (enfin un peu)0:45
Notre but : embellir la page, la rendre sexy (enfin un peu)
CSS : déjà on peut en mettre dans chaque balise4:39
CSS : déjà on peut en mettre dans chaque balise
Changement de la couleur de la taille de font0:22
Changement de la couleur de la taille de font
Correction4:35
Corrigeons ensemble
On souhaite l'appliquer à plusieurs éléments : comment ?7:04
On souhaite l'appliquer à plusieurs éléments : comment ?
Découverte de la notion de classe6:56
Découverte de la notion de classe css
On va chercher à utiliser le css par fichier4:48
On va chercher à utiliser le css par fichier
Bravo0:39
Bravo c'est fini
XP gagnés !! :)0:17

C'est quoi le responsive design1:32
Une dernière règle css, plusieurs classes sur une meme balise4:38
Les points importants du RD en CSS / Html7:03
Notion de grille, viewport, @media query, flex /
Découvrons le flex6:30
D'autres possibilités que le flex2:22
le grid en css 4, le inline, ...
Une seconde notion très importante : le media query4:35
C'est à vous, améliorer notre page d'accueil2:05
Correction : footer et header6:06
Correction row et col7:20
Correction : auto margin4:09
media query2:37
Ne plus se prendre la tête : un framework css2:08
Bravo1:07
XP gagnés !! :)0:17

Démarrage mission0:13
Problèmes rencontrés6:58
Copié collé, maintenance ...
Présentation git7:03
Git local => Actions importantes : init / commit6:41
Un nouveau commit et le log5:53
Revert6:28
Travail à plusieurs à distance : github9:10
github, gitlab, bitbucket, ..
Git clone / git push7:48
Git pull2:45
Notion de branches : pourquoi / univers paralleles6:56
Deux branches de base : master / dev8:46
Git merge branch2:47
Git push -u4:19
Git repo conseillé3:16
Bravo !1:51
XP gagnés !! :)0:17

Démarrage mission1:28
Le chargement d'une page, ça se passe comment ?8:09
Rappel + démo allers-retours => MPA
Et si on découpait ça en composants ?8:27
L'arrivée du SPA
On va installer angular, c'est quoi ?3:34
Présentation d'angular
Présentation npm / node6:53
Explication npm / node.js avant
Installation angular11:19
[NEW] - Installons angular v148:26
Je montre ici les étapes pour installer la CLI d'angular 14
[NEW] - Les 2 grandes nouveautés d'angular v144:00
Et oui, ça y est on est en v14 !
Migrons d'angular v13 à v146:54
Si vous êtes encore en v13, apprenez à passer à la v14
[OLD] - Installons angular v135:22
[OLD] - Migrer de la 10 (par exemple) à la 136:15
Découverte de https://update.angular.io/
typescript ?8:59
Pourquoi typescript
On change le titre de la page7:38
Bravo2:51
XP gagnés !! :)0:17

Démarrage mission0:40
Le point essentiel : le component, la vue2:12
Lien entre composant et vue
Apprendre à se repérer dans Angular3:28
Jeu : decouvrir les points clefs suivant :

1. Quelle version angular

2. Comment se passe le chargement js, qui est chargé en premier

3. Quel endroit où l'on indique le dossier de code

4. Comment s'appelle ce fichier

5. On y trouve quoi d'autres (2)

6. Où se trouve les infos de paramétrages de test

7. Config de dev / prod ?

8. Comment on charge les composants et dans quel ordre ?
Résultat des comptes8:20
Résultat des comptes (suite)11:07
Revenons à la vue - Premiere condition9:23
Découverte ngif
ng for8:08
Découverte ngfor
Retour exo/boss, avec selfie et wookie12:24
ng else3:15
Bravo2:46
XP gagnés !! :)0:17

Démarrage mission1:24
Notion de multi composants / POC4:40
Explication composant5:05
Un menu - premier vrai composant8:31
[NEW] - Angular 13 - Le mode strict8:15
Ce mode strict peut surprendre, et c'est important de bien le comprendre, pour ne pas être bloqué-e durant la suite de la formation
Un second composant: le listing des wookies0:57
On améliore avec le html qu'on avait6:15
On finalise la beauté avec le container2:10
Sous composant par selfie6:11
Comment passer l'item à notre enfant ?
Découverte d'input10:32
Bravo1:30
XP gagnés !! :)0:17

Requirements

Savoir coder
Savoir programmer
Connaître les conditions, les switchs, les for, les foreach
Connaître la POO (les bases)
Comprendre ce qu'est une classe, une interface
Savoir coder les bases du javascript

Description

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 :

Une application web dite SPA (Programmation Orientée Composant) , professionnelle
Une application web fonctionnant sur Linux ou Windows
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 ? :=)

Who this course is for:

développeuses backend intéressées par le web
développeurs backend intéressés par le web
développeuses javascript, web souhaitant créer des application web FullStack
développeurs javascript, web souhaitant créer des application web FullStack
développeuses souhaitant créer des applications web propres et bien architecturées
développeurs souhaitant créer des applications web propres et bien architecturées

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

What you'll learn

Explore related topics

Course content

Bienvenue ! Présentation .. à vos marques, prêt-e ?7 lectures • 19min

Premiers pas en HTML13 lectures • 59min

Découvrons le css9 lectures • 30min

Découverte du CSS - Partie 2 - RD14 lectures • 52min

Découverte Git16 lectures • 1hr 21min

Découvrons bootstrap15 lectures • 1hr 24min

Découvrons Angular15 lectures • 1hr 31min

Découvrons Angular +11 lectures • 1hr 2min

Découvrons Angular + boostrap8 lectures • 23min

Découvrons Angular + n composants12 lectures • 56min

Requirements

Description

Who this course is for: