Share
Angular 2 est un cadre puissant et complet que vous pouvez utiliser pour créer les meilleures applications Web. Construit avec TypeScript à l'esprit, Angular 2 tire parti des fonctionnalités de langage futuristes telles que les décorateurs et les interfaces, qui facilitent et accélèrent le codage..
Dans cette vidéo de mon cours, Modern Web Apps avec Angular 2, je vais vous montrer comment utiliser Angular 2 pour créer un service qui interagira avec le serveur. Notez que dans cette vidéo, nous nous basons sur le code de ce cours et vous pouvez trouver le code source complet du cours sur GitHub..
Jusqu'ici, nous avons construit une application de gestion de projet. Actuellement, les projets que nous affichons à l'utilisateur sont simplement codés en dur dans notre composant de projets. Cependant, ce n'est pas une solution à long terme. Nous voulons avoir un moyen d’obtenir une liste de projets de notre serveur. Donc, dans cette vidéo, nous allons créer un service de projet.
Dans Angular, un service est essentiellement tout ensemble de fonctionnalités que nous souhaitons offrir à plusieurs composants. C'est juste un moyen facile de boucler certaines fonctionnalités. Donc, dans notre répertoire d'applications, créons un service de projets. Et nous appellerons cela projets.service.ts.
Bien entendu, un service n’est pas un composant. Il n’est donc pas nécessaire d’importer le décorateur de composants. Mais il y a un autre décorateur dont nous avons besoin, et c'est Injectable. Alors importons Injectable de angulaire / noyau. Maintenant comme je l'ai dit, Injectable est un décorateur, et cela ne prend aucune propriété. Nous allons donc appeler Injectable, et ensuite exporter notre classe. Nous appellerons la classe ProjetsService.
Injectable rend cette classe quelque chose que Angular peut utiliser comme injection de dépendance. Comme nous le verrons un peu plus tard, nous utilisons l'injection de dépendance pour obtenir une instance de ce service de projet au sein d'un composant qui utilise le service du projet. Une file d'attente angulaire utilise cette injection de dépendance de manière à pouvoir facilement injecter des services fictifs, par exemple, si vous souhaitez tester vos composants..
Alors allons-y et ajoutons quelques méthodes à notre ProjetsService ici. Tout d'abord, nous allons avoir besoin du Http module que Angular a. Cela nous permettra de faire des demandes directement au serveur. Alors importons Http, et nous allons aussi importer la classe de réponse dont nous aurons besoin pour une vérification de type. Et les deux viennent de @ angular / http.
Maintenant, nous devrions également importer le Http module dans notre fichier de modules d'application. Alors, allons-y et faisons cela avant d'oublier. Dans nos modules natifs en haut, je vais importer le HttpModule, et puis dans nos importations, incluons le HttpModule.
Maintenant que nous avons importé cela aux deux endroits nécessaires, nous pouvons utiliser l'injection de dépendance pour injecter cette Http classe dans notre ProjetsService. Donc, au lieu de faire quelque chose comme nouveau Http () ici, nous allons créer une fonction constructeur. Et ce constructeur prendra une propriété de type Http.
Angular verra ce paramètre quand il crée notre ProjetsService exemple, et cela correspondra à cela Http classe à la HttpModule que nous avons importé dans notre module d'application, et il en injectera une instance dans le constructeur.
Maintenant, nous pourrions écrire this.http = http;assigner ce paramètre à une propriété de notre classe. Mais TypeScript a en fait une syntaxe de raccourci pour cela, donc nous pouvons simplement appliquer le mot clé privé directement dans le constructeur, et TypeScript en fera automatiquement une propriété de classe. Et maintenant, à partir des autres méthodes de la classe, nous pouvons utiliser this.http.
Créons donc une fonction appelée getProjects (). Cela va être la méthode que nous appelons pour obtenir notre liste de projets.
Maintenant, avec des fonctions dans TypeScript, nous pouvons toujours utiliser le : Type syntaxe pour spécifier le type de la valeur de retour de la fonction. Et pour getProjects () nous allons retourner un Observable ça enveloppe Projet.
Avant de parler de cela, importons ces deux classes. Donc je vais importer Observable de rxjs, et importons aussi notre Projet modèle.
Alors qu'est-ce qu'un observable? Malheureusement, je ne peux pas vous donner une introduction complète aux observables ici, mais Angular 2 dépend beaucoup de ces observables, et je vais essayer de les rendre aussi simples que possible au fur et à mesure que nous traversons cette partie.
Fondamentalement, une observable est une enveloppe semblable à une promesse ou à un tableau. Les deux promesses, tableaux et observables ont d'autres éléments à l'intérieur. Dans le cas d'un tableau, nous avons plusieurs éléments. Dans le cas d'une promesse, nous avons essentiellement une valeur unique que nous aurons à un moment donné.
Avec les observables, cela peut être une valeur ou plusieurs valeurs. Une définition parfois utilisée est un tableau asynchrone. Fondamentalement, une observable est un flux de données que nous pouvons obtenir davantage à tout moment. Et je pense que vous verrez au fil des leçons comment utiliser les observables pour obtenir et paramétrer certaines de nos données un peu plus facilement. Pour l'instant, si vous n'avez jamais vu d'observables auparavant, vous pouvez simplement les considérer comme une sorte de promesse..
Alors, que reviendrons-nous de cette fonction? Bien on peut faire this.http.get (), alors allons-y / api / projets qui retournera notre liste de projets. Et puis ce que nous pouvons faire est de mapper la réponse à une fonction que nous allons écrire appelée this.extractData.
Vous pouvez penser à la carte() fonctionner ici comme puis() méthode sur une promesse. Cela fonctionne comme sur un tableau où carte() effectuera des opérations sur chacune des valeurs à l'intérieur de ce tableau, puis retournera un nouveau tableau avec ces nouvelles valeurs.
Donc en gros, carte() vous permet d'effectuer une sorte d'action sur les valeurs à l'intérieur d'un conteneur. Et la même chose est vraie avec le puis() méthode dans une promesse. Tu peux appeler puis() sur une promesse d'appeler une fonction sur la valeur à l'intérieur d'une promesse. Et puis cela renvoie une nouvelle promesse avec la nouvelle valeur que vous avez créée…
C'est la même chose avec carte() ici. Nous allons appeler extractData () sur la réponse qui se trouve à l’intérieur de cet observable, et ce que nous en reviendrons est un observable qui enveloppe un projet.
Alors créons un extractData () fonction, et cela va prendre une bibliothèque HTTP angulaire Réponse classe.
Donc nous reviendrons res.json (), et cela convertira la réponse HTTP dans le corps JSON réel. Maintenant la valeur de extractData () sera retourné à l'intérieur de notre getProjects () appelez, et Angular verra que cela correspond à notre type de retour ici car ce sera un tableau observable de projets.
Maintenant que nous avons ceci getProjects () fonction, passons à la composante projets et importons-la. Tout d’abord, importons le ProjetsService.
Maintenant, parce que nous voulons injecter un ProjetsService exemple dans ce composant, nous devons dire à Angular qu’il devrait fournir une instance pour ce composant. Alors ajoutons un fournisseurs la propriété de notre composant décorateur, et nous allons lui dire que ça va avoir besoin que ProjetsService à l'intérieur de ce composant. Ajoutons donc un constructeur, et nous pouvons utiliser l'injection de dépendance de la même manière que nous l'avons fait dans notre service.
Nous allons créer un paramètre appelé un service, et ça va être un ProjetsService Angular saura injecter l’un de nos objets. ProjetsService instances dans cette classe. Nous allons donner à ce paramètre la privé mot-clé ici pour qu'il définisse cela immédiatement comme une propriété.
Avec cela en place, nous pouvons aller de l'avant et l'utiliser à l'intérieur ngOnInit. Donc ici nous pouvons appeler this.service.getProjects ()-souvenez-vous que cela retourne un observable - et la méthode que nous voulons appeler ici souscrire().
Vous pouvez penser à la souscrire() méthode comme si nous appelions puis() sur une promesse qui a été retournée, ou si vous pensez à cela comme un tableau, souscrire() est comme le pour chaque() méthode sur un tableau. C'est un peu comme carte() en ce qu'il reçoit tout ce qui se trouve à l'intérieur du tableau, ou dans ce cas l'observable.
toutefois, pour chaque() ne retourne pas un nouveau tableau, et souscrire() ne retourne pas une nouvelle observable. Donc, c'est un peu comme la fin de la ligne. Alors souscrire() va obtenir notre liste de projets en tant que paramètre, et nous pouvons simplement dire this.projects, qui fait référence à notre gamme de projets, sera égal à projets. De cette façon, nous pouvons extraire sa valeur de l'observable et la valeur sera maintenant disponible dans la classe..
Et si nous revenons au navigateur pour voir notre liste de projets, nous verrons les trois projets que j'ai mis dans le serveur.
Dans le cours complet, Applications Web modernes avec Angular 2, je vais vous montrer comment coder une application Web complète avec Angular 2, en utilisant les fonctionnalités et les modèles architecturaux les plus récents..
Vous pouvez suivre avec moi et créer une application de gestion de projet complète, avec identification et validation des utilisateurs et discussion en temps réel. Vous bénéficierez de cours sur le langage de template Angular 2, la structuration de votre application, le routage, la validation de formulaire, les services, les observables, etc..
Si vous n'avez jamais utilisé Angular 2, découvrez tout ce que vous devez savoir dans notre cours Premiers pas avec Angular 2. Si vous souhaitez développer votre expérience Angular 2, pourquoi ne pas consulter:
Accentsconagua