javascript - 使用 MVC 和 AngularJS 时模板不同部分的布局和设计

Question

我使用 Bootstrap 和 AngularJS 以及 .Net Web API 作为我的后端服务。我对 AngularJS 还是有点陌生​​。在考虑布局的不同部分时，我的应用程序指令当前位于名为“Bottom”的容器级别。然而，我个人的观点将在名为“主要内容”的区域(这些是 div 边界)。

布局还包含一个名为“侧边栏”的区域，该区域仅在一个页面上使用，其余页面会将“内容包装器”从 10 扩展到完整的 12 列宽度页面。

所以我试图决定如何对两种类型的页面使用一种布局(就我们的 MVC _layout.cshtml 通常用于模板而言)，或使用两种单独的布局。后者似乎“更干净”，因为尝试对所有场景使用单一布局似乎更麻烦。我认为过去在这些情况下我已经将单独的母版页与 ASP.Net Web 表单一起使用。这里有同样的想法吗？我认为这也会使设置 AngularJS 代码方面的事情变得更清晰，因为我可以使用不同的模块和它们自己的 Controller 来分离两种页面类型。不仅考虑到 mvc 布局，还考虑到对 Angular/Javascript 代码的影响，这似乎是一个好方法吗？

Answer 1

TL;DR:使用一个布局 CSHTML 页面。

如果不深入了解您的应用程序，就很难给出自信的推荐。最终，您将根据所掌握的信息做出决定。

话虽如此，如果该侧边栏确实仅在一个页面上使用，则应将其视为该页面的一部分。考虑到这一点，您附加的图像中的 Container 将充当路由器的 view 指令的主机元素，并且带有侧边栏的页面将在其模板中包含该侧边栏。

但是，如果将来侧边栏可能出现在其他页面上，我只需使用 content-wrapper 上的 view 指令根据当前页面隐藏它> 在你的例子中。我在我正在使用的应用程序中也遇到了类似的情况，其中侧边栏充当一种内部导航。如果当前页面没有任何合理的链接可放入该侧边栏中，我们将隐藏它。在这种情况下，类似的东西可能对你有用。

无论哪种情况，我都建议不要使用多个 CSHTML 布局页面，因为某些页面使用漂亮的 AJAX 驱动导航，而另一些页面使用老式的“white-flash”类型，用户体验可能会很奇怪导航。