angularjs - Angular 1.5 中的组件和 Angular 模块的使用

Question

我正在尝试采用 Angular 1.5 中发布的新 .component 。尽管我现在很难理解模块适合的位置。

在我以前将我的组件分成角度模块之前，现在组件在这里有什么关系？

只需创建一个角度模块并在其下添加所有组件，还是继续使用角度模块以及组件？

文档似乎没有涉及到这一点。如果我仍在使用模块，那么组件的用途是什么，或者如果我正在使用组件，那么超过 1 个模块的用途是什么？

Answer 1

我在同一条船上......这是我发现的。希望这对我们所有人都有帮助
来自 Angular Docs：

1.模块：您可以将模块视为应用程序不同部分的容器——控制器、服务、过滤器、指令等。

模块推荐设置

“...我们建议您将应用程序分解为多个模块，如下所示：

• 每个功能的模块
• 每个可重用组件的模块（特别是指令和过滤器，请参阅下面的组件定义；特殊类型的指令）
• 以及依赖于上述模块并包含任何初始化代码的应用程序级模块。

2.组件：在 Angular 中，组件是一种特殊的指令，它使用更简单的配置，适用于基于组件的应用程序结构。

组件的优点：

• 比普通指令更简单的配置
• 提倡健全的默认设置和最佳实践
• 针对基于组件的架构进行了优化
• 编写组件指令将更容易升级到 Angular 2

何时不使用组件：

• 对于需要在编译和预链接函数中执行操作的指令，因为它们不可用
• 当您需要优先级、终端、多元素等高级指令定义选项时
• 当你想要一个由属性或 CSS 类而不是元素触发的指令时

因此，试图理解这一切似乎你需要一个模块来组织或作为一个顶级“容器”，如果你愿意，然后根据需要添加组件/子组件。

angular.module('app',[])
 .component('component')
 .component('common')

这一切都归结为应用程序的组成部分：

此图像来自angular 1 中的 angular 2 图案（强烈推荐）

底线：Angular 1 的文档在主题上不是很清楚，但我们可以将其视为组织模块/组件的一种方式

1. 模块总是容器
2. 我们根据结构添加组件和子组件

ToodMottos 对文件结构的建议

“...理想情况下，我们应该拥有三个高级模块：root、component 和 common...”
在这里我们可以看到模块如何成为组件和子组件

├── app/
│   ├── components/
│   │  ├── calendar/
│   │  │  ├── calendar.module.js
│   │  │  ├── calendar.component.js
│   │  │  ├── calendar.service.js
│   │  │  ├── calendar.spec.js
│   │  │  ├── calendar.html
│   │  │  ├── calendar.scss
│   │  │  └── calendar-grid/
│   │  │     ├── calendar-grid.module.js
│   │  │     ├── calendar-grid.component.js
│   │  │     ├── calendar-grid.directive.js
│   │  │     ├── calendar-grid.filter.js
│   │  │     ├── calendar-grid.spec.js
│   │  │     ├── calendar-grid.html
│   │  │     └── calendar-grid.scss
│   │  ├── events/
│   │  │  ├── events.module.js
│   │  │  ├── events.component.js
│   │  │  ├── events.directive.js
│   │  │  ├── events.service.js
│   │  │  ├── events.spec.js
│   │  │  ├── events.html
│   │  │  ├── events.scss
│   │  │  └── events-signup/
│   │  │     ├── events-signup.module.js
│   │  │     ├── events-signup.component.js
│   │  │     ├── events-signup.service.js
│   │  │     ├── events-signup.spec.js
│   │  │     ├── events-signup.html
│   │  │     └── events-signup.scss
│   │  └── components.module.js
│   ├── common/
│   │  ├── nav/
│   │  │     ├── nav.module.js
│   │  │     ├── nav.component.js
│   │  │     ├── nav.service.js
│   │  │     ├── nav.spec.js
│   │  │     ├── nav.html
│   │  │     └── nav.scss
│   │  ├── footer/
│   │  │     ├── footer.module.js
│   │  │     ├── footer.component.js
│   │  │     ├── footer.service.js
│   │  │     ├── footer.spec.js
│   │  │     ├── footer.html
│   │  │     └── footer.scss
│   │  └── common.module.js
│   ├── app.module.js
│   ├── app.component.js
│   └── app.scss
└── index.html

ToodMottos 风格指南： 模块化架构（我必须阅读）
这里是有关 角度模块的更多信息

Answer 2

Angular 1.5 中的组件是一种特殊的指令，适用于基于组件的架构。它们更像是关于类固醇的指令。

在我以前将我的组件分成角度模块之前，现在组件在这里有什么关系？

现在组件已经存在，您可以将相关组件分成不同的模块。

只需创建一个角度模块并在其下添加所有组件，还是继续使用角度模块以及组件？

您可以使用之前使用的相同模式来分离控制器。

angular 1.5 中的组件可帮助您创建具有自己的视图和绑定的实际组件。创建它们是为了让 Angular 1.5 开发人员理解该模式并在以后轻松迁移到 Angular 2.0。