Découvrir Angular 2

Mettre en place les fichiers à inclure dans son application

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Avant d'entrer dans le code pur et dur, il faut mettre en place un dossier de projet comprenant quelques fichiers très importants.
04:26

Transcription

Alors n'ayez pas peur, on va voir ensemble effectivement qu'il y a beaucoup de fichiers ici, à mettre en place. Pour démarrer un projet, vous êtes obligé de faire comme ça quoi qu'il arrive. Une fois que vous l'aurez fait une fois, il n'y aura pas de problème. On est parti, si vous ne comprenez pas regardez encore une fois cette vidéo. Je prends la page de Quickstart parce que dessus vous trouverez toutes les informations. Pas besoin de tout lire, je vais vous faire un petit détail. Mais en tout cas, pour démarrer une application Angular, la première chose que vous aurez à faire ça va être d'inclure quatre fichiers et donc de les créer, forcément, dans votre projet. J'ai ouvert un dossier appelé Formations dans lequel je vais pouvoir travailler. Et je vais devoir répercuter exactement ce que la team Angular me demande de faire c'est à dire un fichier package.json qui va lister comme pour une installation par exemple de node, les paquets dont je vais avoir besoin. Donc, vous voyez qu'il y a a tout, il y a Angular command, Compileur, le Core, les formulaires, l'HTTP, Plateforme brother etc., le routeur, donc pas mal de petites choses sympas. On voit aussi qu'il y a dans des librairies qui sont recommandées Systemjs pour gérer la compilation etc. Le core js, Reflect metadata pour les métadatas, eric js on en a parlé un petit peu, pattern observable et Zone.js qui permet aussi de travailler. Il y a quand même pas mal de choses là dans ce package.json. Si c'était que ça, ce serait bien mais c'est pas tout. On a également un Tsconfig.json, on utilise Typescript donc forcement, on est obligé, ici, de venir lui donner une information sur comment on va compiler, qu'est ce qu'on va utiliser etc. Ça c'est la configuration pour Typescript. Et puis on est aussi obligé de créer un Timeping.json qui permettra de faire des références d'identités à certains paquets qui seront utilisés en Typescript. Notamment Core js, Jasmin et Node, si on ne les référence pas, ça ne marchera pas ou en tout cas, cela peut apporter un peu de dysfonctionnements. Enfin, il faudrait également un Systemjs.config.js, ça fera fonctionner System.js permettant de faire la compilation un peu live, et donc on est obligé également de référencer pas mal de choses. Alors, en soi, ne vous inquiétez pas, tout ce qu'il va suffire de faire c'est de passer les paquets les uns après les autres, de faire ici un COPY TO CLIPBOARD pour copier directement et puis de venir ici, dans un nouveau fichier. Alors, vous pensez bien à prendre le bon nom, par exemple Package.json. Là, on va se faire un Package.json, voilà ! Et puis on va venir coller à chaque fois, hop ! les différentes informations. Là vous aurez préparé votre projet. Si vous ne voulez pas trop « vous prendre la tête », vous avez également la possibilité ici, d'utiliser une autre façon de faire. Cette façon de faire a été lancée il n'y a pas si longtemps par la team Angular, c'est vraiment génial c'est l'Angular CLI : l'interface en ligne de Command. Cela va permettre très simplement de lancer un projet et pour ça trois commandes suffisent, Npm install pour installer via le Note package manager Angular CLI de façon globale avec le tiret G. Ensuite, on aura une nouvelle commande qui s'appellera Ng pour Angular. On pourra lui dire new pour démarrer un nouveau projet et lui donner le nom du dossier dans lequel on veut démarrer un projet. On fera ensuite, Se rendre dans le projet, et avec Ng serve, on pourra directement démarrer, ici, un petit serveur web qui permettra de travailler. Il y a pas mal de choses sympathiques, ça c'est intéressant. Je vous conseille de vous pencher sur ce projet qui est géniale. cela va ressembler pour ceux qui font du symphonie, à la ligne de commandes symphonie. Tous les projets implémentent ce genre de choses. C'est un peu à la mode, si vous avez regardé l'actualité JavaScript, vous avez vu que Réact a également lancé le sien. Donc, voilà, on est vraiment dans une mouvance d'avoir des petits Outils du Touline intéressants autour des Frameworks. Eh bien allez regardez le projet Angular CLI, parce que cela est pas mal. Cela permet de démarrer rapidement. Alors faites très attention ! ici, nous on va utiliser une version particulière d'Angular 2. Je vous conseille de regarder dans la vidéo quand vous allez l'installer, quelle est la version utilisée. Et surtout pour reproduire les exemples, je vous conseille d'utiliser la bonne. Ici, il y a 2.0.0-Rc4. Si vous n'utilisez pas celle là comme moi, vous risquez d'avoir des différences dans le code. Donc n'hésitez pas : utiliser la même version. Donc faites simplement un copier-coller ici, en fonction de ce que j'ai ici. Puis vous mettez les répercussions dans votre projet. Je pense l'avoir laissé assez à l'écran pour que vous puissiez voir ce que cela donne. Vous créez d'abord les quatre fichiers, puis on va voir ce qu'on a à faire après. Tout cela, c'est le démarrage d'un projet en Angular.

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 !