Dann der erste Artikel "" detaillierte Erläuterung von $ location und seine Funktionen des integrierten AngularJS-Service ", um zu lernen
Abschnitt 2: Implementieren Sie den Pagination -Display -Effekt
Seien wir dann unsichtbar und setzen Sie die aktuellen URL -Informationen über die Standort -Setter -Methode. Um die Demonstration besser zu machen, habe ich in diesem relativ vollständigen Beispiel AngularJS-Multi-Routing-Technologie, Datenübertragung zwischen verschachtelten Controllern, Geltungsbleiben, HTTP-Kommunikation, Intralink-Transfervariablen usw. eingeführt.
Erstellen Sie zuerst eine Startseitenvorlage
<! DocType html> <html ng-App = "TurnPageApp"> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "libular.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.js"> </src = " .TurnPageButtonArea {Hintergrundfarbe: #f07A13; Breite: 500px; Höhe: 30px; Zeilenhöhe: 30px; Text-Align: Mitte; Rand: 10px Auto; Polsterung: 20px; } Taste {Margin-Right: 20px; Breite: 100px; Höhe: 30px; Schriftgröße: 15px; } .pagenum {width: 50px; Höhe: 23px; Text-Align: Mitte; } Body {Schriftfamilie: 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-klick = "gotopage ()"> go </button> <span> Gesamt {{Allpage}} Seiten </span> </div> </body> </html>>Das Layout der Seite wird mit einigen einfachen CSS -Stilen geändert.
Stellen Sie dann einige NGApps und Controller in das Element der Homepage ein.
Im DIV -Element mit dem Attribut ngView sind die Vorlagen, die in andere HTML eingebettet sind.
Unten unten habe ich drei Schaltflächen platziert. Die ersten beiden sind die Seitenwendeschaltflächen der vorherigen Seite und die nächste Seite. Mit einem Eingabefeld kann der Benutzer die Seitennummer eingeben, auf die er springen möchte, und die Schaltfläche daneben dient als Einreichungsschaltfläche für die Seitennummer. Nach dem Klicken dreht die Seite die Seite sofort.
Alle drei Schaltflächen haben ein NGCLICK -Attribut, in dem angegeben ist, dass die entsprechende Funktion ausgeführt wird, wenn der Benutzer auf die Schaltfläche klickt.
Machen Sie vor dem Erläuterung des JS -Code von AngularJS einen Screenshot, um die Verzeichnisstruktur der Datei anzuzeigen.
Der obige Index.html stammt aus den beiden vorherigen Beispielen, sodass Sie es ignorieren können.
Der Einfachheit halber habe ich alle Skripte unter die Datei "TurnPage.html" gesteckt. Hier ist der vollständige Code für diese Datei:
Turnpage.html
<! DocType html> <html ng-App = "TurnPageApp"> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "libular.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.js"> </src = " .TurnPageButtonArea {Hintergrundfarbe: #f07A13; Breite: 500px; Höhe: 30px; Zeilenhöhe: 30px; Text-Align: Mitte; Rand: 10px Auto; Polsterung: 20px; } Taste {Margin-Right: 20px; Breite: 100px; Höhe: 30px; Schriftgröße: 15px; } .pagenum {width: 50px; Höhe: 23px; Text-Align: Mitte; } Body {Schriftfamilie: 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-klick = "gotopage ()"> go </button> <span> Gesamt {{AllPage}} Seiten </span> </div> <skript> // Das eigene NGApp-Objekt des Benutzers instanziiert. Da hier der Routing -Mechanismus verwendet wird, ist das NGroute -Modul in Abhängigkeitsinjektion var turnpageapp = angular.module ('TurnpageApp', ['nGroute']) geschrieben; /* Stellen Sie verschiedene Vorlagen und Controller für verschiedene URLs fest. Da in diesem Beispiel nur eine Vorlage verwendet wird, gibt es nur eine Routing -Situation, nämlich "/id" */turnpageApp.config (['$ routeProvider', Funktion ($ roouteProvider) {$ roouteProvider .When ('/: id', {// Die ID hier repräsentiert das Seitenzahlen -Template -Tempor. 'StudentController'}) .Otheric ({redirectTo: '/1'}); // Wenn die URL nicht übereinstimmt, springe direkt zur ersten Seite}]); // Registrieren Sie den übergeordneten Controller IndexController. Da der Wert des untergeordneten Controllers in der Vorlage an den übergeordneten Controller übergeben werden muss, ist die Root -RootsCope erforderlich, um zu helfen, und das Root -Domänen -Objekt muss in der Rückgabefunktion übergeben werden. // Darüber hinaus implementiert dieses Beispiel die Seitenwende basierend auf dem Betrieb von URL. Daher muss dieser integrierte $ -Port-Service in TurnpageApp.Controller ('IndexController', Funktion ($ rootscope, $ scope, $ location) {// Define The Function $ scope.previous = Funktion () {// den Pfad, den der Pfad auf den Weg des Browsers-Adresse, ab. TurnPage.html#/1: "/1" // dann die Zeichen durch die JavaScript -Silce -Funktion herausnehmen und in Zahlen umwandeln. die erste Seite ')} else {//, wenn Sie jetzt nicht auf der Seite von der PATH -Eigenschaft abtrennen, die Auswirkung von $ location.path (pagenum); > $ rootscope.AllPage) {alert ('Dies ist die letzte Seite'); $ scope.currentPage; $ rootscope und sein Attribut Allpage erscheinen hier. dann werden die Details unten erklärt. // Dies ist der Controller der Vorlagenseite, die in die Startseite eingebettet ist. // Da die Kommunikation zwischen der untergeordneten Domäne und der übergeordneten Domäne die Hilfe der Root-Domäne erfordert, wird das $ rootscope-Objekt in die Abhängigkeit übergeben // $ scope ist der eigene Umfang der Vorlage, das den von dem Eltern-Controller-Indexcontroller generierten Bereich erbt. Um die Komplexität der Instanz zu kontrollieren, habe ich direkt eine JSON -Datei geschrieben und einige gefälschte Daten erstellt. // Hier ist $ routeParams ein Objekt, und in diesem Objekt befindet sich eine Eigenschaft, nämlich die ID (/: ID), die wir zuvor in der Funktion config () gesehen haben. Diese ID ist eine Variable, was ist der Weg in der Adressleiste und was ist die ID. Der Wert der ID muss über das Objekt $ RouteParams erhalten werden. TurnpageApp.Controller ('StudentController', ['$ rootscope', '$ scope', '$ http', '$ routeParams', Funktion ($ rootscope, $ scope, $ http, $ routeParams) {// Die Methode Get -Funktion von $ http und eine Vorderdatei. Aus der Remote -Datei erhalten. ist ein Array, und das Index von 0, müssen Sie 1 $ Scope subtrahieren Subdomain wird nicht direkt zugewiesen, die Attribute der Subdomänen erben den Wert der Attribute der übergeordneten Domäne mit demselben Namen. Attribut in diesem Element erben den Wert des gleichnamigen Attributs, der die Gesamtzahl der Seiten indirekt an zeigtview/student.html
<table cellpacing = "0"> <tr> <td> id </td> <td> {{student.id}} </td> </tr> <tr> <td> Name </td> <td> {{{student.name} <td> {{student.sex}} </td> </tr> <tr> <td> Alter </td> <td> {{{student.age}} </td> </tr> <tr> <TD> curses </td> <ul> <li ng-repeat = li li-} {li li-}}} {li li li-}} {li li li li li-cursed.courses " </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"> Tabelle {Rand: Solid 1px #000000; Rand: 0px Auto; } td {padding: 10px 10px 10px 20px; Rand: 0px; Grenze: Solid 1px #000000; } tr {margin: 0px; Polsterung: 0px; } .title {Hintergrundfarbe: #207EF0; Text-Align: Mitte; Farbe: #ffffff; } ul {Listenstil: Keine; Rand: 0px; Polsterung: 0px; } li {float: links; Rand: 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", "Kurse": ["Einführung in die Kunst", "Sketch", "Komposition", "Skulptur"]}}]So war es am Anfang. Der Standardpfad in der Adressleiste ist /1, sodass die Informationen des ersten Schülers direkt angezeigt werden. Die Gesamtzahl der Seiten kann ebenfalls erhalten werden.
Der Effekt nach dem Klicken auf die vorherige Schaltfläche. Kann die Seite nicht mehr drehen
Der Effekt beim Klicken auf die nächste Schaltfläche auf Seite 4. Die Seiten können nicht zurückdrehen.
Es gibt kein Problem damit, Seiten innerhalb des Seitenzahlenbereichs zu drehen!
Angesichts der Länge werde ich nicht nachweisen, dass die eingegebene Seitenzahl außerhalb des Bereichs ist. Der obige Screenshot ist der Effekt des Eingebens des richtigen Bereichs von Seitenzahlen und Klicken auf die Schaltfläche GO.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.