浅析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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
Javascript window对象详解
Nov 12 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 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
超级简单的发送邮件程序
2006/10/09 PHP
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
如何运行带参数的python脚本
2019/11/15 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
总经理职责范文
2013/11/08 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
实习生评语
2014/04/26 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python