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

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

 <div class="app" ui-view >

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

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

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

最佳答案

为什么不让这些东西成为自定义元素指令，并拥有自己的 Controller 呢？这样，您就可以这样设置:

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

这是“AngularJS 方式”来做到这一点。它使 HTML 更具可读性，也更加简洁。这些指令中的每一个都将有一个模板，作为字符串或在指令创建期间指向的文件中。看起来像这样:

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

以上内容会将模板文件的内容放置在您放置 <ui-header></ui-header> 的位置。还可以为每个指令定义一个 Controller ，并允许每个指令都有自己的作用域。您可以阅读有关创建自定义指令的更多信息 here .

关于javascript - 使用 AngularJS 组织代码的最佳方式是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25247312/