Angular+Bootstrap3導航菜單

本文将介紹如何用angularjs建構一個強大的web前端系統。angularjs是由Google團隊開發的一款非常優秀web前端架構。在目前如此多的web架構下，angularjs能脫穎而出，從架構設計上就高人一等，雙向資料綁定，依賴注入，指令，MVC，模闆。Angular.js創新地把背景技術融入前端開發，掃去jQuery一度的光芒。用angularjs就像寫背景代碼，更規範，更結構化，更可控。

關于作者

鄭雲飛(Tianfang), 程式員Java
weibo：@Tianfang
blog:http://zhengyunfei.iteye.com
email: [email protected]

前言

導航菜單是一個網站中必備的一個元件，不僅能給使用者提供友善的網站浏覽指引，還能為SEO提供良好爬取路徑。基于AngularJS+Bootstrap3的網站越來越流行，應該怎麼實作導航菜單呢？看本文的介紹。

Bootstrap3中的導航菜單
AngularJS中的導航菜單 – 點選事件
AngularJS中的導航菜單 – 路過事件

1. Bootstrap3中的導航菜單

從Bootstrap3的文檔中我們可以看到，預設提供的導航菜單支援下拉功能，單擊觸發，支援2級菜單，如下圖所示。

實作文檔中的效果，我們可以快速建立一個靜态的HTML的項目，建立細節不多解釋，參考文章: 快速搭建Web環境 Angularjs + Express3 + Bootstrap3，bower解決js的依賴管理

建立項目目錄

~ 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<[email protected] style="margin: 0pt; padding: 0pt;">",
    "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時，下拉菜單就自動彈出了。

git clone https://github.com/bsspirit/angular-navbar.git
cd angular-navbar
bower install
anywhere

Angular+Bootstrap3導航菜單

1. Bootstrap3中的導航菜單

2. AngularJS中的導航菜單 – 點選事件

3. 導航菜單的滑鼠路過事件

繼續閱讀

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

最小化DevOps自動化流程(Golang)

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

Git學習筆記5 merge沖突時二選一

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題