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>
Angular -ui - BootStrap组件的解释以及使用的更多相关文章
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...
- Angular不同版本对应的Bootstrap组件
AngularJS 1.x版本对应的 bootstrap组件库是ui-bootstrap; http://www.cnblogs.com/pilixiami/p/5597634.html Angula ...
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- Bootstrap组件福利篇:十二款好用的组件推荐
阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...
- 17、bootStrap组件
1.bootStrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 2.字体图标 ①不要和其他图标混合使用 ②只能对内容为空的元素起作用 3.下拉菜单 <di ...
- angular ui $modal 使用 option
$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...
- [译]发布ABP v0.19包含Angular UI选项
发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...
随机推荐
- 搜索引擎的缓存(cache)机制
什么是缓存? 在搜索领域中,所谓缓存,就是在高速内存硬件设备上为搜索引擎开辟一块存储区,来存储常见的用户查询及其结果,并采用一定的管理策略来维护缓存区内的数据.当搜索引擎再次接收到用户的查询请求时,首 ...
- 【前端】Vue和Vux开发WebApp日志四、增加命令行参数
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html 项目github地址:https://github.com/shamoyuu/vue- ...
- linux系统 initrd.img中init启动脚本分析
概述:这篇文章主体内容来源于网上转载.前面几篇文章倾向于制作initrd.img,这篇文章更倾向于initrd.img的运行过程:加载framebuff驱动 ide驱动和文件系统驱动,最后进入到真正的 ...
- 重磅︱文本挖掘深度学习之word2vec的R语言实现
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:2013年末,Google发布的 w ...
- BIOS简介
BIOS简介: BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".其实,它是一组固化到计 ...
- zTree实现删除树子节点
zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...
- Xenu-web开发死链接检测工具应用
Xenu 是一款深受业界好评,并被广泛使用的死链接检测工具. 时常检测网站并排除死链接,对网站的SEO 非常重要,因为大量死链接存在会降低用户和搜索引擎对网站的信任,web程序开发人员还可通过其找到死 ...
- Python中re模块的使用
#table-1 thead,#table-1 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(2 ...
- cfDNA基本知识
定义 Circulating free DNA or Cell free DNA (cfDNA):循环游离DNA或者细胞游离DNA,释放到血浆中的降解的DNA片段. https://en.wikipe ...
- BUAA软工第0次作业
第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 我在大学之前甚至连一个萌新都算不上,根本没有任何一点计算机专业的基础. 因此在进入大学之前,计算机对于我 ...