浅析angularJS中的ui-router和ng-grid模块

在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西。

代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular。

有兴趣的小伙伴可以看看。那么然后这里我们就先来了解一下这两个模块的用法

我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的。其实angular有个内置的指令ng-route,如果在项目中没有嵌套问题的话,那么用这个指令来实现页面之间的跳转也还是蛮方便的,但是他的短板就在于,他拿深层次的嵌套路由没有任何办法。那么首先,我们要使用这个模块我们就需要把他给下载下来。

下载地址在这里http://www.bootcdn.cn/angular-ui-router/。

下载下来之后,我们就可以把它导入进我们的项目中了,这里要注意下,因为这个模块式基于angular的,所以在这之前,我们还需要导入angular的js文件。这个可以在angular的官网去下载。

那么在上面的准备工作都做完了之后,我们就可以来动手写我们的代码了。

HTML部分

这里有一点要注意下,div里面添加属性不再是ng-view了,而是ui-view。

JS部分

app.config(function ($stateProvider,$urlRouterProvider) {
 $urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',{
url: '/index',templateUrl: 'tpls/start.html'
})
.state('register',{
url: '/register',templateUrl: 'tpls/register.html'
})
.state('main',{
url: '/main{positionType:[0,9]{1,5}}',views: {
'': {
templateUrl: 'tpls/main.html'
},'typeList@main': {
templateUrl: 'tpls/typeList.html'
},'tbHero@main': {
templateUrl: 'tpls/tbHero.html'
}
}
})
.state('addHero',{
url: '/addHero',templateUrl: 'tpls/addHero.html'
})
.state('find',{
url: '/findPwd',templateUrl: 'tpls/findPwd.html'
})
.state('detail',{
url: '/detail/:id',templateUrl: 'tpls/detail.html'
})
})

这里有三个地方需要注意:

1、是在进行嵌套的时候,我这里最外层是main部分,然后里面嵌套了typeList和tbHero部分,我们需要注意下这里的写法。

2、当我们需要根据选择不同打开不同的内容时,也就是需要向下一个页面传参数,我这里是detail部分,我们也需要多注意下这里的写法。

3、在我们利用angular.module创建一个app应用的时候,我们需要在里面导入ui.router模块,另外我们自己创建的一些模块也需要在这里导入进去。

4、我们这里使用$stateProvider来配置路由了,而不是$routeProvider了,还有就是这里使用的state而不是when。

这里吧路由配置好了之后,剩下的就是写tpls中各个部分的代码了,这里就不做过多的介绍,这里最重要的就是路由的配置。

好了下面我们再来看看ng-grid的用法,这里是下载地址http://www.bootcdn.cn/ng-grid/。

HTML部分

main部分

typeList部分

<div class="jb51code">
<pre class="brush:xhtml;">
<div class="row">
<div class="col-sm-12">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item active">英雄定位类型
<a ui-sref="main({positionType:0})" class="list-group-item">全部定位
<a ui-sref="main({positionType:1})" class="list-group-item">射手
<a ui-sref="main({positionType:2})" class="list-group-item">中单
<a ui-sref="main({positionType:3})" class="list-group-item">上单
<a ui-sref="main({positionType:4})" class="list-group-item">打野
<a ui-sref="main({positionType:5})" class="list-group-item">辅助

tbHero部分

JS部分

$scope.pagingOptions = {
pageSizes: [5,15,20],pageSize: 5,currentPage: 1
};

$scope.filterOptions = {
filterText: '',useExternalFilter: true
};

$scope.totalServerItems = 0;
$scope.getDates = function (pageSize,page,/optional/searchText) {
setTimeout(function () {
if(searchText){
searchText = searchText.toLowerCase();
$http.get('data/hero.php?param='+$stateParams.positionType).success(function (data) {
var data = data.filter(function (item) {
return JSON.stringify(item).indexOf(searchText) != -1;
})
data.forEach(function (item,i) {
item.index = i+1;
});
$scope.totalServerItems = data.length;
$scope.datas=data.slice((page-1)pageSize,pagepageSize);
}).error(function (data) {
alert('请求错误...');
})
}else{
$http.get('data/hero.php?param='+$stateParams.positionType).success(function (data) {
data.forEach(function (item,i) {
item.index = i+1;
});
$scope.totalServerItems = data.length;
$scope.datas = data.slice((page-1)pageSize,pagepageSize);
}).error(function (data) {
alert('请求错误...');
})
}
},100);
};
$scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions',function () {
$scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);
},true);
$scope.$watch('filterOptions',$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
},true);

$scope.gridOptions = {
data: 'datas',//表格中显示的数据来源
multiSelect: false,//是否能多选
enableRowSelection: false,//是否能选择行
enableCellSelection: true,//是否能选择单元格
enableCellEdit: false,//是否能修改内容
enablePinning: true,//是否被锁住了
columnDefs: [
{
field: 'index',//这里是数据中的属性名
width: 80,display: '序号',//这里是表格的每一列的名称
pinnable: true,sortable: true //是否能排序
},{
field: 'name',displayName: '姓名',width: 120,sortable: true,pinnable: true
},{
field:'alias',displayName:'别名',width: 60,{
field:'position',displayName: '定位',width: 70,{
field:'equip',displayName: '装备',width: 500,{
field:'id',displayName: '详细攻略',sortable: false,pinnable: true,cellTemplate:'<div class="cellDetail"><a ui-sref="detail({id:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情

'
}
],enablePaging: true,//是否能翻页
showFooter: true,//是否显示表尾
totalServerItems: 'totalServerItems',//数据的总条数
pagingOptions: $scope.pagingOptions,//分页部分
filterOptions: $scope.filterOptions //数据过滤部分
}
}])

这里最重要的就是$scope.gridOptions这一块了,同时我们需要多注意下最后一个详细攻略里面,传参数的写法。

下面附上几张效果图:

下面附上几张效果图:

另外在这里面还用到的关于angular表单验证、service、向导、PHP等方面的内容这里就不做过多介绍了,如果有哪里写的不对的地方,万望留言告知,谢谢^_^。

以上这篇浅析angularJS中的ui-router和ng-grid模块就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

angularJSng-gridui-router

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...