Node.js引入U(xiǎn)IBootstrap的方法示例
很多Web管理系統(tǒng)的側(cè)邊菜單是可折疊的（手風(fēng)琴樣式），我們?cè)谇懊鎯善恼吕锏腍TML模板，自己用div、css做了一些處理，可效果不好。所以我請(qǐng)來(lái)了一個(gè)前端UI框架，UI Bootstrap，來(lái)幫忙。別看它名字里帶一個(gè)Bootstrap，但它并不依賴(lài)Bootstrap，而是用AngularJS實(shí)現(xiàn)的原生指令哦。我討厭太多的依賴(lài)，這個(gè)我喜歡。
這篇我們以“Angular簡(jiǎn)單示例”里的AngularDemo為基礎(chǔ)，我說(shuō)到的目錄什么的，都遵循express應(yīng)用的默認(rèn)目錄結(jié)構(gòu)。
UI Bootstrap
UI Bootstrap在github上有一個(gè)簡(jiǎn)單介紹：
Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required.
還有一個(gè)Readme，把安裝、構(gòu)建等講了個(gè)大概，這些我都不感興趣，我要快速將其引入Node.js的應(yīng)用里，所以一切手動(dòng)來(lái)做，直接下載人家Build好的文件。
安裝
最小安裝需要：
- ui-bootstrap-tpls
- angular-animate
- bootstrap CSS文件
- bootstrap CSS需要的字體文件glyphicons-halflings-regular.woff
我選擇帶模板的ui-bootstrap庫(kù)，即帶tpls的，這種版本的庫(kù)，模板與指令混在一起了，不能自定義模板和樣式。如果你要自定義外觀，那就下載不帶tpls的。Build好的文件可以在這里https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files下載，選你喜歡的好了。
0.13.x版本的UI Bootstrap要求Angular 1.3.x或1.4.x。我使用0.13.3版本的UI Bootstrap、1.4.3版本的AngularJS及angular-animate。
1.4.3的Angular及animate組件，都可以到這里下載：https://code.angularjs.org/1.4.3/。打不開(kāi)就翻qiang或VPN。
bootstrap的CSS文件，這里可以下載：http://www.bootstrapcdn.com/。字體文件google一下可以下載到，或者http://code.taobao.org/svn/mczg/trunk/mczg/WebRoot/bootstrap/fonts/glyphicons-halflings-regular.woff。
都下載后，需要處理一下。
- angular-1.4.3.min.js，這個(gè)之前就說(shuō)過(guò)了，放在public/javascripts目錄下。
- angular-animate-1.4.3.min.js（不是這個(gè)名字的就改成這樣），放在public/javascripts目錄下。
- ui-bootstrap-tpls-0.13.3.min.js（不是這個(gè)名字的就改成這樣），放在public/javascripts目錄下。
- bootstrap-3.1.1.min.css（不是這個(gè)名字的就改成這樣），放在public/stylesheets目錄下。
- glyphicons-halflings-regular.woff（不是這個(gè)名字的就改成這樣），在public目錄下新建一個(gè)fonts目錄，放進(jìn)去
OK，手動(dòng)安裝基本就緒了。
使用UI Bootstrap組件
為了使用UI Bootstrap，要引入三個(gè)js文件，一個(gè)css文件。HTML模板大概是這樣的：
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/stylesheets/bootstrap-3.1.1.min.css" rel="external nofollow" rel="external nofollow" > </head> <body> ... <script src="/javascripts/angular-1.4.3.min.js"></script> <script src="/javascripts/angular-animate-1.4.3.min.js"></script> <script src="/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script> </body> </html>
然后，你使用Angular，至少還有一個(gè)實(shí)現(xiàn)作用域模型的js文件，放在“/body”標(biāo)簽上面吧。
在HTML中添加了相關(guān)文件后，就可以照著UI Bootstrap的文檔來(lái)學(xué)怎么用相關(guān)組件和指令了。
UI Bootstrap的詳細(xì)文檔在這里：http://angular-ui.github.io/bootstrap/。里面對(duì)現(xiàn)在支持的指令做了詳細(xì)介紹，還有現(xiàn)成的例子可以拿賴(lài)學(xué)習(xí)。不過(guò)，要翻qiang。
使用UI Bootstrap的Demo
修改兩個(gè)文件，admin.html和admin.js。
bootstrap-admin.html
把public目錄下的admin.html復(fù)制一份，重命名為bootstrap-admin.html，用notepad++打開(kāi)，將內(nèi)容修改成下面這樣：
<!DOCTYPE html>
<html ng-app="x-admin">
<head>
<meta charset="UTF-8">
<title>X管理系統(tǒng)</title>
<link rel="stylesheet" href="/stylesheets/admin.css" rel="external nofollow" >
<link rel="stylesheet" href="/stylesheets/bootstrap-3.1.1.min.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="x-view-full" ng-controller="x-controller">
<div class="x-project-header">
<div id="x-project-title">X管理后臺(tái)</div>
<div id="x-login-user"><a href="/user/tttt" rel="external nofollow" >{{currentUser}}</a> <a href="/logout" rel="external nofollow" >退出</a></div>
</div>
<div class="x-sidemenu">
<accordion close-others="oneAtATime">
<accordion-group heading="{{menu.text}}" ng-repeat="menu in menus" is-open="$first">
<div ng-repeat="subMenu in menu.subMenus"><a href="" ng-click=" rel="external nofollow" setContent(subMenu.action)">{{subMenu.text}}</a></div>
</accordion-group>
</accordion>
</div>
<div class="x-contents">
<div ng-include="content"></div>
</div>
</div>
<script src="/javascripts/angular-1.4.3.min.js"></script>
<script src="/javascripts/angular-animate-1.4.3.min.js"></script>
<script src="/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script>
<script src="/javascripts/bootstrap-admin.js"></script>
</body>
</html>
你可以和原來(lái)的admin.html比較一下，我把class為x-sidemenu的div元素內(nèi)的item模板，用UI Bootstrap的accordion和accordion-group重寫(xiě)了一下。
accordion定義一個(gè)手風(fēng)琴菜單區(qū)域，close-others屬性可以指定本區(qū)域內(nèi)的菜單組的展開(kāi)是否互斥，值為true時(shí)，一次只能展開(kāi)一個(gè)菜單組，為false，可以存在多個(gè)展開(kāi)的菜單。（注：這里用菜單一詞不太準(zhǔn)確，先這么著。）
accordion-group定義手風(fēng)琴上的可折疊內(nèi)容，它的heading屬性指定折疊區(qū)域的標(biāo)題，is-open屬性指定當(dāng)前菜單是否打開(kāi)，為true時(shí)打開(kāi)，你在HTML中指定true或false時(shí)，是初始值，用戶(hù)點(diǎn)擊后，會(huì)改變。你也可以把這個(gè)屬性和Angular作用域模型中的數(shù)據(jù)關(guān)聯(lián)在一起。我引用了Angular的ng-repeat指令內(nèi)置的
bootstrap-admin.js
復(fù)制原來(lái)的admin.js為bootstrap-admin.js，內(nèi)容修改為下面這樣：
angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).
controller('x-controller', function ($scope, $http) {
$scope.currentUser="ZhangSan";
$scope.content = '/welcome.html';
$scope.oneAtATime = false;
$scope.menus =[
{
text: "系統(tǒng)管理",
enabled: true,
subMenus:[
{
text: "用戶(hù)管理",
enabled: true,
action:"/admin/addUser"
},
{
text: "角色管理",
enabled: true,
action:"/role"
},
{
text: "權(quán)限管理",
enabled: true,
action:"/access"
}
]
},
{
text: "內(nèi)容管理",
enabled: true,
subMenus:[
{
text: "直播流監(jiān)控",
enabled: true,
action:"/stream-monitor"
},
{
text: "預(yù)約管理",
enabled: true,
action:"/book-mgr"
}
]
},
{
text: "推送管理",
enabled: true,
subMenus:[
{
text: "推送列表",
enabled: true,
action:"/push-list"
},
{
text: "新增推送",
enabled: true,
action:"/add-push"
}
]
}
];
$scope.setContent = function(action){
console.log(action);
$scope.content=action;
};
});
我給$scope設(shè)置了oneAtATime屬性，初值為false，HTML中accordion元素的close-others屬性和oneAtATime綁定了。所以，最終我們的管理菜單是可以同時(shí)打開(kāi)多個(gè)的。
最重要的改動(dòng)是第一行代碼：
angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).
注入了對(duì)ui.bootstrap和ngAnimate兩個(gè)模塊的依賴(lài)。
好了，最終在瀏覽器里打開(kāi)“http://localhost:3000/bootstrap-admin.html”，效果如下：
點(diǎn)擊內(nèi)容管理后，效果如下：
更多UI Bootstrap組件的用法，去看文檔嘍。更多Angular UI，看這里嘍：https://github.com/angular-ui。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Node.js靜態(tài)服務(wù)器的實(shí)現(xiàn)方法
這篇文章主要介紹了Node.js靜態(tài)服務(wù)器的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02
Node.js中調(diào)用mysql存儲(chǔ)過(guò)程示例
這篇文章主要介紹了Node.js中調(diào)用mysql存儲(chǔ)過(guò)程示例,本文在windows環(huán)境測(cè)試通過(guò),本文一并給出了創(chuàng)建數(shù)據(jù)庫(kù)、錄入數(shù)據(jù)、創(chuàng)建存儲(chǔ)過(guò)程、調(diào)用存儲(chǔ)過(guò)程等例子,需要的朋友可以參考下2014-12-12
node.js基于socket.io快速實(shí)現(xiàn)一個(gè)實(shí)時(shí)通訊應(yīng)用
這篇文章主要介紹了node.js基于socket.io快速實(shí)現(xiàn)一個(gè)實(shí)時(shí)通訊應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
nestjs搭建HTTP與WebSocket服務(wù)詳細(xì)過(guò)程
這篇文章主要介紹了nestjs搭建HTTP與WebSocket服務(wù)詳細(xì)過(guò)程的相關(guān)資料,需要的朋友可以參考下2022-11-11
node學(xué)習(xí)記錄之搭建web服務(wù)器教程
本篇文章主要介紹了詳解node學(xué)習(xí)記錄——搭建web服務(wù)器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Node.JS在命令行中檢查Chrome瀏覽器是否安裝并打開(kāi)指定網(wǎng)址
這篇文章主要介紹了Node.JS在命令行中檢查Chrome瀏覽器是否安裝，并打開(kāi)指定網(wǎng)址,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
使用node.js對(duì)音視頻文件加密的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了使用node.js對(duì)音視頻文件加密的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
node.js中的path.normalize方法使用說(shuō)明
這篇文章主要介紹了node.js中的path.normalize方法使用說(shuō)明,本文介紹了path.normalize的方法說(shuō)明、語(yǔ)法、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
nodejs使用socket5進(jìn)行代理請(qǐng)求的實(shí)現(xiàn)
這篇文章主要介紹了nodejs使用socket5進(jìn)行代理請(qǐng)求的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Nodejs文件上傳、監(jiān)聽(tīng)上傳進(jìn)度的代碼
這篇文章主要介紹了Nodejs文件上傳、監(jiān)聽(tīng)上傳進(jìn)度,本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03