วิธีการใช้การแบ่งหน้าใน Angular JS? [พร้อมตัวอย่างการใช้งานจริง]
เผยแพร่แล้ว: 2020-04-20ก่อนที่เราจะทำความเข้าใจว่าการแบ่งหน้าทำงานอย่างไรใน Angular JS และวิธีการใช้งานในเฟรมเวิร์กนั้น ให้เรามาทำความเข้าใจทีละขั้นตอนและเริ่มต้นด้วยการพูดถึง Angular JS และการแบ่งหน้าโดยทั่วไป
สารบัญ
Angular JS คืออะไร?
Angular JS เป็นหนึ่งในเฟรมเวิร์กโครงสร้างที่ต้องการมากที่สุดสำหรับการสร้างเว็บแอปพลิเคชันแบบไดนามิก อนุญาตให้นักพัฒนาใช้ HTML เป็นภาษาเทมเพลต และอนุญาตให้ขยายไวยากรณ์ HTML เพื่อให้แสดงองค์ประกอบต่างๆ ของเว็บแอปพลิเคชันได้อย่างชัดเจนและรัดกุม
มันมาพร้อมกับการแทรกการพึ่งพาและความสามารถในการผูกข้อมูลเพื่อกำจัดส่วนใหญ่ของโค้ดที่นักพัฒนาต้องเขียน ทั้งหมดนี้เกิดขึ้นภายในเบราว์เซอร์ ทำให้ Angular JS เป็นเฟรมเวิร์กที่สามารถใช้งานได้สะดวกกับเทคโนโลยีเซิร์ฟเวอร์เกือบทุกชนิด
Angular JS เป็นเฟรมเวิร์กโอเพ่นซอร์สที่แบ่งปันความคล้ายคลึงหลายประการกับ JavaScript นักพัฒนาส่วนใหญ่ใช้ในการพัฒนาแอพพลิเคชั่นที่ต้องการแสดงเนื้อหา ข้อความ และกราฟิกทั้งหมดในหน้าเดียว อย่างไรก็ตาม ไม่ได้หมายความว่าไม่สามารถใช้สร้างแอปพลิเคชันแบบหลายหน้าได้
เราจะอธิบายในโพสต์นี้ว่าการแบ่งหน้าช่วยแบ่งเนื้อหาออกเป็นหลาย ๆ หน้าได้อย่างไรโดยไม่กระทบต่อการไหลและการนำทางท่ามกลางปัจจัยอื่นๆ เป็นเฟรมเวิร์กคอนโทรลเลอร์สำหรับดูโมเดลที่ได้รับความนิยมทั่วโลกเนื่องจากเหตุผลสำคัญสองประการ – เป็นเฟรมเวิร์กบน Google และอัปเดตแนวโน้มการพัฒนาล่าสุดอยู่เสมอ ให้เราเปลี่ยนโฟกัสไปที่การแบ่งหน้า
อ่าน: คำถามและคำตอบสัมภาษณ์ AngularJS
การแบ่งหน้าคืออะไร?
ตามที่เราพูดไปก่อนหน้านี้เล็กน้อยในบทความ เว็บไซต์ทั้งหมดไม่สามารถแสดงข้อมูลทั้งหมดของพวกเขาในหน้าเดียว แม้ว่าหน้าเดียวจะเป็นตัวเลือกที่ต้องการอย่างแท้จริง แต่การใช้หลายหน้าในสถานการณ์ที่เว็บไซต์หน้าเดียวไม่ใช่ตัวเลือกสามารถให้ประโยชน์หลายประการ รวมถึงการนำทางไซต์ที่ง่าย ประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุง และอื่นๆ
เว็บไซต์ทั้งหมด โดยเฉพาะเว็บไซต์อีคอมเมิร์ซ เช่น Flipkart ไม่สามารถแสดงรายการผลิตภัณฑ์ทั้งหมดของตนและแสดงข้อมูลที่จำเป็นทั้งหมดในหน้าเดียว นี่คือที่มาของการแบ่งหน้าในรูปภาพ อนุญาตให้แบ่งเนื้อหาในรูปแบบของข้อความ รูปภาพ และอื่นๆ ออกเป็นหลายหน้าได้หากต้องการ เรียนรู้เพิ่มเติมเกี่ยวกับการใช้ AngularJS สำหรับการพัฒนาเว็บ
มีหลายสถานการณ์ที่การแบ่งหน้ามีประโยชน์มาก หากเว็บไซต์ของคุณมีข้อมูลจำนวนมาก รวมถึงบล็อก กราฟ หรือแผนภูมิที่เกี่ยวข้องกับหมวดหมู่หรือชุดข้อมูลที่คล้ายกัน คุณสามารถแบ่งข้อมูลนี้โดยใช้การแบ่งหน้าและปรับปรุงการนำทางและความสามารถในการอ่าน
การแบ่งหน้าในเชิงมุม JS
มีหลายวิธีในการแสดงข้อมูลบนเว็บไซต์หรือเว็บแอปพลิเคชันใดๆ รายการและตารางเป็นองค์ประกอบทั่วไปที่คนส่วนใหญ่ใช้เพื่อแสดงข้อมูลที่อ่านและเข้าใจได้ง่าย ในแอปพลิเคชันเชิงมุม คุณลักษณะ ng-repeat ใช้เพื่อแสดงข้อมูลในรายการหรือตาราง อย่างไรก็ตาม วิธีนี้ใช้ได้เฉพาะเมื่อข้อมูลที่แสดงมีขนาดไม่ใหญ่เกินไป สำหรับชุดข้อมูลที่ใหญ่ขึ้น คุณลักษณะต่างๆ เช่น การเรียงลำดับ การค้นหา และการแบ่งหน้าทำให้ตารางและรายการสามารถจัดการได้มากขึ้น และแอปพลิเคชันใช้งานง่ายขึ้น
การแบ่งหน้า JS เชิงมุมอาจดูยากกว่าการแบ่งหน้าใน Laravel, Code PHP และเฟรมเวิร์กอื่นๆ สำหรับผู้ที่ไม่ค่อยตระหนักดีถึงแนวทางการใช้งานที่ต้องปฏิบัติตาม คุณสามารถใช้การแบ่งหน้าพร้อมกับคุณสมบัติการค้นหาและการเรียงลำดับสำหรับรายการบันทึกในรูปแบบที่ง่ายต่อการนำทางและอ่านง่าย
คุณสามารถใช้ไลบรารีเชิงมุมของบริษัทอื่นเพื่อครอบคลุมรายการง่ายๆ ลงในหลาย ๆ หน้าด้วยคุณสมบัติการเรียงลำดับและการค้นหา ไลบรารีบุคคลที่สามที่ต้องการมากที่สุดสำหรับจุดประสงค์นี้คือ dirPagination ห้องสมุดนี้เข้าถึงได้ง่ายและใช้งานง่ายมาก สามารถใช้สำหรับเวอร์ชันเชิงมุมที่ต่ำกว่าเชิงมุม 2 หากคุณใช้ angular 2 คุณจะแยกส่วนประกอบที่มีให้คุณภายในไลบรารีภายในเพื่อเพิ่มการเรียงลำดับ การค้นหา และการแบ่งหน้า
หากคุณต้องการแสดงมากกว่า 200 รายการและกำลังใช้งานอยู่ ตัวอย่างเช่น angular 1.4 คุณจะพบว่าไลบรารี dirPagination นั้นเร็วกว่าไลบรารี่อื่น ๆ และประสิทธิภาพสูงเช่นกัน เป็นไลบรารี Plug-n-play ที่ไม่ต้องการ Angular JS Controller เพื่อเรียกใช้ตรรกะหรือคำสั่งตั้งค่า นอกจากนี้ยังใช้งานได้ดีกับ Bootstrap เช่นกัน
การแบ่งหน้าใน Angular JS พร้อมตัวอย่าง
นี่คือรหัสสำหรับแสดงการแบ่งหน้าใน Angular JS
ที่มา : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang=”en” ng-app=”myApp”>
<head>
<meta charset=”utf-8″>
<title>การแบ่งหน้าแบบไดนามิกพร้อมการกรอง</title>
<ชื่อเมตา=”วิวพอร์ต” เนื้อหา=”ความกว้าง=ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น=1.0″>
<ชื่อเมตา=”คำอธิบาย”เนื้อหา=””>
<ชื่อเมตา=”ผู้แต่ง”เนื้อหา=”คิมไมด้า”>
<!– JS Libraries –>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”text/javascript”></script>
<script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js” type=”text/javascript”></script>
<!– สคริปต์เชิงมุม –>
<script src=”script.js” type=”text/javascript”></script>
<!– Bootstrap –>
<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<body>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>ค้นหา:</label> <input type=”text” ng-model=”search.name” placeholder=”Search” />
<br />
<label>กรองตามหมวดหมู่:</label>
<ul>
<li><a href="” ng-click=”search.category='engineering'”>วิศวกรรม</a></li>
<li><a href="” ng-click=”search.category='management'”>การจัดการ</a></li>
<li><a href="” ng-click=”search.category='business'”>ธุรกิจ</a></li>
</ul>
<label>กรองตามสาขา:</label>
<ul>
<li><a href="” ng-click=”search.branch='West'”>ตะวันตก</a></li>
<li><a href="” ng-click=”search.branch='East'”>ตะวันออก</a></li>
</ul>
<p><strong><a href="” ng-click=”resetFilters()”>แสดงทั้งหมด</a></strong></p>
<h1>รายการ</h1>
<ul>
<li ng-repeat=”item in filtered = items | filter:ค้นหา | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>
</ul>
<หน้าการแบ่งหน้า =”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</body>
</html>
app.js (ที่มา: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter ('startFrom', ฟังก์ชัน () {
ฟังก์ชั่นส่งคืน (อินพุต, เริ่มต้น) {
ถ้า (อินพุต) {
เริ่ม = +เริ่ม;
ส่งคืน input.slice (เริ่ม);
}
กลับ [];
};
});
app.controller ('PageCtrl', ['$scope', 'filterFilter', ฟังก์ชัน ($scope, filterFilter) {
$scope.items = [{
“ชื่อ”: “ชื่อ 1”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 2”,
"หมวดหมู่": [{
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 3”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 4”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 5”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 6”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 7”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 8”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 9”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 10”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 11”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 12”,
"หมวดหมู่": [{
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 13”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 14”,
"หมวดหมู่": [{
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 15”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 16”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 17”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ชื่อ 18”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 19”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}, {
“ชื่อ”: “ชื่อ 20”,
"หมวดหมู่": [{
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ปีเตอร์”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “แฟรงค์”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “โจ”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “ราล์ฟ”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “จีน่า”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “แซม”,
"หมวดหมู่": [{
“หมวดหมู่”: “การจัดการ”
}, {
“หมวดหมู่”: “วิศวกรรม”
}],
“สาขา”: “ตะวันออก”
}, {
“ชื่อ”: “บริทนีย์”,
"หมวดหมู่": [{
“หมวดหมู่”: “ธุรกิจ”
}],
“สาขา”: “ตะวันตก”
}];
คำอธิบาย
รหัสที่ใช้ด้านบนจะแสดงชื่อนักเรียนตามประเภทหรือหัวข้อการศึกษาตามลำดับพร้อมกับภูมิศาสตร์ คุณลักษณะการแบ่งหน้า Angular JS จะช่วยให้สามารถกล่าวถึงรายละเอียดเหล่านี้ในรูปแบบตารางได้ในหลายหน้า นี่คือวิธีการจัดเรียงข้อมูลและทำให้ผู้ใช้ดูเรียบร้อยมากขึ้น นี่เป็นวิธีที่ง่ายที่สุดในการปรับปรุงประสบการณ์ผู้ใช้สำหรับเว็บแอปพลิเคชันของคุณ
ดังนั้น หากคุณเป็นนักพัฒนาเว็บ คุณไม่ควรชะลอการเรียนรู้อย่างมีประสิทธิภาพเท่าที่ควร และด้วยข้อโต้แย้งข้างต้นที่อธิบายว่าทำไม AngularJS เป็นเครื่องมือในอุดมคติในโลกเทคโนโลยีปัจจุบัน คุณมีคำอธิบายทั้งหมดที่จะดำเนินการต่อ!
หากคุณสนใจที่จะทราบข้อมูลเพิ่มเติมเกี่ยวกับ AngularJS การพัฒนาแบบฟูลสแตก โปรดดูประกาศนียบัตร PG ของ upGrad & IIIT-B ด้านการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการมากกว่า 9 โครงการ และ การมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักที่นำไปปฏิบัติจริง และความช่วยเหลือด้านงานกับบริษัทชั้นนำ