Node.js開發入門—引入UIBootstrap
很多Web管理系統的側邊選單是可摺疊的(手風琴樣式),我們在前面兩篇文章裡的HTML模板,自己用div、css做了一些處理,可效果不好。所以我請來了一個前端UI框架,UI Bootstrap,來幫忙。別看它名字裡帶一個Bootstrap,但它並不依賴Bootstrap,而是用AngularJS實現的原生指令哦。我討厭太多的依賴,這個我喜歡。
這篇我們以“Angular簡單示例”裡的AngularDemo為基礎,我說到的目錄什麼的,都遵循express應用的預設目錄結構。
UI Bootstrap
UI Bootstrap在github上有一個簡單介紹:
Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required.
還有一個Readme,把安裝、構建等講了個大概,這些我都不感興趣,我要快速將其引入Node.js的應用裡,所以一切手動來做,直接下載人家Build好的檔案。
安裝
最小安裝需要:
- ui-bootstrap-tpls
- angular-animate
- bootstrap CSS檔案
- bootstrap CSS需要的字型檔案glyphicons-halflings-regular.woff
我選擇帶模板的ui-bootstrap庫,即帶tpls的,這種版本的庫,模板與指令混在一起了,不能自定義模板和樣式。如果你要自定義外觀,那就下載不帶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。
都下載後,需要處理一下。
- angular-1.4.3.min.js,這個之前就說過了,放在public/javascripts目錄下。
- angular-animate-1.4.3.min.js(不是這個名字的就改成這樣),放在public/javascripts目錄下。
- ui-bootstrap-tpls-0.13.3.min.js(不是這個名字的就改成這樣),放在public/javascripts目錄下。
- bootstrap-3.1.1.min.css(不是這個名字的就改成這樣),放在public/stylesheets目錄下。
- glyphicons-halflings-regular.woff(不是這個名字的就改成這樣),在public目錄下新建一個fonts目錄,放進去
OK,手動安裝基本就緒了。
使用UI Bootstrap元件
為了使用UI Bootstrap,要引入三個js檔案,一個css檔案。HTML模板大概是這樣的:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/stylesheets/bootstrap-3.1.1.min.css">
</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,至少還有一個實現作用域模型的js檔案,放在“/body”標籤上面吧。
在HTML中添加了相關檔案後,就可以照著UI Bootstrap的文件來學怎麼用相關元件和指令了。
UI Bootstrap的詳細文件在這裡:http://angular-ui.github.io/bootstrap/。裡面對現在支援的指令做了詳細介紹,還有現成的例子可以拿賴學習。不過,要翻qiang。
使用UI Bootstrap的Demo
修改兩個檔案,admin.html和admin.js。
bootstrap-admin.html
把public目錄下的admin.html複製一份,重新命名為bootstrap-admin.html,用notepad++開啟,將內容修改成下面這樣:
<!DOCTYPE html>
<html ng-app="x-admin">
<head>
<meta charset="UTF-8">
<title>X管理系統</title>
<link rel="stylesheet" href="/stylesheets/admin.css">
<link rel="stylesheet" href="/stylesheets/bootstrap-3.1.1.min.css">
</head>
<body>
<div class="x-view-full" ng-controller="x-controller">
<div class="x-project-header">
<div id="x-project-title">X管理後臺</div>
<div id="x-login-user"><a href="/user/tttt">{{currentUser}}</a> <a href="/logout">退出</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="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>
你可以和原來的admin.html比較一下,我把class為x-sidemenu的div元素內的item模板,用UI Bootstrap的accordion和accordion-group重寫了一下。
accordion定義一個手風琴選單區域,close-others屬性可以指定本區域內的選單組的展開是否互斥,值為true時,一次只能展開一個選單組,為false,可以存在多個展開的選單。(注:這裡用選單一詞不太準確,先這麼著。)
accordion-group定義手風琴上的可摺疊內容,它的heading屬性指定摺疊區域的標題,is-open屬性指定當前選單是否開啟,為true時開啟,你在HTML中指定true或false時,是初始值,使用者點選後,會改變。你也可以把這個屬性和Angular作用域模型中的資料關聯在一起。我引用了Angular的ng-repeat指令內建的
bootstrap-admin.js
複製原來的admin.js為bootstrap-admin.js,內容修改為下面這樣:
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: "系統管理",
enabled: true,
subMenus:[
{
text: "使用者管理",
enabled: true,
action:"/admin/addUser"
},
{
text: "角色管理",
enabled: true,
action:"/role"
},
{
text: "許可權管理",
enabled: true,
action:"/access"
}
]
},
{
text: "內容管理",
enabled: true,
subMenus:[
{
text: "直播流監控",
enabled: true,
action:"/stream-monitor"
},
{
text: "預約管理",
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設定了oneAtATime屬性,初值為false,HTML中accordion元素的close-others屬性和oneAtATime綁定了。所以,最終我們的管理選單是可以同時開啟多個的。
最重要的改動是第一行程式碼:
angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).
注入了對ui.bootstrap和ngAnimate兩個模組的依賴。
點選內容管理後,效果如下:
其它文章: