既存のMVCプロジェクトを角度2のアプリケーションに置き換えよう

Question

ちょっと変わったように聞こえますが、私は何をしたいのか説明します。

私は現在、Razor Viewsを使用しているC＃で書かれたMVC Webサイトを持っています。同じプロジェクトで、私はこのようにアクセスできるAPIを追加しました：www.mysite.com/api/controller/get。

通常のページは、www.mysite.com/controllername/indexから簡単にアクセスできます。

ここで問題は2番のウェブサイトを再作成して、今はオンラインでサイトを公開する必要があるということです。これはmvcプロジェクトを完全に置き換えることを意味します。

私の解決策1は、角度のあるアプリとapiを分けることです。したがって、私はwww.mysite.comに角度のウェブサイトを公開し、api.mysite.comにapiを公開します。

解決策2：現在のプロジェクトのMVC部分を角度2のアプリで置き換えることが可能かどうかは疑問でしたか？したがって、すべてが同じドメインにとどまります。 （別名同じプロジェクト）

編集： 解決策2が可能な場合：mvcプロジェクトとルートが競合することなく、プロジェクト内に角度2アプリを含めるにはどうすればいいですか？言い換えれば、私はMVCルートを削除したいです。

Answer 1

私は解決＃2のために行きました。

私は思ったよりも簡単になりました。

これは私がやったことです：

1. という名前のプロジェクトにフォルダを作成しますどんな例：「アプリ」
2. 実行ngのビルドと、このフォルダ内のビルドファイルを置きます。
3. アプリケーションへのラッパーとして機能するコントローラーを作成します。

   public ActionResult Index() 
   { 
       return new FilePathResult("~/app/index.html", "text/html"); 
   } 
   

4. 我々は今のルートを処理する必要があります：鉱山は、コントローラ内部で、このコードを追加します

5. のAppController

ました。 RoutesConfig.csに移動して、今、あなたはこれに「ベースHREF」を変更することによって、あなたの角度のindex.htmlを編集する必要がありますがRegisterRoutes

routes.MapRoute(
     name: "Default", 
     url: "{controller}/{action}/{id}", 
     defaults: new { controller = "App", action = "Index", id = UrlParameter.Optional } 
    ); 

6. でこれを持っていることを確認してください。base href="/app/"（これはのためのルートでありますあなたが以前に作成したフォルダアプリの中に角度のあるプロジェクトがあります。）

7. ここでは難しい部分は、それを実行すると、それは動作しますが、エラーを起こさずにあなたのURLをコピー＆ペーストすることはできません。しかし、私たちはUrlRewriteを持っていることを祝福しました！

あなたのappフォルダに移動し、まだWeb.configを作成していない場合は作成します。

8. ここでは、appフォルダ内にあるWeb.configファイルの内容を示します。

   <?xml version="1.0"?> 
   <configuration> 
       <system.web> 
       <compilation debug="true" targetFramework="4.0"/> 
       </system.web> 
   
       <system.webServer> 
       <rewrite> 
       <rules> 
       <rule name="Angular Routes" stopProcessing="true"> 
       <match url=".*" /> 
        <conditions logicalGrouping="MatchAll"> 
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
       </conditions> 
       <action type="Rewrite" url="/app/" /> 
       </rule> 
       </rules> 
       </rewrite> 
   </system.webServer> 
   </configuration> 
   

これは、そうであっても、あなたのAPI呼び出しがまだ動作しますが、パターンsite.com/apiを無視します！また、ここでの魔法はaction type = "Rewrite" url = "/ app /"の行です。これはリンクを貼り付けることができないという問題を解決します。最後に、mvcコントローラがあり、それらにアクセスしようとすると、それでも動作します。

Voila。

Answer 2

はい、ASP.NET MVCコードをWeb API呼び出しを使用するAngularサイトに置き換えることができます。あなたが疑っているように。 ASP.NET MVCルートは、あらゆる角度のものよりも優先されます。

主なことは、静的ファイルの配信が設定されていることを確認して、Webサーバーが適切なjavascriptファイルとhtmlファイルをサーバーに送信するようにすることです。少なくとも角度アプリのブートストラップを取得する必要があります。

もう1つのインポートは、 "＃"スタイルのルーティングを角度で使用することです。 MVCはこれらのルートを使用しないため、常に角に渡されます。その可能なルータに角度への "通常の"ルートを渡すように設定するが、このアプローチは容易になる傾向がある。