Découvrir Angular 2

Comprendre les différences avec la version 1

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
AngularJS, Angular, etc., on va vite se perdre dans les termes. La version 2 du framework apporte son lot de nouveautés que vous allez découvrir ici.
06:54

Transcription

Avant de partir à corps perdu dans Angular 2, si vous faisiez de l'Angular 1, voilà, une petite vidéo guide de migration entre la version une et la version deux. Vous retrouverez très facilement cette documentation puisqu'elle fait partie de la doc officielle d' Angular que vous trouvez sur le site Internet. Cela dit, il est en anglais et c'est vrai que si bon, vous n'avez pas forcément envie de la lire, c'est plus intéressant, si on la parcourt ensemble. Et que je vous explique un petit peu ce qui se passe. Pas beaucoup de changements, en réalité des refontes, des renommages, voilà ! On essaye de gagner en clarté, c'est un petit peu ce que la Team Angular souhaite. Parlons d'abord des interpolations, le fait de venir exposer et afficher une variable. En Angular 1, on avait pris l'habitude de préfixer tous vos contrôleurs par un autre contrôleur, ici, c'était par exemple VM. Eh bien ça n'existe plus, tout simplement, parce que le scope en Angular 2 a sauté. Il n'y a plus d'état de scope, puisque vous verrez que maintenant ce sera un peu plus compliqué que cela. On va travailler essentiellement en composant et les composants auront leur scope à eux. Bon, il n'y aura même pas de scope, on sera sur du JavaScript pur. Avant on était obligés d'utiliser un nom, et puis généralement un contrôleur. Maintenant, on utilise simplement le nom de la variable définie et ce sera très suffisant. Mais ça n'a pas changé, comme vous pouvez le voir, c'était ici, des doubles accolades, ça reste des doubles accolades : donc c'est parfait ! Pour les filtres en Angular 1, on avait le mot filters, en Angular 2, exactement le même fonctionnement. Par contre, pas la même définition évidemment, cela va être un peu plus compliqué, on en reparlera. Cela dit cela ne change pas, ça reste ici, une barre. Et en fait, c'est un pipe, c'est comme ça que cela s'appelle en informatique. Du coup, ils l'ont appelé Pipe, c'est plutôt cool pour nous, on reste sur des termes que l'on connaît. Les variables locales : alors attention, ici, c'est un peu particulier. J'appelle une variable locale une variable qui va être utilisée généralement dans une boucle. En Angular 1, nous avions la directive NgRepeat, on ne l'a plus en Angular 2, on a un *NgFor. Ne vous inquiétez pas, c'est un peu particulier sur la syntaxe, c'est du sucre. On verra ça un peu plus tard, on en parlera, ça a évolué, il y a une nouvelle syntaxe. Ça reste potentiellement la même chose, ça a un peu évolué quand même. Vous allez voir l'apparition d'un mot clé que peut être vous ne connaissez pas qui est du ECMAScript 6, qui s'appelle Let, qui permet de définir maintenant en JavaScript, une variable qui va être utilisée, un temps, c'est-à-dire dans son scope, et qui ne pourra pas être utilisée en dehors ou après. Donc Let, vous utiliserez ça, c'est la seule chose qui a changée. Et bien sûr, la définition de cette boucle. Sinon, le reste c'est la même chose. On voit bien qu'il n'y a pas grand chose de différent. Pour les Templates, les Templates, vous verrez, je vous le montre rapidement, ça va être un petit plus particulier. Avant on définissait un Ng-app, avec un contrôleur, on attachait le template au contrôleur, tout un fonctionnement un peu particulier. Maintenant, tout ça va passer par du bout de strapping. Bien sûr, la lecture de ce code-là, je le sais, je le comprends, va vous paraître très compliquée au départ. Mais ne vous inquiétez pas, on va démystifier la chose. Vous verrez plus tard que ce n'est pas absolument pas compliqué, quand on a compris ce qui se passe. Il y a des imports, des bouts de strap qui sont utilisés. Pour le moment vous ne comprenez pas, ne vous inquiétez pas ! Simplement, sachez que maintenant, ça été un peu dé-corrélé. On va travailler en composant. Absolument tout sera à l'intérieur d'un fichier, au départ, et je vous apprendrai ensuite comment découper proprement. NgClass, un peu particulier, permettait ici, d'activer une classe particulière en fonction d'un boulet un, par exemple. Cela, ça a évolué, voyez que maintenant, pour les utiliser c'est comme avant. Sauf qu'on va venir définir NgClass, ici, entre des crochets pourquoi ? Parce qu'il y a des nouvelles syntaxes qui sont mises en place parce que le parseur d'Angular 2 n'est pas le même parseur qu'Angular 1. C'est pas très compliqué non plus, on voit que le tiret a été abandonné pour passer à quelque chose de plus standard. Donc, du CamelCase, tout simplement. Si on regarde les directives, c'est pareil c'est un petit peu particulier. Maintenant, on va pouvoir utiliser toutes les directives existantes en HTML classique. Soit par exemple le clic, on peut utiliser absolument tout, et vous verrez que ça a un peu changé, on est obligés de les mettre entre parenthèses. Avant on avait des vraies directives Ng tiret quelque chose : ça n'existe plus. Maintenant, on va devoir référencer les directives, ici, avec les parenthèses. C'est comme ça, cela a changé, ça a évolué. Les contrôleurs : les contrôleurs n'existent plus. Les contrôleurs sont maintenant des composants. Et on verra que pour créer des composants, il y a un décorateur. Ne vous embrouillez pas l'esprit, tous ça on va le traiter un peu plus tard. De même, la directive NgHide que vous connaissiez si bien en Angular 1 eh bien n'existe plus réellement. Il y a une directive qui fait partie du framework. Donc vous verrez qu'ici, on a la propriété qui s'appelle Hidden, qui permet de travailler. NgHref a également été squizzé. Il n'existe plus en Angular 2. Par contre, le Href entre crochets sera disponible, et permettra de faire de l'interpolation sur des propriétés de balises. NgIf, celui-là, était quand même très utile pour afficher ou pas un élément en fonction d'un boulet un, Il existe toujours comme d'habitude. Vous verrez que c'est étoile quelque chose qui a remplacé le Ng tiret. Celui-ci va vous demander de pousser un petit plus, mais on en parlera. Le NgModel permettait de faire du databinding, du two-way databinding. Donc de faire de l'échange d'informations entre un endroit et un autre. Ça été également amélioré et vous voyez qu'une syntaxe très particulière que vous ne comprenez pas pour le moment est apparue avec des crochets et des parenthèses. On mélange absolument tout. Et vous verrez que ça a une vraie logique. Et quand vous l'aurez comprise, il n'y aura plus de problème. Le NgFor est totalement utilisable aussi et comme le NgRepeat, il utilise un Let pour faire quelque chose ça marche également en ce sens. Alors, ce sera absolument la même chose partout. Bien sûr, on va pas tous les faire ensemble. L'intérêt ici, par exemple, pour NgSrc, c'était de vous montrer qu'effectivement la documentation vous donnera toutes les infos. Là on a parcouru tous les cas, un peu tricky. Vous verrez que c'est absolument pareil pour absolument tout. Donc, on a chaque fois les syntaxes. Ça c'est bien, si vous avez besoin de faire un refactoring de codes. Alors, après, cela pousse un petit plus loin. On vous parle des filtres un peu plus en longueur. On va vous parler un petit plus bas des contrôleurs, comment ça fonctionne. C'est une bonne documentation de départ, si vous faites de l'Angular 1 déjà sur un projet complet et que vous voulez passer à de l'Angular 2. Maintenant, on va, nous, travailler sur de l'Angular 2 et pousser un petit peu le concept. Je reviendrais sur les parties un petit peu tricky, pour ceux qui ont déjà fait de l'Angular 1, et puis j'en reparlerai au fur et à mesure des vidéos, évidemment.

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 !