Modularize Angular模板

Question

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

我的第一个想法是使用ngInclude，但正如我所看到的那样，如果我想访问变量，它就会变得很糟糕。

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

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

Answer 1

将您的角度写为代码

的小模块

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

文件结构

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

控制路线的路线“routes.js”

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

通过像这样构建你的应用程序，你可以构建一些小插件组件，并阻止它们成为巨大的难以理解的混乱。

补充阅读

我按照this指南查看了角度应用结构，文章中提到的要点非常好，并且始终保持代码清洁。

Answer 2

我对那些复杂的项目的建议是双重的。他们是约翰帕帕的优秀Angular Style Guide中最重要的两点。

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

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

从短期来看，创建许多指令似乎比仅使用一些模板更有效，但在实践中，您的代码变得更加可测试和可维护。

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

Answer 3

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

1. 将您的模板划分为多个部分，例如页眉，页脚，左右导航等。

2. 创建控制器，用于保存模板中相关区域的范围。

3. 为模板的每个部分创建指令，并将关联的控制器注入其中。

4. 创建一个公共指令，它将按需加载相应的目录。例如。如果你想保持右导航隐藏一段时间，请在此处理这种情况。

5. 将代码缩减为最小行并在需要时加载它们。

通过这种方式，您可以在各种支柱（如指令）上划分DOM的负载。希望这可以帮助。快乐的编码！