很多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好的文件可以在这里下载，选你喜欢的好了。
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/。打不开就翻qiang或VPN。
bootstrap的CSS文件，这里可以下载：。字体文件google一下可以下载到，或者。
都下载后，需要处理一下。
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 href="https://www.jb51.net/stylesheets/bootstrap-3.1.1.min.css" > </head> <body> ... <script src="https://www.jb51.net/javascripts/angular-1.4.3.min.js"></script> <script src="https://www.jb51.net/javascripts/angular-animate-1.4.3.min.js"></script> <script src="https://www.jb51.net/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script> </body> </html>
然后，你使用Angular，至少还有一个实现作用域模型的js文件，放在“/body”标签上面吧。
在HTML中添加了相关文件后，就可以照着UI Bootstrap的文档来学怎么用相关组件和指令了。
UI 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 href="https://www.jb51.net/stylesheets/admin.css" > <link href="https://www.jb51.net/stylesheets/bootstrap-3.1.1.min.css" > </head> <body> <div ng-controller="x-controller"> <div> <div>X管理后台</div> <div><a href="https://www.jb51.net/user/tttt" >{{currentUser}}</a> <a href="https://www.jb51.net/logout" >退出</a></div> </div> <div> <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> <div ng-include="content"></div> </div> </div> <script src="https://www.jb51.net/javascripts/angular-1.4.3.min.js"></script> <script src="https://www.jb51.net/javascripts/angular-animate-1.4.3.min.js"></script> <script src="https://www.jb51.net/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script> <script src="https://www.jb51.net/javascripts/bootstrap-admin.js"></script> </body> </html>
你可以和原来的admin.html比较一下，我把class为x-sidemenu的div元素内的item模板，用UI Bootstrap的accordion和accordion-group重写了一下。