關于UI BootStrap

UI BootStrap 是angularUI團隊用純粹angularJS語法編寫的Bootstrap組件。

1. 關于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的區別

實例：

使用ng-router：

首先引入js文件

<script src="js/angular.js"></script> <script src="js/angular-route.js"></script> 

然后在html中

<h2>示例AngularJS 路由應用</h2> <ul> <li><a href="#/" rel="external nofollow" >首頁</a></li> // 在angular中，用#號后面內容作為路由跳轉的路徑（因為在瀏覽器中#號后面的url是被忽略不計的，所以只相當于瀏覽器處于同一頁面，而 <li><a href="#/computers" rel="external nofollow" >電腦</a></li> //angular根據#號后面的內容來動態更改顯示的內容）  <li><a href="#/printers" rel="external nofollow" >打印機</a></li>  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>  </ul>  <hr /> <div ng-view></div> // 用ng-view來顯示對應的html視圖 

在controller中

var myApp = angular.module('myApp',['ngRoute']).config(['$routeProvider', function ($routeProvider) { // 首先在模塊中加入那個Route依賴，函數中引入$routerProvider $routeProvider .when('/', {template:'this is main page'}) // 根據提供的when函數來進行相應配置 .when('/computers',{ template:'this is conputer page' }) .when('/printers', { template:'this is printer page' .otherwise({redirectTo: '/'});}]); 

完成

使用ui-router：

ui-router的使用方法：//www.survivalescaperooms.com/article/78895.htm

1. 使用uib-tooltip

<!--使用Uib-tooltip提示框--> <div> <div class="form-group"> <button uib-tooltip="this is example" tooltip-placement="right" type="button" class="btn btn-default"> 文本提示框 </button> </div> <div class="form-group"> <button href="#" rel="external nofollow" uib-tooltip-html="htmlToolTip">使用html的提示框</button> </div> <div class="form-group"> <button type="text" uib-tooltip-template = "'myTooltipTemplate.html'" tooltip-placement="top-right">模板提示框</button> </div> </div>

<script type="text/ng-template" id="myTooltipTemplate.html" > <div> <span>使用模板的提示框</span> </div></script> 

tooltip可以使用的屬性有：

屬性名 默認值 備注
tooltip-animation   true    是否在顯示和隱藏時使用動畫