AngularJs的UI组件ui-Bootstrap分享(一)

最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得。

在一个实际的项目中,UI组件是必不可少的东西,然而由于你懂的原因,国内无法顺利访问AngularJs官网,关于AngularJs的UI组件国内资料很缺乏,本文就先介绍一下AngularJs最常用的UI组件——UI-Bootstrap

准备工作:

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的变量。有少部分指令的值不能是表达式,而要设置为字符串,在后面例子中会说明。

ui-bootstrap及其依赖的文件

时间: 2024-12-22 12:38:23

AngularJs的UI组件ui-Bootstrap分享(一)的相关文章

挂号平台首页开发(UI组件部分)

JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log("hello~"); } }); $.sayHello(); 2.$.fn  向JQ添加新方法(这次选择这种方法) $.fn.blue=function(){ this.css("background","blue"); } $("div&qu

AngularJs的UI组件ui-Bootstrap分享(十四)——Carousel

原文地址:http://www.cnblogs.com/pilixiami/p/5724314.html Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

工作流,WEB框架,UI组件网络收集整理

工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到正文: ? 工作流篇 RoadFlow工作流(收费):                  http://www.cqroad.cn/WorkFlow 驰骋工作流引擎 ccflow                       https://www.oschina.net/p/ccflow YbSof

Docz 用 MDX 写 React UI 组件文档

Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组件库.较早的 Twitter 的 Bootstrap 虽然只能称为 UI 库,但也大大提升了开发效率.后面 MVVM 大行其道 ,前端终于可以把 HTML.CSS.JS 放在一起开发包含 UI .交互真正意义上的组件了,现在有基于 React 的 Material-UI.国内阿里金服基于 React

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

封装一个简单的UI组件

方法其实很简单,用一个函数把整个过程包起来.调用时用new,这样可以在一个页面使用多个改组件.这是一个非常简单的方法,后面还有很大改进的空间.下面是一个封装日历的示例. 现在我们的组件类似bootstrap,写好下面的html结构,然后引入ui.css和ui.js,就可以生成相应的UI组件了.效果如上图. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>C

交互设计:隐藏或显示大段文本的UI组件有哪些?

应用场景: 在手机上要给列表中的每一项添加一个大段的介绍,应该用什么UI组件 A: 这里可以用,模态对话框,弹出提示,工具提示这类组件.模态对话框的好处,就是用关闭的按钮,用户操作方便:而弹出提示和工具提示只能通过点击来切换 模态对话框: http://v2.bootcss.com/javascript.html#modals http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态

学习通过Thread+Handler实现非UI线程更新UI组件

[Android线程机制] 出于性能考虑,Android的UI操作并不是线程安全的,这就意味着如果有多个线程并发操作UI组件,可能导致线程安全问题.为了解决这个问题,Android制定了一条简单的规则:只允许UI线程修改Activity里的UI组件 当一个程序第一次启动时,Android会同时启动一条主线程(Main Thread),主线程主要负责处理与UI相关的事件,如用户的按键事件,用户接触屏幕的事件及屏幕绘图事件,并把相关的事件分发到对应的组件进行处理.所以主线程通常又被叫做UI线程 [H

cocos2d-iphone 与 UI组件

http://zhidao.baidu.com/link?url=v9d7y2doWqcPhKz1lz8TkO7ZQfslg-e-55JE0XP9VdKJ0vHobcLPEAXaXjD2lD-TGmgnaRzRc1g38ho-vM5qu_ cocos2d-iphone 与 UI组件 2013-03-07 04:11嚣张→恨天  分类:其他编程语言 | 浏览 145 次  悬赏:15 coco2d如何在场景中 添加 UIsearchbar UItoolbar之类的UI组件 或者 框架自身怎么实现搜