使用 angular cli 和 ASP.Net MVC5 集成 angular 4

debugcn 发表于 Dev

汤姆

我正在尝试使用 Angular 4 和 MVC 5 构建一个混合应用程序。我已经使用 angular-cli 生成了 angular 4 结构。我在互联网上看到的大多数文件都显示

手动集成或
mvc 5 与 asp.netcore 的集成。

手动集成显示了 systemjs 的使用，而最新的 angular cli 没有生成它，因为它被 webpack 替换了。有人可以分享一个例子来指导我做这件事，因为我是 angular 的新手。

阿德南

您只需要处理 Routes 和 HomeController 中的一些修改，即可使用 Angular chtml 文件作为默认视图：

1）ng build在angular-cli项目中使用“ ”生成dist文件夹（生产）

2) 将您的 Angulardist文件夹复制到 Project 中并将其重命名为您喜欢的名称

3）chtml file在View -> Home文件夹中创建一个新名称ngApp.chtml

4）将项目中已经复制index.html的dist文件夹中的文件内容复制进去ngApp.chtml，必须是这样的：

@{
Layout = null;
}

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>IchartApp</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="~/ngApp/inline.bundle.js"></script>
<script type="text/javascript" src="~/ngApp/polyfills.bundle.js"></script>
<script type="text/javascript" src="~/ngApp/scripts.bundle.js"></script>
<script type="text/javascript" src="~/ngApp/styles.bundle.js"></script>
<script type="text/javascript" src="~/ngApp/vendor.bundle.js"></script>
<script type="text/javascript" src="~/ngApp/main.bundle.js"></script>
</body>

</html>

5) 在 App_Start 文件夹中的 RoutingConfig.cs 中，您需要启用Attribute Routes：

 public class RouteConfig
    {
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        //Add this to Enable Angular Routing
        routes.MapMvcAttributeRoutes(); 

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

6) 打开 HomeController.cs 更新默认路由：

 public class HomeController : Controller
{
    [Route("")] //Specify default route
    public ActionResult Index()
    {
        return View("NgApp"); //Use NgApp.chtml View instead of index.chtml of HomeContoller
    }
//Specify other Angular Routes
    [Route("company")]
    [Route("login")]
    [Route("overview")]
    public ActionResult AppBookmarkableRoutes()
    {
        return View("NgApp");
    }
}

7) 按 F5 查看与 Asp.net MVC 集成的 angular 应用程序

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。