如何在AngularJS中构建基于模块和组件的应用程序（组件方法）？

Question

我不是AngularJS的新手，并且已经使用了很长时间，构建了几个完整的应用程序（适用于桌面和移动设备）。

我正在改变我使用AngularJS编码的方式，因为我有需要可扩展的项目。我曾经拥有庞大的代码文件，所有控制器，没有指令，没有组件。这使得在特定项目上工作2周后很难编辑我的代码（我确定每个人都理解这一点）。

我买了几门课程，开始学习什么是组件方法。我可以很容易地理解并实践我所学到的东西，但这种方法（组件）要求能够看到＆＃34;全貌＆＃34; （清楚？）一个应用程序，这对我来说非常困难。

问题

1. 这是否正确：在AngularJS中，模块类似于功能，它们可以包含多个组件（有状态/更少）？
2. 当我构建一个应用程序时，我应该首先想一想这些模块以及它们之间的关系，然后想一想我需要为每个模块提供哪些组件？
3. 之前实际编码的最佳方法是什么？

我问这些问题是因为虽然我觉得与AngularJS合作很舒服，但我很难退后一步并立即想象整个项目。我希望能够了解我的应用中发生的所有事情，同时＆＃34; ，这肯定无法做到很有道理，但希望你明白。

我也不是母语为英语的人，但你已经注意到了。

Answer 1

实际上有很多东西要讨论，但是使用可扩展和可维护的AngularJS创建项目的最佳方法可能是使用现成样板。

我使用了ng6 starter，这是一个带有webpack，karma＆amp;用于测试的茉莉花。还要感谢webpack，您可以使用ES6属性（类）来使您的项目更紧凑。

我喜欢的最好的事情之一就是每个组件都有自己的css配置，当你在一个复杂的界面上工作时，这真的有很大帮助。

  

NG6 Starter：https://github.com/AngularClass/NG6-starter

那么使用Angular 2呢？

Answer 2

  

问题

     

  
1. 这是正确的：在AngularJS中，模块就像功能一样   包含多个组件（有状态/少）？
  

我同意这一点。模块的概念是对功能进行分组。

  

当我构建应用时，   我应该首先考虑模块以及它们之间的关系   然后想一想我需要哪些组件   模块？

就我个人而言，我不这么认为。分析瘫痪很容易。 IMO你应该将你的应用程序（或功能）分解成大型组件，然后在值出现时将它们分解为更小的组件。

  

在实际编码之前要做的最好的事情是什么？

喝咖啡。很多咖啡。

如果您正在寻找更具体的内容，我确实发现this link非常有用。它适用于React应用程序但是因为你提到它是你正在寻找的组件方法，它应该符合要求。

作为旁注，我的观点是，但如果您熟悉指令，我不会看到使用组件的真正好处，因为它们是具有较少高级功能的指令的简化版本。没有错，如果您已经熟悉指令，我认为它没有用。

Answer 3

首先对组件感到满意。采取婴儿步骤而非大规模检修。

首先在现有的AngularJS ¹ 应用程序中轻松制作一个小组件。当你发现自己在视图中重复一部分dom并且视图控制器为这些部分做了很多事情。这就是组件的机会。

完成后，尝试将视图作为一个组件。使用ui-router 1.x而不是0.x能够配置状态URL以使用组件。完成后，状态配置已更改。

8.3.3 (8E3004b)

当您到达此处时，您可能已准备好使用生成器并从头开始使用完整的基于组件的解决方案。基本上其他的好答案告诉你。

如果您打算稍后将应用程序迁移到Angular，我也会去style guide of toddmotto。 AngularJS的one by johnpapa未提及10.12.6 (16G29)。

^{1 _{使用AngularJS我指的是AngularJS 1.5 / 6.x，而Angular I指的是Angular 2+又名just Angular}}