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

Question

我试图采用角度1.5发布的新.component。虽然我现在很难理解模块的适用范围。

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

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

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

Answer 1

Angular 1.5中的组件是特殊类型的指令，适用于基于组件的体系结构。它们更类似于类固醇的指令。

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

现在组件就在那里，您可以将相关组件分成不同的模块。

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

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

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

Answer 2

我在这里同一条船......这就是我找到的。希望这能帮助我们所有人 来自Angular Docs：

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

模块推荐设置

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

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

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

组件的优点：

• 比plain指令更简单的配置
• 促进理智的默认和最佳做法
• 针对基于组件的架构进行了优化
• 编写组件指令将使其更容易升级到Angular 2

何时不使用组件：

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

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

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

这一切都归结为应用程序的组件：

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

结论：Angular 1的doc在这个主题上并不是那么明确，但是我们可以将它看作组织模块/组件的一种方式

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的更多信息