angularjs+bootstrap菜單的使用示例代碼

更新時間：2017年03月07日 09:58:09 作者：EldonZhao

本篇文章主要介紹了angularjs+bootstrap菜單的使用示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

需求背景：

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

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

頁腳處理：

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

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

設置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，項目根目錄下安裝相關依賴即可：

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="#" rel="external nofollow" data-toggle="dropdown">網關信息</a>
        <ul class="dropdown-menu">
         <li><a href="">NAT網關</a></li>
         <li><a href="">ROUTER網關</a></li>
        </ul>
       </li>
      </ul>
     </div>
    </nav>
   </div>
  </div>

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

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

菜單增加跳轉：

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

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

然后需要在app.js中增加相關控制代碼：

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

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

菜單效果：