Ensuite, le premier article "" Explication détaillée de l'emplacement $ et de ses fonctions du service intégré AngularJS ", pour apprendre
Section 2: implémenter l'effet d'affichage de pagination
Ensuite, soyons invisibles et définissons les informations actuelles d'URL via la méthode du secteur de localisation. Afin d'améliorer la démonstration, dans cet exemple relativement complet, j'ai introduit la technologie multi-roulement AngularJS, le transfert de données entre les contrôleurs imbriqués, l'héritage de la portée, la communication HTTP, les variables de transfert d'intrarink, etc.
Créez d'abord un modèle de page d'accueil
<! 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> .TurnPageButtonarea {Background-Color: # F07A13; Largeur: 500px; hauteur: 30px; hauteur de ligne: 30px; Texte-aligne: Centre; marge: 10px automatique; rembourrage: 20px; } Button {margin-droite: 20px; Largeur: 100px; hauteur: 30px; taille de police: 15px; } .pagenum {width: 50px; hauteur: 23px; Texte-aligne: Centre; } Body {Font-Family: Microsoft Yahei; } H1 {Text-Align: Centre; } .totalPages {Color: #ffffff} </ style> </adg> <body ng-controller = "indexController"> <h1> AngularJs TurnPage par $ localisation service </h1> <div ng-viswe Type = "Number" ng-model = "currentPage"> <Button ng-Click = "gotoPage ()"> Go </futton> <span> Total {{allPage}} pages </span> </div> </odody> </html>La disposition de la page est modifiée avec quelques styles CSS simples.
Définissez ensuite des NGApps et des contrôleurs dans l'élément de la page d'accueil.
Dans l'élément div avec l'attribut ngView, les modèles qui sont intégrés dans d'autres HTML.
Immédiatement ci-dessous, j'ai placé trois boutons, les deux premiers sont les boutons de virage de la page de la page précédente et de la page suivante; Une zone d'entrée permet à l'utilisateur de saisir le numéro de page auquel il souhaite sauter, et le bouton à côté sert de bouton de soumission pour le numéro de page. Après avoir cliqué, la page tourne immédiatement la page.
Les trois boutons ont un attribut NGClick, indiquant que lorsque l'utilisateur clique sur le bouton, la fonction correspondante sera exécutée.
Avant d'expliquer le code JS d'AngularJS, prenez une capture d'écran pour voir la structure du répertoire du fichier.
L'index ci-dessus.html provient des deux exemples précédents, vous pouvez donc l'ignorer.
Pour plus de simplicité, je mets tous les scripts sous le fichier Turnpage.html. Voici le code complet de ce fichier:
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> .TurnPageButtonarea {Background-Color: # F07A13; Largeur: 500px; hauteur: 30px; hauteur de ligne: 30px; Texte-aligne: Centre; marge: 10px automatique; rembourrage: 20px; } Button {margin-droite: 20px; Largeur: 100px; hauteur: 30px; taille de police: 15px; } .pagenum {width: 50px; hauteur: 23px; Texte-aligne: Centre; } Body {Font-Family: Microsoft Yahei; } H1 {Text-Align: Centre; } .totalPages {Color: #ffffff} </ style> </adg> <body ng-controller = "indexController"> <h1> AngularJs TurnPage par $ localisation service </h1> <div ng-viswe type = "nombre" ng-model = "currentPage"> <bouton ng-click = "gotoPage ()"> go </futton> <span> Total {{allPage}} pages </span> </div> <cript> // Instancier l'objet NgApp de l'utilisateur. Étant donné que le mécanisme de routage est utilisé ici, le module Ngoute est écrit dans l'injection de dépendance var turnpageApp = angular.module ('TurnpageApp', ['ngoute']); / * Définissez différents modèles et contrôleurs pour différentes URL. Étant donné qu'un seul modèle est utilisé dans cet exemple, il n'y a qu'une seule situation de routage rencontrée, à savoir "/ id" * / turtpageApp.config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider .When ('/: id', {// L'ID représente en fait le numéro de page dans le modèle de page dans la page Turn: 'View / Student. 'StudentController'}). Autre ({redirectTo: '/ 1'}); // si l'URL ne peut pas être apparié, passez à la première page directement}]); // Enregistrez le contrôleur parent IndexController. Étant donné que la valeur du contrôleur enfant dans le modèle doit être transmise au contrôleur parent, le domaine racine $ rootscope est nécessaire pour aider et l'objet de domaine racine doit être passé dans la fonction de retour. // 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" // Sortez les caractères après la slash via la fonction JavaScript Silce et convertissez-les en nombres. est la première page ');} else {// Si vous n'êtes pas sur la première page, soustriez 1 de la propriété Path, c'est-à-dire une page. (Pagenum> $ rootscope.Allpage) {alert («Ceci est la dernière page»); $ scope.currentPage; $ Rootscope et son attribut AllPage apparaît ici. puis sauter. // Ceci est le contrôleur de la page de modèle intégrée dans la page d'accueil. // Étant donné que la communication entre le domaine enfant et le domaine parent nécessite l'aide du domaine racine, l'objet $ rootscope est passé dans la portée de la dépendance // $ est la propre portée du modèle, qui hérite de la portée générée par le contrôleur de contrôleur parent // dans le modèle, il doit être introduit avec les fichiers de serveur, de sorte que le service de $ HTTP intégré. Afin de contrôler la complexité de l'instance, j'ai écrit directement un fichier JSON et fait de fausses données. // Ici $ RouteParams est un objet, et il y a une propriété dans cet objet, qui est l'id (/: id) que nous avons vu dans la fonction config () avant. Cet ID est une variable, quel est le chemin de la barre d'adresse et quel est l'ID. La valeur de l'ID doit être obtenue via l'objet $ RouteParams. TurnpageApp.Controller ('StudentController', ['$ rootscope', '$ Scope', '$ http', '$ routeParams', ($ rootscope, $ scope, $ http, $ routeParams) {// La méthode GET de $ http et un fichier distant fait une demande. À partir du fichier distant. Array, et l'indice commence à partir de 0 n'est pas attribué directement, les attributs du sous-domaine hériteront de la valeur des attributs du domaine parent avec le même nom; L'attribut dans cet élément héritera la valeur de l'attribut AllPage du même nom de la portée parent, qui affiche indirectement le nombre total de pages.Voir / Student.html
<Table Cellpacing = "0"> <tr> <td> id </td> <td> {{Student.id}} </td> </tr> <tr> <td> name </td> <td> {{Student.name}} </td> </pr> <tr> <td> Sex </td> <Td> {{student.sex}} </td> </tr> <tr> <td> Âge </td> <td> {{Student.age}} </td> </tr> <tr> <Td> Cours </td> <td> <ul> <li ng-repeat = "Course dans Student.Cores" </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td> Cours </td> <td> <ul> <li ng-repeat = "Course in Student.Courses"> {{cours}} </li> </ul> </td> </pr> </ tr> </tr> </ tr> </ tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> Cours </td> <td> <ul> <li ng-repeat = "Course in Student.Courses"> {{Course}} </li> </ul> </ ul> Type = "Text / CSS"> Tableau {Border: Solid 1Px # 000000; marge: 0px automatique; } td {padding: 10px 10px 10px 20px; marge: 0px; Border: solide 1px # 000000; } tr {margin: 0px; rembourrage: 0px; } .Title {Background-Color: # 207EF0; Texte-aligne: Centre; Couleur: #ffffff; } ul {list-style: Aucun; marge: 0px; rembourrage: 0px; } li {float: gauche; marge: 10px; } </ style>data / Students.json
[{"id": 1, "nom": "Frank Li", "Sex": "Male", "Age": "30", "Cours": ["html", "CSS", "Javascript", "Java", "PHP", "MySQL", "Ubuntu", "Mongodb", "Nodejs", "Angularjs", "Mongodb", "Nodejs" "Bootstrap"]}, {"id": 2, "nom": "cerise", "sexe": "femelle", "âge": "27", "cours": ["Anderson's Fairy Tales", "Pride and Prejudice" "29", "cours": ["Introduction à l'art", "sketch", "composition", "sculpture"]}]C'est ce que c'était au début. Le chemin par défaut dans la barre d'adresse est / 1, de sorte que les informations du premier étudiant sont directement affichées. Le nombre total de pages peut également être obtenu.
L'effet après avoir cliqué sur le bouton précédent. Je ne peux plus tourner la page
L'effet lorsque vous cliquez sur le bouton Suivant lorsque la page 4 ne peut pas faire tourner les pages.
Il n'y a aucun problème à tourner les pages dans la plage de numéro de page!
Compte tenu de la longueur, je ne démontrerai pas que le numéro de page entré est hors de portée. La capture d'écran ci-dessus est l'effet de la saisie de la plage correcte des numéros de page et de la cliquetis sur le bouton GO.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.