ثم المقالة الأولى "" شرح مفصل لموقع $ ووظائفها في خدمة AngularJS المدمجة "، للتعلم
القسم 2: تنفيذ تأثير عرض الصفحات
بعد ذلك ، لنكن غير مرئيين وضبط معلومات عنوان URL الحالي من خلال طريقة Setter الموقع. من أجل جعل العرض التوضيحي أفضل ، في هذا المثال الكامل نسبيًا ، قدمت تقنية AngularJS متعددة الطرق ، ونقل البيانات بين وحدات التحكم المتداخلة ، وميراث النطاق ، واتصال HTTP ، ومتغيرات نقل Intralink ، وما إلى ذلك ، إلخ.
أولا قم بإنشاء قالب الصفحة الرئيسية
<! doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/Angular.js"> type = "text/css"> .turnpagebuttonarea {background-color: #f07a13 ؛ العرض: 500 بكسل ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ محاذاة النص: المركز ؛ الهامش: 10px Auto ؛ الحشو: 20 بكسل ؛ } الزر {margin-right: 20px ؛ العرض: 100px ؛ الارتفاع: 30 بكسل ؛ حجم الخط: 15 بكسل ؛ } .pagenum {width: 50px ؛ الارتفاع: 23 بكسل ؛ محاذاة النص: المركز ؛ } الجسم {font-family: Microsoft Yahei ؛ } h1 {text-align: center ؛ } .totalPages {color: #ffffff} </style> </head> <body ng-controller = "indexController"> <h1> AngularJS turnpage by $ location service </h1> <div ng-view> </viv> <div> type = "number" ng-model = "currentpage"> <button ng click = "gotopage ()"> go </utton> <span> total {{allpage}} pages </span> </viv> </body> </html>يتم تعديل تخطيط الصفحة مع بعض أنماط CSS البسيطة.
ثم اضبط بعض NGAPPs ووحدات التحكم في عنصر الصفحة الرئيسية.
في عنصر div مع السمة ngview ، فإن القوالب المضمنة في HTML أخرى.
أدناه مباشرة ، وضعت ثلاثة أزرار ، الأولان هما أزرار تشغيل الصفحة في الصفحة السابقة والصفحة التالية ؛ يتيح مربع الإدخال للمستخدم إدخال رقم الصفحة الذي يريد القفز إليه ، ويعمل الزر الموجود بجواره كزر التقديم لرقم الصفحة. بعد النقر ، تقوم الصفحة بتحويل الصفحة على الفور.
تحتوي جميع الأزرار الثلاثة على سمة NGCLICK ، مما يشير إلى أنه عندما ينقر المستخدم على الزر ، سيتم تنفيذ الوظيفة المقابلة.
قبل شرح رمز JS لـ AngularJS ، خذ لقطة شاشة لرؤية بنية الدليل للملف.
index.html أعلاه هو من الأمثلة السابقة ، بحيث يمكنك تجاهله.
للبساطة ، وضعت جميع البرامج النصية تحت ملف turnpage.html. فيما يلي الرمز الكامل لهذا الملف:
Turnpage.html
<! doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/Angular.js"> type = "text/css"> .turnpagebuttonarea {background-color: #f07a13 ؛ العرض: 500 بكسل ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ محاذاة النص: المركز ؛ الهامش: 10px Auto ؛ الحشو: 20 بكسل ؛ } الزر {margin-right: 20px ؛ العرض: 100px ؛ الارتفاع: 30 بكسل ؛ حجم الخط: 15 بكسل ؛ } .pagenum {width: 50px ؛ الارتفاع: 23 بكسل ؛ محاذاة النص: المركز ؛ } الجسم {font-family: Microsoft Yahei ؛ } h1 {text-align: center ؛ } .totalPages {color: #ffffff} </style> </head> <body ng-controller = "indexController"> <h1> AngularJS turnpage by $ location service </h1> <div ng-view> </viv> <div> type = "number" ng-model = "currentpage"> <button ng-click = "gotopage ()"> go </utton> <span> total {{allpage}} pages </span> </viv> <cript> // تثبيت كائن NGAPP الخاص بالمستخدم. نظرًا لاستخدام آلية التوجيه هنا ، تتم كتابة وحدة Ngroute في حقن التبعية var turnpageapp = Angular.module ('turnpageapp' ، ['ngroute']) ؛ /* تعيين قوالب ووحدات تحكم مختلفة لعناوين URL مختلفة. نظرًا لأنه يتم استخدام قالب واحد فقط في هذا المثال ، لا يوجد سوى حالة توجيه واحدة فقط ، وهي "/id" */turnpageapp.config (['$ routeprovider' ، function ($ rouldervider) {$ routeprovider. atmen ('/: id' ، {// id هنا تمثل رقم الصفحة في الصفحة: 'studentController'}). بطريقة أخرى ({redirectto: '/1'}) ؛ // إذا كان لا يمكن مطابقة عنوان URL ، فانتقل إلى الصفحة الأولى مباشرة}]) ؛ // تسجيل جهاز التحكم الأصل الفهرس. نظرًا لأن قيمة وحدة تحكم الطفل في القالب تحتاج إلى تمريرها إلى وحدة التحكم الأصل ، فإن هناك حاجة إلى مجال ROOTSCOPE المجال الجذر للمساعدة ، ويجب تمرير كائن مجال الجذر في وظيفة الإرجاع. // علاوة على ذلك ، فإن هذا المثال ينفذ بدوره على أساس تشغيل عنوان URL ، لذلك يجب تمرير خدمة موقع $ المدمجة هذه في TurnPageApp.Controller ('indexController' ، وظيفة ($ rootscope ، نطاق $ ، موقع $) turnpage.html#/1: "/1" ، ثم أخرج الشخصيات بعد دالة جافا سكريبت وتحويلها إلى أرقام. الصفحة الأولى) ؛ $ rootscope.les) {تنبيه (هذه هي الصفحة الأخيرة) ؛ $ scope.currentPage ؛ $ rootscope وسمتها تظهر هنا. ثم يتم شرح التفاصيل أدناه. // هذه هي وحدة التحكم في صفحة القالب المضمنة في الصفحة الرئيسية. // نظرًا لأن التواصل بين مجال الطفل والمجال الأصل يتطلب مساعدة من مجال الجذر ، يتم تمرير كائن rootscope $ في نطاق التبعية // $ هو النطاق الخاص بالقالب ، والذي يرث النطاق الذي تم إنشاؤه بواسطة خدمة Controller IndexController // في القالب ، يحتاج إلى التفاعل مع ملفات الخادم ، وبالتالي فإن خدمة bizen $ التي تم تقديمها. من أجل التحكم في تعقيد المثيل ، كتبت مباشرة ملف JSON وقمت ببعض البيانات المزيفة. // هنا $ routeparams هو كائن ، وهناك خاصية في هذا الكائن ، وهو المعرف (/: معرف) الذي رأيناه في وظيفة config () من قبل. هذا المعرف هو متغير ، ما هو المسار في شريط العناوين ، وما هو المعرف. يجب الحصول على قيمة المعرف من خلال كائن $ routeparams. turnpageapp.controller ('' studentController '، [' $ rootscope '،' $ scope '،' $ http '،' $ routeparams '، function ($ rootscope ، $ scope ، $ http ، $ routeparams) {// the get $ http and a remote file request. تم الحصول عليها من الملف البعيد. البيانات التي تم إرجاعها هي صفيف ، وتبدأ المفروضة من 0 ، حيث تحتاج إلى أن يكون هناك عدد من العناصر في هذه الصفيف ، ويتمثل كل عنصر في المدى المفرد ، إذا لم يتم تعيين النطاق الفرعي مباشرة ، فإن سمات النطاق الفرعي سترث قيمة المجال الأصل مع نفس الاسم ؛ سترث السمة في هذا العنصر قيمة السمة التي تحمل نفس الاسم من نطاق الوالدين ، والتي تعرض العدد الإجمالي للصفحات بشكل غير مباشرعرض/student.html
<table cellpacing = "0"> <tr> <td> id </td> <td> {{{student.id}} </td> </td> <td> name </td> <td> {{{student.name}} </td> <tr> <td> <td> {{student.sex}}} </td> </tr> <tr> <td> العمر </td> <td> {{student.age}} </td> </tr> <td> {td> {td> </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <td> دورات </td> <td> <ul> <li ng-repeat = "الدورة التدريبية في الطالب. </r> </r> </r> </r> </r> </r> </r> </r> </r> </r> </r> <td> الدورات </td> <td> <ul> <li ng-repeat = "الدورة التدريبية في الطالب. type = "text/css"> table {border: solid 1px #000000 ؛ الهامش: 0px Auto ؛ } td {padding: 10px 10px 10px 20px ؛ الهامش: 0px ؛ الحدود: الصلبة 1px #000000 ؛ } tr {margin: 0px ؛ الحشو: 0px ؛ } .title {background-color: #207ef0 ؛ محاذاة النص: المركز ؛ اللون: #ffffff ؛ } ul {list-style: none ؛ الهامش: 0px ؛ الحشو: 0px ؛ } li {float: Left ؛ الهامش: 10px ؛ } </style>البيانات/الطلاب
[{"id": 1 ، "name": "Frank Li" ، "Sex": "Male" ، "Age": "30" ، "Courses": ["Html" ، "bootstrap"]} ، {"id": 2 ، "name": "cherry" ، "sex": "female" ، "age": "27" ، "الدورات": ["مقدمة إلى الفن" ، "رسم" ، "تكوين" ، "Sculpture"]}]هذا ما كان عليه الحال في البداية. المسار الافتراضي في شريط العناوين هو /1 ، لذلك يتم عرض معلومات الطالب الأول مباشرة. يمكن أيضًا الحصول على إجمالي عدد الصفحات.
التأثير بعد النقر فوق الزر السابق. لا يمكن قلب الصفحة بعد الآن
التأثير عند النقر فوق الزر التالي عندما يكون في الصفحة 4. لا يمكن إعادة الصفحات إلى الوراء.
لا توجد مشكلة في تحويل الصفحات في نطاق رقم الصفحة!
بالنظر إلى الطول ، لن أثبت أن رقم الصفحة الذي تم إدخاله خارج النطاق. لقطة الشاشة أعلاه هي تأثير إدخال النطاق الصحيح لأرقام الصفحات والنقر فوق الزر "GO".
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.