web-dev-qa-db-ja.com

フロントエンドAngular 5とバックエンドWeb APIコードを分離する簡単な方法？

多数の可動部分（サービス、ブートストラップ、Angular素材、内部+外部JSスクリプトなど）を含むAngular 5アプリを開発しました。次に、このアプリにもデータベース接続を追加します（MS SQL Serverのみ）。アプリはVisual Studio Codeで開発されました。

このアプリをSQL Serverデータベースに接続する方法を学ぶために、MSDNから このチュートリアル をフォローしています。接続にはWeb APIと.NET Coreのサポートが必要だと思いますが、VSコード（たとえば here ）のいずれかを最初から始めずにそれを行う方法を見つけることはできませんVisual Studio（参照されている記事のように）トピックで見つけることができるほぼすべての記事/チュートリアルはゼロから始まるため。 Visual Studioで新しいAngular + Coreプロジェクトを作成し、アプリケーションロジックをファイルごとに移行する方法は、私にとって実行可能なソリューションではありません。

私の質問は：

  • フロントエンドのSQL Serverデータベースからデータを提供するseparateWeb APIベースのバックエンドアプリを作成する簡単な方法はありますかAngular消費するアプリ5つ？または、すべての.NET Core、Web API、およびAngularフロントエンドサポートが同じアプリからレンダリングされますか？
  • そうでない場合、VSコードで構築されたAngular 5アプリに.NET CoreおよびWeb API機能を追加するための簡単/公式な方法はありますか？
c#angularasp.net-web-apiasp.net-core-2.0
11
Uzair A.

ASP.NET CoreのRESTエンドポイントを含む別のプロジェクトを作成することを提案します。

ここに簡単なチュートリアルがあります：

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

このソリューションを使用すると、サーバーはクライアントから切り離されます。将来的には、angular以外のものを使用したい場合や、他のクライアント（ネイティブモバイルアプリなど）を作成したい場合があります。この場合、サーバープロジェクトを変更する必要はありません。

（Visual Studioで作業している場合は、projecttemplateをご覧ください。必要なものはすべてあります。

7
Stephu

Angularと同じアプリからのASP.NET Coreは、サーバー側でAngularアプリを（Angular Universal）。そ​​うでない場合は、SQL Serverからデータを取得するバックエンドとして、個別のASP.NET Coreまたは従来のASP.NET Web APIプロジェクトを作成できます。 Angularクライアントにサービスを提供します。

7
Ali Shahzad

私は自分のプロジェクトでうまく機能しています。試してみる。

2つの個別のプロジェクトを作成します。 Angular5およびAsp.net Core WebApi

Kestrel Webサーバーで静的Angle5アプリをホストする

1。Angular5を公開（ https://angular.io/guide/deployment ）パッケージにindex.htmlファイルが含まれる

2。WebAPIプロジェクトのstartup.csファイルのConfigureメソッドに追加（- https：// docs。 Microsoft.com/en-us/aspnet/core/fundamentals/static-files?tabs=aspnetcore2x ）

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

3。公開されたすべてのAngular5ファイルをWebAPIのフォルダーwwwrootにコピーします

4。Run WebAPIプロジェクトは、デフォルトでAngular5アプリを起動します。

サーバーを正しく呼び出すためのクライアント側のp/s Config BaseURL

5
Hung Quach

これは、私たちのプロとしてのキャリアのある時点ですべてのVisual-Studioユーザーが直面する問題です。

Visual Studioテンプレートは非常に使いやすいので、多くの人がバックエンドとフロントエンドが1つのブロックであるという考えを持っているようです。たとえば、asp.net MVCは、すべてのカップリングロジックを非表示にする点で非常に優れており、すべてが魔法のように機能しているように見えます。

ビジュアルスタジオコードに移動し、angular CLIを使用して新しいプロジェクトを開始することをお勧めしますHttpClientパーツ、突然物事はあなたのためにはるかに明確になります。

3
Stavm

開発環境をセットアップする

  • .NET Core 2.0.0 SDK以降。
  • Visual Studioコード
  • Visual Studio Code C＃拡張

私は2つの別々のプロジェクトを行います。

Q1。はい、vscodeでこれらのコマンドを使用して、 WEB API の基本テンプレートを作成できます

mkdir TodoApi
cd TodoApi
dotnet new webapi

Q2。 Angularアプリケーションは、バックエンドアプリケーションと通信するためにAPIエンドポイントのみを必要とします。

angular cli をインストールできます

npm install -g @angular/cli

angular cliを使用してangularテンプレートを作成します。

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

これで、サービスエンドポイントをur APIによって公開されたサービスに向けることができます。データの提供を開始します。

C＃と.Netコアを使用してvsコードを始めましょう

試したことがありません

また、これら2つのプロジェクトを1つのワークスペースに結合してビルドタスクを作成し、WEBAPIとangularが1つのコードウィンドウから操作できるようにすることもできます。

2
Eldho