关于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="/UploadFiles/2021-04-02/angular.js">然后在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.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="#" 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.jb51.net/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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com