Then the first article ""Detailed explanation of $location and its functions of AngularJS built-in service", to learn
Section 2: Implement the pagination display effect
Then, let's be invisible and set the current url information through the location setter method. In order to make the demonstration better, in this relatively complete example, I introduced angularJS multi-routing technology, data transfer between nested controllers, scope inheritance, http communication, intralink transfer variables, etc.
First create a home page template
<!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: Microsoft Yahei; } 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> <button ng-click="previous()">Previous</button> <button ng-click="next()">Next</button> <input type="number" ng-model="currentPage"> <button ng-click="goToPage()">Go</button> <span>Total {{allPage}} pages</span></div></body></html>The layout of the page is modified with some simple CSS styles.
Then set some ngApps and controllers in the element of the homepage.
In the div element with the attribute ngView, the templates that are embedded in other HTML.
Immediately below, I placed three buttons, the first two are the page turn buttons of the previous page and the next page; an input box allows the user to enter the page number he wants to jump to, and the button next to it serves as the submission button for the page number. After clicking, the page turns the page immediately.
All three buttons have an ngClick attribute, indicating that when the user clicks the button, the corresponding function will be executed.
Before explaining the js code of angularJS, take a screenshot to see the directory structure of the file.
The above index.html is from the previous two examples, so you can ignore it.
For simplicity, I put all scripts under the turnPage.html file. Here is the complete code for this file:
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: Microsoft Yahei; } 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> <button ng-click="previous()">Previous</button> <button ng-click="next()">Next</button> <input type="number" ng-model="currentPage"> <button ng-click="goToPage()">Go</button> <span>Total {{allPage}} pages</span></div><script> //Instantiate the user's own ngApp object. Because the routing mechanism is used here, the ngRoute module is written in dependency injection var turnPageApp = angular.module('turnPageApp', ['ngRoute']); /* Set different templates and controllers for different urls. Since only one template is used in this example, there is only one routing situation encountered, namely "/id" */ turnPageApp.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/:id', { //The id here actually represents the page number templateUrl in the page turn: 'view/student.html', controller: 'StudentController' }) .otherwise({redirectTo: '/1'});//If the url cannot be matched, jump to the first page directly}]); //Register the parent controller indexController. Since the value of the child controller in the template needs to be passed to the parent controller, the root domain $rootScope is needed to help, and the root domain object needs to be passed in the return function. // Moreover, this example implements page turn based on the operation of url, so this built-in $location service must be passed in turnPageApp.controller('indexController', function ($rootScope, $scope, $location) { //Define the function $scope.previous = function () { //Get the path from the browser's address bar, that is, the content after the pound sign in turnPage.html#/1: "/1 " //Then take out the characters after the slash through the JavaScript silce function and convert it into numbers. //Add 1 or minus 1 depends on which button's function is defined. var pageNum = parseInt($location.path().slice(1)) - 1; //The page number is limited, and some judgment is needed if (pageNum < 1) { alert('This is the first page'); } else { //If you are not on the first page now, subtract 1 from the path property, that is, turn a page forward. The effect of this page turning is to realize $location.path(pageNum); } }; //Similar to the previous() function above $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); } }; //This is a function that jumps directly to that page number, and the judgment is a little bit complicated. $scope.goToPage = function () { //Get the user input value from the currentPage variable bound to the input input box var pageNum = $scope.currentPage; //For the strictness and availability of the program, it is necessary to first determine whether the input is empty if (pageNum == null || pageNum == undefined || pageNum == "") { alert("try to input a page number"); //If it is not empty, then determine whether the page number entered by the user exceeds the range of the page number//The root field of $rootScope and its attribute allPage appear here. The value of this attribute is the total number of page numbers} else if (!(pageNum >= 1 && pageNum <= $rootScope.allPage)) { alert("The page number is beyond the scope of the number of the students") } else { //If all is fine, modify the URL. At this time, angularJS will capture the changes in the address bar and then jump. The details will be explained below. $location.path(pageNum); } }; }); //This is the controller of the template page embedded in the home page. // Since the communication between the child domain and the parent domain requires the help of the root domain, the $rootScope object is passed in the dependency //$scope is the template's own scope, which inherits the scope generated by the parent controller indexController // In the template, it needs to interact with the server files, so the built-in $http service needs to be introduced. In order to control the complexity of the instance, I directly wrote a json file and made some fake data. // Here $routeParams is an object, and there is a property in this object, which is the id (/:id) we saw in the config() function before. This id is a variable, what is the path in the address bar, and what is the id. The value of id needs to be obtained through the $routeParams object. turnPageApp.controller('StudentController', ['$rootScope', '$scope', '$http', '$routeParams', function ($rootScope, $scope, $http, $routeParams) { //The get method of $http and a remote file make a request. If successful, execute a callback function. The parameter of the function is the data obtained from the remote file. This data can be an array or an object. //Then what we get this time is a json array, and the elements of the array are objects one by one. $http.get('data/students.json').success(function (data) { //Take an element in the array and assign it to the attributes of the template subscope object. Since the id of the json array starts from 1, and the returned data is an array, and the subscript starts from 0, you need to subtract 1 $scope.student = data[$routeParams.id - 1]; //Take the number of elements in this array by the way, and each element represents a page. Then the total number of elements represents how many pages there are. //Note to pass it to the highest level root domain object, because the subdomain can overwrite the attributes of the parent domain; if the subdomain is not assigned directly, the attributes of the subdomain will inherit the value of the attributes of the parent domain with the same name; /*We are back to the "Total{{allPage}} in the code of this file At page ", this is the attribute of the root domain $rootScope. And there is no special assignment in the parent controller. And this span element happens to be within the scope of the parent controller, so the allPage attribute in this element will inherit the value of the attribute allPage of the same name of the parent scope, which indirectly displays the total number of pages. */ $rootScope.allPage = data.length; }); }]);</script></body></html>view/student.html
<table cellpacing="0"> <tr> <td>ID</td> <td>{{student.id}}</td> </tr> <tr> <td>Name</td> <td>{{student.name}}</td> </tr> <tr> <td>Sex</td> <td>{{student.sex}}</td> </tr> <tr> <td>Age</td> <td>{{student.age}}</td> </tr> <tr> <td>Courses</td> <td> <ul> <li ng-repeat="course in student.courses">{{course}}</li> </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td>Courses</td> <td> <ul> <li ng-repeat="course in student.courses">{{course}}</li> </ul> </td> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td>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": [ "Introduction to ART ", "sketch", "Composition", "sculpture" ] }]This is what it was like at the beginning. The default path in the address bar is /1, so the information of the first student is directly displayed. The total number of pages can also be obtained.
The effect after clicking the Previous button. Can't turn the page any more
The effect when clicking the Next button when on page 4. Can't turn the pages back.
There is no problem turning pages within the page number range!
Given the length, I will not demonstrate that the entered page number is out of range. The screenshot above is the effect of entering the correct range of page numbers and clicking the Go button.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.