Luego, el primer artículo "" Explicación detallada de la ubicación $ y sus funciones del servicio incorporado de Angularjs ", para aprender
Sección 2: Implementar el efecto de visualización de paginación
Luego, seamos invisibles y establezcamos la información de URL actual a través del método de setter de ubicación. Para mejorar la demostración, en este ejemplo relativamente completo, introduje la tecnología de rutas múltiples de AngularJS, la transferencia de datos entre controladores anidados, herencia de alcance, comunicación HTTP, variables de transferencia intralink, etc.
Primero cree una plantilla de página de inicio
<! 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-raute.min.min.min"> </script> <setty "TEXT/" TEXTA "TEXTA"> TEXTA " .TurnPageButtonArea {Color de fondo: #F07A13; Ancho: 500px; Altura: 30px; Línea de altura: 30px; Text-Align: Center; Margen: 10px Auto; relleno: 20px; } botón {margen-derecha: 20px; Ancho: 100px; Altura: 30px; tamaño de fuente: 15px; } .pagenum {ancho: 50px; Altura: 23px; Text-Align: Center; } cuerpo {Font-Family: Microsoft Yahei; } H1 {text-align: Center; } .totalPages {color: #ffffff} </syle> </head> <body ng-controller = "indexController"> <h1> Angularjs TurnPage por $ Ubicación Servicio </h1> <Div ng-view> </div> <div> <botón ng-click = "anterior ()" Anteriormente </button> <botin ng-click = "next ()") ")") type = "number" ng-model = "currentPage"> <button ng-click = "gotOpage ()"> go </boton> <span> total {{allPage}} páginas </span> </div> </body> </html>El diseño de la página se modifica con algunos estilos CSS simples.
Luego establezca algunos ngapps y controladores en el elemento de la página de inicio.
En el elemento DIV con el atributo ngView, las plantillas que están incrustadas en otro HTML.
Inmediatamente a continuación, coloqué tres botones, los dos primeros son los botones de giro de la página de la página anterior y la siguiente página; Un cuadro de entrada permite al usuario ingresar al número de página al que desea saltar, y el botón al lado sirve como botón de envío para el número de página. Después de hacer clic, la página gira la página inmediatamente.
Los tres botones tienen un atributo NgClick, lo que indica que cuando el usuario hace clic en el botón, se ejecutará la función correspondiente.
Antes de explicar el código JS de AngularJS, tome una captura de pantalla para ver la estructura del directorio del archivo.
El índice anterior.html proviene de los dos ejemplos anteriores, por lo que puede ignorarlo.
Para simplificar, pongo todos los scripts en el archivo TurnPage.html. Aquí está el código completo para este archivo:
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-raute.min.min.min"> </script> <setty "TEXT/" TEXTA "TEXTA"> TEXTA " .TurnPageButtonArea {Color de fondo: #F07A13; Ancho: 500px; Altura: 30px; Línea de altura: 30px; Text-Align: Center; Margen: 10px Auto; relleno: 20px; } botón {margen-derecha: 20px; Ancho: 100px; Altura: 30px; tamaño de fuente: 15px; } .pagenum {ancho: 50px; Altura: 23px; Text-Align: Center; } cuerpo {Font-Family: Microsoft Yahei; } H1 {text-align: Center; } .totalPages {color: #ffffff} </syle> </head> <body ng-controller = "indexController"> <h1> Angularjs TurnPage por $ Ubicación Servicio </h1> <Div ng-view> </div> <div> <botón ng-click = "anterior ()" Anteriormente </button> <botin ng-click = "next ()") ")") type = "Number" Ng-Model = "CurrentPage"> <Button ng-click = "gotOpage ()"> Go </boton> <span> Total {{AllPage}} Páginas </span> </div> <script> // Instanciar el objeto NGAPP del usuario. Debido a que el mecanismo de enrutamiento se usa aquí, el módulo ngroute se escribe en la inyección de dependencia var tavpagepp = angular.module ('turnPageApp', ['ngroute']); /* Establezca diferentes plantillas y controladores para diferentes URL. Dado que solo se usa una plantilla en este ejemplo, solo hay una situación de enrutamiento encontrada, a saber, "/id" */TurnPageApp.Config (['$ RoutepRoVider', function ($ RouteProvider) {$ RouteProvider. 'StudentController'}) .Othwise ({redirecto: '/1' '}); // Si la URL no se puede igualar, salte a la primera página directamente}]); // Registre el controlador principal IndexController. Dado que el valor del controlador infantil en la plantilla debe pasar al controlador principal, se necesita el dominio de raíz $ Rootscope para ayudar, y el objeto del dominio raíz debe pasar en la función de retorno. // Además, este ejemplo implementa el turno de la página en función del funcionamiento de la URL, por lo que este servicio de ubicación $ incorporado debe aprobarse en TUNTPAGEApp.Controller ('indexController', function ($ rootscope, $ scope, $ ubicación) {// Definir la función $ scope.previous = function () TurnPage.html#/1: "/1" // luego saca los caracteres después de la reducción de la función JavaScript y la convierte en números. La primera página '); (pagenum> $ rootscope.allpage) {alerta ('esta es la última página'); $ scope.currentPage; $ RootsCope y su atributo AllPage aparecen aquí. Jump. Los detalles se explicarán a continuación. // Este es el controlador de la página de plantilla incrustada en la página de inicio. // Dado que la comunicación entre el dominio infantil y el dominio principal requiere la ayuda del dominio raíz, el objeto $ Rootscope se pasa en la dependencia // $ alcance es el alcance de la plantilla, que hereda el alcance generado por el controlador del controlador principal // en la plantilla, debe interactuar con los archivos del servidor, por lo que el servicio $ http incorporado debe ser introducido. Para controlar la complejidad de la instancia, escribí directamente un archivo JSON e hice algunos datos falsos. // Aquí $ Routiveams es un objeto, y hay una propiedad en este objeto, que es la id (/: id) que vimos en la función config () antes. Esta identificación es una variable, cuál es la ruta en la barra de direcciones y cuál es la identificación. El valor de la identificación debe obtenerse a través del objeto $ Routeparams. TurnPageApp.Controller ('StudentController', ['$ RootsCope', '$ Scope', '$ http', '$ Routeparams', function ($ rootscope, $ scope, $ http, $ ruteParams) {// El método de obtener el método de $ http y un archivo remoto realiza una solicitud. Si exitosa, exitoso, exitoso una función de call. Desde el archivo remoto. una matriz, y el subíndice comienza desde 0, debe restar 1 $ scope.student = data [$ Routeparams.id - 1]; El subdominio no se asigna directamente, los atributos del subdominio heredarán el valor de los atributos del dominio principal con el mismo nombre; El atributo AllPage en este elemento heredará el valor del atributo AllPage del mismo nombre del alcance principal, que muestra indirectamente el número total de páginas.Ver/Student.html
<table cellPacing = "0"> <tr> <td> id </td> <td> {{student.id}} </td> </tr> <tr> <tr> <td> name </td> <td> {{student.name}} </td> </tr> <tr> <td> sexo </td> <TD> {{student.sex}} </td> </tr> <tr> <tr> <td> edad </td> <td> {{student.age}} </td> </tr> <tr> <td> cursos </td> <td> <ul> <li ng-repeat en el curso de studs.curses "> {{} </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <tr> <td> cursos </td> <td> <ul> <li ng-epeat = "curso en student.cursese"> {{curso}} </li> </ul> </td> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> cursos </td> <trem type = "text/css"> tabla {border: sólido 1px #000000; Margen: 0px Auto; } td {relleno: 10px 10px 10px 20px; margen: 0px; borde: sólido 1px #000000; } tr {margen: 0px; relleno: 0px; } .title {Background-Color: #207EF0; Text-Align: Center; Color: #ffffff; } ul {list-style: none; margen: 0px; relleno: 0px; } li {float: izquierda; margen: 10px; } </style>datos/estudiantes.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", "cursos": ["Introducción al arte", "boceto", "composición", "escultura"]}]Así fue al principio. La ruta predeterminada en la barra de direcciones es /1, por lo que se muestra directamente la información del primer estudiante. También se puede obtener el número total de páginas.
El efecto después de hacer clic en el botón anterior. Ya no puedo girar la página
El efecto al hacer clic en el botón Siguiente cuando está en la página 4. No se puede retroceder las páginas.
¡No hay problema para convertir las páginas dentro del rango de números de página!
Dada la longitud, no demostraré que el número de página ingresado está fuera de rango. La captura de pantalla anterior es el efecto de ingresar el rango correcto de los números de página y hacer clic en el botón GO.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.