จนถึงตอนนี้เราได้ใช้ชุดข้อมูลบันทึกมือถือที่มีรหัสฮาร์ดสามชุด ตอนนี้เราใช้ AngularJS A $ HTTP บริการในตัวเพื่อรับข้อมูลระเบียนมือถือขนาดใหญ่ขึ้น เราจะใช้ฟังก์ชั่นการฉีดพึ่งพาการพึ่งพาของ AngularJS (DI) เพื่อให้บริการ AngularJS นี้ไปยังคอนโทรลเลอร์ PhonelistCtrl
โปรดรีเซ็ตไดเรกทอรีการทำงาน:
git checkout -f step -5
รีเฟรชเบราว์เซอร์และตอนนี้คุณควรดูรายการโทรศัพท์ 20 เครื่อง
ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 4 และขั้นตอนที่ 5 แสดงอยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub
ข้อมูล
ไฟล์แอพ/โทรศัพท์/โทรศัพท์ JSON ในโครงการของคุณเป็นชุดข้อมูลที่เก็บรายการโทรศัพท์ขนาดใหญ่ในรูปแบบ JSON
นี่คือตัวอย่างของไฟล์นี้:
[{"อายุ": 13, "id": "Motorola-defy-with-motoblur", "name": "Motorola defy/U2122 กับ Motoblur/U2122", "ตัวอย่าง": "คุณพร้อมสำหรับทุกสิ่ง -ผู้ควบคุม
เราใช้บริการ AngularJS $ http ในคอนโทรลเลอร์เพื่อเริ่มต้นคำขอ HTTP ไปยังเว็บเซิร์ฟเวอร์ของคุณเพื่อรับข้อมูลจากแอพ/โทรศัพท์/โทรศัพท์ไฟล์ JSON $ http เป็นเพียงหนึ่งในบริการในตัวใน AngularJs ที่สามารถจัดการการดำเนินงานทั่วไปของเว็บแอปพลิเคชันบางตัว AngularJs สามารถฉีดบริการเหล่านี้ได้ทุกที่ที่คุณต้องการ
บริการได้รับการจัดการผ่านระบบย่อยการฉีดพึ่งพา DI ของ AngularJS บริการฉีดพึ่งพาสามารถทำให้เว็บแอปพลิเคชันของคุณสร้างขึ้นได้ดี (เช่นการแยกส่วนประกอบของเลเยอร์การนำเสนอข้อมูลและการควบคุม) และคู่กันอย่างหลวม ๆ (ส่วนประกอบไม่จำเป็นต้องแก้ปัญหาการพึ่งพาระหว่างส่วนประกอบพวกเขาทั้งหมดได้รับการจัดการโดยระบบย่อย DI)
แอพ/js/controllers.js
ฟังก์ชั่น phonelistctrl ($ scope, $ http) {$ http.get ('โทรศัพท์/โทรศัพท์. json'). ความสำเร็จ (ฟังก์ชั่น (data) {$ scope.phones = data;}); $ scope.orderprop = 'อายุ';}$ http เริ่มต้นการร้องขอ HTTP GET ไปยังเว็บเซิร์ฟเวอร์และขอโทรศัพท์/โทรศัพท์. json (โปรดทราบว่า URL นั้นสัมพันธ์กับไฟล์ index.html ของเรา) เซิร์ฟเวอร์ตอบกลับด้วยข้อมูลจากไฟล์ JSON (การตอบกลับนี้อาจถูกสร้างขึ้นแบบไดนามิกจากเซิร์ฟเวอร์แบ็กเอนด์แบบเรียลไทม์ แต่สำหรับเบราว์เซอร์พวกเขาทั้งหมดดูเหมือนกันเพื่อความเรียบง่ายเราใช้ไฟล์ JSON ในบทช่วยสอน)
บริการ $ http ใช้ความสำเร็จในการส่งคืน [การตอบสนองของวัตถุ] [ng. $ q] เมื่อการตอบสนองแบบอะซิงโครนัสมาถึงฟังก์ชั่นการตอบสนองของวัตถุนี้จะใช้ในการประมวลผลข้อมูลการตอบสนองของเซิร์ฟเวอร์และกำหนดข้อมูลให้กับโมเดลข้อมูลโทรศัพท์ที่กำหนดขอบเขต ฉันสังเกตเห็นว่า AngularJS จะตรวจจับการตอบสนอง JSON นี้โดยอัตโนมัติและได้รับการแยกวิเคราะห์สำหรับเรา!
ในการใช้บริการ AngularJS คุณจะต้องประกาศชื่อของบริการที่ต้องการเป็นพารามิเตอร์ในตัวสร้างคอนโทรลเลอร์เช่นนี้:
ฟังก์ชั่น phonelistctrl ($ scope, $ http) {... }
เมื่อตัวควบคุมถูกสร้างขึ้นหัวฉีดการพึ่งพาของ AngularJS จะฉีดบริการเหล่านี้ลงในคอนโทรลเลอร์ของคุณ แน่นอนว่าหัวฉีดการพึ่งพาจะจัดการกับการพึ่งพาสกรรมกริยาว่าบริการที่ต้องการอาจมีอยู่ (บริการหนึ่งมักจะขึ้นอยู่กับบริการอื่น ๆ )
โปรดทราบว่าชื่อพารามิเตอร์มีความสำคัญมากเพราะหัวฉีดจะใช้พวกเขาเพื่อค้นหาการพึ่งพาที่สอดคล้องกัน
นิสัยการตั้งชื่อคำนำหน้า '$'
คุณสามารถสร้างบริการของคุณเองและเราจะได้เรียนรู้ในขั้นตอนที่ 11 ในฐานะนิสัยการตั้งชื่อบริการในตัว AngularJS วิธีการที่กำหนดขอบเขตและ AngularJS APIs อื่น ๆ ทั้งหมดใช้คำนำหน้า '$' ก่อนชื่อ อย่าใช้คำนำหน้า '$' เพื่อตั้งชื่อบริการและโมเดลของคุณเองมิฉะนั้นชื่ออาจเกิดความขัดแย้ง
เกี่ยวกับการบีบอัด JS
เนื่องจาก AngularJS ติดตั้งชื่อบริการการพึ่งพาผ่านชื่อพารามิเตอร์ของคอนโทรลเลอร์คอนสตรัคเตอร์ ดังนั้นหากคุณต้องการบีบอัดรหัส JS ของคอนโทรลเลอร์ PhoneListCtrl พารามิเตอร์ทั้งหมดจะถูกบีบอัดในเวลาเดียวกัน ในเวลานี้ระบบฉีดพึ่งพาจะไม่สามารถระบุบริการได้อย่างถูกต้อง
เพื่อเอาชนะปัญหาที่เกิดจากการบีบอัดเพียงกำหนดอาร์เรย์ขึ้นอยู่กับตัวระบุบริการให้กับคุณสมบัติ $ inject ในฟังก์ชันคอนโทรลเลอร์เช่นเดียวกับบรรทัดสุดท้ายที่แสดงความคิดเห็น:
PhonelistCtrl. $ inject = ['$ scope', '$ http'];
นอกจากนี้ยังสามารถใช้วิธีการอื่นเพื่อระบุรายการการพึ่งพาและหลีกเลี่ยงปัญหาการบีบอัด - ใช้อาร์เรย์ JavaScript เพื่อสร้างคอนโทรลเลอร์: ใส่บริการที่จะถูกฉีดเข้าไปในอาร์เรย์ของสตริง (แสดงชื่อของการพึ่งพา) และองค์ประกอบสุดท้ายของอาร์เรย์คือฟังก์ชันวิธีการของคอนโทรลเลอร์:
var phonelistCtrl = ['$ scope', '$ http', ฟังก์ชั่น ($ scope, $ http) { / * constructor body * /}];
ทั้งสองวิธีที่กล่าวถึงข้างต้นสามารถทำงานได้อย่างสมบูรณ์แบบกับฟังก์ชั่นใด ๆ ที่ AngularJs สามารถฉีดได้ วิธีการเลือกใดขึ้นอยู่กับรูปแบบการเขียนโปรแกรมของโครงการของคุณ ขอแนะนำให้ใช้วิธีการอาร์เรย์
ทดสอบ
ทดสอบ/หน่วย/controllerspec.js:
เนื่องจากตอนนี้เราใช้การฉีดพึ่งพาและคอนโทรลเลอร์ของเรายังมีบริการการพึ่งพาจำนวนมากจึงมีความซับซ้อนเล็กน้อยในการสร้างการทดสอบสำหรับคอนโทรลเลอร์ของเรา เราจำเป็นต้องใช้การดำเนินการใหม่และจัดเตรียมการใช้เทียมให้กับตัวสร้างรวมถึง $ http อย่างไรก็ตามวิธีที่แนะนำ (และง่ายกว่า) คือการสร้างคอนโทรลเลอร์ในสภาพแวดล้อมการทดสอบโดยใช้วิธีเดียวกับ AngularJS ในสถานการณ์ต่อไปนี้:
อธิบาย ('phonecat controllers', function () {อธิบาย ('phonelistctrl', function () {var scope, ctrl, $ httpbackend; ก่อนหน้า (inject (ฟังก์ชั่น (_ $ httpbackend_, $ rootscope, $ controller) $ httpbackend.expectget ('โทรศัพท์/phones.json')หมายเหตุ: เนื่องจากเราโหลดจัสมินและ angular-mock.js ในสภาพแวดล้อมการทดสอบเราจึงมีวิธีการช่วยสองวิธีโมดูลและการฉีดเพื่อช่วยให้เราได้รับและกำหนดค่าหัวฉีด
ใช้วิธีการต่อไปนี้เราสร้างคอนโทรลเลอร์ในสภาพแวดล้อมการทดสอบ:
เราใช้วิธีการฉีดเพื่อฉีด $ rootscope, $ controller และ $ httpbackend อินสแตนซ์ของอินสแตนซ์ของจัสมินก่อนหน้าของจัสมิน อินสแตนซ์เหล่านี้ทั้งหมดมาจากหัวฉีด แต่หัวฉีดนี้ถูกสร้างขึ้นใหม่ภายในการทดสอบแต่ละครั้ง สิ่งนี้ทำให้มั่นใจได้ว่าการทดสอบทุกครั้งเริ่มต้นจากจุดเริ่มต้นที่รู้จักกันดีและการทดสอบแต่ละครั้งนั้นเป็นอิสระจากการทดสอบอื่น ๆ
โทร $ rootscope $ ใหม่ () เพื่อสร้างขอบเขตใหม่สำหรับคอนโทรลเลอร์ของเรา
ฟังก์ชัน PhonelistCtrl และขอบเขตที่เพิ่งสร้างขึ้นจะถูกส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชันคอนโทรลเลอร์ $ แบบฉีด
เนื่องจากรหัสปัจจุบันของเราใช้บริการ $ http เพื่อรับข้อมูลรายการโทรศัพท์ในคอนโทรลเลอร์ก่อนที่จะสร้าง subscope phonelistCtrl เราจึงต้องบอกชุดทดสอบเพื่อรอการร้องขอจากคอนโทรลเลอร์ เราสามารถทำได้:
ฉีดบริการคำขอ $ httpbackend ลงในฟังก์ชั่นก่อนหน้าของเรา นี่คือรุ่นหลอกของบริการนี้การทำเช่นนั้นช่วยจัดการคำขอ XHR และ JSONP ทั้งหมดในสภาพแวดล้อมผลิตภัณฑ์ บริการแบบหลอกแบบหลอกช่วยให้คุณเขียนการทดสอบโดยไม่คำนึงถึง APIs และรัฐระดับโลก - ใครก็ตามที่สามารถเป็นฝันร้ายสำหรับการทดสอบได้
ใช้เมธอด $ httpbackend.expectget เพื่อบอกบริการ $ httpbackend เพื่อรอคำขอ HTTP และบอกวิธีการตอบกลับ โปรดทราบว่าจะไม่ออกคำตอบจนกว่าเราจะเรียกวิธี $ httpbackend.flush
ตอนนี้,
มัน (ควรสร้างโมเดล "โทรศัพท์" ที่มีโทรศัพท์ 2 รุ่นดึงมาจาก XHR ', function () {คาดหวัง (prope.phones) .tobeundefined (); $ httpbackend.flush (); คาดหวังในเบราว์เซอร์เราเรียก $ httpbackend.flush () เพื่อล้างคิวคำขอ (ล้าง) สิ่งนี้จะช่วยให้สัญญาที่ส่งคืนโดยบริการ $ http (ดูที่นี่สำหรับสัญญาคืออะไร) ที่จะตีความว่าเป็นการตอบสนองมาตรฐาน
เราตั้งค่าการยืนยันบางอย่างเพื่อตรวจสอบว่ารูปแบบข้อมูลโทรศัพท์มือถืออยู่ในขอบเขตแล้ว
สุดท้ายเราตรวจสอบว่าค่าเริ่มต้นของ OrderProp ถูกตั้งค่าอย่างถูกต้อง:
มัน ('ควรตั้งค่าเริ่มต้นของโมเดล orderprop', function () {คาดหวัง (scope.orderprop) .tobe ('อายุ');});ฝึกฝน
เพิ่ม {{โทรศัพท์ | JSON}} การเชื่อมโยงในตอนท้ายของ index.html และสังเกตรายการโทรศัพท์มือถือในรูปแบบ JSON
ในคอนโทรลเลอร์ PhoneListCtrl ให้ประมวลผลการตอบสนอง HTTP ล่วงหน้าเพื่อให้มีเพียงห้ารายการแรกของรายการโทรศัพท์เท่านั้น ใช้รหัสต่อไปนี้ในฟังก์ชันการโทรกลับ $ http:
$ scope.phones = data.splice (0, 5);
สรุป
ตอนนี้คุณควรรู้สึกว่าการใช้บริการ AngularJS นั้นง่ายเพียงใด (ทั้งหมดนี้ต้องขอบคุณกลไกการฉีดพึ่งพาของบริการ AngularJS) ไปที่ขั้นตอนที่ 6 และคุณจะเพิ่มรูปขนาดย่อและลิงก์ไปยังโทรศัพท์ของคุณ
ขอขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้และอัปเดตบทความที่เกี่ยวข้องในอนาคต!