AngularJS體驗式編程系列文章，將介紹如何用angularjs構建一個強大的web前端系統。angularjs是由Google團隊開發的一款很是優秀web前端框架。在當前如此多的web框架下，angularjs能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新地把後臺技術融入前端開發，掃去jQuery一度的光芒。用angularjs就像寫後臺代碼，更規範，更結構化，更可控。javascript
關於做者css
- 張丹(Conan), 程序員Java,R,PHP,Javascript
- weibo：@Conan_Z
- blog: http://blog.fens.me
- email: bsspirit@gmail.com
轉載請註明出處：
http://blog.fens.me/bootstrap-angularjs-navbar/html
前言前端
導航菜單是一個網站中必備的一個組件，不只能給用戶提供方便的網站瀏覽指引，還能爲SEO提供良好爬取路徑。基於AngularJS+Bootstrap3的網站愈來愈流行，應該怎麼實現導航菜單呢？看本文的介紹。html5
目錄java
- Bootstrap3中的導航菜單
- AngularJS中的導航菜單 – 點擊事件
- AngularJS中的導航菜單 – 路過事件
1. Bootstrap3中的導航菜單
從Bootstrap3的文檔中咱們能夠看到，默認提供的導航菜單支持下拉功能，單擊觸發，支持2級菜單，以下圖所示。node
實現文檔中的效果，咱們能夠快速建立一個靜態的HTML的項目，建立細節很少解釋，參考文章: 快速搭建Web環境 Angularjs + Express3 + Bootstrap3，bower解決js的依賴管理jquery
建立項目目錄git
~ mkdir D:\workspace\javascript\angular-navbar\ ~ cd D:\workspace\javascript\angular-navbar\
建立依賴配置文件bower.json程序員
~ vi D:\workspace\javascript\angular-navbar\bower.json
{
"name": "angular-navbar",
"version": "0.0.1",
"author": "Conan Zhang<bsspirit@gmail.com>",
"dependencies": {
}
}
下載依賴包
~ D:\workspace\javascript\angular-navbar>bower install bootstrap --save bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.1.1 bower bootstrap#* validate 3.1.1 against git://github.com/twbs/bootstrap.git#* bower jquery#>= 1.9.0 cached git://github.com/jquery/jquery.git#2.1.1 bower jquery#>= 1.9.0 validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0 bower bootstrap#~3.1.1 install bootstrap#3.1.1 bower jquery#>= 1.9.0 install jquery#2.1.1 bower no-json No bower.json file to save to, use bower init to create one bootstrap#3.1.1 bower_components\bootstrap └── jquery#2.1.1
建立HTML文件:page1.html
~ vi D:\workspace\javascript\angular-navbar\page1.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Bootstrap導航菜單</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
項目目錄結構：
啓動靜態服務器，並查看page1.html的預覽效果。
~ D:\workspace\javascript\angular-navbar>anywhere Running at http://192.168.1.12:8000
第一步咱們就現實了Bootstrap3的導航菜單。
2. AngularJS中的導航菜單 – 點擊事件
接下來，咱們把項目改形成AngularJS的項目，並讓Bootstrap配合Angularjs一塊兒使用，實現導航菜單的效果，並對菜單點擊事件進行處理，經過切換選中菜單樣式。
增長Angularjs的依賴包
~ D:\workspace\javascript\angular-navbar>bower install angular --save ~ D:\workspace\javascript\angular-navbar>bower install angular-route --save ~ D:\workspace\javascript\angular-navbar>bower install angular-bootstrap --save
新建HTML文件Page2.html，經過ng-class，來設置導航菜單的選中樣式。
~ vi D:\workspace\javascript\angular-navbar\page2.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Bootstrap導航菜單</title>
<meta name="description" content="Bootstrap導航菜單">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="fragment" content="!" />
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="page2">
<div class="container">
<div class="row" ng-controller="NavbarCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{active:isActive('/abc')}"><a href="/abc">ABC</a></li>
<li ng-class="{active:isActive('/123')}"><a href="/123">123</a></li>
<li ng-class="{active:isActive('/dropdown')}" class="dropdown">
<a href="/dropdown" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/dropdown/label1">label1</a></li>
<li><a href="/dropdown/label2">label2</a></li>
<li><a href="/dropdown/label3">label3</a></li>
<li class="divider"></li>
<li><a href="/dropdown/label4">label4</a></li>
<li class="divider"></li>
<li><a href="/dropdown/label5">label5</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
新建Angularjs文件控制app.js
~ vi D:\workspace\javascript\angular-navbar\js\page2.html
'use strict';
var page2 = angular.module('page2', ['ui.bootstrap', 'ngRoute']);
page2.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) {
$routeProvider
.when('/', {controller: 'DemoCtrl'})
.when('/abc', {controller: 'DemoCtrl'})
.when('/123', {controller: 'DemoCtrl'})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
}]);
page2.controller('NavbarCtrl', function ($scope, $location) {
$scope.isActive = function (route) {
if ($location.path().indexOf('/dropdown') == 0) {
return route === '/dropdown';
}
return route === $location.path();
}
});
page2.controller('DemoCtrl', function () {
// nothing
});
查看運行效果，這樣就能夠實現菜單選中的效果了！
3. 導航菜單的鼠標路過事件
使用AngularJS框架後，導航菜單就實現了動態的特性，經過點擊實現樣式的切換。Dropdown的控件須要鼠標點擊，纔會下拉出二級菜單，若是用鼠標路過事件就觸發可能會更方便，那麼下面繼續對下拉列表控件改造。
實現方式有好幾種，好比經過jQuery增長對鼠標路過事件的監聽，或者開發一個AngularJS的插件。不過，還有一種更簡單的實現方式，就是經過css來控制。
咱們增長一段css代碼。
.dropdown:hover .dropdown-menu {
display: block;
}
簡簡單單一行定義就完成了，再看看效果。當鼠標路過Dropdown時，下拉菜單就自動彈出了。
代碼已上傳到github：https://github.com/bsspirit/angular-navbar，同窗能夠根據須要自行下載，也能夠直接經過命令下載代碼。
git clone https://github.com/bsspirit/angular-navbar.git cd angular-navbar bower install anywhere
本文介紹了導航菜單在Angularjs和Bootstrap3的結合使用，這只是第一步，下一篇文章將介紹Bootstrap3多級導航菜單。