AngularJS displays the database information by PAGE and angularjs displays the information by page.

AngularJS displays the database information by PAGE and angularjs displays the information by page.

Next, I will explain the AngularJS built-in service $ location and its functions in the first article.

Section 2:Display by PAGE

You can use the setter method of location to set the current url Information. In order to make the demo better, in this complete instance, I introduced angularJS's multi-routing technology, data transmission between nested controllers, scope inheritance, http Communication, internal link transmission variables, and so on.

First, create a homepage template.

<! DOCTYPE html> 
Some simple CSS styles are used to modify the page layout.
Then, some ngApp and controller are set in the homepage element.
In the div element with the ngView attribute, other HTML templates are embedded.
Next, I placed three buttons at the bottom, the first two of which are the page flip buttons on the previous and next pages. An input box allows users to enter the page number they want to jump, click the button next to the page number to submit the page. The page is displayed immediately.
The three buttons have an ngClick attribute, indicating that the corresponding function will be executed when the user clicks the button.
Before explaining the js Code of angularJS, first look at the directory structure of the file.

In the previous two examples, you can ignore index.html.
For the sake of simplicity, I put the scriptscript below the turnpage.html file. The complete code for this file is as follows:
TurnPage.html
<! DOCTYPE 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"  ] }]

The default path in the address bar is/1, so the information of the first student is displayed directly. The total number of page numbers is also available.

The effect of clicking the Previous button. No more page flip

When the page is 4th, click Next. You cannot flip back.

There is no problem in turning pages within the page number range!

In view of the length, I will not demonstrate how the page number is out of the range. Enter the correct page number and click the Go button.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.