Question

我正在创建一个应用程序，并且使用了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页面中包含两个指令 - header＆amp;页脚。

Answer 1

为什么不将这些东西都设置为自定义元素指令，并使用自己的控制器？这样，您可以这样设置：

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

这是＆＃34; AngularJS方式＆＃34;去做吧。它使HTML更具可读性，也更简洁。这些指令中的每一个都将模板作为字符串或在指令创建期间指向的文件中。看起来像这样：

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

以上内容会将模板文件的内容放在您放置<ui-header></ui-header>的位置。也可以为每个指令定义一个控制器，并允许每个指令具有自己的范围。您可以阅读有关自定义指令here的创建的更多信息。

Answer 2

我通常使用抽象状态作为所有其他状态继承的布局。

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

你的布局看起来像这样：

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

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

2 个答案: