Question

我读过以下两篇文章（https://scotch.io/tutorials/angularjs-best-practices-directory-structure | https://github.com/johnpapa/angular-styleguide）后，我确信以这种方式构建我的角项目：

-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标签。另外，我有一个＆＃34;主页/视图＆＃34;应放置所有这些组件。

如何使用AngularJS实现这一目标？

我的研究将我带到了angular-ui-router prject，它允许多个嵌套视图。这真的是一种方法。这些例子似乎没有什么意义，因为他们在那里加载部分，我没有看到每个部分/组件被加载的控制器。

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

提前致谢。

干杯 SLi的

Answer 1

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

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

另一种方式是你提到使用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>

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

1 个答案: