Node.js引入UIBootstrap的方法示例

更新时间：2018年05月11日 10:23:04 作者：foruok

这篇文章主要介绍了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。

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模板大概是这样的：

<!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，至少还有一个实现作用域模型的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" 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管理后台</div>
     <div id="x-login-user"><a href="/user/tttt" rel="external nofollow" >{{currentUser}}</a>&nbsp;<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>

你可以和原来的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指令内置的first属性，由ng−repeat生成的第一个item的first属性值为true。所以我设计的手风琴区域，初始加载时第一个可折叠菜单时打开的。

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”，效果如下：

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

更多UI Bootstrap组件的用法，去看文档喽。更多Angular UI，看这里喽：https://github.com/angular-ui。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Nest.js系列之Providers及模块功能使用详解
这篇文章主要为大家介绍了Nest.js系列之Providers及模块功能使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
本篇文章主要介绍了Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例，具有一定的参考价值，有兴趣的可以了解一一下‘
2017-09-09
Node.js复制文件的方法示例
这篇文章主要介绍了Node.js复制文件的方法,涉及nodejs针对文件流的创建、读取、写入等操作技巧,需要的朋友可以参考下
2016-12-12
详解nodejs微信公众号开发——5.素材管理接口
这篇文章主要介绍了详解nodejs微信公众号开发——5.素材管理接口，非常具有实用价值，需要的朋友可以参考下
2017-04-04
Node.js卸载与重装及zip与msi安装详解
Node.js是一个JavaScript运行环境,可以使JavaScript这类脚本语言编写出来的代码运行速度获得极大提升,下面这篇文章主要给大家介绍了关于Node.js卸载与重装及zip与msi安装的相关资料,需要的朋友可以参考下
2023-01-01
node.js核心模块有哪些
这篇文章主要介绍了node.js核心模块有哪些，对node.js感兴趣的同学，可以参考下
2021-04-04
node快速搭建后台的实现步骤
本文主要介绍了node快速搭建后台，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
Node.js实用代码段之正确拼接Buffer
这篇文章主要介绍了Node.js实用代码段之正确拼接Buffer,通过实例代码分享如何正确拼接Buffer，感兴趣的小伙伴们可以参考一下
2016-03-03
Node.js Mongodb 密码特殊字符 @的解决方法
在去年的 DB 勒索事件之后, 不少的同学开始加强 Mongodb 的安全性, 其中一种办法就是设置复杂的密码. 那么如果设置的密码里包含一些如 “@”, “:” 一样的特殊字符，怎么处理呢？下面小编给大家带来了Node.js Mongodb 密码特殊字符 @的解决方法，一起学习吧
2017-04-04
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
这篇文章主要介绍了node.js使用mongoose操作数据库实现购物车的增、删、改、查功能,结合实例形式详细分析了node.js使用mongoose框架操作MongoDB数据实现购物车增删改查相关技巧与使用注意事项,需要的朋友可以参考下
2019-12-12