angularJS中的ui-router和ng-grid模块
关于angular的教程，学习了一下angular的ui-router和ng-grid这两个模块，顺便模仿着做了一个小小的东西。
代码已经上传到github上，地址在这里https://github.com/Songyj-225/angular。
有兴趣的小伙伴可以看看，目前还不会php只有前端的部分，那么然后这里我们就先来了解一下这两个模块的用法
我们先来说说ui-router这个模块，这个模块主要是用来实现深层次的路由的。其实angular有个内置的指令ng-route，如果在项目中没有嵌套问题的话，那么用这个指令来实现页面之间的跳转也还是蛮方便的，但是他的短板就在于，他拿深层次的嵌套路由没有任何办法。那么首先，我们要使用这个模块我们就需要把他给下载下来。
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭
下载地址在这里http://www.bootcdn.cn/angular-ui-router/。
下载下来之后，我们就可以把它导入进我们的项目中了，这里要注意下，因为这个模块式基于angular的，所以在这之前，我们还需要导入angular的js文件。这个可以在angular的官网去下载。
那么在上面的准备工作都做完了之后，我们就可以来动手写我们的代码了。
index.html
<body>
<div ui-view ></div>
</body>
这里有一点要注意下，div里面添加的属性是ui-view
app.js
var app = angular.module('routerApp',['ui.router','ngGrid', 'BookListModule', 'BookDetailModule','Bookadd']);
/**
* 由于整个应用都会和路由打交道，所以这里把$state和$stateParams这两个对象放到$rootScope上，
* 方便其它地方引用和注入。
* 这里的run方法只会在angular启动的时候运行一次。
* $rootScope
* $state
* $stateParams
**/
app.run(function($rootScope,$state,$stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
/**
* 配置路由.config
* 这里采用的是ui-router这个路由，而不是原生的ng-router路由
* ng原生的路由不能支持嵌套视图，所以这里必须使用ui-router;
* $stateProvider
* $urlRouterProvider
**/
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/index');//没有任何值得情况下去到index
$stateProvider.state('index',{//登陆页面
url:'/index',
templateUrl:'tpls/loginForm.html'
}).state('booklist',{//后台界面
url: '/{bookType:[0-9]{1,4}}',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'bookgrid@booklist': {
templateUrl: 'tpls/bookGrid.html'
}
}
}).state('addbook', {
url: '/addbook',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'addbook@addbook':{
templateUrl: 'tpls/addBookForm.html'
}
}
})
.state('bookdetail', {
url: '/bookdetail/:bookId',//注意这里在路由中传参数的方式
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'seebook@bookdetail':{
templateUrl: 'tpls/bookDetail.html'
}
}
})
})
1、是在进行嵌套的时候，我这里最外层是booklist部分，然后里面嵌套了seebook和addbook和bookgird部分，我们需要注意下这里的写法。
2、当我们需要根据选择不同打开不同的内容时，也就是需要向下一个页面传参数，我这里是细节部分，我们也需要多注意下这里的写法。
3、在我们利用angular.module创建一个app应用的时候，我们需要在里面导入ui.router模块，另外我们自己创建的一些模块也需要在这里导入进去。
4、我们这里使用$stateProvider来配置路由了，而不是$routeProvider了，还有就是这里使用的state而不是when。
这里吧路由配置好了之后，剩下的就是写tpls中各个部分的代码了，这里就不做过多的介绍，这里最重要的就是路由的配置。
好了下面我们再来看看ng-grid的用法，这里是下载地址http://www.bootcdn.cn/ng-grid/。
booklist.html
<!-- 导航 -->
<nav class="navbar navbar-inverse lan navbar-static-top" role="navigation">
<div class="navbar navbar-inverse lan navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#leftnav" >
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">图书管理系统</a>
</div>
<ul class="nav navbar-nav navbar-right maright">
<li><a><span class="badge colorred"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
</ul>
<!-- 左侧栏 -->
<div class="navbar-collapse" id="leftnav" ng-controller="booklist">
<ul class="nav">
<li>
<a data-target="#list" class="coloractive" data-toggle="collapse" aria-expanded="true">
<span class="glyphicon glyphicon-book"></span> 书籍类型
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
<ul id="list" class="nav collapse listbg in" aria-expanded="true">
<li ng-repeat="book in booklist" ui-sref = "booklist({bookType:{{book.id}}})"> <a > <span class="glyphicon {{book.img}}"></span> {{book.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 右侧 -->
<div class="page_mian">
<div class="container">
<div class="row ">
<div ui-view="bookgrid" class="col-xs-12">
<!--书籍列表加载中...-->
</div>
<div ui-view="addbook" class="col-xs-12">
<!--添加书籍-->
</div>
<div ui-view="seebook" class="col-xs-12">
<!--查看书籍-->
</div>
</div>
</div>
</div>
主要是右侧部分，操作显示都在右侧替换
controller.js
/***
* 这里是登陆模块
* ***/
app.controller('validateCtrl',function($scope){
$scope.user={
email:'',
password:''
};
$scope.arrs={
email:'song@126.com',
password:''
};
$scope.compare = function(user){
$scope.user= user;
$scope.same = angular.equals($scope.user.email,$scope.arrs.email)//对比
$scope.same1 = angular.equals($scope.user.password,$scope.arrs.password)//对比
console.log($scope.same);
console.log($scope.same1);
console.log($scope.user.email);
if($scope.same == false){
$scope.user.email='用户名不正确';
console.log(user.email);
};
if($scope.same1 == false){
$scope.user.password='';
console.log(user.password);
}
}
});
/**
*后台界面
**/
app.controller('booklist',function($scope,$http){
$scope.booklist ={};
$http.get('data/bookslist.json')
.success(function (item){
$scope.booklist = item;
console.log($scope.booklist)
});
});
/**
* 这里是书籍列表模块
**/
var bookListModule = angular.module("BookListModule", []);
bookListModule.controller('BookListCtrl', function($scope, $http, $state, $stateParams) {
//以下是分页内容
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = ;
$scope.pagingOptions = {
pageSizes: [, , ],
pageSize: ,
currentPage:
};
$scope.setPagingData = function(data, page, pageSize) {
var pagedData = data.slice((page - ) * pageSize, page * pageSize);
$scope.books = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
}; //这里可以根据路由上传递过来的bookType参数加载不同的数据
console.log($stateParams);
$scope.getPagedDataAsync = function(pageSize, page, searchText) {
setTimeout(function() {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('../src/data/books' + $stateParams.bookType + '.json')//通过传值调用不同json
.success(function(largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('../src/data/books' + $stateParams.bookType + '.json')
.success(function(largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, );
}; $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); $scope.$watch('pagingOptions', function(newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true); $scope.gridOptions = {
data: 'books',//表格中显示的数据来源
rowTemplate: '<div style="height: 100%"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
multiSelect: false,//是否能多选
enableCellSelection: true, //是否能选择单元格
enableRowSelection: false,//是否能选择行
enableCellEdit: true,//是否能修改内容
enablePinning: true, //是否被锁住了
columnDefs: [{
field: 'index',//这里是数据中的属性名
displayName: '序号', //这里是表格的每一列的名称
width: ,//表格的宽度
pinnable: false,
sortable: true//是否能排序
}, {
field: 'name',
displayName: '书名',
enableCellEdit: true
}, {
field: 'author',
displayName: '作者',
enableCellEdit: true,
width: ,
pinnable: true,
sortable: true
}, {
field: 'pubTime',
displayName: '出版日期',
enableCellEdit: true,
width:
}, {
field: 'price',
displayName: '定价',
enableCellEdit: true,
width: ,
cellFilter: 'currency:"￥"'
}, {
field: 'bookId',
displayName: '操作',
enableCellEdit: false,
sortable: false,
pinnable: false,
cellTemplate: '<div><a ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>'
}],
enablePaging: true,//是否能翻页
showFooter: true,//是否显示表尾
totalServerItems: 'totalServerItems',//数据的总条数
pagingOptions: $scope.pagingOptions,//分页部分
filterOptions: $scope.filterOptions,//数据过滤部分
};
}); /**
* 这里是书籍详情模块
* @type {[type]}
*/
var bookDetailModule = angular.module("BookDetailModule", []);
bookDetailModule.controller('BookDetailCtrl', function($scope, $http, $state, $stateParams) {
console.log($stateParams);
});
var bookadd = angular.module('Bookadd',['ngAnimate', 'ngSanitize','ui.bootstrap']);
bookadd.controller('Bookaddctrl',function($scope,$http,$state, $stateParams){
function abf(){
$scope.userInfo={};//空
$scope.userInfo.dt = new Date();//日历
$scope.popup2 = {
opened: false
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.sites=[ //下拉列表
{id:,site:'计算机'},
{id:,site:'金融'},
{id:,site:'哲学'},
{id:,site:'历史'}
];
$scope.userInfo.zw = '';//默认选中一个
};
abf();//执行
$scope.geto =function(user){
$scope.userInfo = user
console.log($scope.userInfo.dt.toISOString().slice(,))//日期格式化
$http({
url:'data/books5.json',
method:'POST',
data:$scope.userInfo,
data:JSON.stringify($scope.userInfo)
}).success(function(da){
console.log(da);
// console.log($stateParams);
window.history.back();
});
};
$scope.setFormData = function(){//清空
abf();
} })
这里最重要的就是$scope.gridOptions这一块了，同时我们需要多注意下最后一个详细攻略里面，传参数的写法。
下面附上几张效果图：
angularJS中的ui-router和ng-grid模块的更多相关文章
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- AngularJS学习之 ui router
1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...
- angularjs的路由ui.router
<!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
随机推荐
- 总结Android中遇见的OOM
一 .Android应用中内存泄漏几种的原因: 1.单例模式导致的内存泄漏: 当调用getInstance时,如果传入的context是Activity的context.只要这个单例没有被释放,这个A ...
- jQuery 菜单
- Android--RecyclerView的封装使用
1,用了很长一段时间的RecyclerView,在项目中用的频率也越来越频繁(因为踩得坑也越来越多了),或过头来看,感觉一直在写RecyclerView.Adapter中的三个方法和一个内部类,感觉很 ...
- [转]asp三级select菜单联动（加数据库）
'数据库结构'类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称'类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aI ...
- paper 118：计算机视觉、模式识别、机器学习常用牛人主页链接
牛人主页(主页有很多论文代码) Serge Belongie at UC San Diego Antonio Torralba at MIT Alexei Ffros at CMU Ce Liu at ...
- 渗透日记-利用SQLMAP伪静态注入
今日找到一个网站,做下安全检测,url是这样的: 不是传统的.php结尾,所以很多人认为这个不能注入,其实伪静态也能注入的,这个url虽然做了伪静态,但是还是需要传递参数到数据库去查询的,试试能否注入 ...
- 误用的volatile
在嵌入式编程中,有对某地址重复读取两次的操作,如地址映射IO.但如果编译器直接处理p[0] = *a; p[1] = *a这种操作时,往往会忽略后一个,而直接使用前一个已计算的结果.这是有问题的,因为 ...
- BlogEngine2.9模仿yahoo滚动新闻Widget
widget.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="w ...
- Attribute和自定义Property
property(属性) attribute(特性) property和attribute的同步 id href value class/className 旧IE的趣事 attribute作为DOM ...
- Clouda聊天室实践
1.Clouda说明 Clouda是简单,可依赖的实时Javascript框架.对一个想开发移动webapp的开发者来说,可以使用clouda开发框架,实现一个功能和体验与native app齐平的轻 ...