用角度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项目

回答

相关问题