分离 UI 组件并在一个视图中组合它们

Question

我已阅读以下两篇文章 (https://scotch.io/tutorials/angularjs-best-practices-directory-structure | https://github.com/johnpapa/angular-styleguide)，从中我确信以这种方式构建我的 Angular 项目：

-app
---components
------header
---------header.controller.js
---------header.view.html
------personaldata
---------personaldata.controller.js
---------personaldata.view.html
------history
---------history.controller.js
---------history.view.html
------app.module.js
------app.routes.js
---shared
-index.html

（还有更多但对我的问题并不重要）

基本上，我想创建具有自己的控制器、服务、指令等的独立组件，以将它们放置在多个不同的页面/视图上。我目前认为相应的 view.html 文件将只包含......让我们说......一个带有一些纯 html 内容的 div 标签。此外，我有一个“主页/视图”，所有这些组件都应该放在其中。

如何使用 AngularJS 实现这一点？

我在这里的研究将我带到了允许多个嵌套视图的 angular-ui-router 项目。这真的是要走的路吗。到目前为止，这些示例似乎没有希望，因为它们在那里加载了部分，而且我没有看到正在加载的每个部分/组件的控制器。

任何为我指明正确方向的帮助将不胜感激。 希望问题很清楚。将两个这样的组件放在 index.html 中的小例子也很棒。

提前致谢。

干杯 SLi

Answer 1

我真的很喜欢这种方法并在我的项目中使用它。

您仍然可以选择编写 html。您可以为每个组件编写指令，这样每个组件都可以具有独立性，但问题是您可能希望在两个组件之间共享相同的数据，这样会限制您的移动并迫使您编写比预期更多的代码。

另一种方法是您提到使用 ui-router 的嵌套视图功能。让我给你一个基本的例子......

$stateProvider
            .state('app', {
                url: '/',
                views: {
                    'content-left': {
                        controller: 'Ex1Ctrl as vm',
                        templateUrl: 'example1.html'
                    },
                    'content-right': {
                        controller: 'Ex2Ctrl as vm',
                        templateUrl: 'example2.html'
                    }
                    'content-top': {
                        controller: 'Ex3Ctrl as vm',
                        templateUrl: 'example3.html'
                    }
                }
            })

如您所见，我们在主 html 中需要三个 ui-view，其名称为我在状态中给出的名称。所以基本上你的html应该是这样的。

<div class="row">
    <div class="col-md-12" ui-view="content-top"></div>
</div>
<div class="row">
    <div class="col-md-6" ui-view="content-left"></div>
    <div class="col-md-6" ui-view="content-right"></div>
</div>