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

時間  2019-11-10
標籤 angularjs router grid 模塊 欄目 AngularJS 简体版
原文   原文鏈接

前幾天清明節放假三天，在家裏閒着無聊，正好在網上找到了一個關於angular的教程，學習了一下angular的ui-router和ng-grid這兩個模塊，順便模仿着作了一個小小的東西。代碼已經上傳到github上，地址在這裏喲https://github.com/wwervin72/Angular。有興趣的小夥伴能夠看看。那麼而後這裏咱們就先來了解一下這兩個模塊的用法。javascript

咱們先來講說ui-router這個模塊，這個模塊主要是用來實現深層次的路由的。其實angular有個內置的指令ng-route，若是在項目中沒有嵌套問題的話，那麼用這個指令來實現頁面之間的跳轉也仍是蠻方便的，可是他的短板就在於，他拿深層次的嵌套路由沒有任何辦法。那麼首先，咱們要使用這個模塊咱們就須要把他給下載下來。下載地址在這裏http://www.bootcdn.cn/angular-ui-router/。下載下來以後，咱們就能夠把它導入進咱們的項目中了，這裏要注意下，由於這個模塊式基於angular的，因此在這以前，咱們還須要導入angular的js文件。這個能夠在angular的官網去下載。php

那麼在上面的準備工做都作完了以後，咱們就能夠來動手寫咱們的代碼了。html

HTML部分java

<div class="container">
    <div ui-view>

    </div>
</div>

這裏有一點要注意下，div裏面添加的屬性再也不是ng-view了，而是ui-view。git

JS部分github

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'
    })
})

這裏有三個地方須要注意：app

一、是在進行嵌套的時候，我這裏最外層是main部分，而後裏面嵌套了typeList和tbHero部分，咱們須要注意下這裏的寫法。ide

二、當咱們須要根據選擇不一樣打開不一樣的內容時，也就是須要向下一個頁面傳參數，我這裏是detail部分，咱們也須要多注意下這裏的寫法。學習

三、在咱們利用angular.module建立一個app應用的時候，咱們須要在裏面導入ui.router模塊，另外咱們本身建立的一些模塊也須要在這裏導入進去。ui

四、咱們這裏使用$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這一塊了，同時咱們須要多注意下最後一個詳細攻略裏面，傳參數的寫法。

下面附上幾張效果圖：

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程