【问题标题】：Modularize Angular template模块化 Angular 模板
【发布时间】：2016-04-13 00:21:17
【问题描述】：

我的模板文件变得越来越大而且过于复杂（大约 200 行（长）代码，9 级缩进），因此它也变得容易出错。我正在寻找一个简单的解决方案，它允许我访问$scope 变量和函数而不会太头疼。

我的第一个想法是使用ngInclude，但我发现如果我想访问变量，它会变得很麻烦。

另一个想法是使用指令，但这似乎也不是一种方法，因为我不想为每个模板添加单独的指令。

我的最后一个想法是编写一个通用指令，它使用其父级$scope 并可以访问它的功能。这被认为是一种好习惯吗？嵌入的可能陷阱/缺点是什么？

【问题讨论】：

我制作了一些“模板” html 文件，这些文件可以大量访问 $scope 变量，并将它们与 ng-include 一起使用没有问题。当你说“如果我想访问变量会变得很麻烦”时，你会遇到什么问题？
我的意思是我在看这个答案，但没有明确的答案：stackoverflow.com/questions/25678560/…
这里的所有答案都同样好——您真正应该避免的一件事是访问父 $scope 属性。尝试根据具有最少依赖性的功能分离模块/指令/控制器。如果某些控制器/指令需要一些信息才能运行，请通过依赖注入或指令参数传递它。

【解决方案1】：

将您的 Angular 编写为小代码模块

这些模块可能应该是特定于页面的。看看我放在一起的这个简单的模板，以使您的所有角度代码都具有可读性和功能性。 here 是 github 仓库的链接。

文件结构

在应用程序中，您有 2 个核心模块，一个将所有模块组合在一起“module.js”

还有一个控制你的路线“routes.js”

还有一个组件部分，其中包含用于分离关注点的每个页面的单独模块。我们有一个用于模块本身和控制器的文件，以及一个用于工厂和服务的单独文件。

通过像这样构建您的应用程序，您可以构建小的插件组件并阻止它们变成巨大的难以阅读的混乱。

我遵循 this 角度应用程序结构指南，文章中提出的观点非常好，并且始终保持我的代码干净。

【讨论】：

感谢您的建议，我查看了您的代码，但问题是与您的代码库相比，我正在处理一个庞大的代码库，并且已经做出了一些糟糕的设计决策，我'我只是想让它变得不那么复杂。我实际上是在尝试分离一个页面的模板，它有导航药丸，而且非常复杂。
是的，我在这里使用的代码只是一个模板，我使用的基本功能小而简单，但我认为该结构应该与大多数 Angular 应用程序兼容。 imo 如果您的代码库无法管理，您应该考虑进行完整的重构以保持其清洁，这将真正为您在未来省去很多麻烦。祝你好运

【解决方案2】：

我对具有这种复杂性的项目的建议是双重的。它们是 John Papa 出色的 Angular Style Guide 中的两个较大点。

首先，考虑从在代码中使用 $scope 改为使用 controller as 语法。 controller as 语法提供了很多好处，其中最主要的是它允许您轻松识别变量依赖链。一旦你确定了你的依赖链，就更容易确定你的代码中可以模块化的部分。

一旦您了解了可以模块化的代码，您就可以将模块分解为指令。使用 controller as 语法时，您会发现创建整个指令负责单个对象的指令要容易得多，并且避免了指令接受太多参数并承担多个责任的陷阱。

在短期内，创建许多指令似乎比仅仅拥有几个模板更费力，但实际上，您的代码变得更加可测试和可维护。

最好的模块化指令能够独立运行，即当提供单个数据对象时，它们可能是页面上的唯一组件。您越接近可以匹配对象的指令，您的代码就会变得越复杂。

【讨论】：

【解决方案3】：

在我看来，使用指令来模块化 Angular 模板可能是比 ng-include 更好的选择。但是你需要以这样一种方式来构建你的模板，这样你最终不会创建太多的指令。您可以为此考虑以下方法

通过这种方式，您可以将 DOM 负载分配到指令等各种支柱上。希望这可以帮助。快乐编码！

【讨论】：