创建并正确部署模块、组件和子组件的概念AngularJS

Question

我很难理解模块、组件、指令和html模板的文件结构。

如果有人能解释我的话。

例如，我们有：

angular.module("app", [
// Module that contains shared modules 
"app.common",
// Feature-specific modules
"app.topMenu",
"app.sidebar",
"app.board"
]);

我在这里为topMenu、侧边栏、board单独创建了模块，因为它们将具有丰富的功能。

我刚开始使用组件，所以到最后我都不明白，它看起来像这样一个模块的例子吗？

所以，问题就在这里我认为对吗

我将创建文件，例如边栏模块.js

里面看起来像(这是我的应用程序中的例子，会有更多的功能)：

(function(){

angular
.module('app.sidebar', [])
.component('sidebar', {
template: 
`
<div style="border: 1px solid red;">
sidebar
<add-person></add-person>
<list-menu></list-menu>
<colour-menu></colour-menu>
</div>
`
})
.component('addPerson', {
template: `<div> 
add Person  
</div>`
})
.directive('listMenu', function(){
return {
restrict: 'E',
template: `<div>directiv with display list</div>`
}
})
.directive('colourMenu', function(){
return {
restrict: 'E',
template: `<div>directiv with display menu colour</div>`
}
})
.controller('SidebarCtrl', function(){});
})();

1.模块的子组件应该是这样的吗

2.第二个问题是，如果我有共享模块的app.common，那么我应该在里面复制吗

angular
.module('app.sidebar')

为了这个创建指令，我在很多地方使用这个组件/指令的组件？？

它看起来应该是？：

(function(){
angular
.module('app.common', [])
.component('login', {
template: 
`
<div style="border: 1px solid red;"> 
login comp
</div>
`
}) 
.component('addCard', {
template: 
`
<div style="border: 1px solid red;"> 
menu with adding card
</div>
`
}) 
.controller('commonCtrl', function(){});
})();

以下是我可以在每一页中使用的组件。

那么，在创建模块的概念上，我认为正确吗我将在文件夹中创建两个名为components的文件，里面是这个components app.common-module.js里面是代码号2，app.sidebar-modulejs里面是码号1(这里是我只在这个组件中使用的私有组件)

Answer 1

根据angularjs文档：https://docs.angularjs.org/guide/module

我们建议您将应用程序分解为多个模块，如这个：

• 每个功能的模块
• 每个可重用组件的模块(尤其是指令和过滤器)
• 以及一个应用程序级模块，它依赖于上述模块并包含任何初始化代码

我建议您阅读：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity

我认为是对的，但你不应该重复任何代码。这是不必要的，因为你在主应用程序脚本中声明的所有内容都是可重用的。