示例AngularJS 路由应用
 

 
首页
 // 在angular中，用#号后面内容作为路由跳转的路径（因为在浏览器中#号后面的url是被忽略不计的，所以只相当于浏览器处于同一页面，而
 
电脑
 //angular根据#号后面的内容来动态更改显示的内容） 
 
打印机
 
 
其他
 
 
 
  

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: '/'});
}]);

 

 
 
 文本提示框
 
 

 
 使用html的提示框
 

 

 使用模板的提示框
 

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

 


 
 文本提示框

 

 
 html提示框

 

 
 模板提示框
 
 

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就在这

调用：（别忘了引入指令的js文件）

3. uib-tab标签页

直接在要使用的div或者容器内使用

 汽车
 工作车
 可用车辆
 

4. uib-modal 模态框

前台调用：

编辑

打开模态框的函数

$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模板

 

 

 保险信息


 

 
 
 

 保险车辆 *

 

 

  

  请选择

  

 

  

 

 保险日期 *

 

  

 

 保险公司 *

 

 

 

 保险类型 *

 

 
 
 

 保险金额 *

 

 

 

 办理人 *

 

 

 

 备注 *

 

 

 

 

 

  取消

  提交

 

 

 

 
 

以上就是如何在Angular-ui-中使用BootStrap组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。