Angular -ui - BootStrap組件的解釋以及使用

 關於UI BootStrap 

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

 

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

• ngroute是用AngularJS框架的路由的核心部分。
• ui-router是一個社區庫，它是用來提升完善ngroute路由功能的。

實例：

使用ng-router：

　　　首先引入js文件

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

　　而後在html中

<h2>示例AngularJS 路由應用</h2>
        <ul>
            <li><a href="#/">首頁</a></li> // 在angular中，用#號後面內容做爲路由跳轉的路徑（由於在瀏覽器中#號後面的url是被忽略不計的，因此只至關於瀏覽器處於同一頁面，而
            <li><a href="#/computers">電腦</a></li> //angular根據#號後面的內容來動態更改顯示的內容）

<li><a href="#/printers">打印機</a></li> <li><a href="#/blabla">其餘</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的使用方法： http://www.jb51.net/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="#" 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	是否在顯示和隱藏時使用動畫
tooltip-append-to-body	false	是否將提示框放在body的末尾
tooltip-class	 	加在tooltip上的自定義的類名
tooltip-enable	true	是否啓用
tooltip-is-open	false	是否顯示提示框
tooltip-placement	top	提示框的位置。可設置的值包括：top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom
tooltip-popup-close-delay	0	關閉提示框前的延遲時間
tooltip-popup-delay	0	顯示提示框前的延遲時間
tooltip-trigger	mouseenter	顯示提示框的觸發事件

　　2. 使用popover

	<!--使用popover提示框-->
		<div>
			
			<div class="form-group">
				<button uib-popover="this is popover box" popover-placement="auto" popover-trigger="'mouseenter'">文本提示框</button>
			</div>
			
			<div class="form-group" >
				<button uib-popover-html="htmlToolTip" popover-trigger="'mouseenter'">html提示框</button>
			</div>
			
			<div class="form-group">
				<button uib-popover-template="'myTooltipTemplate.html'" popover-trigger="'mouseenter'" popover-title="tittle here" popover-placement="auto" >模板提示框</button>
			</div>
			
		</div>

popover的屬性有：

屬性名	默認值	備註
popover-animation	true	是否在顯示和隱藏時使用動畫
popover-append-to-body	false	是否將提示框放在body的末尾
popover-enable	true	是否啓用
popover-is-open	false	是否顯示提示框
popover-placement	top	提示框的位置。可設置的值包括：top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom
popover-popup-close-delay	0	關閉提示框前的延遲時間
popover-popup-delay	0	顯示提示框前的延遲時間
popover-trigger	mouseenter	顯示提示框的觸發事件
popover-title	 	標題
 大部分屬性和tooltip也是同樣的，只是沒有popover-class，另外多了個popover-title。

須要注意的一點是，popover的全局配置和tooltip同樣，是使用$uibTooltipProvider來配置的。

　　全局配置tooltip和popover參照網址 http://www.bubuko.com/infodetail-1669567.html

 

2. 使用uib-datepicker而且封裝成指令

這個插件是datepicker只能獲取日期！不是datetimepicker！還有一個叫timepicker，真納悶爲何angular團隊不把這兩個插件組成一個。。。

由於項目用到的第三方庫實在太多，不肯意再去別的地方再弄一個時間控件，因此就用了angular自帶的這個， 說實話，很通常。。。

上代碼吧：

 

指令聲明：
	emms.directive('emmsSingleDatepicker', function() {
		
		return {
			restrict: 'AE',
			replace: false,
			templateUrl: 'directives/single-datepicker/single-datepicker.html',
			scope: {
				dateValue: '=ngModel' //逆向綁定輸入框的值到父做用域的ng-model
			},
			controller: function($scope, $filter) {
				$scope.dateOptions = {
	    			maxDate: new Date(2099, 12, 30)
	  			};
				 $scope.altInputFormats = ['yyyy-M!-d!'];
				 $scope.open = function() {
	    			$scope.opened = true;
	 			 };
	 			 $scope.transformDate = function() {
	    			 $scope.dateValue = $filter('date')($scope.date, 'yyyy-MM-dd HH:mm:ss');
	    		 };
			}
		}
	});


指令模板：uib-datepicker就在這
<div>
        <span class="input-group input-group-xs" style="width:80%;margin:0 auto;">
          <input type="text" class="form-control" uib-datepicker-popup="{{'yyyy-MM-dd'}}" ng-model="date" is-open="opened" 
          	 clear-text="清空" current-text="今天" ng-required="true" close-text="關閉" ng-change="transformDate()"/>
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </span>
  </div>

調用：（別忘了引入指令的js文件）
<emms-single-datepicker ng-model="newAudit.annualDate"></emms-single-datepicker>

　

3. uib-tab標籤頁

直接在要使用的div或者容器內使用
<uib-tabset active="activeJustified" justified="true">
  		<uib-tab index="0" heading="汽車" th:include="vehicle/info/templates::car">汽車</uib-tab>
  		<uib-tab index="1" heading="工做車" th:include="vehicle/info/templates::audit" select="toAudit()">工做車</uib-tab>
  		<uib-tab index="2" heading="可用車輛" th:include="vehicle/info/templates::insurance" select="toInsurance()">可用車輛</uib-tab>
  	</uib-tabset>

　

4. uib-modal 模態框

前臺調用：
<a ng-click="openMaintenanceDetail(maintenance)" class="label label-info btn-xs">編輯</a>

打開模態框的函數
$scope.openVehicleDetail = function(vehicle) {
			// 彈出確認窗口
			var modalInstance = $uibModal.open({
				templateUrl: 'vehicle-detail.html',
				controller: 'VehicleDetailCtrl',
				animation: true,
				resolve: {
					vehicle: vehicle,
					allTypes: function() {
						return $scope.allTypes;
					}
				},
				size: 'lg'
			});
			// 更新頁面內容
			modalInstance.result.then(function(response) {
				refreshByCloseStatus(response, $scope.vehicles);
			});
		}

模態框對應的controller
emms.controller('VehicleDeleteCtrl', ['$scope', '$uibModalInstance', ,
			function($scope, $uibModalInstance) {


		$scope.confirm = function() {
			judgeDelete(flag, instance);
			$uibModalInstance.close("close");
		}
		
		$scope.cancel = function() {
			$uibModalInstance.dismiss("cancel");
		}
		
	}]);

模態框對應的html模板
	
			<script type="text/ng-template" id="VehicleInsurance.html">
			<div>
				
			<div class="modal-header">
		<p class="modal-title" align="center">保險信息</p>
	</div>
		<div class="modal-body">

		<form name="VehicleInfo">

			<div class="form-group">
				<td><label for="vehicleType">保險車輛 <span class="text-danger">*</span></label>
				</td>
				<td>
					<select class="form-control"  ng-model="insurance.vehicle" ng-options="vehicle as vehicle.vehicleIDNum for vehicle in allVehicles">
						<option >請選擇</option>
					</select>
				</td>
			</div>

			<div class="form-group">
				<td><label for="">保險日期  <span class="text-danger">*</span></label></td>
				<td><input id="" type="text" class="form-control" ng-model="insurance.date" placeholder=""  /></td>
			</div>
			
			<div class="form-group">
				<td><label for="">保險公司  <span class="text-danger">*</span></label></td>
				<td><input id="" type="text" class="form-control" ng-model="insurance.companyName" placeholder=""  /></td>
			</div>
			
			<div class="form-group">
				<td><label for="">保險類型 <span class="text-danger">*</span></label></td>
				<td><input id="" type="text" class="form-control" ng-model="insurance.type" placeholder=""  /></td>
			</div>
			
			<div class="form-group">
				<td><label for="">保險金額 <span class="text-danger">*</span></label></td>
				<td><input id="" type="text" class="form-control" ng-model="insurance.money" placeholder=""  /></td>
			</div>
			
			<div class="form-group">
				<td><label for="">辦理人 <span class="text-danger">*</span></label></td>
				<td><input id="" type="text" class="form-control" ng-model="insurance.agent.staffName" placeholder=""  /></td>
			</div>

			<div class="form-group">
				<td><label for="">備註 <span class="text-danger">*</span></label></td>
				<td><input id="" type="text" class="form-control" ng-model="insurance.remark" placeholder=""  /></td>
			</div>
			
			<div class="form-group" align="right">
				<td colspan=2>
					<button class="btn btn-primary import-applicant" type="button" ng-click="cancel()">取消</button>
					<button class="btn btn-primary import-applicant" type="submit" ng-click="commit(insurance)">提交</button>
				</td>
			</div>
		</form>
	</div>
	
	</div>
			</script>