Découvrir Angular 2

Initialiser des variables avec des constructeurs

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Voyez comment initialiser des variables, non pas à leur déclaration, mais dans un constructeur de classe. Cela est très utile et déjà bien connu dans d'autres langages.
05:18

Transcription

C'est pas mal, vous avez vu comment définir des variables qu'on va réutiliser dans le template. Cela dit, je vous conseille de ne jamais démarrer de cette façon. En fait, de ne jamais initialiser une valeur à vos variables, directement dans la déclaration de la variable. Je vais vous expliquer pourquoi, on est en train de faire du typescript, on travaille sur un modèle qui essaye d'être sous forme de classe. Avec une certaine syntaxe très particulière. L'idée est de partir du principe que cette classe est un vrai objet, que l'on construit et à ce titre, dispose de propriétés. Ces propriétés on les définit de prime abord, ensuite on utilise un constructeur car maintenant des constructeurs permettent, à l'initialisation de votre composant, de venir définir des vraies propriétés dans les variables. On va donc contrôler un petit peu plus nos variables. On va ici, venir créer un constructeur de cette façon-là. Ce constructeur pourra être utiliser de plusieurs manières différentes, on va l'utiliser d'une manière simple pour le moment. On va récupérer ces deux valeurs ici, on va les coller à cet endroit-là. On ne va pas utiliser title mais 10.title, car on a définit au dessus le title, et également 10.text pour assigner réellement à la construction, au démarrage de ce composant, des valeurs. Et ici, on va devoir définir et garder cette définition du title, comme ça, et de la même façon pour text. Mais on va pousser un tout petit peu plus. Oui, parce que, comme c'est de l'objet et comme on est en train de travailler avec un langage un peu nouveau, on va pouvoir également utiliser des portées, et ça c'est génial. Vous allez pouvoir définir qu'une variable va être une variable publique, disponible même par extension, puisque l'extent sera également disponible. Mais, aussi en private ou encore, en protected. Je vous conseille de toujours démarrer par du private, simplement, dire que vos variables sont privées et si vous avez besoin de faire de l'extension, vous commencerez à réfléchir à la portée de vos variables et à la changer. Si vous travaillez avec des variables disponibles uniquement ici, dans le scope d’exécution de votre classe. Attention, je parle de scope, je ne parle pas de scope Angular, je parle bien de scope d'exécution de classe, un scope d'exécution de composants Pensez à les mettre en privé. Deuxième chose que l'on va pouvoir faire, c'est de définir un type à chaque variable et le type est extrêmement important. Pourquoi ? Parce que vous êtes en train de travailler avec typescript, et typescript c'est justement une espèce de surcouche de JavaScript, qui vous permet d'abord de coder proprement, mais surtout, de coder avec un typage fort. Ici, je vais définir que ce type sera de la string. Voyez comment je fais, je vais taper deux points après le nom de ma variable, et définir son type. Des types, il y en a plein. Vous pouvez définir du number, de la string, vous pouvez définir de l'area, vous pouvez définir des collections, vous pouvez également définir des modèles, il faudra les créer à l'avance, on en reparlera. Si je mets que c'est du number, regardez ce qui se passe, c'est génial, la façon de développer, et surtout l'environnement de développement dont on dispose, va me crier dessus, pourquoi ? Parce que je suis en train d'essayer d'assigner une string à une variable qui est de type number. Ça ne marche pas. Ça vous permettra de garder une cohérence dans votre code, ça vous permettra aussi et surtout, de définir une vraie façon de développer votre code, et de bloquer, donc d'assigner des contrats, simplement, à vos différentes variables, à vos différentes valeurs, à vos classes. Pensez bien à typer, c'est extrêmement important. Vous pouvez le faire à peu près partout, même dans des fonctions que vous allez définir, vous avez ici des paramètres à passer dans une fonction. Vous pourrez les typer en disant que vous attendez quelque chose de particulier Angular sera en capacité, via typescript, via votre éditeur de texte, de vous donner des informations. Est-ce que ça change de ce côté-là ? Non, il n'y a pas besoin. Tout ce qui change c'est vraiment le corps de notre fonction ici. On a définit un constructeur qui démarre au moment où le composant démarre, ni plus ni moins. On a définit ici, des nouvelles variables, des allocations mémoire qui sont nommées avec un typage, et ça c'est génial pour nous. Est-ce que ça fonctionne ? Oui, aucun problème. Et bien sûr, ici vous voyez bien la compilation qui s'exécute. Je parle très rapidement de cette compilation, tant qu'on y est. Regardez, quand vous aurez un petit moment le fichier app.component.js il n'existe pas, à la base que vous n'avez pas créer à la main, mais qui est compilé et qui est disponible. Quand vous allez regarder dedans, vous vous rendrez compte que votre typescript a été transformé en JavaScript, c'est ce qui permet à l'application de fonctionner, typescript n'est qu'une façon d'écrire du code JavaScript, qui sera transformé ensuite en JavaScript. Bien sûr, si vous aviez ça à écrire à la main, tout seul, je pense qu'on est d'accord, vous y mettriez des heures, c'est très long à faire, on ne va pas s'amuser à le faire nous même, bien sûr il y a des choses qui existent, le typescript permet d'aller vite, et de garder une cohérence et une propreté dans le code, quasiment jamais atteinte en JavaScript, c'est vraiment sympa à travailler et on s'y retrouve très facilement.

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 !