Javascript 使用AngularJS组织代码的最佳方式是什么？

我正在创建一个应用程序，其中使用了ui路由器，所有html数据都附加到此标记：

 <div class="app" ui-view >

但我想在我的应用程序中包括页眉和页脚，我的问题是-在index.html中使用这样的smth是否更好：

<div ng-controller="top" header></div>
  <div class="app" ui-view >
<div ng-controller="bottom" footer></div>

---

或者，我应该在每个html页面中包含两个指令-页眉和页脚。

为什么不让这些指令中的每一个都是自定义元素指令，并带有它们自己的控制器？这样，您可以将其设置为：

<ui-header></ui-header>
<ui-view></ui-view>
<ui-footer></ui-footer>

app.directive('uiHeader', function() {
  return {
    restrict: 'E',
    templateUrl: '/path/to/template.html',
  };
});

`<div class="header">
     Some content
</div>
<div ui-view></div>
<div class="footer">
   Footer Content
</div>`

---

上面将把模板文件的内容放在您放置

的位置。还可以为每个指令定义一个控制器，并允许每个指令都有自己的作用域。您可以阅读有关创建自定义指令的更多信息。

我通常希望为布局使用一个抽象状态，所有其他状态都继承该抽象状态

$stateProvider
    .state('e', {
        abstract: true,
        controller: 'WhateverController',
        templateUrl: 'layout.html',
    })
    .state('e.home', {
        url: '/',
        templateUrl: 'home.html'
    })

您的布局如下所示：

<ui-header></ui-header>
<ui-view></ui-view>
<ui-footer></ui-footer>

app.directive('uiHeader', function() {
  return {
    restrict: 'E',
    templateUrl: '/path/to/template.html',
  };
});

`<div class="header">
     Some content
</div>
<div ui-view></div>
<div class="footer">
   Footer Content
</div>`

`
一些内容
页脚内容
`

但是如果需要在页脚中添加一些逻辑，可能取决于逻辑的大小。您可以将其添加到任何控制器。或者如上所述：使用自定义指令。我只是想向您展示我通常如何使用ui路由器为静态内容使用布局模板。