zoukankan html css js c++ java

angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布

应用场景

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的路由。不会出现无法访问页面的错误。

有其他更好的方法去操作，还请园友不吝赐教，再此谢过。

查看全文

相关阅读:
stenciljs 学习四组件装饰器
 stenciljs 学习三组件生命周期
 stenciljs 学习二 pwa 简单应用开发
 stenciljs ionic 团队开发的方便web 组件框架
 stenciljs 学习一 web 组件开发
 使用npm init快速创建web 应用
 adnanh webhook 框架 hook rule
adnanh webhook 框架 hook 定义
 adnanh webhook 框架request values 说明
 adnanh webhook 框架execute-command 以及参数传递处理

原文地址：https://www.cnblogs.com/cnlizhipeng/p/angular2_mvc4.html

angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布

应用场景

angular2（下文中标注位NG2）项目和.net mvc项目分别开发，前期采用跨域访问进行并行开发，后期只需要将NG2项目的生产版本合并到.net项目。

NG2项目概述

ng2项目采用的是angular-cli搭建的框架。

使用type script、rxjs等内容开发。

.net mvc 项目概述：

前期开发阶段，去除了验证内容，并支持跨域（这里没有使用api）。

后期需要与ng2的发布内容进行整合。

具体步骤（只说明.net mvc中的操作内容）

实现内容

ng2的路由可以正确使用

再刷新页面等操作时，mvc的路由能正确引导NG2的路由。不会出现无法访问页面的错误。

有其他更好的方法去操作，还请园友不吝赐教，再此谢过。