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


Posted in Javascript onMay 20, 2016

在家里闲着无聊,正好在网上找到了一个关于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 class="container">
 <div ui-view>

 </div>
</div>

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

JS部分

var app=angular.module('app',['ui.router','loginModel','listModel']);

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部分

<div class="row">
 <div class="col-sm-2" ui-view="typeList">

 </div>
 <div class="col-sm-10" ui-view="tbHero">

 </div>
</div>

typeList部分

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

tbHero部分

<div ng-controller="listCtrl">
 <div class="row">
 <div class="col-sm-3">
  <button class="btn btn-success" ui-sref="addHero()">添加英雄</button>
  <button class="btn btn-warning" ui-sref="index()">退出</button>
 </div>
 <div class="col-sm-9">
  <form class="form-horizontal">
  <input type="text" ng-model="filterOptions.filterText" placeholder="请输入查询关键字..." class="form-control searchText"/>
  </form>
 </div>
 </div>
 <div class="row">
 <div class="col-sm-12">
  <div class="gridStyle" ng-grid="gridOptions">

  </div>
 </div>
 </div>
</div>

JS部分

var listModel = angular.module('listModel',['ngGrid']);
listModel.controller('listCtrl',['$scope','$http','$state','$stateParams', function ($scope, $http, $state, $stateParams) {

 $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,page*pageSize);
  }).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,page*pageSize);
  }).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', function () {
 $scope.getDates($scope.pagingOptions.pageSize,$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,
  sortable: true,
  pinnable: true
  },
  {
  field:'position',
  displayName: '定位',
  width: 70,
  sortable: true,
  pinnable: true
  },
  {
  field:'equip',
  displayName: '装备',
  width: 500,
  sortable: true,
  pinnable: true
  },
  {
  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)}}">详情</a></div>'
  }
 ],
 enablePaging: true, //是否能翻页
 showFooter: true,  //是否显示表尾
 totalServerItems: 'totalServerItems', //数据的总条数 
 pagingOptions: $scope.pagingOptions, //分页部分
 filterOptions: $scope.filterOptions  //数据过滤部分
 }
}])

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

下面附上几张效果图:

下面附上几张效果图:

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

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

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

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

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

Javascript 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
jquery实现页面加载效果
Feb 21 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
form表单序列化详解(推荐)
Aug 15 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
javascript的理解及经典案例分析
May 20 #Javascript
JS中对象与字符串的互相转换详解
May 20 #Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 #Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 #Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 #Javascript
深入理解JS addLoadEvent函数
May 20 #Javascript
用jQuery获取table中行id和td值的实现代码
May 19 #Javascript
You might like
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
python类定义的讲解
2013/11/01 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
编写strcpy函数
2014/06/24 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
高级工程师岗位职责
2013/12/15 职场文书
打架检讨书100字
2014/01/08 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
英语求职信范文
2014/05/23 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书