كيفية تنفيذ ترقيم الصفحات في Angular JS؟ [مع مثال عملي]
نشرت: 2020-04-20قبل أن ننتقل إلى فهم كيفية عمل ترقيم الصفحات في Angular JS وكيف يتم تنفيذه في هذا الإطار ، دعنا نأخذ الأمر خطوة بخطوة ونبدأ بمناقشة Angular JS وترقيم الصفحات بشكل عام.
جدول المحتويات
ما هو Angular JS؟
Angular JS هي من بين الأطر الهيكلية الأكثر تفضيلاً لإنشاء تطبيقات ويب ديناميكية. يسمح للمطورين باستخدام HTML كلغة نموذج ، ويسمح أيضًا بتمديد بناء جملة HTML للسماح بالتعبير الواضح والموجز عن المكونات المختلفة لتطبيق الويب.
يأتي مع حقنة التبعية وإمكانيات ربط البيانات للتخلص من جزء أكبر من الكود الذي يجب أن يكتبه المطورون. كل هذا يحدث داخل المتصفح ، مما يجعل Angular JS إطارًا يمكن استخدامه بسهولة مع أي تقنية خادم تقريبًا.
Angular JS هو إطار عمل مفتوح المصدر يشترك في العديد من أوجه التشابه مع JavaScript. يتم استخدامه في الغالب من قبل المطورين لتطوير التطبيقات التي تحتاج إلى عرض كل محتوياتها ونصوصها ورسوماتها في صفحة واحدة. ومع ذلك ، هذا لا يعني بأي حال من الأحوال أنه لا يمكن استخدامه لإنشاء تطبيقات متعددة الصفحات.
سنشرح في هذا المنشور كيف يساعد ترقيم الصفحات في تقسيم المحتوى إلى أكثر من صفحة واحدة دون التأثير على التدفق والتنقل من بين عوامل أخرى. إنه إطار عمل شائع لوحدة التحكم في عرض النموذج في جميع أنحاء العالم لسببين مهمين للغاية - يعتمد على Google ، ويتم تحديثه دائمًا مع أحدث اتجاهات التطوير. دعونا الآن نحول تركيزنا إلى ترقيم الصفحات.
قراءة: أسئلة وأجوبة مقابلة AngularJS
ما هو ترقيم الصفحات؟
كما أشرنا في وقت سابق قليلاً في المقالة ، لا يمكن لجميع مواقع الويب عرض جميع معلوماتها في صفحة واحدة. على الرغم من أن الصفحة الواحدة هي الخيار المفضل حقًا ، فإن استخدام صفحات متعددة في المواقف التي لا يكون فيها موقع الويب لصفحة واحدة خيارًا يمكن أن يوفر العديد من الفوائد ، بما في ذلك التنقل السهل في الموقع وتجربة المستخدم المحسنة وغيرها.
لا يمكن لجميع مواقع الويب ، وخاصة مواقع التجارة الإلكترونية مثل Flipkart ، سرد جميع منتجاتها وعرض جميع المعلومات الضرورية في صفحة واحدة. هذا هو المكان الذي يأتي ترقيم الصفحات في الصورة. يسمح بتقسيم المحتوى ، على شكل نصوص ، وصور ، وأكثر من ذلك ، إلى صفحات متعددة إذا لزم الأمر. تعرف على المزيد حول استخدام AngularJS لتطوير الويب.
هناك العديد من السيناريوهات التي يكون فيها ترقيم الصفحات مفيدًا حقًا. إذا كان موقع الويب الخاص بك يحتوي على أجزاء ضخمة من المعلومات ، بما في ذلك المدونات أو الرسوم البيانية أو المخططات المتعلقة بفئة مماثلة أو مجموعة بيانات ، فيمكنك تقسيم هذه المعلومات باستخدام ترقيم الصفحات وتحسين التنقل وإمكانية القراءة.
ترقيم الصفحات في Angular JS
هناك عدة طرق لعرض البيانات على موقع ويب أو أي تطبيق ويب. القوائم والجداول هي العناصر الأكثر شيوعًا التي يستخدمها معظم الأشخاص لعرض المعلومات التي يسهل قراءتها وفهمها. في تطبيقات Angular ، تُستخدم ميزة ng-تكرار لعرض المعلومات في قوائم أو جداول. ومع ذلك ، لا يعمل هذا إلا عندما لا تكون البيانات المعروضة كبيرة جدًا. بالنسبة لمجموعات البيانات الأكبر ، فإن ميزات مثل الفرز والبحث وتقسيم الصفحات تجعل الجداول والقوائم أكثر سهولة في الإدارة والتطبيقات أكثر سهولة في الاستخدام.
قد يبدو ترقيم الصفحات Angular JS أكثر صعوبة من ترقيم الصفحات في Laravel و Code PHP والأطر الأخرى للأشخاص الذين لا يدركون جيدًا نهج التنفيذ الذي يجب اتباعه. يمكنك استخدام ترقيم الصفحات جنبًا إلى جنب مع ميزات البحث والفرز لسرد السجلات بتنسيق سهل التنقل وسهل القراءة.
يمكنك استخدام المكتبات الزاوية لجهات خارجية لتغطية القوائم البسيطة في صفحات متعددة بميزات الفرز والبحث. مكتبة الجهة الخارجية الأكثر تفضيلاً لهذا الغرض هي dirPagination. هذه المكتبة يسهل الوصول إليها وسهلة الاستخدام للغاية. يمكن استخدامه للإصدارات الزاويّة الأقل من الزاوية 2. إذا كنت تستخدم الزاوية 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>
<meta name = ”viewport” content = ”width = device-width، initial-scale = 1.0 ″>
<meta name = ”description” content = ””>
<meta name = ”author” content = ”Kim Maida”>
<! - مكتبات JS ->
<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>
<الجسم>
<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=""g-click=”search.category='business'”> 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=""g-click=”resetFilters()"> إظهار الكل </a> </strong> </p>
<h1> العناصر </ h1>
<ul>
<li ng-تكرار = "عنصر مصفى = عناصر | عامل التصفية: بحث | startFrom: (currentPage-1) * entryLimit | limitTo: entryLimit ”> {{item.name}} </li>
</ul>
<pagination page = ”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'، function () {
وظيفة الإرجاع (الإدخال ، البدء) {
إذا (إدخال) {
ابدأ = + ابدأ ؛
عودة المدخلات.
}
إرجاع []؛
} ؛
}) ؛
app.controller ('PageCtrl'، ['$ range'، 'filterFilter'، function ($ range، filterFilter) {
$ range.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 ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.