本人純設計，因為喜歡前段這塊。剛好公司有這塊項目，一邊抄寫前輩們的代碼，同時寫博客也是為了自己做一些總結，方便后期查閱。
本篇小隨筆，記錄下側邊欄的寫法和ng-click點擊選中事件。因為這個工程不讓引用jQuery。所以ng-click選中事件用了一個比較笨的方法實現的。
下面是HTML頁面
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>APIM</title> <link rel="stylesheet" type="text/css" href="asset/bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="asset/css/style.css"> </head> <body ng-controller="myindexController"> <div class="siderbar"> <a href="" class="sider-btn btn btn-lg {{clickStyle1}}" ng-click="click1()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-th" style="margin-top: 8px"></span> <p>一覽</p> </a> <a href="" class="sider-btn btn btn-lg {{clickStyle2}}" ng-click="click2()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-plus" style="margin-top: 8px"></span> <p>設計</p> </a> <a href="" class="sider-btn btn btn-lg {{clickStyle3}}" ng-click="click3()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-stats" style="margin-top: 8px"></span> <p>統計</p> </a> <a href="" class="sider-btn btn btn-lg {{clickStyle4}}" ng-click="click4()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-exclamation-sign" style="margin-top: 8px"></span> <p>權限</p> </a> <hr> <a href="" class="sider-btn btn btn-lg {{clickStyle5}}" ng-click="click5()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-fire" style="margin-top: 8px"></span> <p>開放市場</p> </a> </div> <script src="asset/angular/angular.min.js"></script> <script src="asset/ui-router-master/release/angular-ui-router.js"></script> <script src="asset/js/app.js"></script> </body> </html>
css部分引入了angular里面的bootstrap，它和bootstrap官網里面的還是有點區別的，可以直接去angularjs官網下載。
還有就是自己寫的css樣式。同時引入了angular.min.js。因為工程還需要使用嵌套路由的方式，所以引入了ui-router.js。
還有就是自己寫的app.js。js順序按照我的結構引入就行了。
下面是側邊欄CSS樣式：
/* SIDERBAR STYLE */ .siderbar{ background-color: #3b3934; border-right: 1px solid #2a251c; position: fixed; left: 0px; margin-top: 0px; height: 100%; width: 80px; } .siderbar hr{ border: 0; background-color: rgba(255,255,255,0.08); height: 1px; } .sider-btn{ width: 80px; height: 80px; padding: 10%; margin-top: 2px; } .sider-btn p{ color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 6px; } /* SIDERBAR ACTIVE */ .sider-btn:active, .sider-btn.active { background-color: rgba(0,0,0,0.2);!important; border-radius: 0; outline: 0; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .125); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .125); }
下面的圖片則是運行后的：
額，忘記說下ng-click的事件了，您如果按照上面的運行，發現點擊事件沒有了~~~
<a href="" class="sider-btn btn btn-lg {{clickStyle2}}" ng-click="click2()" style="color: rgba(255,255,255,0.8)"> <span class="glyphicon glyphicon-plus" style="margin-top: 8px"></span> <p>設計</p> </a>
我在<a>標簽的class中增加了{{clickStyle2}} 和 ng-click="click2()"這兩項。
同時我再app.js做了一些聲明，具體如下
var myApp = angular.module("myApp", ['ui.router']); myApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Home"); $stateProvider .state("Home", { url: "/Home", templateUrl: "Home.html" }); }); //USE CLICKSTYLE SIDERBAR CLICK myApp.controller("myindexController",function($scope){ $scope.clickStyle1 = "active"; $scope.click1 = function(){ $scope.clickStyle2 = $scope.clickStyle3 = $scope.clickStyle4= $scope.clickStyle5 = ""; $scope.clickStyle1 = "active"; } $scope.click2 = function(){ $scope.clickStyle1 = $scope.clickStyle3 = $scope.clickStyle4= $scope.clickStyle5 = ""; $scope.clickStyle2 = "active"; } $scope.click3 = function(){ $scope.clickStyle2 = $scope.clickStyle1 = $scope.clickStyle4= $scope.clickStyle5 = ""; $scope.clickStyle3 = "active"; } $scope.click4 = function(){ $scope.clickStyle2 = $scope.clickStyle3 = $scope.clickStyle1= $scope.clickStyle5 = ""; $scope.clickStyle4 = "active"; } $scope.click5 = function(){ $scope.clickStyle2 = $scope.clickStyle3 = $scope.clickStyle4= $scope.clickStyle1 = ""; $scope.clickStyle5 = "active"; } });
js上面部分主要是用於嵌套路由的，大家可以不管。我這邊放出來主要是因為我的click事件中有個聲明myApp。
嵌套路由這快等我寫出來了，在和大家一起分享。
寫這塊主要也是為了增加自己的記憶和后期的查閱。如果您剛好看到了，有更好的方法請指點下~~~不勝感激！