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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

模块推荐设置

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

• 每个功能都有一个模块
• 每个可重用组件的模块（尤其是指令和过滤器，请参阅下面的组件定义；特殊类型的指令）
• 还有一个应用级模块 这取决于上述模块并包含任何初始化 代码。

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

组件的优势：

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

何时不使用组件：

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

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

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

这一切都归结为应用程序的竞争力：

此图来自angular 2 patterns in angular 1（强烈推荐）

底线：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 风格指南： Modular Achitecture（我必须阅读）
这里有更多信息 angular Module