Kemudian artikel pertama "" Penjelasan terperinci tentang $ Lokasi dan fungsinya layanan bawaan AngularJS ", untuk belajar
Bagian 2: Menerapkan efek tampilan pagination
Kemudian, mari kita tidak terlihat dan atur informasi URL saat ini melalui metode setter lokasi. Untuk membuat demonstrasi lebih baik, dalam contoh yang relatif lengkap ini, saya memperkenalkan teknologi multi-ruting AngularJS, transfer data antara pengontrol bersarang, warisan lingkup, komunikasi HTTP, variabel transfer intralink, dll.
Pertama buat template halaman beranda
<! Doctype html> <html ng-app = "turnpageApp"> <head lang = "en"> <meta charset = "utf-8"> </title> <title> <script src = "lib/angular.js"> </skrip> <cript> <cript> script = "lib/angular-route.min. .turnpageButtonarea {latar belakang-warna: #f07a13; Lebar: 500px; Tinggi: 30px; Line-Height: 30px; Teks-Align: tengah; Margin: 10px Auto; padding: 20px; } tombol {margin-right: 20px; Lebar: 100px; Tinggi: 30px; Ukuran font: 15px; } .pagenum {width: 50px; Tinggi: 23px; Teks-Align: tengah; } body {font-family: microsoft yahei; } h1 {text-align: center; } .totalPages {color: #FFFFFFF} </tyle> </head> <body ng-controller = "indexController"> <h1> AngularJs turnpage dengan $ Layanan Lokasi </h1> <v-view> </div> <Div> <kancing Ng-klik = "Sebelumnya ()"> </vutpon> </Div> <Div> <kollas ng-klik = "Sebelumnya ()"> sebelumnya </ucon> </divon </Div> <Div> <kancing NG NG = "sebelumnya ()"> </vutpon> type = "number" ng-model = "currentpage"> <button ng-click = "gotopage ()"> go </aton> <span> Total {{allpage}} halaman </span> </div> </body> </html>Tata letak halaman dimodifikasi dengan beberapa gaya CSS sederhana.
Kemudian atur beberapa NGAPP dan pengontrol di elemen beranda.
Dalam elemen Div dengan atribut NGView, templat yang tertanam dalam HTML lainnya.
Segera di bawah ini, saya menempatkan tiga tombol, dua yang pertama adalah tombol putar halaman dari halaman sebelumnya dan halaman berikutnya; Kotak input memungkinkan pengguna untuk memasukkan nomor halaman yang ingin ia lompati, dan tombol di sebelahnya berfungsi sebagai tombol pengiriman untuk nomor halaman. Setelah mengklik, halaman segera memutar halaman.
Ketiga tombol memiliki atribut NGClick, menunjukkan bahwa ketika pengguna mengklik tombol, fungsi yang sesuai akan dijalankan.
Sebelum menjelaskan kode JS AngularJS, ambil tangkapan layar untuk melihat struktur direktori file.
Index.html di atas adalah dari dua contoh sebelumnya, sehingga Anda dapat mengabaikannya.
Untuk kesederhanaan, saya meletakkan semua skrip di bawah file turnpage.html. Berikut adalah kode lengkap untuk file ini:
turnpage.html
<! Doctype html> <html ng-app = "turnpageApp"> <head lang = "en"> <meta charset = "utf-8"> </title> <title> <script src = "lib/angular.js"> </skrip> <cript> <cript> script = "lib/angular-route.min. .turnpageButtonarea {latar belakang-warna: #f07a13; Lebar: 500px; Tinggi: 30px; Line-Height: 30px; Teks-Align: tengah; Margin: 10px Auto; padding: 20px; } tombol {margin-right: 20px; Lebar: 100px; Tinggi: 30px; Ukuran font: 15px; } .pagenum {width: 50px; Tinggi: 23px; Teks-Align: tengah; } body {font-family: microsoft yahei; } h1 {text-align: center; } .totalPages {color: #FFFFFFF} </tyle> </head> <body ng-controller = "indexController"> <h1> AngularJs turnpage dengan $ Layanan Lokasi </h1> <v-view> </div> <Div> <kancing Ng-klik = "Sebelumnya ()"> </vutpon> </Div> <Div> <kollas ng-klik = "Sebelumnya ()"> sebelumnya </ucon> </divon </Div> <Div> <kancing NG NG = "sebelumnya ()"> </vutpon> type = "number" ng-model = "currentpage"> <tombol ng-click = "gotopage ()"> go </aton> <span> Total {{allpage}} halaman </span> </div> <script> // instantiate objek NGAPP pengguna sendiri. Karena mekanisme perutean digunakan di sini, modul Ngroute ditulis dalam injeksi ketergantungan var turnpageApp = angular.module ('turnpageApp', ['ngroute']); /* Atur berbagai templat dan pengontrol untuk URL yang berbeda. Karena hanya satu template yang digunakan dalam contoh ini, hanya ada satu situasi perutean yang dihadapi, yaitu "/id" */turnpageApp.config (['$ routeProvider', fungsi ($ routeProvider) {$ routeProvider. WHEN ('/: ID', {// ID di sini sebenarnya nomor halaman. 'StudentController'}) .otherwise ({redirectto: '/1'}); // Jika URL tidak dapat dicocokkan, lompat ke halaman pertama secara langsung}]); // Daftarkan indeks pengontrol induk. Karena nilai pengontrol anak dalam templat perlu diteruskan ke pengontrol induk, domain root $ rootscope diperlukan untuk membantu, dan objek domain root perlu dilewati dalam fungsi pengembalian. // 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" // Kemudian ambil karakter setelah tebasan melalui fungsi javascript dan konversi menjadi angka. adalah halaman pertama '); (pagenum> $ rootcope.allpage) {alert ('Ini adalah halaman terakhir'); pagenum = $ scope.currentpage; // Untuk ketersediaan dan ketersediaan program, perlu untuk menentukan apakah inputnya kosong (pagenum == null || pagenum == yang tidak ditentukan | Number // bidang root $ rootscope dan allpage atributnya muncul di sini. perubahan dalam bilah alamat dan kemudian melompat. // Ini adalah pengontrol halaman template yang tertanam di halaman beranda. // Karena komunikasi antara domain anak dan domain induk memerlukan bantuan domain root, objek $ rootscope dilewatkan dalam ketergantungan // $ lingkup adalah ruang lingkup template sendiri, yang mewarisi ruang lingkup yang dihasilkan oleh indeks pengontrol induk yang dibangun // di templat yang diperlukan. Untuk mengontrol kompleksitas instance, saya langsung menulis file JSON dan membuat beberapa data palsu. // Di sini $ routeParams adalah objek, dan ada properti di objek ini, yang merupakan ID (/: ID) yang kami lihat di fungsi config () sebelumnya. ID ini adalah variabel, apa jalur di bilah alamat, dan apa ID. Nilai ID perlu diperoleh melalui objek $ RouteParams. turnpageApp.controller ('StudentController', ['$ rootscope', '$ scope', '$ http', '$ routeParams', fungsi ($ rootcope, $ scope, $ http, $ routeParams) {// Metode get dari $ http dan a routeParams. diperoleh dari file jarak jauh. Data yang dikembalikan adalah array, dan subskrip mulai dari 0, Anda perlu mengurangi 1 $ scope.student = data [$ routeParams.id - 1]; Jika subdomain tidak ditetapkan secara langsung, atribut subdomain akan mewarisi nilai atribut domain induk dengan nama yang sama; Atribut allpage dalam elemen ini akan mewarisi nilai allpage atribut dari nama yang sama dari ruang lingkup induk, yang secara tidak langsung menampilkan jumlah total halamanview/student.html
<Table CellPacing = "0"> <tr> <td> id </td> <td> {{student.id}} </td> </tr> <tr> <td> Nama </td> <td> {{student.name} </td> </td> <td> <td> </td </td> </td> </tr> <td> <td> </td> </td> </tr> <td> </td </td> {{{student.sex}} </td> </tr> <tr> <td> usia </td> <td> {{{student.age}} </td> </tr> <tr> <td> Kursus </td> <td> <ul> <ul> <ul- {{{{{{{li> {{li- {{li- {{li- { </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td> kursus </td> <td> <ul> <ul> </tR> </TR> </TR> </TR </TR </TR </TR </TR/TR </TR> </TR </TR/TR </TR> </TR </TR/TR </TR> </TR </TR> </TR </TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR </TR> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> Kursus </td> <td> <ul> </Li-Repeat = "Kursus di Siswa. type = "text/css"> Table {border: solid 1px #000000; margin: 0px auto; } td {padding: 10px 10px 10px 20px; margin: 0px; Perbatasan: Solid 1px #000000; } tr {margin: 0px; padding: 0px; } .title {background-color: #207ef0; Teks-Align: tengah; Warna: #FFFFFF; } ul {List-style: none; margin: 0px; padding: 0px; } li {float: kiri; margin: 10px; } </style>data/student.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", "kursus": ["Pengantar Seni", "Sketsa", "Komposisi", "Patung"]}]Ini adalah seperti apa di awal. Jalur default di bilah alamat adalah /1, sehingga informasi siswa pertama ditampilkan secara langsung. Jumlah total halaman juga dapat diperoleh.
Efeknya setelah mengklik tombol sebelumnya. Tidak dapat membalik halaman lagi
Efeknya saat mengklik tombol berikutnya saat di halaman 4. Tidak dapat mengembalikan halaman.
Tidak ada masalah membalik halaman dalam kisaran nomor halaman!
Mengingat panjangnya, saya tidak akan menunjukkan bahwa nomor halaman yang dimasukkan di luar jangkauan. Tangkapan layar di atas adalah efek memasuki rentang nomor halaman yang benar dan mengklik tombol GO.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.