คำนำ
ก่อนที่จะเรียนรู้ภาษาใด ๆ จะต้องมีธุรกิจต้องผลักดันให้คุณเรียนรู้ แน่นอน NG ก็ไม่มีข้อยกเว้น ก่อนที่จะเรียนรู้ NG การสาธิตครั้งแรกที่ฉันต้องการทำคือการใช้การเพจโดยใช้ NG นอกเหนือจากแนวคิดการคำนวณพื้นฐานแล้วยังใช้คำแนะนำเพื่อห่อหุ้มไว้ในปลั๊กอินและอ้างอิงโดยตรงในหน้ารายการที่ต้องการเพจ
ปลั๊กอิน
เมื่อฉันห่อหุ้มปลั๊กอินเพจฉันใช้วิธีการหลายวิธีโดยทั่วไปและในที่สุดฉันก็พบปลั๊กอินที่ถูกห่อหุ้มโดยเพื่อน (http://www.miaoyueyue.com/archives/813.html) ฉันรู้สึกว่ามันค่อนข้างดีดังนั้นฉันจึงอ่านซอร์สโค้ดของเขาและใช้มันโดยตรงในโครงการ
หลักการและคำแนะนำสำหรับการใช้งาน
1. ซอร์สโค้ดปลั๊กอินส่วนใหญ่ใช้ตามคำสั่งเชิงมุม
2. จุดสำคัญเมื่อการโทรคือฟังก์ชั่นการประมวลผลการร้องขอพื้นหลังนั่นคือเพื่อรับข้อมูลจากพื้นหลัง
3. ปลั๊กอินมีพารามิเตอร์คีย์สองตัว: CurrentPage, ItemsPerpage, หมายเลขหน้าปัจจุบันและหมายเลขบันทึกต่อหน้า
4. หลังจากใช้การโทรเมธอดเราจำเป็นต้องส่งข้อมูลพื้นหลังอีกครั้งเพื่อให้ได้ข้อมูลหมายเลขหน้าเว็บที่สอดคล้องกันตามแต่ละคลิกที่หมายเลขหน้าของปลั๊กอินเพจ ในหมายเลขหน้าของการโทรที่ฉันใช้ $ watch เพื่อตรวจสอบ เมื่อฉันใช้ครั้งแรกฉันใส่ฟังก์ชั่นการโทรในการเปิดใช้งานปลั๊กอิน แต่ฉันพบว่าพื้นหลังจะถูกเรียกใช้สองครั้งในแต่ละครั้ง สถานที่แห่งนี้ต้องการความสนใจ
5. ฉันห่อหุ้มพื้นหลังคำขอลงในเลเยอร์บริการแล้วเรียกมันว่าในคอนโทรลเลอร์ซึ่งสอดคล้องกับแนวคิด MVC
แผนผังการสืบพันธุ์
รหัสโทร
<div ng-app = "demoapp" ng-controller = "democontroller"> <table> <thead> <tr> <td> id </td> <td> firstName </td> <td> ชื่อสุดท้าย </td> <td> ใน บุคคล "> <td> {{emp.id}} </td> <td> {emp.firstname}}} </td> <td> {{emp.lastname}} </td > <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tbody> </table> <tm-pagination conf = "paginationConf"> </tm-pagination> </div> <script type = "text/javascript"> var app = angular.module ('demoapp', ['tm.pagination']); app.controller ('democontroller', ['$ scope' postdata = {pageindex: $ scope.paginationConf.currentPage, หน้า: $ scope.paginationConf.ItemSperPage} BusinessService.list (postdata). scopeS (ฟังก์ชั่น (การตอบสนอง) Response.Items;});} // กำหนดค่าพารามิเตอร์พื้นฐาน Paging $ scope.paginationConf = {currentPage: 1, itemsperpage: 5};/***************************************************************************************** การตรวจสอบพื้นหลังแบบสอบถามหาก CurrentPage และ ItemsPerpage ถูกตรวจสอบแยกต่างหากเหตุการณ์พื้นหลังสองเหตุการณ์จะถูกเรียกใช้ app.factory ('BusinessService', ['$ http', ฟังก์ชั่น ($ http) {var list = function (postdata) {return $ http.post ('/พนักงาน/getallemployee', postdata);} return {list: function (postdata)เนื้อหาข้างต้นเป็นรหัสตัวอย่างที่ตัวแก้ไขแนะนำให้คุณใช้ฟังก์ชั่นการเพจที่ใช้ AngularJs ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!