如何在Node.js中引入UIBootstrap
本篇文章给大家分享的是有关如何在Node.js中引入UIBootstrap，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
安装
最小安装需要：
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。
1.4.3的Angular及animate组件，都可以到这里下载：https://code.angularjs.org/1.4.3/。打不开就翻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，这个之前就说过了，放在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模板大概是这样的：
<!DOCTYPEhtml> <htmlng-app="myApp"> <head> <metacharset="UTF-8"> <linkrel="stylesheet"href="/stylesheets/bootstrap-3.1.1.min.css"rel="externalnofollow"rel="externalnofollow"> </head> <body> ... <scriptsrc="/javascripts/angular-1.4.3.min.js"></script> <scriptsrc="/javascripts/angular-animate-1.4.3.min.js"></script> <scriptsrc="/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++打开，将内容修改成下面这样：
<!DOCTYPEhtml>
<htmlng-app="x-admin">
<head>
<metacharset="UTF-8">
<title>X管理系统</title>
<linkrel="stylesheet"href="/stylesheets/admin.css"rel="externalnofollow">
<linkrel="stylesheet"href="/stylesheets/bootstrap-3.1.1.min.css"rel="externalnofollow"rel="externalnofollow">
</head>
<body>
<divclass="x-view-full"ng-controller="x-controller">
<divclass="x-project-header">
<divid="x-project-title">X管理后台</div>
<divid="x-login-user"><ahref="/user/tttt"rel="externalnofollow">{{currentUser}}</a> <ahref="/logout"rel="externalnofollow">退出</a></div>
</div>
<divclass="x-sidemenu">
<accordionclose-others="oneAtATime">
<accordion-groupheading="{{menu.text}}"ng-repeat="menuinmenus"is-open="$first">
<divng-repeat="subMenuinmenu.subMenus"><ahref=""ng-click="rel="externalnofollow"setContent(subMenu.action)">{{subMenu.text}}</a></div>
</accordion-group>
</accordion>
</div>
<divclass="x-contents">
<divng-include="content"></div>
</div>
</div>
<scriptsrc="/javascripts/angular-1.4.3.min.js"></script>
<scriptsrc="/javascripts/angular-animate-1.4.3.min.js"></script>
<scriptsrc="/javascripts/ui-bootstrap-tpls-0.13.3.min.js"></script>
<scriptsrc="/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两个模块的依赖。
好了，最终在浏览器里打开“http://localhost:3000/bootstrap-admin.html”，效果如下：
点击内容管理后，效果如下：
以上就是如何在Node.js中引入UIBootstrap，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。
