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

时间:2021-05-25

关于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="#/" rel="external nofollow" >首页</a></li> // 在angular中,用#号后面内容作为路由跳转的路径(因为在浏览器中#号后面的url是被忽略不计的,所以只相当于浏览器处于同一页面,而 <li><a href="#/computers" rel="external nofollow" >电脑</a></li> //angular根据#号后面的内容来动态更改显示的内容) <li><a href="#/printers" rel="external nofollow" >打印机</a></li> <li><a href="#/blabla" rel="external nofollow" >其他</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的使用方法://mit(insurance)">提交</button> </td> </div> </form> </div> </div></script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。 

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章