淺析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> <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> <div ui-view="typeList"> </div> <div ui-view="tbHero"> </div></div>

typeList部分

<div> <div> <div> <a href="javascript:void(0);">英雄定位類型</a> <a ui-sref="main({positionType:0})">全部定位</a> <a ui-sref="main({positionType:1})">射手</a> <a ui-sref="main({positionType:2})">中單</a> <a ui-sref="main({positionType:3})">上單</a> <a ui-sref="main({positionType:4})">打野</a> <a ui-sref="main({positionType:5})">輔助</a> </div> </div></div>

tbHero部分

<div ng-controller="listCtrl"> <div> <div> <button ui-sref="addHero()">添加英雄</button> <button ui-sref="index()">退出</button> </div> <div> <form> <input type="text" ng-model="filterOptions.filterText" placeholder="請輸入查詢關鍵字..."/> </form> </div> </div> <div> <div> <div 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><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這一塊了，同時我們需要多注意下最後一個詳細攻略裡面，傳參數的寫法。

下面附上幾張效果圖：

下面附上幾張效果圖：

另外在這裡面還用到的關於angular表單驗證、service、嚮導、php等方面的內容這裡就不做過多介紹了,如果有哪裡寫的不對的地方，萬望留言告知，謝謝^_^。

以上這篇淺析angularJS中的ui-router和ng-grid模塊就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。