ASP.NET框架中正确的angular 6架构
我有一个现有的.NET框架应用程序: ASP.NET MVC (4.6.1)。它包含典型的控制器和.cshtml视图。
现在我们将介绍angular 6(之前我们在少量页面上使用angularjs )。所以我想知道angular的模块化架构的最好用途是什么，而不需要在这一点上重新处理每个视图。
理想情况下(在angular的/前端透视图中)，您的应用程序完全通过angular路由，并且不再有任何cshtml，只有一些加载angular应用程序的Home.cshtml。
但考虑到应用程序的大小和重新处理所有内容所需的工作量，我正在尝试找到结合这两种技术的最佳方法(这也可能有一些好处？)然后慢慢地将页面逐个移动到angular 6。
这也把我带到了一个点，那就是只加载我在该特定页面中真正需要的组件/模块将是有益的。因此，例如，当显示索引页面时，我不需要详细信息组件。这可以减少angular应用程序本身在每个页面中的加载时间。
到目前为止，我的理解是:创建的每个模块只能有一个引导程序组件。这意味着，我需要为每个cshtml页面创建一个模块？
有了这些知识，我想出了以下架构：
因此，这是应用程序中的1个“部分”。只要一个新的部分需要可以用angular完成的功能，我就会做同样的事情。通过这种方式，路由由MVC完成，而不是在angular组件中完成。
我走的路对吗？这是最好的方法吗？或者我是不是错过了一些关键的东西，可以表现得更好？
现在我想知道:我如何正确地重新构造main.ts，它现在包含：
import { AppModule } from './app/app.module';
import { ContactplanListModule } from './app/contactplan/contactplan-list/contactplan-list.module';
import { ContactplanDetailsModule } from './app/contactplan/contactplan-details/contactplan-details.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
platformBrowserDynamic().bootstrapModule(ContactplanListModule)
.catch(err => console.log(err));
platformBrowserDynamic().bootstrapModule(ContactplanDetailsModule)
.catch(err => console.log(err));当然，当我包含dist/main.js时，这将加载所有模块。这在一开始是很好的，但我想知道这是否可以很容易地被拆分。
我想过要做这样的事情，实际上我只是遇到了这个问题，因为它抱怨其他两个模块were not in the HTML。它确实可以工作，但我猜所有内容仍然组合在同一个.js文件中？
if (window.location.pathname.toLowerCase().includes("contactplans/index") || window.location.pathname.toLowerCase().endsWith("contactplans")) {
platformBrowserDynamic().bootstrapModule(ContactplanListModule)
.catch(err => console.log(err));
} else if (window.location.pathname.toLowerCase().includes("Contactplans/details") || window.location.pathname.toLowerCase().includes("contactplans/create")) {
platformBrowserDynamic().bootstrapModule(ContactplanDetailsModule)
.catch(err => console.log(err));
} else {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
}我已经研究了延迟加载，但据我所知，我必须在整个应用程序中使用路由。
回答 1
Stack Overflow用户
发布于 2018-10-03 23:11:49
我不熟悉ASP.NET，但是，我认为您的问题并不是特定于实际的后端技术。
您可能已经意识到，每次从ASP.NET应用程序提供服务的“页面”路由到Angular“页面”时，都会引导Angular应用程序，而每次从Angular应用程序路由到ASP.NET页面时，都会卸载Angular应用程序。
也就是说，处理这个问题的最好方法可能是创建一个通常被称为"shell“的Angular应用程序--一个只加载根模块的应用程序，带有一个路由器。然后，您为每个逻辑“页面”创建一个模块，并使所有这些模块延迟加载。
这样，每次从ASP.NET路由到Angular时，都会加载并引导一个非常小的根模块，然后根据路由，加载与逻辑“页面”相对应的单个“功能模块”，而不加载所有其他模块(除非您随后路由到它们)。
通过将路由器设置为动态(惰性)加载所有“页面”模块，您可以摆脱问题中的所有引导代码。Angular将通过将到模块的路由设置为惰性来为您完成所有这些工作。
https://stackoverflow.com/questions/52629258
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号