如何在Angular-ui-中使用BootStrap组件-创新互联

本篇文章给大家分享的是有关如何在Angular-ui-中使用BootStrap组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业同心免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别

ngroute是用AngularJS框架的路由的核心部分。
ui-router是一个社区库，它是用来提高完善ngroute路由功能的。

实例：

使用ng-router：

首先引入js文件

然后在html中

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

// 用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


 
 
 
 文本提示框
 
 

 
 使用html的提示框

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

$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); }); }

emms.controller('VehicleDeleteCtrl', ['$scope', '$uibModalInstance', , function($scope, $uibModalInstance) { $scope.confirm = function() { judgeDelete(flag, instance); $uibModalInstance.close("close"); } $scope.cancel = function() { $uibModalInstance.dismiss("cancel"); } }]);

保险信息

保险车辆 * 请选择保险日期 *

保险公司 *

保险类型 *

保险金额 *

办理人 *

备注 *

取消提交

关于创新互联

如何在Angular-ui-中使用BootStrap组件-创新互联

示例AngularJS 路由应用

其他资讯