應用場景 應用場景 angular2（下文中標註位NG2）項目和.net mvc項目分別開發，前期採用跨域訪問進行並行開發，後期只需要將NG2項目的生產版本合併到.net項目。 NG2項目概述 NG2項目概述 ng2項目採用的是angular-cli搭建的框架。 使用type script、rxjs ...
-
應用場景
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的路由。不會出現無法訪問頁面的錯誤。
