关于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=\"#/\" 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.freexyz.cn/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 是否在显示和隐藏时使用动画
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参照网址 https://www.freexyz.cn/article/143727.htm
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
暂无评论内容