Angularjs UI Components Ui-bootstrap Share (i)

Original address: http://www.cnblogs.com/pilixiami/p/5597634.html

Ui-bootstrap is a set of UI controls implemented by the ANGULARJS team on a bootstrap basis, using ANGULARJS, including tab pages, accordion, drop-down menus, modal windows, date selection, and so on. These native controls are written in jquery in Bootstrap, and ui-bootstrap can be used to put aside jquery and implement our application in a angularjs style.

Preparatory work:

1. Since ui-bootstrap is a combination of angularjs and bootstrap, it must be dependent on the Angularjs script and the bootstrap style, so there are a total number of files that need to be introduced in the page:

<script src= "/scripts/angular.js" ></script>

<script src= "/scripts/ui-bootstrap-tpls-1.3.2.js" ></script>

<link href= "/content/bootstrap.css" rel= "stylesheet"/>

Note:

The version of Angularjs is to be at 1.4.0 (1.5.5 in the following example), the bootstrap version is more than 3.0 (3.3.6 is used in the following example)

The ui-bootstrap-tpls-1.3.2.js name contains "Tpls", which means that the script includes the template used in the instruction.

If you need to use animations and swipes, you need to introduce Angular-animate.js and angular-touch.js files

If need to use date, currency, number localization, need to introduce angular-locale_zh-cn.js file

2. Once the correct script is introduced, you need to specify the dependent module in the module, namely:

Angular.module (' MyModule ', [' ui.bootstrap ']);

3. The font icon used by bootstrap has two files, with the suffix woff and woff2. By default, IIS does not support these two file types, so you need to add a MIME type, as follows:

<system. WebServer>    <staticcontent>      <Removefileextension= ". Woff"/>      <MimeMapfileextension= ". Woff"MimeType= "Application/font-woff" />      <Removefileextension= ". Woff2"/>      <MimeMapfileextension= ". Woff2"MimeType= "Application/font-woff" />    </staticcontent>  </system.webserver>

4. In Ui-bootstrap, the value of the instruction used by the attribute, most of which is an expression, such as the value of is-disabled=true,is-disabled, can be set to an expression, or a $scope variable is bound with {{}}. The value of a small number of instructions cannot be an expression, but should be set to a string, as described in the following example.

Ui-bootstrap and its dependent files (click to download)

Angularjs UI Components Ui-bootstrap Share (i)