用角度2的應用替換現有的MVC項目

這聽起來有點奇怪，但我會解釋我想做什麼。用角度2的應用替換現有的MVC項目

我目前有一個用C＃編寫的使用Razor Views的MVC網站。在同一個項目中，我添加了一個我可以像這樣訪問的API：www.mysite.com/api/controller/get。

普通頁面可以通過www.mysite.com/controllername/index簡單訪問。

現在的問題是我用角度2重新創建網站，現在我需要在網上發佈網站，我的意思是完全取代mvc項目。

我的解決方案1是將角度應用程序和api分開：因此，我在www.mysite.com上發佈了角度網站並在api.mysite.com上發佈了api。

解決方案2？：我想知道是否有可能用angular 2應用程序簡單替換當前項目的MVC部分？所以一切都停留在同一個域上。（又名同一個項目）

編輯：如果解決方案2是可能的：如何在項目內包含角度2應用程序而不會與mvc項目發生衝突。換句話說，我想刪除MVC路線。

來源

2017-04-18 MasterJohn

是的......它可能。我幾次並排運行Angular2/ASP.NET web API。從這個問題中不清楚的是您關心或者遇到問題 – BradleyDotNET

的這個問題的哪個特定部分是正確的，您可以參考編輯。 – MasterJohn

解決方案2是可能的。檢查[iis rewrite]（https://www.iis.net/learn/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module），制定規則，使棱角一個會被iis忽略，然後通過角發動機。 – Jonathon

所以我最終選擇瞭解決方案2。

結果比我想象的要容易。

這是我做過什麼：

中創建一個名爲該項目的文件夾不管例如：「應用程序」
運行NG-建設，把構建文件這個文件夾裏面。
創建一個控制器，作爲應用程序的包裝。我的是AppController的

添加該代碼在控制器內部：

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

我們現在需要處理的路線。去RoutesConfig.cs，並確保你有這樣的的RegisterRoutes

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

現在你需要改變「基本href」這個編輯您的角的index.html的：base href="/app/"（這是因爲根角度項目位於您之前創建的文件夾應用程序內部。）
現在這裏是棘手的部分，如果你運行它，它會工作，但你很快就會注意到你不能複製和粘貼你的網址，而沒有錯誤。但是，我們很幸運擁有UrlRewrite！

轉到您的應用程序文件夾並創建一個Web.config，如果您還沒有。

以下是位於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>

這甚至會忽略模式site.com/api，所以你的API調用仍然可以工作！此外，這裏的魔術是行動類型=「重寫」url =「/ app /」的行，這將解決不能複製粘貼鏈接的問題。最後，如果你有mvc控制器並且你試圖訪問它們，它仍然可以工作。

Voila。

來源

2017-04-19 00:50:45 MasterJohn

是的，您可以用一個利用Web API調用的Angular站點替換ASP.NET MVC代碼。正如你所懷疑的那樣; ASP.NET MVC路由將優先於任何有角度的路由。

要做的主要事情是確保您有靜態文件服務設置，以便您的Web服務器將相應的JavaScript和HTML文件發送到服務器。這應該至少讓你的角度應用程序引導。

另一個要做的事是使用「＃」風格的路由角度。 MVC不使用這些路由，所以它們總是被傳遞給角度。它的可能配置路由器將「正常」路由傳遞到角度，但這種方法往往更容易。

來源

2017-04-18 22:25:20 BradleyDotNET

這真的很好知道，但我只是不明白你希望我「用Angular網站替換ASP.NET MVC代碼」我需要任何插件嗎？有什麼步驟來取代它？ – MasterJohn

@MasterJohn你只需要替換文件。除此之外，你需要更具體 – BradleyDotNET

用角度2的應用替換現有的MVC項目

回答

相關問題