web-dev-qa-db-fra.com

Un moyen simple de garder le Front-end Angular 5 et le code de l'API Web back-end séparés?

J'ai développé une application Angular 5 avec de nombreuses pièces mobiles (Services, Bootstrap, Angular Matériel, scripts JS internes + externes, etc.). Maintenant, je veux également ajouter la connectivité à la base de données à cette application (MS SQL Server uniquement). L'application a été développée dans Visual Studio Code.

Je suis ce tutoriel de MSDN afin d'apprendre à connecter cette application à une base de données SQL Server. Je pense que j'aurai besoin de la prise en charge de l'API Web et de .NET Core pour la connectivité, et je ne peux pas trouver un moyen de le faire sans recommencer à zéro dans le code VS (par exemple ici ) ou Visual Studio (comme dans l'article référencé) car presque tous les articles/tutoriels que j'ai pu trouver sur le sujet commencent à zéro. La façon dont je le vois, créer un nouveau projet Angular + Core dans Visual Studio et y migrer la logique d'application fichier par fichier n'est pas une solution réalisable pour moi.

Mes questions sont:

  • Existe-t-il un moyen simple de créer une application back-end basée sur l'API Web distincte qui sert les données de ma base de données SQL Server pour le front-end Angular 5 applis à consommer? Ou est-ce que tous les .NET Core, API Web et prise en charge frontale Angular seraient rendus à partir de la même application?
  • Sinon, existe-t-il un moyen simple/officiel d'ajouter la fonctionnalité .NET Core et l'API Web à une application Angular 5 intégrée au code VS?
c#angularasp.net-web-apiasp.net-core-2.0
11
Uzair A.

Je vous propose de créer un projet séparé qui contient le REST-Endpoint avec ASP.NET Core.

Vous trouverez ici un didacticiel simple:

https://docs.Microsoft.com/en-us/aspnet/core/tutorials/first-web-api

Avec cette solution, votre serveur est découplé du client. Peut-être qu'à l'avenir, vous aimerez utiliser autre chose que angular ou vous voulez créer un autre client (par exemple une application mobile native). Dans ce cas, vous n'avez pas à modifier votre projet de serveur.

(Dans le cas où vous travaillez avec Visual Studio, jetez un œil au modèle de projet. Il y a tout ce dont vous avez besoin.

7
Stephu

Le rendu Angular et ASP.NET Core de la même application serait bénéfique si vous devez rendre Angular app côté serveur (en utilisant Angular Universal). Sinon, vous pouvez créer un projet ASP.NET Core ou conventionnel ASP.NET Web API distinct en tant que back-end pour récupérer les données de SQL Server. et servir au client Angular.

7
Ali Shahzad

Je travaille bien pour mes projets. Essaie.

Créez deux projets distincts. Angular5 & Asp.net Core WebApi

Héberger l'application angular5 statique sur le serveur Web Kestrel

1. Publier Angular5 ( https://angular.io/guide/deployment ) Le package contient index.html fichier

2. Ajouter à la méthode Configure dans startup.cs fichier dans le projet WebAPI ( https://docs.Microsoft.com/en-us/aspnet/core/fundamentals/static-files?tabs=aspnetcore2x )

app.UseDefaultFiles();
app.UseStaticFiles();

3. Copiez tous les fichiers Angular5 publiés dans le dossier wwwroot dans WebAPI

4. L'exécution du projet WebAPI démarrera l'application Angular5 par défaut.

p/s Config BaseURL côté client pour appeler correctement le serveur

5
Hung Quach

C'est un problème auquel tous les utilisateurs de Visual-Studio sont confrontés à un moment donné de notre carrière professionnelle, et ce que vous demandez est quelque chose que j'entends beaucoup de gens qui sont nouveaux dans le domaine angulaire.

Parce que les modèles de visual studio sont si faciles à utiliser, beaucoup semblent avoir l'idée que le backend et le frontend sont un bloc. asp.net MVC par exemple, fait un excellent travail pour cacher toute la logique de couplage loin de vous, et tout semble fonctionner comme par magie.

Je vous encourage à passer à code Visual Studio, démarrer un nouveau projet en utilisant angular CLI, lorsque vous arrivez aux parties HttpClient, tout à coup les choses vont soyez beaucoup plus clair pour vous.

3
Stavm

Configurez votre environnement de développement

  • SDK .NET Core 2.0.0 ou version ultérieure.
  • Code Visual Studio
  • Extension Visual Studio Code C #

Je ferais deux projets distincts.

Q1. Oui, vous pouvez créer un modèle de base de API WEB en utilisant ces commandes dans vscode

mkdir TodoApi
cd TodoApi
dotnet new webapi

Q2. Angular n'a besoin que d'Api Endpoint pour communiquer avec n'importe quelle application dorsale.

Vous pouvez installer cli angulaire

npm install -g @angular/cli

Créez un modèle angular en utilisant angular cli. 

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

Maintenant, vous pouvez simplement pointer votre point de terminaison de service vers le service exposé par votre API. Il commencera à servir les données.

commencez avec le code vs en utilisant le noyau C # .Net

je n'ai pas essayé

Vous pouvez également essayer ces deux projets en les combinant à un seul espace de travail et créer une tâche de génération pour que WEBAPI et angular puissent fonctionner à partir d'une seule fenêtre de code vs.

2
Eldho