AngularJs的UI组件ui-Bootstrap分享

Posted 2020-07-26 liumang361

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

ui-bootstrap及其依赖的文件（点击下载）