Appel de l'API web du contrôleur à l'aide Angulaire 2
Je suis nouveau sur Angular2. Je veux appeler une API à l'aide de Angular2 dans mon MVC6 projet. J'ai essayé beaucoup de choses (y compris le guide à Angular2 appel ASP.NET Web API) sans succès.
Je ne sais pas où je devrais commencer, ou que les fichiers nécessaires.
OriginalL'auteur Kratika Sharma | 2016-08-09
Vous devez vous connecter pour publier un commentaire.
Je regarderais quelques exemples sur Github pour voir comment d'autres personnes l'ont fait. Il y a un certain nombre de choses qui doivent être juste pour tout le travail, et les erreurs peuvent être nébuleux jusqu'à ce que vous obtenir vers le haut et en cours d'exécution.
Ajouter une API Web de Contrôleur de Classe à votre projet. Juste pour s'assurer que tout fonctionne au premier abord, je vous suggère de codage en dur votre HttpGet attribut "api/valeurs".
ValuesController.cs. :
De démarrage.Cs. Vous avez besoin de la angular2 routes pour ne pas interférer avec ASP.NET s'itinéraires. Cela signifie que vous devez servir les index.html pour le client, si il y a une erreur 404. L'app.Utilisation lambda accomplit ce. Remarquez que c'est avant les appels à l'application.UseDefaultFiles() et app.UseStaticFiles()
Une fois que vous avez cette configuration, vous devez tester votre API avec Postman assurez-vous que le routage fonctionne comme vous le souhaitez. Si cela ne fonctionne pas, il ne fonctionnera pas dans Angulaire. J'ai http://localhost:5001/ définir comme mon App URL dans mon projet Visual Studio paramètres de Débogage.
Si cela fonctionne correctement, passez à l'obtenir pour charger Angulaire 2. Vous aurez besoin d'utiliser l'élément de base juste après la balise head de votre fichier html. Cela indique à l'angle de routeur que la partie statique de l'adresse URL est:
Index.html
Ensuite, vous aurez besoin de créer un Service en Angular2 pour Obtenir les valeurs de votre API:
dataService.ts
L' .ne opérateur dans RxJS est très pratique. Il vous permettra de débogage que vous êtes correctement obtenir les valeurs de votre API. Voir André Staltz du blog pour plus de détails.
Enfin, créer un composant pour utiliser le service:
app.composante.ts
Merci! C'est juste un fichier avec des constantes. Je ne devrais pas avoir inclus avec le fragment de code. Vous devriez être en mesure de supprimer cette ligne, sans problèmes.
Grand. Merci!!!!
J'ai besoin d'ajouter importer 'rxjs/ajouter/opérateur/faire"; pour obtenir le .faire la journalisation à travailler!!!
Bonjour, Merci pour la réponse. Question: pourquoi les réponses passent comme des tableaux? les valeurs du public: toute[];
OriginalL'auteur drinck
C'est comment j'ai fait ma demande (angular2 en tant que front-end avec l'API Web de base)-
Créer un contrôleur à l'aide de entity framework qui fournit toutes les actions GET, POST, PUT et DELETE. Consultez ce lien dans le cas où vous êtes nouveau à l'api web et entity framework - https://docs.efproject.net/en/latest/platforms/aspnetcore/existing-db.html
Permis de la SCRO dans l'API Web
[Ceci est fait pour gérer de la croix de la communication à partir de localhost:3000 (angular2) à localhost:59024 (webapi)]
Tout d'abord, ajoutez la dépendance dans le projet.json -
"Microsoft.AspNetCore.Cors": "1.0.0",
puis activer la SCRO en démarrage.cs, ce
Vous pouvez trouver plus d'informations à propos de la SCRO ici - https://docs.asp.net/en/latest/security/cors.html
3.Dans Angular2 front-end, vous pouvez écrire votre composant de service comme celui-
Voir si cela aide.
OriginalL'auteur Sanket