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的變量。有少部分指令的值不能是表達式，而要設置爲字符串，在後面例子中會說明。

ui-bootstrap及其依賴的文件（點擊下載）