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

在家无聊，刚在网上找到一个关于棱角分明的教程。我研究了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 '，' listmode '])；app.config(函数($stateProvider，$ urlRouterProvider){ $ urlRouterProvider . others('/index ')；$stateProvider。状态(' index '，{ url: '/index '，Templateurl : ' TPS/start . html ' })。state('register '，{ url: '/register '，Templateurl : ' TPS/register . html ' })。state('main '，{ URL : '/main { positiontype :[0，9]{1，5}} '，views : { ' : { template URL : ' tpls/main . html ' }，'[email protected]' : { template URL : ' tpls/typelist . html ' }，'[email protected]' : { template URL : ' tpls/tbhero。状态(' addHero '，{ url: '/addHero '，template URL : ' TPS/addHero . html ' })。状态(' find '，{ url: '/findPwd '，Templateurl : ' tpls/find pwd . html ' })。状态(' detail '，{URL :'/detail/: id '，模板URL :' tpls/detail.html'})})这里有三点需要注意：

1.在嵌套过程中，这里最外层是主要部分，然后typeList和tbHero部分嵌套在里面。我们需要注意这里的书写。

2.当我们需要根据不同的选择打开不同的内容时，也就是需要将参数传递到下一页。这里是细节部分，我们也需要多注意这里的写法。

3.使用angular.module创建app时，需要导入ui.router模块，有些自己创建的模块需要在这里导入。

4.我们使用$stateProvider而不是$routeProvider来配置路由，我们在这里使用state而不是when。

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

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

HTML部分

干线段

class=' row ' div class=' col-sm-2 ' ui-view=' type list '/div div class=' col-sm-10 ' ui-view=' TB hero '/div/div type list。

div class=' row ' div class=' col-sm-12 ' div class=' list-group ' a href=' JavaScript : void(0)；'类='列表-组-项目活动'英雄定位类型/a a ui-sref=' main({ position type :0 })' class=' list-group-item '全部定位/a a ui-sref=' main({ position type :1 })' class=' list-group-item '射手/a a ui-sref=' main({ position type :2 })' class=' list-group-item '中单/a a ui-sref=' main({ position type :3 })' class=' list-group-item '上单/a a ui-sref=' main({ position type :4 })' class=' list-group-item '打野/a a ui-sref=' main({ position type :5 })' class=' list-group-item '辅助/a/div/Divthero部分

div ng-controller=' listcrl ' div class=' row ' div class=' col-sm-3 ' button class=' BTN BTN-成功' ui-sref=' addHero()'添加英雄/button button class=' BTN BTN-警告' ui-sref=' index()'退出/button/div div class=' col-sm-9 ' form class=' form-横置'输入类型=' text ' ng-model='筛选器选项。“过滤文本”占位符='请输入查询关键字.'class=' form-control search text '/form/div/div class=' row ' div class=' col-sm-12 ' div class=' Gridstyle ' ng-grid=' GridOptions '/div/divJS部分

var listmode=angular。模块(' listmode '，[' ngGrid '])；列表模型。控制器(' listcrl '，['$scope '，' $http '，' $state '，' $stateParams '，函数($scope，$http，$ state params){ $ scope。pagingooptions={页面大小3360[5，15，20]，页面大小： 5，当前页面： 1 }；$ scope。filteroptions={ filtertext : ' '，useexternal filter : true }；$ scope。totalServerItems=0；$ scope。getdate=function(页面大小，页面，/*可选*/搜索文本){ setTimeout(function(){ if(搜索文本){ search text=search text。tolowercase()；$http.get('data/hero.php？param=' $ state params。positiontype ).成功（函数（数据){ var data=data.filter(函数（项){ return JSON.stringify(项))。索引的(搜索文本)!=-1;}) data.forEach(函数(项，I){项。指数=1 ^ 1；});$ scope。TotalServerItems=数据。长度；$ scope。数据=数据。切片((page-1)*页面大小，page *页面大小)；}).错误（函数（数据){ alert('请求错误.');})} else { $ http。get(' data/hero。PHP？param=' $ state params。positiontype ).成功（函数（数据){ data.forEach(函数（项，I){ item。指数=1 ^ 1；});$ scope。TotalServerItems=数据。长度；$ scope。数据=数据。切片((page-1)*页面大小，page *页面大小)；}).错误（函数（数据){ alert('请求错误.');}) } },100);};$ scope。getdate($ scope。分页选项。页面大小，$ scope。分页选项。当前页面)；$scope .$ watch(' pagingooptions '，function(){ $ scope。getdate($ scope。分页选项。页面大小，$ scope。分页选项。当前页面)；},真);$scope .$watch('filterOptions '，function(){ $ scope。getdate($ scope。分页选项。页面大小，$ scope。分页选项。当前页面，$ scope。过滤器选项。过滤文本)；},真);$ scope。GridOptions={ data : ' datas '，//表格中显示的数据来源多选：假，//是否能多选enableRowSelection: false，//是否能选择行enableCellSelection: true，//是否能选择单元格enableCellEdit: false，//是否能修改内容enablePinning: true，//是否被锁住了列defs 3360[{ field : ' index '，//这里是数据中的属性名宽度： 80,显示： '序号', //这里是表格的每一列的名称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: '装备，显示名称： '装备，宽度： 500,可排序：真，pinnable: true }，{ field:'id '，displayName: '详细攻略，sortable: false，pinnable: true，cell template : ' div class=' CellDetail ' a ui-sref=' detail({ id : row。get property(col . field)})' id=' { { row。getproperty(col . field)} } '详情/a/div' } ]，enablePaging: true，//是否能翻页showFooter: true，//是否显示表尾total server items : ' total server items '，//数据的总条数分页选项3360美元范围。分页选项，//分页部分过滤选项3360美元范围。过滤器选项/数据过滤部分}}])这里最重要的就是$scope.gridOptions这一块了，同时我们需要多注意下最后一个详细攻略里面，传参数的写法。

下面附上几张效果图：

下面附上几张效果图：

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

以上这篇浅析开发中的用户界面路由器和尼日利亚网格模块就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。