zoukankan      html  css  js  c++  java
  • angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布

    • 应用场景

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

    • NG2项目概述

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

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

    • .net mvc 项目概述:

    1. 前期开发阶段,去除了验证内容,并支持跨域(这里没有使用api)。

    2. 后期需要与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/">。

    • 实现内容

    1. ng2的路由可以正确使用
    2. 再刷新页面等操作时,mvc的路由能正确引导NG2的路由。不会出现无法访问页面的错误。
    有其他更好的方法去操作,还请园友不吝赐教,再此谢过。
  • 相关阅读:
    Android Interactive Animation
    Android 笔记
    java 从零开始 第三天
    RGB颜色查询对照表
    Android TextView文字过多时通过滚动条显示多余内容
    Android系统字体规范
    Android 动画之TranslateAnimation应用详解
    Python--day69--ORM的F查询和Q查询
    Python--day69--ORM聚合查询和分组查询
    Python--day69--ORM正反向查找(外键)
  • 原文地址:https://www.cnblogs.com/cnlizhipeng/p/angular2_mvc4.html
Copyright © 2011-2022 走看看