Créer notre projet à l'aide d'angular-cli | codeconcept

Autoplay
Autocomplete

Vidéo précédente Terminer et continuer

Cinq mini-projets pour se perfectionner sur Angular 2+

Projet 1 - Weekplan (planifier son emploi du temps en tâches, CRUD dans localStorage)

Présentation du projet (1:20)
Créer notre projet à l'aide d'angular-cli (3:46)
Ajout de (twitter) bootstrap (1:01)
Architecture basée sur container components et presentation components (6:49)
Création du module "grid" (4:53)
Installation de la librairie de drag & drop "Dragula" (3:36)
Importation du Module Dragula (4:43)
Implémentation du drag & drop à partir de données en dur (12:49)
S'abonner aux événements drag, drop, over, out (10:20)
Créer le type "Task" (2:11)
Créer le custom service crud-localstorage (8:46)
Consommer le service crud-localstorage (3:14)
Passer des données de app.component vers son enfant grid.component via un @Input (3:47)
Consommation par Dragula des données passées en input (0:44)
Création du presentation component add-form.component (12:17)
Créer et émettre un custom event (7:15)
Typer fortement l'event reçu par le container component (0:58)
Persister les nouvelles tâches postées via le formulaire dans localStorage (8:54)
Persister la position des tâches (14:14)

Projet 2 - YT Search & Play (créer un projet MEAN, requéter l'API REST Youtube, lire une vidéo du résultat dans un player ergonomique, persister les favoris dans MongoDB via Mongoose)

Présentation du projet (3:23)
Initialisation de la partie front-end à l’aide d’angular-cli (4:36)
Initialisation de la partie back-end Node / Express (2:45)
Création du serveur Express (6:17)
Génération du répertoire ‘dist’ et envoi sous forme de fichiers statiques par Express (5:10)
Créer une API à l'aide d'Express (8:11)
Création de notre base MongoDB (7:00)
Création d’un model Mongoose (10:28)
Utiliser notre model Mongoose afin de lire dans mLab depuis notre API (4:47)
Génération du service Angular : FavoriteService (5:53)
Génération du component Angular 2 favorite-list (7:05)
Exportation de nos constantes Node (3:14)
Génération d'une page d'accueil (1:29)
Création du menu de navigation (6:21)
Création de nos routes (4:24)
Création de notre component de recherche Youtube : youtube-search.component (7:43)
Transformation de notre champ texte de recherche en flux de données RxJS (7:52)
Création du service de requétage Youtube : youtube.service (5:09)
Utilisation de notre service YoutubeService (4:23)
L'opérateur debounceTime() pour effectuer une requête après l'arrêt de saisies utilisateur trop rapprochées (2:42)
L'opérateur switchMap() pour éviter un subscribe dans un subscribe (7:32)
Afficher les résultats (9:28)
Création du lecteur vidéo (9:36)
Utilisation du module externe angular2-modal (11:46)
Gestion des événements d'une boîte de dialogue créée via angular-modal (6:13)
Enrichir le service Angular favorite.service.ts d'une méthode createFavorite(video) (6:56)
Consommation de createFavorite(video) depuis youtube-search.component.ts (5:07)
Insérer un favori dans MongoDB depuis Node.js via Mongoose (8:45)
Récupérer le contenu posté à l'aide de body-parser (8:28)
Afficher les favoris (5:50)
Gérer la suppression d'un favori (7:54)
Répercuter la suppression du favori côté Front (4:31)
Dernière mise à jour lundi 17 avril 2017.

projet 3 - Foodeval (application Ionic 3 utilisant le matériel d'un device afin de connaitre les ingrédients d'aliments puis de se constituer des menus)

Génération du projet (9:07)
Ajouter un bouton de menu (16:36)
Personnaliser le thème de votre application (5:00)
Installation du plugin cordova barcode-scanner (4:26)
Ajouter et personnaliser un FAB (Floating Action Button) (7:17)
Imports relatifs à Barcode Scanner (4:49)
Implémenter le scan (9:18)
Test sur un vrai device à l'aide de Ionic DevApp (5:23)
Test sur un vrai device à l'aide de Ionic DevApp (démo) (3:11)
async et await (ES 7) (1:57)
JSON pipe (1:01)
Requêter une API REST (10:30)
Afficher les données de l'API dans l'application Ionic (7:19)
Firebase et AngularFire 2 (8:17)
Firebase et AngularFire : préparation (5:51)
Persister dans Firebase (9:09)
Dernière mise à jour : lundi 27 novembre 2017

Projet 4 - Avidelecture (avis de lecture en CRUD dans appli MEAN Angular 7)

Projet 4 - date estimée mai 2019

Projet 5 - Parios : paris entre amis (parier un coup à boire ou des croissants, Angular 7 / Firebase 4)

Projet 5 - date estimée juin 2019

Créer notre projet à l'aide d'angular-cli

Terminer et continuer

Discussion

4 commentaires