AngularとASP.NETMVC / Web APIを混在させていますか？

87

ASP.NET MVC / Web APIを使用しているので、Angularを使い始めましたが、それらを適切に混合する方法がわかりません。

Angularを使用した後でも、MVCサーバー側の概念は価値を提供しますか？または、Angular HTTP呼び出しのデータを取得するためだけにWebAPIを厳密に使用する必要がありますか？

ASP.NETMVCの人がAn​​gularに移行するためのヒントがあれば役に立ちます

asp.net-mvc  angularjs  asp.net-mvc-4 
— user2256870
ソース
4
状況によって異なりますが、「AngularHTTP呼び出しのデータを取得するためだけにWebAPIを厳密に使用する必要がある」というのが正しい方法だと思います。
— MikeSmithDev 2014年
これは、ASP.NET Core WebAPI
— Levi Fuller

回答:

113

純粋なWebAPI

以前はASP.NETMVCでかなりハードコアでしたが、Angularに会ったので、サーバー側のコンテンツ生成フレームワークを使用する理由が1つもわかりません。Pure Angular / REST（WebApi）は、より豊かでスムーズな結果をもたらします。これははるかに高速で、ファンキーなハッキングなしに、デスクトップアプリケーションに非常に近いWebサイトを構築できます。

Angularには少し学習曲線がありますが、チームがそれを習得すると、より短い時間ではるかに優れたWebサイトを構築できます。主にこれは、これらすべての状態（少ない）の問題がもうないという事実と関係があります。

たとえば、従来のサーバーサイドフレームワークを使用したウィザードフォームを想像してみてください。各ページを個別に検証して送信する必要があります。たぶん、ページのコンテンツは前のページの値に依存しています。ユーザーが戻るボタンを押して、前のフォームを再送信している可能性があります。クライアントの状態はどこに保存しますか？AngularとRESTを使用する場合、これらすべての問題は存在しません。

だから...ダークサイドに来て...私たちはクッキーを持っています。

同様の質問

— ヌル
ソース
私は再同意します：Angularを介したアプリの開発のスピードとスムーズさ。MVCまたはWebForms（ugh）では、マークアップを吐き出すためにこの時間を費やし、クライアントコードをボルトで固定するために数回のパスを実行する必要があります。これは奇妙に感じられ、労働集約的であり、接続されていない性質のために、簡単なことをするのに多くの時間。
— moribvndvs 2014年
3
@那羅延天; これはいくつかのSEOの愛を提供します。
— null
5
特定のモデルのプロパティの名前を変更するときに、AngularJSを掘り下げて「マジックストリング」を探す必要がないためです。Angularは素晴らしいですが、.netの厳密な型安全性の世界では、より緊密な統合により、サーバー側から型安全性を活用できます。
— スリーパースミス
6
@Sleeper Smith：私はチームのメンバーと何度もこの議論をしましたが、最終的なコード規則では、単体テストと関心の分離は、世界中のすべての型安全性よりもはるかに多くのことを提供します。私もJSがC＃のようなものに置き換えられることを望んでいますが、実際にはそうではありません。重要なのはあなたが達成できる結果です。あなたの顧客はおそらくあなたのコーディングの好みを気にしないでしょう、彼らは見栄えが良く、スムーズに機能するウェブサイトを望んでいて、そして彼らはそれを速く望んでいます。 Angularはその仕事を成し遂げます。
— null
1
たとえば、KnockoutJSを使用する場合、通常のASP.NET MVCアプリを作成し、各ビューはMVCコントローラーからモデルデータを受信して​​いました。次に、サーバーからのこのデータはJSONにシリアル化され、そこからKnockoutJSがそれを監視可能なデータに変換するため、双方向のデータバインディングを取得します。そしてそれは素晴らしかったです！しかし、AngularJSには独自のルーティングシステムがあるので、今はどうすればよいでしょうか。MVCルーティングはどうなりますか？使ってますか？「_Layout」ビューと@RenderBody（）はどうなりますか？
— AlexRebula 2015
43

AngularJSは、シングルページアプリケーションパラダイムとの関連性が高いため、マークアップをレンダリングするサーバーサイドテクノロジーのメリットはあまりありません。それらを一緒に使用することを妨げる技術的な理由はありませんが、実際的な意味で、なぜあなたはそうしますか？

SPAは、必要なアセット（JS、CSS、およびHTMLビュー）を取得して独自に実行し、サービスと通信してデータを送信または取得します。したがって、これらのサービス（および認証などの他の手段）を提供するにはサーバーサイドテクノロジーが依然として必要ですが、レンダリング部分はほとんど無関係であり、MVCが行うことを除いて、作業の重複であるため特に有用ではありません。サーバー側で、Angularはクライアントでそれを行います。Angularを使用している場合は、最良の結果を得るためにクライアントで使用する必要があります。AngularのPOSTHTMLフォームを作成し、MVCアクションから部分的なビューを取得することはできますが、Angularの最も優れた最も簡単な機能を見逃してしまい、生活が困難になります。

MVCは非常に柔軟性があり、SPAアプリケーションからの呼び出しを処理するために使用できます。ただし、WebAPIはより細かく調整されており、このようなサービスで少し使いやすくなっています。

既存のWebFormsおよびMVCアプリケーションから移行したものを含め、いくつかのAngularJSアプリケーションを作成しました。ASP.NETの側面は、AngularJSアプリを実際のクライアントとして提供し、アプリケーションレイヤーをホストするためのプラットフォームに進化しています。クライアントはREST経由で（WebAPIを使用して）通信します。MVCは優れたフレームワークですが、通常、この種のアプリケーションでは仕事がないことに気づきます。

ASP.NETアプリケーションは、インフラストラクチャの別のレイヤーになり、その責任は次のように制限されます。

  • 依存関係コンテナをホストします。
  • ビジネスロジックの実装をコンテナにワイヤリングします。
  • JSとCSSのアセットバンドルを設定します。
  • WebAPIサービスをホストします。
  • セキュリティを強化し、ロギングと診断を実行します。
  • パフォーマンスのためのアプリケーションキャッシュとのインターフェース。

SPAのもう1つの優れた点は、チームの帯域幅を増やすことができることです。一方のグループはサービスを爆破し、もう一方のグループはクライアントアプリに配置できます。RESTサービスを簡単にスタブまたはモックできるので、モックサービスで完全に機能するクライアントアプリを作成し、完了したら実際のサービスと交換することができます。

Angularに前もって投資する必要がありますが、それは大きな成果をもたらします。あなたはすでにMVCに精通しているので、いくつかのコアコンセプトについての知識があります。

— moribvndvs
ソース
さて、Angularを使用して、API、Entity Framework、セキュリティなどの生産性を維持するために.NETバックエンドを使用したいと思います。ページにはサーバー側のマスターチャイルド構成/レイアウトが必要ですか？そのために何を使用しますか-WebForms（いいえ、ビューステートを取得します）、MVC、ASP.NET Webページ、またはその他のものですか？
— ショーン
1
技術的には、サーバーページやレイアウトページなどは必要ありません。単純なHTMLで十分です。ただし、アプリケーションのサイズと複雑さによっては、Angularアプリを機能ごとにいくつかの異なるアプリケーションに分割したい場合があります（また、共通のナビゲーションなどを使用して、あるアプリから別のアプリにリンクできます）。その場合、レイアウトページを使用して、物事をドライで一貫性のある状態に保つことができます。さらに、CSSまたはスクリプトにアセットバンドルを使用していて、Razorまたはそれらをうまくまとめるルートページを持っている可能性があります。
— moribvndvs 2014年
1
私はASP.NETMVCを少なくとも8つの大きなプロジェクトで3年間使用しており、この優れた成熟したサーバーサイドフレームワークに慣れました。しかし、私はSPAの重要性を知っており、Angularが大好きなので、ミニSPAまたはハイブリッドアプリ...またはMiguelCastroが呼んだ「SPAサイロ」を選ぶことにしました。私の質問は-承認と認証はどうですか？ASP.NETMVCがこのタスクを大幅に軽減することを私は知っています。これはASP.NETMVCなしでどのように行われますか？
— AlexRebula 2015
1
@AlexRebula質問は、WebApiとMVCでどのように認証を行いたいかという質問だと思います。通常、Cookie（WebApiでFormsAuthまたはASP.NET Identity Cookieを使用することもできます）またはヘッダー（OAuthなど）を使用します。どちらのアプローチもWebAPIとAngularの両方で完全にサポートされていますが、実装を選択する必要があります。あなたがしていることとあなたの特定の目標が何であるかについてのより多くの詳細なしであなたにもっと正確な答えを与えるのは難しいです。
— moribvndvs 2015
@HackedByChineseわかりました。そして今、Web APIをもっと掘り下げる時間があれば、本当に素晴らしいと思います...
— AlexRebula 2015
6

それはあなたが取り組んでいるプロジェクトに依存します。

angleJSがあなたにとって新しいものである場合、私はむしろ小さな低リスク/プレッシャープロジェクトを選んで開始し、正しい方法で物事を行う方法を確実に学ぶことを望みます（プレッシャー、締め切りのためにAngularjsを間違って使用している多くのプロジェクトを見てきました...適切な方法でそれを学ぶ時間の不足。たとえば、JQueryを使用したり、コントローラー内のDOMにアクセスしたりするなど）。

プロジェクトがグリーンフィールドプロジェクトであり、AngularJSの経験がある場合は、ASP.net MVCを放棄し、サーバー側で純粋なREST / WebAPIを使用するのが理にかなっています。

既存のプロジェクトの場合は、機能の複雑なサブセットを取得して、そのページを個別のangularJSアプリとしてビルドできます（たとえば、アプリは標準のシンプル/中程度の複雑さのRazorベースのページで構成されていますが、高度なエディターが必要です/ページ、それはAngularJSでビルドするターゲットピースになる可能性があります）。

— ブラウリオ
ソース
1
私はあなたの答えが好きで、あなたが言ったことのほとんどに同意します。しかし、私を悩ませていることが1つあります。ASP.NET MVCは、認証や承認などの優れた組み込み機能を備えた、非常に優れた成熟したサーバー側Webフレームワークです。あなたは、純粋なREST / WebAPIを使用するためにASP.NETMVCを放棄できると書いています。今私は疑問に思います：認証と承認はASP.NETMVCと同じくらい簡単に実行できますか？OAuth for Googleなどの実装がいかに簡単かは言うまでもありません。私の質問は、REST / WebAPIを使用してこれらすべての泥棒を簡単に実現できるかどうかです。だから私はミニスパを持っていると思います。
— AlexRebula 2015
この例では、すべてのhttpリクエスト（httpのデフォルトの単一の場所でトークンを追加）にトークンを設定し、ASP .net MVC / web api AuthorizeAttributeを使用してトークンとアクセス許可を確認します。また、webapiメソッド内でそのトークンを取得して実行することもできます。より微調整されたセキュリティチェック。OAuthが必要な場合は、角度のある側にもライブラリがあり、それを支援します。
— Braulio 2015
0

フロントエンド開発、つまりビューの構築にAngularフレームワークを使用できます。堅牢なアーキテクチャを提供し、学習すると、Asp.netMVCのレイザービューエンジンよりも優れていることがわかります。データをフェッチするには、WebAPIを使用する必要があり、ASP.NetMVCプロジェクトはWebAPIとMVCコントローラーの両方をすぐにサポートします。AngularおよびASP.NetMVCアプリケーション開発から始まる以下のリンクを参照できます。

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

角度アプリケーション用のUIコンポーネントを開発するために現在利用可能な2つのフレームワークがあります。私が取り組んだ角度のあるプロジェクトの1つで、これら両方のフレームワークを使用しました。

マテリアル https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

— リノイ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.