การใช้การปนเปื้อนบนพื้นฐานของ AngularJS
คำนำ
ก่อนที่จะเรียนรู้ภาษาใด ๆ จะต้องมีธุรกิจต้องผลักดันให้คุณเรียนรู้ แน่นอน 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> <td> id </td> <td> firstName </td> <td> </td> <td> ng-repeat = "emp ในบุคคล"> <td> {emp.id}} </td> <td> {emp.firstname}} </td> <td> {emp.lastname}} </td> <td> <td> {{emp.address}} </td> </tr> </tbody> </table> <tm-pagination conf = "paginationConf"> </tm-pagination> </viv> <script type = "javascript"> var app = angular.module app.controller ('democontroller', ['$ scope', 'BusinessService', ฟังก์ชั่น ($ scope, BusinessService) {var getAlleMployee = function () {var postdata = {pageIndex: $ scope.paginationConf.CurrentPage BusinessService.list (postdata) .success (ฟังก์ชั่น (การตอบสนอง) {$ scope.paginationConf.totalitems = response.count; $ scope.persons = response.items;}); /***************************************************************************************************************************************************************************************** $ SCOPE. $ WATCH ('PAGINATIONCONF.CURRENTPAGE + PAGINATIONCONF.ITEMSPERPAGE', GetAlleMployee); // คลาสธุรกิจ App.Factory ('BusinessService', ['$ http', ฟังก์ชั่น ($ http) {var list = function (postdata) {return $ http.post ('/พนักงาน/getallemployee', postdata);ปลั๊กอินและดาวน์โหลดตัวอย่าง
http://yunpan.cn/cqehnlrpnknkniq รหัสผ่านการเข้าถึง be74
ข้างต้นคือข้อมูลที่ AngularJS ใช้ฟังก์ชั่นการแบ่งหน้า เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!