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

Question

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

我正在改变使用 AngularJS 编码的方式，因为我的项目需要可扩展。我曾经有大量的代码文件，无所不能的控制器，没有指令，也没有组件。这使得在 2 周未处理特定项目后很难编辑我的代码（我相信每个人都理解这一点）。

我购买了几门课程并开始学习所谓的 组件方法。我可以很容易地理解和实践我所学的东西，但是这种方法（组件）需要能够看到一个应用程序的"full picture"（发音？），这对我来说非常困难。

问题

这是否正确：在 AngularJS 中，模块类似于功能，它们可以包含多个组件 (stateful/less)？
当我构建应用程序时，我是否应该首先考虑模块以及它们之间的关系，然后考虑每个模块需要哪些组件这些模块之一？
在实际编码之前最好做什么？

我问这些问题是因为尽管我对 AngularJS 的工作感到很自在，但我很难退后一步并立即想象整个项目。我希望能够理解我的应用程序中发生的一切，"at the same time"，这当然没有多大意义，但希望你能理解。

此外，我的母语不是英语，但你已经注意到了。

Answer 1

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

我使用了 ng6 starter，这是一个样板，带有 webpack、karma 和 jasmine 用于测试。还要感谢 webpack，您可以使用 ES6 属性 (类)，这将使您的项目更加紧凑。

我最喜欢的一点是每个组件都有自己的 css 配置，当您在复杂的界面上工作时，这真的很有帮助。

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

还有使用 Angular 2 怎么样？

Answer 2

Questions

Is this correct: In AngularJS, modules are like features and they can contain multiple components (stateful/less)?

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

When I build an app, should I first think of the modules and how they relate to each other and then think of what components I need for each one of these modules?

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

What are the best things to do before the actual coding?

喝咖啡。很多咖啡。

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

附带说明一下，这只是我的意见，但如果您熟悉指令，我看不到使用组件的真正好处，因为它们是指令的简化版本，高级功能较少。这没什么不对，我只是认为如果您已经熟悉指令，它就没有用。

Answer 3

首先熟悉组件。采取小步骤而不是大修。

先在现有的AngularJS¹应用中制作一个小组件很容易。当您发现自己在视图中重复 dom 的一部分并且视图控制器正在为这些部分做很多事情时。这是一个组件的机会。

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

// from this
.state('base.contacts', {
  url: '/contacts',
  template: `your html`,
  controller: 'ContactsCtrl',
  controllerAs: 'ContactsCtrl'
})
// to this
.state('base.contacts', {
  url: '/contacts',
  component: 'contacts'
})

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

我也会用 style guide of toddmotto if you intend to migrate the app to Angular later on. The one by johnpapa 因为 AngularJS 没有提到 angular.component。

^{1_{对于 AngularJS 我指的是 AngularJS 1.5/6.x 而对于 Angular 我' m 指的是 Angular 2+ 又名 just Angular}}

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

How to structure module and component based apps in AngularJS (component approach)?

architecture

components

directory-structure

angularjs

问题