AngularJs的UI组件ui-Bootstrap分享(一)
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得。
目录:
AngularJs的UI组件ui-Bootstrap分享(一)
AngularJs的UI组件ui-Bootstrap分享(二)——Collapse
AngularJs的UI组件ui-Bootstrap分享(三)——Accordion
AngularJs的UI组件ui-Bootstrap分享(四)——Datepicker Popup
AngularJs的UI组件ui-Bootstrap分享(五)——Pager和Pagination
AngularJs的UI组件ui-Bootstrap分享(六)——Tabs
AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown
AngularJs的UI组件ui-Bootstrap分享(八)——Tooltip和Popover
AngularJs的UI组件ui-Bootstrap分享(九)——Alert
AngularJs的UI组件ui-Bootstrap分享(十)——Model
AngularJs的UI组件ui-Bootstrap分享(十一)——Typeahead
AngularJs的UI组件ui-Bootstrap分享(十二)——Rating
AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar
AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel
UI-Bootstrap是AngularJs团队在Bootstrap基础上,用AngularJs实现的一组UI控件,包括Tab页,手风琴,下拉菜单,模态窗口,日期选择等等。原生的这些控件在Bootstrap里是用Jquery写的,用了UI-Bootstrap就可以抛开Jquery,以AngularJs的风格实现我们的应用了
准备工作:
1. 既然UI-Bootstrap是Angularjs和Bootstrap的合体,那么它肯定要依赖于AngularJs脚本和Bootstrap的样式,所以在页面中,一共需要引入这几个文件:
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet" />
注:
Angularjs的版本要在1.4.0以上(后面例子中使用的是1.5.5),Bootstrap的版本要在3.0以上(后面例子中使用的是3.3.6)
ui-bootstrap-tpls-1.3.2.js名字中含有”tpls”,表示这个脚本是包括了指令中所用到的模板
如果需要用到动画和滑动,需要引入Angular-animate.js和Angular-touch.js文件
如果需要用到日期,货币,数字的本地化,需要引入angular-locale_zh-cn.js文件
2. 引入正确的脚本后,在module中需要指定依赖的module,即:
angular.module('myModule', ['ui.bootstrap']);
3. bootstrap使用的字体图标有两个文件,后缀为woff和woff2.默认情况下,IIS是不支持这两个文件类型的,因此需要添加MIME类型,如下:
<system.webServer>
<staticContent>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
4. 在ui-bootstrap中,以属性方式使用的指令对应的值,大多数为表达式,比如is-disabled=true,is-disabled的值就可以设置为一个表达式,或者使用{{}}绑定一个$scope的变量。有少部分指令的值不能是表达式,而要设置为字符串,在后面例子中会说明。
posted on 2016-06-19 11:04 pilixiami 阅读(27213) 评论(1) 编辑 收藏 举报