Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Angular 2

Démarrer une application

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Angular nécessite un fichier de démarrage qui permet d'inclure la librairie principale et de bien démarrer une application. Voyez comment le mettre en place.
05:05

Transcription

Alors, on va se rendre, bien sûr, avec un terminal, dans le dossier dans lequel on a installé l'application. Pour moi, ici, c'est : « Sites/formation », je me rends directement dans ce dossier-là, et ici, vous pourrez essayer de lister, si vous êtes sur Windows, avec « dir », ça marchera, si vous êtes sur un Mac ou sur un environnement UNIX, un petit « ls » fonctionnera aussi. Alors, vous remarquerez ici que vous retrouvez effectivement vos quatre fichettes « Configuration », et notamment celui qui nous intéresse : le « package.json ». Je vous l'ai dit tout à l'heure, il faut installer dans un premier temps les différents paquets référencés dans « package.json ». Ça va permettre de télécharger les librairies et vous allez pouvoir les utiliser. Comment j'installe l'environnement ? De façon très simple, vous allez simplement utiliser l'utilitaire que vous avez installé précédemment, qui est donc le « Node Package Manager », en faisant un « npm », et vous allez simplement faire « install ». Ce qui se passera ici, c'est qu'il trouvera votre « package.json » dans le dossier et il va le scanner et installer les librairies qui vont bien. On va lancer le « npm install », vous allez voir qu'ici, il va télécharger, recharger certaines informations, trouver ce qui correspond réellement, et à partir de là, il va vous installer toutes les librairies. Quand les librairies seront installées, il faudra que l'on retourne de l'autre côté, d'ailleurs on peut le faire sans aucun problème. Voilà. On va retourner de l'autre côté, on voit qu'ici, on a pour le moment, directement, notre index.html dans lequel on va devoir, ici, référencer certains paquets. Alors, les petits paquets à référencer, ne vous inquiétez pas, vous les retrouverez également dans la documentation : le « Quickstart ». Il faut descendre un petit peu, évidemment, mais toute cette structure de page html, vous pouvez tout à fait la copier depuis cet emplacement-là. Je le fais pour vous montrer ce que ça donne, comme ça, je vous l'explique pendant que ça installe. Qu'est-ce qu'on a ici comme structure de page ? Vous pouvez partir de celle-ci, vous pouvez l'améliorer sans problème. Vous remarquez qu'ici, on a pas mal de petits fichiers liés. Alors ces fichiers liés sont assez importants, le « shim.min.js » va émuler certaines fonctionnalités pas disponibles sur tous les navigateurs. Le « zone.js » va nous permettre de contrôler des informations dans la page des zones qui vont se mettre à jour. Ça, c'est un peu obligatoire pour Angular 2. Le « reflect-metadata », Reflect, lui, c'est pareil, c'est important pour les anciens navigateurs, normalement, pour les navigateurs récents, ça ne posera pas forcément de problème. Et le « system.rsc.js », bien sûr, fait fonctionner « systemjs » car c'est un paquet provenant de « systemjs ». Ces quatre-là, vous serez plus ou moins obligé de les avoir, c'est ce qu'on appelle des « Polyfill ». Polyfill, ça permet, pour les anciens navigateurs, d'émuler certaines fonctionnalités. Ensuite, on aura bien sûr la configuration, le « systemjs », que vous avez ici dans votre dossier. Et enfin, vous verrez qu'ici, on a un démarrage de l'application par « systemjs » et on a ici un catch des erreurs au cas où on aurait des erreurs, tout simplement. Alors là, pour le coup, vous verrez que ça peut être très utile, et que c'est extrêmement intéressant. Enfin, vous voyez quelque chose d'autre dans le Bootstrap, dont on n'a pas vraiment parlé, c'est qu'ici, vous avez un « body », et puis vous avez une balise « myapp ». À quoi ça correspond ? On ne sait pas. Mais bien sûr, on va le voir, car, la suite, c'est de créer un premier composant assez simple, et ce premier composant s'appellera : « myapp ». Vous pouvez copier, si vous le souhaitez, cette ligne-là, c'est pas un problème pour le moment, ça fait partie de la structure de base qu'on devrait avoir. Vous remarquerez également qu'il y a un « styles.css », ici, qui est relié. Alors je vous conseille, ce « styles.css », de le créer tout de suite, si vous ne voulez pas avoir de problème après. Et vous remarquerez qu'après, vous pourrez naviguer directement sur « styles.css », c'est important, si vous ne voulez pas avoir de fichiers qui ne se chargent pas dans le navigateur. Bon, je pense que là, c'est suffisant, regardez, les « node_modules » se sont chargés. Il faut remarquer qu'il y en a pas mal, car il y a beaucoup de dépendance par rapport à Angular. Les plus importants sont là, ceux qui nous intéressent. Ils sont tous rangés dans « @angular », c'est vraiment la plate-forme complète d'Angular 2 que vous allez avoir ici. Si vous avez envie de tester, il n'y a pas de problème, il suffira de lancer cet « index.html » sans aucun souci dans un navigateur et vous pourrez le tester. Alors on pourrait tout à fait aller le chercher, double-cliquer, et puis voir qu'effectivement, pour le moment, on ne va pas avoir d'erreurs plus que ça, mais, on a des choses qui ne se chargent pas parce qu'il n'arrive pas à récupérer certaines informations. C'est normal, regardez, il cherche le « app/main.js » mais il ne le trouve pas. Comment est-ce que c'est possible ? Pourquoi va t-il chercher un « main.js » comme ça ? Très certainement parce que dans votre « systemjs.config », vous avez dû référencer sans le vouloir, ici, un script qui s'appelle « main.js ». Qu'est-ce que ça veut dire ? La suite dans la prochaine vidéo. Bien sûr, maintenant, on va bootstrapper un premier composant en Angular. Ici, maintenant, vous avez la structure de base pour pouvoir bien démarrer.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :6 sept. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !