จากนั้นบทความแรก "" คำอธิบายโดยละเอียดเกี่ยวกับตำแหน่ง $ และฟังก์ชั่นของบริการในตัว AngularJS "เพื่อเรียนรู้
ส่วนที่ 2: ใช้เอฟเฟกต์การแสดงการปนเปื้อน
จากนั้นเราจะมองไม่เห็นและตั้งค่าข้อมูล URL ปัจจุบันผ่านวิธีการตั้งค่าตำแหน่ง เพื่อให้การสาธิตดีขึ้นในตัวอย่างที่ค่อนข้างสมบูรณ์นี้ฉันได้แนะนำเทคโนโลยีหลายเส้นทาง AngularJS การถ่ายโอนข้อมูลระหว่างคอนโทรลเลอร์ซ้อนกันการสืบทอดขอบเขตการสื่อสาร HTTP ตัวแปรการถ่ายโอน intralink ฯลฯ
ก่อนอื่นสร้างแม่แบบโฮมเพจ
<! doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> .TurnpageButtonArea {พื้นหลังสี: #F07A13; ความกว้าง: 500px; ความสูง: 30px; ระดับความสูง: 30px; TEXT-ALIGN: CENTER; มาร์จิ้น: 10px auto; Padding: 20px; } ปุ่ม {margin-right: 20px; ความกว้าง: 100px; ความสูง: 30px; ขนาดตัวอักษร: 15px; } .pagenum {width: 50px; ความสูง: 23px; TEXT-ALIGN: CENTER; } Body {Font-Family: Microsoft Yahei; } h1 {text-allign: center; } .totalpages {color: #ffffff} </style> </head> <body ng-controller = "indexcontroller"> <h1> turnpage angularjs โดย $ location service </h1> <div ng-view> type = "number" ng-model = "currentpage"> <button ng-click = "gotopage ()"> go </button> <span> ทั้งหมด {{allpage}}เค้าโครงของหน้านั้นได้รับการแก้ไขด้วยสไตล์ 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"> </script> .TurnpageButtonArea {พื้นหลังสี: #F07A13; ความกว้าง: 500px; ความสูง: 30px; ระดับความสูง: 30px; TEXT-ALIGN: CENTER; มาร์จิ้น: 10px auto; Padding: 20px; } ปุ่ม {margin-right: 20px; ความกว้าง: 100px; ความสูง: 30px; ขนาดตัวอักษร: 15px; } .pagenum {width: 50px; ความสูง: 23px; TEXT-ALIGN: CENTER; } Body {Font-Family: Microsoft Yahei; } h1 {text-allign: center; } .totalpages {color: #ffffff} </style> </head> <body ng-controller = "indexcontroller"> <h1> turnpage angularjs โดย $ location service </h1> <div ng-view> type = "number" ng-model = "currentpage"> <button ng-click = "gotopage ()"> go </button> <span> ทั้งหมด {{allpage}} หน้า </span> </div> <script> // เนื่องจากกลไกการกำหนดเส้นทางถูกนำมาใช้ที่นี่โมดูล ngroute ถูกเขียนในการฉีดพึ่งพา var turnpageapp = angular.module ('turnpageapp', ['ngroute']); /* ตั้งค่าเทมเพลตและตัวควบคุมที่แตกต่างกันสำหรับ URL ที่แตกต่างกัน เนื่องจากมีการใช้เทมเพลตเดียวในตัวอย่างนี้จึงมีสถานการณ์การกำหนดเส้นทางเพียงครั้งเดียวเท่านั้นคือ "/id" */turnpageapp.config (['$ routeProvider' ฟังก์ชั่น ($ routeProvider) {$ routeProvider }). otherwise ({redirectto: '/1'}); // หากไม่สามารถจับคู่ URL ให้ข้ามไปที่หน้าแรกได้โดยตรง}]); // ลงทะเบียนตัวควบคุมผู้ควบคุม INDEXCONTROLLER เนื่องจากค่าของตัวควบคุมเด็กในเทมเพลตจำเป็นต้องส่งผ่านไปยังตัวควบคุมหลักจึงจำเป็นต้องใช้โดเมนรูทโดเมน $ รูทสโคปเพื่อช่วยและวัตถุโดเมนรูทจะต้องส่งผ่านในฟังก์ชั่นการส่งคืน // ยิ่งไปกว่านั้นตัวอย่างนี้ใช้การเปิดหน้าตามการทำงานของ URL ดังนั้นบริการ $ ตำแหน่งในตัวนี้จะต้องส่งผ่านใน turnpageapp.controller ('indexcontroller', ฟังก์ชั่น ($ rootscope, $ scope, $ ตำแหน่ง) {// define function turnpage.html#/1: "/1" // นำตัวละครออกมาหลังจากการสแลชผ่านฟังก์ชั่นการระงับ JavaScript และแปลงเป็นตัวเลข เป็นหน้าแรก '); (pagenum> $ rootscope.allpage) {Alert ('นี่คือหน้าสุดท้าย'); $ scope.currentpage; $ rootscope และแอตทริบิวต์ทั้งหมดปรากฏขึ้นที่นี่ แล้วกระโดด // นี่คือคอนโทรลเลอร์ของหน้าเทมเพลตที่ฝังอยู่ในหน้าแรก // เนื่องจากการสื่อสารระหว่างโดเมนเด็กและโดเมนหลักต้องการความช่วยเหลือของโดเมนรูทวัตถุ $ rootscope จะถูกส่งผ่านในการพึ่งพา // $ ขอบเขตเป็นสแลงของเทมเพลตซึ่งสืบทอดขอบเขตที่สร้างขึ้นโดยผู้ควบคุมตัวควบคุม เพื่อควบคุมความซับซ้อนของอินสแตนซ์ฉันเขียนไฟล์ JSON โดยตรงและสร้างข้อมูลปลอม // ที่นี่ $ routeparams เป็นวัตถุและมีคุณสมบัติในวัตถุนี้ซึ่งเป็น ID (/: id) ที่เราเห็นในฟังก์ชั่น config () ก่อนหน้านี้ ID นี้เป็นตัวแปรเส้นทางในแถบที่อยู่คืออะไรและ ID คืออะไร ค่าของ ID จะต้องได้รับผ่านวัตถุ $ routeparams turnpageapp.controller ('studentcontroller', ['$ rootscope', '$ scope', '$ http', '$ routeparams', ฟังก์ชั่น ($ rootscope, $ scope, $ http, $ louteparams) ไฟล์ระยะไกล อาร์เรย์และตัวห้อยเริ่มต้นจาก 0 คุณต้องลบ 1 $ scope.student = data [$ routeparams.id - 1]; ได้รับมอบหมายโดยตรงคุณลักษณะของโดเมนย่อยจะสืบทอดค่าของคุณลักษณะของโดเมนพาเรนต์ที่มีชื่อเดียวกัน; องค์ประกอบจะสืบทอดค่าของแอตทริบิวต์ทั้งหมดของชื่อเดียวกันของขอบเขตหลักซึ่งแสดงจำนวนหน้าทั้งหมดทางอ้อมดู/student.html
<table cellpacing = "0"> <tr> <td> id </td> <td> {{student.id}} </td> </tr> <tr> <td> ชื่อ </td> <td> {{student.name}} </td> </tr> <td> <td> <td> {{student.sex}} </td> </tr> <tr> <td> อายุ </td> <td> {{student.age}} </td> </tr> <td> <td> courses </td> <td> <ul> <ul> <ul> <ul> <ul> <ul> </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td> หลักสูตร </td> <td> <ul> <li ng-repeat = "ในนักเรียน. courses"> {} </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> หลักสูตร </td> <td> <ul> <li ng-repeat =” type = "text/css"> ตาราง {border: solid 1px #000000; มาร์จิ้น: 0px auto; } td {padding: 10px 10px 10px 20px; มาร์จิ้น: 0px; เส้นขอบ: ของแข็ง 1px #000000; } tr {margin: 0px; Padding: 0px; } .title {พื้นหลังสี: #207EF0; TEXT-ALIGN: CENTER; สี: #ffffff; } ul {list-style: none; มาร์จิ้น: 0px; Padding: 0px; } li {float: ซ้าย; มาร์จิ้น: 10px; } </style>data/students.json
[{"id": 1, "ชื่อ": "Frank Li", "Sex": "Male", "Age": "30", "Courses": ["HTML", "CSS", "JavaScript", "Java", "PHP", "Mysql" "bootstrap"]}, {"id": 2, "ชื่อ": "เชอร์รี่", "เพศ": "หญิง", "อายุ": "27", "หลักสูตร": ["เทพนิยายของแอนเดอร์สัน", "ความภาคภูมิใจและอคติ", "Vanity Fair", "Oliver Twist" "29", "หลักสูตร": ["บทนำสู่ศิลปะ", "Sketch", "Composition", "Sculpture"]}]นี่คือสิ่งที่มันเป็นในตอนแรก เส้นทางเริ่มต้นในแถบที่อยู่คือ /1 ดังนั้นข้อมูลของนักเรียนคนแรกจะแสดงโดยตรง จำนวนหน้าทั้งหมดสามารถรับได้
เอฟเฟกต์หลังจากคลิกปุ่มก่อนหน้า ไม่สามารถเปลี่ยนหน้าได้อีกต่อไป
เอฟเฟกต์เมื่อคลิกปุ่มถัดไปเมื่ออยู่ในหน้า 4 ไม่สามารถเปิดหน้ากลับได้
ไม่มีปัญหาในการเปลี่ยนหน้าภายในช่วงหมายเลขหน้า!
เมื่อพิจารณาจากความยาวฉันจะไม่แสดงให้เห็นว่าหมายเลขหน้าที่ป้อนอยู่นอกระยะ ภาพหน้าจอด้านบนเป็นผลของการป้อนช่วงที่ถูกต้องของหมายเลขหน้าและคลิกปุ่ม GO
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น