Angular -ui - BootStrap组件的解释以及使用

2024-04-05 11:17•Java教程•阅读 3322

关于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"  >
        <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" >
          <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" >
                        <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   /></td>
                        </div>
                        
                        <div class="form-group">
                                <td><label for="">保险公司  <span class="text-danger">*</span></label></td>
                                <td><input   /></td>
                        </div>
                        
                        <div class="form-group">
                                <td><label for="">保险类型 <span class="text-danger">*</span></label></td>
                                <td><input   /></td>
                        </div>
                        
                        <div class="form-group">
                                <td><label for="">保险金额 <span class="text-danger">*</span></label></td>
                                <td><input   /></td>
                        </div>
                        
                        <div class="form-group">
                                <td><label for="">办理人 <span class="text-danger">*</span></label></td>
                                <td><input   /></td>
                        </div>

                        <div class="form-group">
                                <td><label for="">备注 <span class="text-danger">*</span></label></td>
                                <td><input   /></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>

上一篇 »JS组件系列——Bootstrap 树控件使用经验分享
下一篇 »Angular中使用bootstrap样式

Angular -ui - BootStrap组件的解释以及使用

相关推荐

bootstrap与Select2使用小结

angular.bootstrap手动加载angularjs模块

angular-ui-bootstrap的弹出框定义成一个服务的实践，二

怎样使用laravel的脚手架安装bootstrap？

vue常用UI组件

Bootstrap:UI开发平台 sdk

003Angular2中使用ng-bootstrap

推荐几个bootstrap后端UI框架？