淺析angularJS中的ui-router和ng-grid模塊

2019-11-20 09:59:23

字體：大中小

供稿：網(wǎng)友

在家里閑著無聊，正好在網(wǎng)上找到了一個關(guān)于angular的教程，學習了一下angular的ui-router和ng-grid這兩個模塊，順便模仿著做了一個小小的東西。

代碼已經(jīng)上傳到github上，地址在這里喲https://github.com/wwervin72/Angular。

有興趣的小伙伴可以看看。那么然后這里我們就先來了解一下這兩個模塊的用法。

我們先來說說ui-router這個模塊，這個模塊主要是用來實現(xiàn)深層次的路由的。其實angular有個內(nèi)置的指令ng-route，如果在項目中沒有嵌套問題的話，那么用這個指令來實現(xiàn)頁面之間的跳轉(zhuǎn)也還是蠻方便的，但是他的短板就在于，他拿深層次的嵌套路由沒有任何辦法。那么首先，我們要使用這個模塊我們就需要把他給下載下來。

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

下載下來之后，我們就可以把它導入進我們的項目中了，這里要注意下，因為這個模塊式基于angular的，所以在這之前，我們還需要導入angular的js文件。這個可以在angular的官網(wǎng)去下載。

那么在上面的準備工作都做完了之后，我們就可以來動手寫我們的代碼了。

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、當我們需要根據(jù)選擇不同打開不同的內(nèi)容時，也就是需要向下一個頁面?zhèn)鲄?shù)，我這里是detail部分，我們也需要多注意下這里的寫法。

3、在我們利用angular.module創(chuàng)建一個app應(yīng)用的時候，我們需要在里面導入ui.router模塊，另外我們自己創(chuàng)建的一些模塊也需要在這里導入進去。

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="請輸入查詢關(guān)鍵字..." 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',  //表格中顯示的數(shù)據(jù)來源 multiSelect: false, //是否能多選 enableRowSelection: false, //是否能選擇行 enableCellSelection: true, //是否能選擇單元格 enableCellEdit: false, //是否能修改內(nèi)容 enablePinning: true,  //是否被鎖住了 columnDefs: [  {  field: 'index', //這里是數(shù)據(jù)中的屬性名  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', //數(shù)據(jù)的總條數(shù)  pagingOptions: $scope.pagingOptions, //分頁部分 filterOptions: $scope.filterOptions  //數(shù)據(jù)過濾部分 }}])

這里最重要的就是$scope.gridOptions這一塊了，同時我們需要多注意下最后一個詳細攻略里面，傳參數(shù)的寫法。

下面附上幾張效果圖：