Node.js开发入门—引入UIBootstrap

最新推荐文章于 2022-09-10 10:07:29 发布

VIP文章 foruok

最新推荐文章于 2022-09-10 10:07:29 发布

阅读量8.7k

点赞数 3

分类专栏：网络编程 Node.js开发入门文章标签： node-js express angularjs bootstrap angular

本文链接：https://blog.csdn.net/foruok/article/details/48173377

版权

很多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">
  </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-boots