应用场景
angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目。
NG2项目概述
ng2项目采用的是angular-cli搭建的框架。
使用type script、rxjs等内容开发。
.net mvc 项目概述:
前期开发阶段,去除了验证内容,并支持跨域(这里没有使用api)。
后期需要与ng2的发布内容进行整合。
具体步骤(只说明.net mvc中的操作内容)
- 路由内容设置
//防止用户刷新路由指向错误
routes.MapRoute(
name: "ngdefault",
url: "content/dist/{*.}",
defaults: new { controller = "Home", action = "Index" }
);
//原NG2开发框架中的调用内容
routes.MapRoute(
name: "MyRoute",
url: "api/{controller}/{action}"
);
//正常的页面请求
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{*pathInfo}",
defaults: new { controller = "Home", action = "Index"}
);页面设置(以下为我的Home控制器Index对应的页面内容)
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<base href="/content/dist/">
</head>
<body>
<app-root></app-root>
@* 以下内容要根据你的NG2项目的生成内容来设置,具体请参照你的NG2项目引导页面的内容。 *@
<script type="text/javascript" src="~/content/dist/inline.js"></script>
<script type="text/javascript" src="~/content/dist/styles.41c78f28e60ca8b5fd69.bundle.js"></script>
<script type="text/javascript" src="~/content/dist/scripts.bc1943ee0f025606a729.bundle.js"></script>
<script type="text/javascript" src="~/content/dist/main.2ad5580a0f71e9dcee3e.bundle.js"></script>
</body>
</html>NG2项目放置位置
发布内容放到content目录下,所以index页面需要在head中设置<base href="/content/dist/">。
实现内容
ng2的路由可以正确使用
再刷新页面等操作时,mvc的路由能正确引导NG2的路由。不会出现无法访问页面的错误。