需求背景：

使用yo angular生成的項目默認主頁是這樣的：

main_page.png

body部分涉及具體的業(yè)務(wù)內(nèi)容，后續(xù)研究。這里主要研究菜單項、頁眉的處理。

頁腳處理：

自動生成的項目中，菜單和頁腳設(shè)置都是在index.html文件中實現(xiàn)的。

# index.html
    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> 京東金融·杭州研發(fā)中心</p>
      </div>
    </div>

設(shè)置css格式：

/* Custom page footer */
.footer {
  padding-top: 20px;
  color: rgba(204, 3, 8, 0.91);
  border-top: 1px solid #e5e5e5;
  text-align: center;
}
  .container {
    max-width: 730px;
    margin-left: auto;
    margin-right: auto;
  }

上述截圖還可見頁面格式問題，是因為創(chuàng)建工程時，沒有依賴bootstrap還有compass，項目根目錄下安裝相關(guān)依賴即可：
bower install compass --save
bower install bootstrap --save

菜單處理：

菜單功能主要在index.html文件中的header代碼段實現(xiàn)。

    <div class="header">
      <div class="menu">
        <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <!--![](images/jdjr.jpg)-->
          </div>

          <div class="collapse navbar-collapse" id="">
            <ul class="nav navbar-nav">
              <li class="active dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown">網(wǎng)關(guān)信息</a>
                <ul class="dropdown-menu">
                  <li><a href="">NAT網(wǎng)關(guān)</a></li>
                  <li><a href="">ROUTER網(wǎng)關(guān)</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

這些class設(shè)置了默認屬性，所以能夠呈現(xiàn)出較為友好的樣式，所以如果使用自定義類名，那樣式需要自己設(shè)置。如果需要鼠標移動到菜單上就能夠顯示子菜單，則需要設(shè)置css屬性。

.dropdown:hover .dropdown-menu {
  display: block;
}

菜單增加跳轉(zhuǎn)：

菜單的跳轉(zhuǎn)主要通過href實現(xiàn)，如下代碼就是操作日志菜單跳轉(zhuǎn)到/oplog頁面：

<li><a href="#!/oplog">操作日志</a></li>

然后需要在app.js中增加相關(guān)控制代碼：

      .when('/oplog', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })

由于這里我重用了項目初始化時就生成的about.html代碼，所以，不需要開發(fā)相關(guān)html文件，實際開發(fā)中這個跳轉(zhuǎn)后的網(wǎng)頁是需要自己在views目錄下創(chuàng)建并開發(fā)頁面的，同時需要在controllers目錄下開發(fā)相關(guān)控制（此處就為AboutCtrl.js）代碼。

菜單active屬性處理：

按照前面說明開發(fā)出的菜單存在當前選中的菜單項不是active狀態(tài)的問題，需要菜單支持動態(tài)切換active狀態(tài)就需要做相關(guān)處理。
綁定active屬性到方法：ng-class="{'active': isActive('url')}"，此時isActive的方法實現(xiàn)需要在controller中實現(xiàn)：

    $scope.isActive = function (current) {
      console.log("current:" + current);
      console.log("location url:" + $location.url());
      var loc = '#!' + $location.url();
      console.log(current === loc);
      return current === loc;
    }

實現(xiàn)原則就是當前的url和傳入的url字符串是否一致。如果一致，則當前菜單項為active狀態(tài)。

菜單插入圖片處理：

          <div class="navbar-header">
            ![](images/jdjr.jpg)
          </div>

設(shè)置圖片格式：

.img-thumbnail {
  height: 75px;
}

菜單效果：

menu_page.png

參考資料：

• Angular+Bootstrap3導(dǎo)航菜單