使用AngularJS組織代碼的最佳方法是什么？

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頁面中包含兩個指令-頁眉和頁腳。

Answer 1

為什么不讓這些事物中的每一個都成為具有各自控制器的自定義元素指令？ 這樣，您可以像這樣設置它：

<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> 。 也可以為每個指令定義一個控制器，並允許每個指令都有自己的作用域。 您可以在此處閱讀有關自定義指令創建的更多信息。

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>`