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 ...
随机推荐
- （转）Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址, ...
- 通什翡翠商城大站协议邮件群发系统日发20-30万封不打码不换ip不需发件箱100%进收件箱
用一种新的技术思维去群发邮件一种不用换IP,不需要任何发件箱的邮件群发方式一种不需要验证码,不需要**代码变量的邮件群发方式即使需要验证码也能全自动识别验证码的超级智能软件教你最核心的邮件群发思维和软 ...
- java 关键字 assert的学习
之前在学习java源码时,发现了assert这个不常用的关键字.下面直接来介绍下这个关键字的使用. assert是什么? 它是jdk1.4之后新增加的关键字,没了. assert的作用是什么? ass ...
- ftp unable to fetch some archives,maybe run apt-get update or try with -- fix-missing?
引用:http://bbs.csdn.net/topics/340061850 先 apt-get update 再执行安装
- html5，表单的综合案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Best Part
- windows编程环境
自行下载VS2010官方原版并破解你也可以从微软官方直接下载VS2010 正式版,然后自行破解.Microsoft Visual Studio 2010官方下载地址如下:页面:http://www.m ...
- MySql SELECT INTO 记录为空的问题
SELECT Id INTO @Id FROM GiftCode WHERE Status = 1 AND GiftId = #GiftId# ORDER BY Id ASC LIMIT 1; ...
- python opencv 利用Lab空间把春天的场景改为秋天
前一段时间实现了Reinhard颜色迁移算法,感觉挺有意思的,然后在代码上随意做了一些更改,有了一些发现,把Lab通道的a通道值改为127左右,可以将绿色改为黄色,而对其他颜色的改动非常小,因此可以将 ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...