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

Question

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

以前我把我的组件分成angular个模块，现在组件在这里有什么关系？

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

文档似乎没有涉及这个。如果我仍在使用模块，那么组件有什么用，或者如果我正在使用组件，那么多于 1 个模块有什么用？

Answer 1

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

Before I used to separate my components into angular modules, what relationship does this have now that components are here ?

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

Just create one angular module and add all components under this, or continue to use angular modules as well as components ?

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

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

Answer 2

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

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

模块推荐设置

"...我们建议您像这样将应用程序分解为多个模块：

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

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

组件优势：

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

何时不使用组件：

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

因此，为了理解所有这些，您似乎需要一个模块来组织或作为顶部 "container"，如果您愿意，然后根据需要添加 component/subcomponent。

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

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

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

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

模块总是
我们根据结构添加组件和子组件

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

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

Components and use of Angular modules in Angular 1.5

angularjs

angular-component-router

angular