许多网络管理系统的侧菜单是可折叠的(手风琴式)。在前两篇文章中，我们使用div和css来处理HTML模板，但是结果并不好。所以我邀请了一个前端UI框架，UI Bootstrap来帮助我。虽然它的名字中有一个Bootstrap，但它并不依赖于Bootstrap，而是一个用AngularJS实现的本机指令。我讨厌过多的依赖。我喜欢这个。

本文基于《Angular Simple》中的AngularDemo。我提到的所有目录都遵循express应用程序的默认目录结构。

用户界面引导

UI Bootstrap对github有一个简单的介绍：

用于引导的本机角度指令。占用空间更小(20kB压缩)，不需要第三方JS依赖项(jQuery、引导JS)。

还有一个自述，大概介绍了一下安装施工，我不感兴趣。我想把它快速引入Node.js的应用中，所以一切都是手工完成，直接下载别人构建的文件。

装置

最低安装要求：

Ui-bootstrap-tpls angular-animate bootstrap CSS文件bootstrap CSS glyphicons所需的字体文件-半身人-正则. woff我选择的是带模板的UI-bootstrap库，也就是带tpls的库。这个版本的库、模板和说明混合在一起，模板和样式不能自定义。如果你想自定义外观，下载时不要用TPS。构建良好的文件可以在https://github.com/angular-ui/bootstrap/tree/GH-pages #构建文件下载，所以选择你喜欢的。

用户界面引导版本0.13.x需要Angular 1.3.x或1.4.x.我使用UI Bootstrap 0 . 13 . 3版、AngularJS 1 . 4 . 3版和angular-animate。

1.4.3的角度和动画组件可以在这里下载：https://code.angularjs.org/1.4.3/.翻强或者VPN如果打不开的话。

Bootstrap CSS文件，这里可以下载：http://www.bootstrapcdn.com/.字体文件可以从谷歌下载，或者http://code . Taobao . org/SVN/mczg/trunk/mczg/webroot/bootstrap/fonts/glyphicon-半身人-regular.woff。

下载后，我们需要处理它们。

前面提到的Angular-1.4.3.min.js放在public/JavaScript目录中。Angular-animal-1.4.3.min.js(如果不是这个名字就改一下)，放在public/JavaScript目录下。ui-bootstrap-TPS-0 . 13 . 3 . min . js(如果不是这个名字就改一下)，放在public/JavaScript目录下。Bootstrap-3.1.1.min.css(如果不是名字就改一下)，放在public/stylesheets目录下。Glyphicons半身人-regular.woff(如果不是这个名字就改一下)，在公共目录下新建一个fonts目录，放入OK，手动安装基本就绪。

使用用户界面引导组件

为了使用UI Bootstrap，引入了三个js文件和一个css文件。HTML模板看起来像这样：

！DOCTYPE html html ng-app=' myApp ' head meta charset=' UTF-8 ' link rel='样式表' href='/样式表/bootstrap-3.1.1.min.css' rel='外部nofollow' rel='外部nofollow' /head body.Script src=' http :/JavaScript/angular-1 . 4 . 3 . min . js '/Script Script src=' http :/JavaScript/Angular-animate-1 . 4 . 3 . min . js '/Script Script src=' http :/JavaScript/ui-bootstrap-tpls-0 . 13 . 3 . min . js '/Script/body/html然后，您使用Angular，并且至少有一个js文件实现

在HTML中添加相关文件后，可以根据UI Bootstrap文档学习如何使用相关组件和说明。

UI Bootstrap的详细文档在这里：http://angular-ui.github.io/bootstrap/.现在支持的指令有详细的介绍，有现成的例子可以学习。不过，轮到蔷色了。

使用用户界面引导的演示

修改两个文件，admin.html和管理. js

bootstrap-admin.html

在公共目录中复制一份admin.html，将其重命名为bootstrap-admin.html，用记事本打开，并按如下方式修改内容：

！DOCTYPE html html ng-app=' x-admin ' head meta charset=' UTF-8 ' TItlex管理系统/title link rel='样式表href='/样式表/admin . CSS“rel=”外部nofollow' link rel='样式表href='/样式表/bootstrap-3.1.1.min.css' rel='外部nofollow' rel='外部没有后续“/头体div class=' x-view-full ' ng-controller=' x-controller ' div class=' x-project-header ' div id=' x-project-title ' x管理后台/div div id=' x-log in-user ' a href='/user/tttt ' rel=' external no follow " { currentUser } }/aa href='/注销' rel='外部无跟随'退出/a/div/div class=' x边菜单'手风琴关闭-其他=' oneAtATime '手风琴-组标题=' { {菜单。 text } }“ng-repeat=”菜单中的“menu”是-open=“$ first”div ng-repeat=”菜单中的子菜单。子菜单a href=' ng-click=' rel=' external no follow '设置内容(下标。action)' { { subscribe。文本} }/a/div/手风琴-组/手风琴/div class=' x-contents ' div ng-include='你可以和原来的admin.html比较一下，我把班级为x侧菜单的差异元素内的项目模板，用用户界面引导的手风琴和手风琴组重写了一下。

手风琴定义一个手风琴菜单区域亲近的人属性可以指定本区域内的菜单组的展开是否互斥，值为真实的时，一次只能展开一个菜单组，为假的，可以存在多个展开的菜单。(注：这里用菜单一词不太准确，先这么着。)

手风琴组定义手风琴上的可折叠内容，它的标题属性指定折叠区域的标题，是开放的属性指定当前菜单是否打开，为真实的时打开，你在超文本标记语言中指定真实的或错误的时，是初始值，用户点击后，会改变。你也可以把这个属性和有角的作用域模型中的数据关联在一起。我引用了有角的的尼日利亚重复指令内置的第一属性，由尼日利亚重复生成的第一个项目的第一属性值为真的。所以我设计的手风琴区域，初始加载时第一个可折叠菜单时打开的。

引导-admin.js

复制原来的admin.js为bootstrap-admin.js，内容修改为下面这样：

angular.module('x-admin '，['ui.bootstrap '，' ngAnimate']).控制器(“x-控制器”，函数($scope，$ http){ $ scope。当前用户='占三'；$ scope。content='/欢迎。html '；$ scope . oneata time=false $ scope . menus=[{ text : '系统管理，enabled: true，子菜单3360[{ text : }用户管理，enabled: true，action:'/admin/addUser' }，{ text: '角色管理，enabled: true，action:'/role' }，{ text: '权限管理，enabled: true，action:'/access' } ] }，{ text: '内容管理，enabled: true，子菜单3360[{ text : }直播流监控，enabled: true，action:'/stream-monitor' }，{ text: '预约管理，enabled: true，action:'/book-mgr' } ] }，text: '推送管理，enabled: true，子菜单3360[{ text : }推送列表，enabled: true，action:'/push-list' }，{ text: '新增推送，enabled: true，action : '/add-push ' }]}]；$ scope。set content=function(action){ console。日志(操作)；$ scope . content=action }；});我给$范围设置了一次性属性，初值为假的，HTML中手风琴元素的亲近的人属性和一次性绑定了。所以，最终我们的管理菜单是可以同时打开多个的。

最重要的改动是第一行代码：

angular.module('x-admin '，['ui.bootstrap '，' ngAnimate']).注入了对ui。靴子和锰酸盐两个模块的依赖。

好了，最后在浏览器中打开“http://localhost :3000/bootstrap-admin . html”，效果如下：

点击内容管理，效果如下：

有关用户界面引导组件的更多用法，请参见文档。更多有角度的用户界面，看这里：https://github.com/angular-ui.

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。