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好的文件可以在这里http://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组件,都可以到这里下载:http://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模板大概是这样的:
... 然后,你使用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++打开,将内容修改成下面这样: