淺析angularJS中的ui-router和ng-grid模塊
在家里閑著無聊，正好在網(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/。
下載下來之后，我們就可以把它導(dǎo)入進我們的項目中了，這里要注意下，因為這個模塊式基于angular的，所以在這之前，我們還需要導(dǎo)入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)用的時候，我們需要在里面導(dǎo)入ui.router模塊，另外我們自己創(chuàng)建的一些模塊也需要在這里導(dǎo)入進去。
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ù)的寫法。
下面附上幾張效果圖：
下面附上幾張效果圖：
另外在這里面還用到的關(guān)于angular表單驗證、service、向?qū)?、php等方面的內(nèi)容這里就不做過多介紹了,如果有哪里寫的不對的地方，萬望留言告知，謝謝^_^。
以上這篇淺析angularJS中的ui-router和ng-grid模塊就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了angularjs實現(xiàn)的購物金額計算工具,涉及AngularJS事件監(jiān)聽、數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
詳解AngularJS中$filter過濾器使用(自定義過濾器)
這篇文章主要介紹了詳解AngularJS中$filter過濾器使用(自定義過濾器)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
Agularjs妙用雙向數(shù)據(jù)綁定實現(xiàn)手風琴效果
最近在工作總遇到需要實現(xiàn)類似手風琴效果的需求,下面小編通過本文給大家分享angularjs巧用雙向數(shù)據(jù)綁定實現(xiàn)手風琴效果,需要的朋友可以參考下2017-05-05
本篇文章主要介紹了angular中的cookie讀寫方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
AngularJS向后端ASP.NET API控制器上傳文件
這篇文章主要介紹了AngularJS向后端ASP.NET API控制器上傳文件的相關(guān)資料,需要的朋友可以參考下2016-02-02
本篇文章主要介紹了詳解Angular2學習筆記之Html屬性綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了AngularJS監(jiān)聽路由變化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
對angular 監(jiān)控數(shù)據(jù)模型變化的事件方法$watch詳解
今天小編就為大家分享一篇對angular 監(jiān)控數(shù)據(jù)模型變化的事件方法$watch詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝，這里詳細介紹了安裝步驟和注意事項，有在Ubuntu 環(huán)境下開發(fā)的朋友可以參考下2016-09-09
如何利用AngularJS打造一款簡單Web應(yīng)用
如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實踐，那么AngularJS也能夠帶來極大的助益?？偠灾?，這套框架的強大功能與特性永遠不會讓有著應(yīng)用開發(fā)需求的朋友們失望2015-12-12