Question

有人回答我非常重要的问题。：）

我已经在angularjs开展了几个月的各种项目。

我遇到了不同结构，模块，指令的代码细分问题。

我们说我的项目有， - 顶级菜单，具有许多重复功能， - 包含许多功能的侧面菜单 - 有清单和卡片的董事会，他们转移的可能性， - 点击卡片打开一个模态窗口，它还具有很多功能，

令人恐惧的是，我在一个控制器和一个html模板中拥有它。：d

我认为我会为每个事情创建单独的指令，并使用单独的控制器。每个指令都有：

directiv

restrict : 'E',
templateUrl,
controller: function() {}
controllerAs

我听说将菜单指令分离到单独的模块是很好的。

有人可以告诉我，我是否善于思考？如果没有，有人能告诉我如何分享它吗？为了什么？

谢谢！

Answer 1

我有几点建议：

通过将html分组到不同的部分，将html文件拆分为多个组件（如果使用AngularJS＆lt; v1.5，则为指令）。为每个部分创建一个组件，如下所示：
```
<body>

    <top-menu></top-menu>

    <sidebar></sidebar>

    <board></board>

</body>
```
请注意，立即区分UI的主要部分要简单得多。由于您的组件功能丰富，因此您可以进一步将每个组件分解为更多子组件。例如，topMenu的模板可能是：
```
<ul>
    <a>Link 1</a>
    <a>Link 2</a>
    <a>Link 3</a>
</ul>

<search-bar></search-bar>

<social-media></social-media>

<chat-box></chat-box>
```
额外的好处是，您现在可以在整个应用程序中重复使用searchBar，socialMedia和chatBox。
因为您提到topMenu，sidebar和board都具有丰富的功能，您可以通过将每个功能放入自己的功能来组织UI的主要功能模块。您可以拥有app.topMenu模块，app.sidebar模块和app.board模块。然后，您可以在主应用程序模块中将这些模块声明为依赖项，如下所示：
```
angular.module("app", [

    // Module that contains shared modules 
    "app.common",

    // Feature-specific modules
    "app.topMenu",
    "app.sidebar",
    "app.board"
]);
```
您现在可以将topMenu的所有私人服务和组件分组到app.topMenu。对于在应用程序中共享的组件/指令/模块/服务，您可以将它们放在app.common模块中。
通过将可重复使用的逻辑外包到可在整个应用程序中重复使用的服务来保持您的控制器的精益。例如，如果要在控制器中进行ajax调用，请将该逻辑移动到AngularJS服务中，以便应用程序的不同部分也可以进行这些ajax调用。这可以真正帮助您保持代码干燥（不要重复自己）和维护。

有关如何构建和设置应用程序各个部分的更完整列表，请参阅John Papa的AngularJS样式指南here。

将指令分离为模块AngularJS

1 个答案: