详解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文件

rush:js;">

然后在html中

rush:xhtml;">

示例AngularJS 路由应用

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

---

// 用ng-view来显示对应的html视图

在controller中

rush:js;"> 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的使用方法：

1. 使用uib-tooltip

<div class="form-group">
<button href="#" rel="external nofollow" uib-tooltip-html="htmlToolTip">使用html的提示框

<div class="form-group">
<button type="text" uib-tooltip-template = "'myTooltipTemplate.html'" tooltip-placement="top-right">模板提示框