AngularJS實現分頁顯示數據庫信息

2019-11-20 09:34:22

字體：大中小

來源：轉載

供稿：網友

接著第一篇《》AngularJS內建服務$location及其功能詳解》，進行學習

Section 2：實現分頁顯示效果

那么再隱身一下，通過location的setter方法設置當前的url信息。在這里為了能夠讓演示看到更好的效果，在這個比較完整的實例中，我引入了angularJS的多路由技術、嵌套的控制器之間傳遞數據、scope的繼承、 http通信、內鏈接傳遞變量等。

首先建立一個首頁模板

<!DOCTYPE html><html ng-app="turnPageApp"><head lang="en">  <meta charset="UTF-8">  <title></title>  <script src="lib/angular.js"></script>  <script src="lib/angular-route.min.js"></script>  <style type="text/css">    .turnPageButtonArea {      background-color: #f07a13;      width: 500px;      height: 30px;      line-height: 30px;      text-align: center;      margin: 10px auto;      padding: 20px;    }    button {      margin-right: 20px;      width: 100px;      height: 30px;      font-size: 15px;    }    .pageNum {      width: 50px;      height: 23px;      text-align: center;    }    body {      font-family: 微軟雅黑;    }    h1 {      text-align: center;    }    .totalPages {      color: #ffffff    }  </style></head><body ng-controller="indexController"><h1>AngularJS TurnPage By $location Service</h1><div ng-view></div><div class="turnPageButtonArea">  <button ng-click="previous()">Previous</button>  <button ng-click="next()">Next</button>  <input type="number" ng-model="currentPage" class="pageNum">  <button ng-click="goToPage()">Go</button>  <span class="totalPages">共 {{allPage}} 頁</span></div></body></html>

通過一些簡單的CSS樣式將頁面的布局修飾了一下。

然后在首頁的元素里設置了一些ngApp和controller。

在屬性為ngView的div元素中，將嵌入其他HTML的模板。

緊接著下方，我擺放了三個按鈕，其中前兩個是上一頁和下一頁的翻頁按鈕；一個輸入框可供用戶輸入他想跳轉到的頁碼，旁邊的按鈕作為頁碼的提交按鈕，點擊后頁面立即翻頁。

這三個按鈕里面都有一個ngClick屬性，表示當用戶點擊按鈕后，便會執行對應的函數。

在講解angularJS的js代碼前，先截圖看看文件的目錄結構。

這里寫圖片描述

上面的index.html是之前兩個例子的，可以不去理會。

為了簡單期間，我把script腳本都放在了turnPage.html文件的下方了。下面就是全這個文件的完整代碼：

turnPage.html

<!DOCTYPE html><html ng-app="turnPageApp"><head lang="en">  <meta charset="UTF-8">  <title></title>  <script src="lib/angular.js"></script>  <script src="lib/angular-route.min.js"></script>  <style type="text/css">    .turnPageButtonArea {      background-color: #f07a13;      width: 500px;      height: 30px;      line-height: 30px;      text-align: center;      margin: 10px auto;      padding: 20px;    }    button {      margin-right: 20px;      width: 100px;      height: 30px;      font-size: 15px;    }    .pageNum {      width: 50px;      height: 23px;      text-align: center;    }    body {      font-family: 微軟雅黑;    }    h1 {      text-align: center;    }    .totalPages {      color: #ffffff    }  </style></head><body ng-controller="indexController"><h1>AngularJS TurnPage By $location Service</h1><div ng-view></div><div class="turnPageButtonArea">  <button ng-click="previous()">Previous</button>  <button ng-click="next()">Next</button>  <input type="number" ng-model="currentPage" class="pageNum">  <button ng-click="goToPage()">Go</button>  <span class="totalPages">共 {{allPage}} 頁</span></div><script>  //實例化用戶自己的ngApp對象。這里因為用到了路由機制，所以在依賴注入中寫入ngRoute這個模塊  var turnPageApp = angular.module('turnPageApp', ['ngRoute']);  /*   設置對于不同的url，啟用不同的模板和控制器。   本例由于只用到了一個模板，所以遇到的路由的情況就只有一種，即 “/id”   */  turnPageApp.config(['$routeProvider', function ($routeProvider) {    $routeProvider        .when('/:id', { //這里的id其實表示的是翻頁中的頁碼          templateUrl: 'view/student.html',          controller: 'StudentController'        })        .otherwise({redirectTo: '/1'});//如果沒法匹配到url時，直接跳轉會第一頁  }]);  //注冊父控制器indexController，這里由于需要將模板里的子控制器的值傳遞給父控制器，所以需要這個根域$rootScope來幫忙，在返回函數里需要傳入這個根域對象。  //而且，本例是基于對url的操作來實現翻頁，所以這個內建的$location服務是一定要傳入的  turnPageApp.controller('indexController', function ($rootScope, $scope, $location) {    //給父scope定義函數    $scope.previous = function () {      //從瀏覽器的地址欄獲取路徑，即turnPage.html#/1中井號后面的內容：“ /1 ”      //然后通過JavaScript的silce函數取出斜杠后面的字符，并轉換成數字。      //加 1 還是減 1 要看是在定義的是哪個按鈕的功能函數了      var pageNum = parseInt($location.path().slice(1)) - 1;      //頁碼是有限的，需要做一些判斷      if (pageNum < 1) {        alert('This is the first page');      } else {        //如果現在沒有處在第一頁，則path屬性減去1，即向前翻一頁。這個翻頁的效果就是通過設置url中的path來實現        $location.path(pageNum);      }    };    //和上面的previous（）函數類似    $scope.next = function () {      var pageNum = parseInt($location.path().slice(1)) + 1;      if (pageNum > $rootScope.allPage) {        alert('This is the last page');      } else {        $location.path(pageNum);      }    };    //這是一個直接跳轉到那個頁碼的函數，在判斷的地方稍微繁瑣些    $scope.goToPage = function () {      //從input輸入框綁定的currentPage變量中獲取用戶輸入的值      var pageNum = $scope.currentPage;      //為了程序的嚴密和可用性，需要先判斷輸入是否為空      if (pageNum == null || pageNum == undefined || pageNum == "") {        alert("try to input a page number");        //如果不是空，再判斷用戶輸入的頁碼是否超出了頁碼的范圍        //這里出現了$rootScope這個根域及其屬性allPage，該屬性的值是頁碼的總數      } else if (!(pageNum >= 1 && pageNum <= $rootScope.allPage)) {        alert("The page number is beyond the scope of the number of the students")      } else {        //如果都沒問題了，則修改URL，此時angularJS會捕捉地址欄的變化，然后跳轉，細節將在下面講解。        $location.path(pageNum);      }    };  });  //這里實在注冊嵌入到首頁的模板頁的控制器。  //由于子域和父域的通信需要借助根域，所以在依賴中傳入$rootScope對象  //$scope是模板自己的作用域，它繼承了父控制器indexController生成的作用域  //在模板中需要與服務端的文件進行交互，所以需要引入內建的$http服務。為了控制實例的復雜度，我直接寫了一個json文件，做了一些假數據。  //這里$routeParams是一個對象，這個對象里有一個屬性，就是我們之前在config（）函數里看到的那個id（/:id），這個id是個變量，地址欄里的path是幾，這個id就是幾。id的值需要通過$routeParams這個對象來取得。  turnPageApp.controller('StudentController', ['$rootScope', '$scope', '$http', '$routeParams', function ($rootScope, $scope, $http, $routeParams) {    //$http的get方法與遠程的一個文件發出請求，如果成功，則執行一個回調函數，函數的參數就是從遠端文件里拿到的數據，這個數據可以是個數組，也可以是個對象。    //那么我們這次拿到的是一個json數組，數組的元素是一個個的對象。    $http.get('data/students.json').success(function (data) {      //把數組里的一個元素取出來，賦給模板子作用域對象的屬性上。由于json數組的id是從1開始寫的，而返回的數據是個數組，下標從0開始，所以要減去1      $scope.student = data[$routeParams.id - 1];      //這里順便把這個數組的元素個數取出來，每個元素就代表以頁。那么元素總個數就代表共有多少頁。      //注意要傳遞給最高級別的根域對象，因為子域能覆寫父域的同名屬性；子域如果沒有直接賦值，那么子域的同名屬性將繼承父域同名屬性的值；      /*我們在回到本文件代碼上面的“共 {{allPage}} 頁”處，這個就是根域$rootScope的屬性。而且在父控制器中并沒有特別的賦值。而這個span元素恰好就在父控制器的作用域內，那么這個元素里的allPage屬性就會繼承父作用域的同名屬性allPage的值，也就間接的顯示出了總頁數。      */      $rootScope.allPage = data.length;    });  }]);</script></body></html>

view/student.html

<table cellspacing="0">  <tr>    <td class="title">ID</td>    <td>{{student.id}}</td>  </tr>  <tr>    <td class="title">Name</td>    <td>{{student.name}}</td>  </tr>  <tr>    <td class="title">Sex</td>    <td>{{student.sex}}</td>  </tr>  <tr>    <td class="title">Age</td>    <td>{{student.age}}</td>  </tr>  <tr>    <td class="title">Courses</td>    <td>      <ul>        <li ng-repeat="course in student.courses">{{course}}</li>      </ul>    </td>  </tr></table><style type="text/css">  table {    border: solid 1px #000000;    margin: 0px auto;  }  td {    padding: 10px 10px 10px 20px;    margin: 0px;    border: solid 1px #000000;  }  tr {    margin: 0px;    padding: 0px;  }  .title {    background-color: #207ef0;    text-align: center;    color: #ffffff;  }  ul {    list-style: none;    margin: 0px;    padding: 0px;  }  li {    float: left;    margin: 10px;  }</style>

data/students.json

[ {  "id": 1,  "name": "Frank Li",  "sex": "male",  "age": "30",  "courses": [   "HTML",   "CSS",   "Javascript",   "Java",   "PHP",   "MySQL",   "Ubuntu",   "MongoDB",   "NodeJS",   "AngularJS",   "Photoshop",   "LESS",   "Bootstrap"  ] }, {  "id": 2,  "name": "Cherry",  "sex": "female",  "age": "27",  "courses": [   "Anderson's Fairy Tales",   "Pride and Prejudice",   "Vanity Fair",   "Oliver Twist"  ] }, {  "id": 3,  "name": "John Liu",  "sex": "male",  "age": "29",  "courses": [   "iology and medical science",   "pplied biology",   "medicine",   "cell biology"  ] }, {  "id": 4,  "name": "Lucy Mu",  "sex": "female",  "age": "22",  "courses": [   "Introduction to ART ",   "sketch",   "Composition",   "sculpture"  ] }]

這里寫圖片描述