博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJs的UI组件ui-Bootstrap分享(一)
阅读量:5833 次
发布时间:2019-06-18

本文共 1114 字,大约阅读时间需要 3 分钟。

原文地址:

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类型,如下:

 

 

4.      在ui-bootstrap中,以属性方式使用的指令对应的值,大多数为表达式,比如is-disabled=true,is-disabled的值就可 以设置为一个表达式,或者使用{

{}}绑定一个$scope的变量。有少部分指令的值不能是表达式,而要设置为字符串,在后面例子中会说明。

 

转载于:https://www.cnblogs.com/gongshunkai/p/6752471.html

你可能感兴趣的文章
软件工程师成长为架构师必备的十项技能
查看>>
python 异常
查看>>
百度账号注销
查看>>
mysql-This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY/SOME 错误解决
查看>>
BIEE Demo(RPD创建 + 分析 +仪表盘 )
查看>>
Cocos2dx 3.0开发环境的搭建--Eclipse建立在Android工程
查看>>
基本概念复习
查看>>
重构第10天:提取方法(Extract Method)
查看>>
Android Fragment使用(四) Toolbar使用及Fragment中的Toolbar处理
查看>>
解决pycharm在ubuntu下搜狗输入法一直固定在左下角的问题
查看>>
多线程day01
查看>>
MySQL出现Access denied for user ‘root’@’localhost’ (using password:YES)
查看>>
通过Roslyn构建自己的C#脚本(更新版)(转)
查看>>
红黑树
查看>>
第四章 mybatis批量insert
查看>>
Java并发框架——什么是AQS框架
查看>>
【数据库】
查看>>
linux清除文件内容
查看>>
WindowManager.LayoutParams 详解
查看>>
find的命令的使用和文件名的后缀
查看>>