Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Développez des applications Web avec Angular Angular est une plateforme de déve

Développez des applications Web avec Angular Angular est une plateforme de développement qui permet de créer des applications web dynamiques et immersives. Dans ce cours, vous apprendrez rapidement à créer les composantes de base d'une application Angular, avant d'enrichir vos applications en approfondissant vos connaissances de ce framework. Vous apprendrez également à faire communiquer votre application avec un backend afin de créer une application web complète. À la fin de ce cours, vous serez capable de :  Créer des components Angular  Manipuler un template avec le databinding, les directives et les pipes  Faire communiquer les components avec les services et les Observables  Créer des Single Page Applications avec le routing  Communiquer avec les utilisateurs avec les formulaires  Faire communiquer une application avec un backend Pré-requis :  Des connaissances solides en HTML  Des bases en TypeScript ou une bonne connaissance du JavaScript  Des bases en CSS/SCSS Partie 1 - Commencez avec Angular 1. 1. Découvrez les enjeux autour d'Angular 2. 2. Installez les outils et créez votre projet Partie 2 - Construisez une application Angular 3. 1. Structurez avec les components 4. 2. Gérez des données dynamiques 5. 3. Structurez le document avec des Directives 6. 4. Modifiez les données en temps réel avec les Pipes o Quiz : Testez vos connaissances sur les components o Activité : Créez une application de type blog Partie 3 - Enrichissez votre application 9. 1. Améliorez la structure du code avec les Services 10. 2. Gérez la navigation avec le Routing 11. 3. Observez les données avec RxJS o Quiz : Testez vous sur les Services, les Observables et le routing Partie 4 - Interagissez avec un utilisateur et un serveur 13. 1. Écoutez l'utilisateur avec les Forms - méthode template 14. 2. Écoutez l'utilisateur avec les Forms - méthode réactive 15. 3. Interagissez avec un serveur avec HttpClient 16. 4. Créez une application complète avec Angular et Firebase o Quiz : Interagissez avec un utilisateur et un serveur o Activité : Implémentez l'ajout des posts dans votre blog Partie 1 - Commencez avec Angular Découvrez les enjeux autour d'Angular Pour télécharger les vidéos de ce cours, devenez Premium Les frameworks JS Aux débuts du développement web, seul le HTML permet de créer des sites. Les sites web en 1990 ressemblent à des documents texte, car il n’existe pas vraiment d’autres possibilités. Ensuite, en 1998, le CSS arrive pour aider à créer des mises en page plus esthétiques. Finalement, à partir du début des années 2000, le JavaScript commence son règne sur le développement web, permettant des interactions entre l’utilisateur et la page. Certains noteront que je ne parle pas de l’époque Flash ici : je pense qu’il est préférable, pour la santé mentale de tous, d'oublier totalement l’existence de cette technologie qui n’était que très rarement bien exploitée, qui a créé bug sur bug sur bug et qui était remplie de problèmes de sécurité. Passons. À partir de 2005, le système AJAX (Asynchronous Javascript And XML) permet des interactions entre l’utilisateur et des backend HTTP : il est enfin possible d'échanger des informations et de générer du contenu à partir de ces interactions. En 2010, la première version d’AngularJS est lancée. Elle permet de créer plus facilement des Single Page Applications, des applications web qui imitent les applications natives : pas de rafraîchissement du navigateur, temps de chargement réduits, une UI beaucoup moins “internet” etc. Cette version permet déjà de faire énormément de choses, mais souffre d'une syntaxe plutôt complexe ainsi que des limitations du JavaScript. Voilà pourquoi Google choisit de complètement réécrire le framework pour sa version 2. Aujourd’hui, nous en sommes à Angular 5.x (maintenant appelé simplement “Angular”) ; la version 3 ayant été sautée pour des raisons sémantiques tout simplement. Pourquoi Angular ? Il y a plusieurs frameworks JavaScript très populaires aujourd’hui : Angular, React, Ember, Vue… les autres frameworks marchent très bien, ont beaucoup de succès et sont utilisés sur des sites extrêmement bien fréquentés, React et Vue notamment. Angular présente également un niveau de difficulté légèrement supérieur, car on utilise le TypeScript plutôt que JavaScript pur ou le mélange JS/HTML de React. Ainsi, quels sont donc les avantages d’Angular ?  Angular est géré par Google — il y a donc peu de chances qu’il disparaisse, et l’équipe de développement du framework est excellente.  Le TypeScript — ce langage permet un développement beaucoup plus stable, rapide et facile.  Le framework Ionic — le framework permettant le développement d’applications mobiles multi- plateformes à partir d’une seule base de code — utilise Angular. Les autres frameworks ont leurs avantages également, mais Angular est un choix très pertinent pour le développement frontend. Qu’est-ce que le TypeScript ? Pourquoi l’utiliser ? Pour faire bref, le TypeScript est un sur-ensemble (un “superset”) de JavaScript qui est justement transcompilé (transcompilation : "traduction" d'un langage de programmation vers un autre - différent de la compilation, qui transforme généralement le code vers un format exécutable) en JavaScript pour être compréhensible par les navigateurs. Il ajoute des fonctionnalités extrêmement utiles, comme, entre autres :  le typage strict, qui permet de s’assurer qu’une variable ou une valeur passée vers ou retournée par une fonction soit du type prévu ;  les fonctions dites lambda ou arrow, permettant un code plus lisible et donc plus simple à maintenir ;  les classes et interfaces, permettant de coder de manière beaucoup plus modulaire et robuste. Ceci n'est pas un cours sur le TypeScript ! Vous allez utiliser des fonctionnalités natives de ce langage tout au long de ce cours ; si vous souhaitez en savoir plus, ou s'il y a des commandes ou des façons de coder que vous ne comprenez pas, n'hésitez pas à consulter la documentation officielle. Installez les outils et créez votre projet Pour télécharger les vidéos de ce cours, devenez Premium Préparez l'environnement de développement Qu’est-ce que le CLI ? Le CLI, ou “Command Line Interface” (un outil permettant d'exécuter des commandes depuis la console), d’Angular est l’outil qui vous permet d’exécuter des scripts pour la création, la structuration et la production d’une application Angular. Pour accéder à la ligne de commande :  Sur Windows : si vous souhaitez utiliser l'invite de commande native de Windows, il vous suffit d'ouvrir la fenêtre Exécuter en faisant Windows+R et en entrant cmd. Sinon, il existe des utilitaires natifs comme PowerShell ou des tiers comme PowerCmd ou ConEmu par exemple. Toutes les commandes citées dans le cours devraient fonctionner si vous êtes authentifié comme administrateur sur votre machine.  Sur Mac : il suffit de lancer Terminal depuis Spotlight ou le Launchpad.  Sur Linux : lancez le terminal de votre choix. Installez les outils Vous devez installer les outils suivants si vous ne les avez pas déjà sur votre machine : NODE.JS Téléchargez et installez la dernière version LTS de Node.js ici : https://nodejs.org/en/download/ NPM NPM est un package manager qui permet l’installation d’énormément d’outils et de libraries dont vous aurez besoin pour tout type de développement. Pour l’installer, ouvrez une ligne de commande et tapez la commande suivante : npm install -g npm@latest Si la commande échoue pour un problème de permission sur Mac ou Linux, vous pouvez la lancer en mode super-utilisateur avec sudo ou consulter la documentation suivante. ANGULAR/CLI Vous allez maintenant installer le CLI d’Angular de manière globale sur votre machine avec la commande suivante (avec sudo si besoin) : npm install -g @angular/cli À partir de là, la commande ng est disponible depuis la ligne de commandes depuis n’importe quel dossier de l’ordinateur. Pour plus d’informations, vous pourrez trouver la documentation de chaque élément sur le site correspondant :  node.js : https://nodejs.org/en/docs/  npm : https://docs.npmjs.com/  ng : https://cli.angular.io/ Créez votre premier projet Pour créer un nouveau projet Angular, naviguez vers le dossier souhaité depuis une ligne de commande et saisissez la commande suivante : ng new mon-premier-projet Ensuite, naviguez dans le dossier du projet et lancez le serveur de développement : cd mon-premier-projet ng serve --open Si tout se passe bien, vous verrez les informations du serveur qui se lance à l'adresse localhost:4200 et votre navigateur préféré se lancera automatiquement avec le message "Welcome to app!!" et le logo Angular. Félicitations, votre environnement de développement est prêt ! Quelques conseils pour le développement Pour développer, je vous conseille d'utiliser un éditeur comme Atom ou Sublime Text, ou un IDE comme VS Code ou WebStorm. Pour les screencast et screenshot, j'utiliserai WebStorm, qui comporte beaucoup de fonctionnalités prévues spécifiquement pour le développement JavaScript/TypeScript, donc ne vous inquiétez pas si les couleurs ou les visuels dans votre éditeur ne ressemblent pas exactement à ceux que je vous montre. Je vous conseille d'utiliser Chrome comme navigateur par défaut pour le développement, car les Developer Tools sont très complets, et vous avez également la possibilité d'installer Augury, un plugin Chrome spécifique pour le développement Angular. Pour la suite du cours, j'utiliserai les styles en SCSS plutôt qu'en CSS simple : cela uploads/Industriel/ de-veloppez-des-applications-web-avec-angular.pdf