AngularJS เป็นเฟรมเวิร์ก JavaScript MVC ที่พัฒนาโดย Google ซึ่งช่วยให้คุณสร้างแอปพลิเคชันฟรอนต์เอนด์ที่มีโครงสร้างดีทดสอบได้ง่ายและบำรุงรักษาได้
หากคุณยังไม่ได้ลอง AngularJS คุณกำลังพลาด เฟรมเวิร์กประกอบด้วยชุดเครื่องมือที่รวมเข้าด้วยกันอย่างแน่นหนาซึ่งจะช่วยให้คุณสร้างแอปพลิเคชันฝั่งไคลเอ็นต์ที่มีโครงสร้างดีและสมบูรณ์ในรูปแบบโมดูลาร์โดยใช้โค้ดน้อยลงและมีความยืดหยุ่นมากขึ้น
AngularJS ขยาย HTML โดยการให้ คำสั่ง ที่เพิ่มฟังก์ชันการทำงานให้กับมาร์กอัปของคุณและช่วยให้คุณสร้างเทมเพลตไดนามิกที่มีประสิทธิภาพ คุณยังสามารถสร้างคำสั่งของคุณเองสร้างส่วนประกอบที่ใช้ซ้ำได้ซึ่งเติมเต็มความต้องการของคุณและแยกตรรกะการจัดการ DOM ทั้งหมดออกไป
นอกจากนี้ยังใช้การผูกข้อมูลแบบสองทางโดยเชื่อมต่อ HTML (มุมมอง) ของคุณกับวัตถุ JavaScript (แบบจำลอง) ของคุณอย่างราบรื่น พูดง่ายๆคือหมายความว่าการอัปเดตใด ๆ ในโมเดลของคุณจะปรากฏในมุมมองของคุณทันทีโดยไม่จำเป็นต้องมีการจัดการ DOM หรือการจัดการเหตุการณ์ใด ๆ (เช่นด้วย jQuery)
สุดท้ายฉันชอบ Angular เพราะความยืดหยุ่นในการสื่อสารกับเซิร์ฟเวอร์ เช่นเดียวกับเฟรมเวิร์ก JavaScript MVC ส่วนใหญ่ช่วยให้คุณสามารถทำงานกับเทคโนโลยีฝั่งเซิร์ฟเวอร์ใดก็ได้ตราบเท่าที่สามารถให้บริการแอปของคุณผ่านทางเว็บ API ของ RESTful แต่ Angular ยังให้บริการ ด้านบน ของ XHR ที่ทำให้โค้ดของคุณง่ายขึ้นอย่างมากและช่วยให้คุณสามารถเรียก API แบบนามธรรมไปยังบริการที่ใช้ซ้ำได้ ด้วยเหตุนี้คุณจึงสามารถย้ายโมเดลและตรรกะทางธุรกิจของคุณไปยังส่วนหน้าและสร้างเว็บแอปที่ไม่เชื่อเรื่องพระเจ้าในส่วนหลังได้ ในโพสต์นี้เราจะทำทีละขั้นตอน
ขั้นแรกให้ตัดสินใจว่าลักษณะของแอปที่เราต้องการสร้าง ในคู่มือนี้เราไม่ต้องการใช้เวลากับแบ็คเอนด์มากเกินไปดังนั้นเราจะเขียนบางอย่างตามข้อมูลที่เข้าถึงได้ง่ายบนอินเทอร์เน็ตเช่นแอปฟีดกีฬา
เนื่องจากฉันเป็นแฟนตัวยงของการแข่งรถและ Formula 1 ฉันจะใช้บริการ autosport API เพื่อทำหน้าที่เป็นแบ็คเอนด์ของเรา โชคดีที่พวกที่ เออร์กัสต์ ใจดีพอที่จะให้ API มอเตอร์สปอร์ตฟรีซึ่งจะเหมาะกับเรา
สำหรับข้อมูลสรุปเกี่ยวกับสิ่งที่เรากำลังจะสร้างลองดูที่ไฟล์ การสาธิตสด . ในการปรับแต่งการสาธิตและแสดงเทมเพลต Angular บางส่วนฉันใช้ธีม Bootstrap จาก WrapBootstrap แต่เนื่องจากบทความนี้ไม่ได้เกี่ยวกับ CSS ฉันจะสรุปมันออกจากตัวอย่างและปล่อยทิ้งไว้
มาเริ่มต้นแอปตัวอย่างของเราด้วยเอกสารสำเร็จรูป ฉันขอแนะนำ เมล็ดเชิงมุม โครงการเนื่องจากไม่เพียง แต่มอบโครงกระดูกที่ยอดเยี่ยมสำหรับการบูตเครื่องเท่านั้น แต่ยังเป็นพื้นฐานสำหรับการทดสอบหน่วยด้วย กรรม และ จัสมิน (เราจะไม่ทำการทดสอบใด ๆ ในการสาธิตนี้ดังนั้นเราจะทิ้งสิ่งนั้นไว้ในตอนนี้ดู ส่วนที่ 2 ของบทช่วยสอนนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าโครงการของคุณสำหรับหน่วยและการทดสอบแบบ end-to-end)
แก้ไข (พฤษภาคม 2014): ตั้งแต่ฉันเขียนบทช่วยสอนนี้ไฟล์ เมล็ดเชิงมุม โครงการได้ผ่านการเปลี่ยนแปลงอย่างหนัก (รวมถึงส่วนเสริมของ โบเวอร์ เป็นผู้จัดการแพ็คเกจ) หากคุณมีข้อสงสัยเกี่ยวกับวิธีการปรับใช้โครงการให้ดูส่วนแรกของโครงการอย่างรวดเร็ว คู่มืออ้างอิง . ใน ส่วนที่ 2 ของบทช่วยสอน โบเวอร์ ในบรรดาเครื่องมืออื่น ๆ จะกล่าวถึงในรายละเอียดมากขึ้น
ตกลงตอนนี้เราได้โคลนที่เก็บและติดตั้งการอ้างอิงแล้วโครงกระดูกของแอปจะมีลักษณะดังนี้:
ตอนนี้เราสามารถเริ่มเขียนโค้ดได้แล้ว ในขณะที่เรากำลังพยายามสร้างฟีดกีฬาสำหรับการแข่งขันชิงแชมป์การแข่งรถเรามาเริ่มต้นด้วยมุมมองที่เกี่ยวข้องที่สุด: ตารางแชมป์ .
วิธีการเรียนรู้การเขียนโปรแกรม c++
เนื่องจากเรามีรายการไดรเวอร์ที่กำหนดไว้ภายในขอบเขตของเราแล้ว (ไปไหนมาไหน - เราจะไปที่นั่น) และไม่สนใจ CSS ใด ๆ (เพื่อความสามารถในการอ่าน) HTML ของเราอาจมีลักษณะดังนี้:
Drivers Championship Standings {{$index + 1}}
{{driver.Driver.givenName}} {{driver.Driver.familyName}} {{driver.Constructors[0].name}} {{driver.points}}
สิ่งแรกที่คุณจะสังเกตเห็นในเทมเพลตนี้คือการใช้นิพจน์ (“ {{“ และ“}}”) เพื่อส่งกลับค่าตัวแปร ในการพัฒนา AngularJS นิพจน์ช่วยให้คุณสามารถดำเนินการคำนวณบางอย่างเพื่อส่งคืนค่าที่ต้องการ นิพจน์ที่ถูกต้องบางอย่างจะเป็น:
{{ 1 + 1 }}
{ 946757880 }
{{ user.name }}
นิพจน์เป็นตัวอย่างเช่น JavaScript ได้อย่างมีประสิทธิภาพ แต่ถึงแม้จะมีประสิทธิภาพมาก แต่คุณก็ไม่ควรใช้นิพจน์เพื่อใช้ตรรกะระดับสูงกว่านี้ ด้วยเหตุนี้เราจึงใช้คำสั่ง
สิ่งที่สองที่คุณจะสังเกตเห็นคือการมี ng-attributes
ซึ่งคุณจะไม่เห็นในมาร์กอัปทั่วไป นั่นคือคำสั่ง
ในระดับสูงคำสั่งคือเครื่องหมาย (เช่นแอตทริบิวต์แท็กและชื่อคลาส) ที่บอกให้ AngularJS แนบพฤติกรรมที่กำหนดกับองค์ประกอบ DOM (หรือแปลงเปลี่ยนแทนที่ ฯลฯ ) มาดูสิ่งที่เราเคยเห็นไปแล้ว:
apache spark ใช้สำหรับอะไร
ng-app
คำสั่งมีหน้าที่ในการบูตแอปของคุณเพื่อกำหนดขอบเขต ใน AngularJS คุณสามารถมีหลายแอพในหน้าเดียวกันได้ดังนั้นคำสั่งนี้จะกำหนดจุดเริ่มต้นและสิ้นสุดของแต่ละแอป
ng-controller
คำสั่งกำหนดผู้ควบคุมที่จะรับผิดชอบมุมมองของคุณ ในกรณีนี้เราจะแสดงถึง driversController
ซึ่งจะแสดงรายการไดรเวอร์ของเรา (driversList
)
ng-repeat
คำสั่งเป็นหนึ่งในคำสั่งที่ใช้กันมากที่สุดและทำหน้าที่กำหนดขอบเขตเทมเพลตของคุณเมื่อวนรอบคอลเลกชัน ในตัวอย่างด้านบนจะจำลองบรรทัดในตารางสำหรับไดรเวอร์แต่ละตัวใน driversList
แน่นอนว่ามุมมองของเราไม่มีประโยชน์ใด ๆ หากไม่มีตัวควบคุม มาเพิ่ม driversController
ไปยังคอนโทรลเลอร์ js ของเรา:
angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope) { $scope.driversList = [ { Driver: { givenName: 'Sebastian', familyName: 'Vettel' }, points: 322, nationality: 'German', Constructors: [ {name: 'Red Bull'} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: 'Spanish', Constructors: [ {name: 'Ferrari'} ] } ]; });
คุณอาจสังเกตเห็น $scope
ตัวแปรที่เรากำลังส่งเป็นพารามิเตอร์ไปยังคอนโทรลเลอร์ $scope
ตัวแปรควรจะเชื่อมโยงคอนโทรลเลอร์และมุมมองของคุณ โดยเฉพาะอย่างยิ่งมันเก็บข้อมูลทั้งหมดที่จะใช้ภายในเทมเพลตของคุณ ทุกสิ่งที่คุณเพิ่มเข้าไป (เช่น driversList
ในตัวอย่างด้านบน) จะสามารถเข้าถึงได้โดยตรงในมุมมองของคุณ สำหรับตอนนี้เรามาทำงานกับอาร์เรย์ข้อมูลจำลอง (คงที่) ซึ่งเราจะแทนที่ในภายหลังด้วยบริการ API ของเรา
ตอนนี้เพิ่มสิ่งนี้ใน app.js:
angular.module('F1FeederApp', [ 'F1FeederApp.controllers' ]);
ด้วยโค้ดบรรทัดนี้เราเริ่มต้นแอพของเราและลงทะเบียนโมดูลที่ขึ้นอยู่กับมัน เราจะกลับมาที่ไฟล์นั้น (app.js
) ในภายหลัง
ตอนนี้มารวมทุกอย่างเข้าด้วยกันใน index.html
:
F-1 Feeder Drivers Championship Standings {{$index + 1}}
{{driver.Driver.givenName}} {{driver.Driver.familyName}} {{driver.Constructors[0].name}} {{driver.points}}
ข้อผิดพลาดเล็กน้อยของ Modulo ตอนนี้คุณสามารถบูตแอปและตรวจสอบรายการไดรเวอร์ (คงที่) ของคุณได้
หมายเหตุ: หากคุณต้องการความช่วยเหลือในการดีบักแอปของคุณและการแสดงภาพโมเดลและขอบเขตของคุณภายในเบราว์เซอร์ฉันขอแนะนำให้ลองดูสิ่งที่ยอดเยี่ยม บาตารัง ปลั๊กอินสำหรับ Chrome
เนื่องจากเรารู้วิธีแสดงข้อมูลของคอนโทรลเลอร์ในมุมมองของเราแล้วจึงถึงเวลาดึงข้อมูลจริงจากเซิร์ฟเวอร์ RESTful
เพื่ออำนวยความสะดวกในการสื่อสารกับเซิร์ฟเวอร์ HTTP AngularJS มี $http
และ $resource
บริการ. เดิมเป็นเพียงเลเยอร์ที่อยู่ด้านบนของ XMLHttpRequest หรือ JSONP ในขณะที่อย่างหลังให้ความเป็นนามธรรมในระดับที่สูงกว่า เราจะใช้ $http
ในการแยกการเรียก API เซิร์ฟเวอร์ของเราจากคอนโทรลเลอร์มาสร้างบริการที่กำหนดเองของเราเองซึ่งจะดึงข้อมูลของเราและทำหน้าที่เป็น Wrapper รอบ ๆ $http
โดยเพิ่มสิ่งนี้ใน services.js
:
angular.module('F1FeederApp.services', []). factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } return ergastAPI; });
ด้วยสองบรรทัดแรกเราสร้างโมดูลใหม่ (F1FeederApp.services
) และลงทะเบียนบริการภายในโมดูลนั้น (ergastAPIservice
) สังเกตว่าเราผ่าน $http
เป็นพารามิเตอร์ของบริการนั้น สิ่งนี้จะบอก Angular’s การฉีดพึ่งพา เครื่องยนต์ที่บริการใหม่ของเราต้องการ (หรือ ขึ้นอยู่กับ ) ที่ $http
บริการ.
ในทำนองเดียวกันเราต้องบอกให้ Angular รวมโมดูลใหม่ของเราไว้ในแอปของเรา มาลงทะเบียนด้วย app.js
แทนที่รหัสที่มีอยู่ของเราด้วย:
angular.module('F1FeederApp', [ 'F1FeederApp.controllers', 'F1FeederApp.services' ]);
ตอนนี้สิ่งที่เราต้องทำคือปรับแต่ง controller.js
ของเรา บิตรวม ergastAPIservice
เป็นที่พึ่งพาและเราจะไปได้ด้วยดี:
angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; ergastAPIservice.getDrivers().success(function (response) { //Dig into the responde to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); });
ตอนนี้โหลดแอพใหม่และตรวจสอบผลลัพธ์ โปรดสังเกตว่าเราไม่ได้ทำการเปลี่ยนแปลงใด ๆ กับเทมเพลตของเรา แต่เราได้เพิ่ม nameFilter
ตัวแปรตามขอบเขตของเรา มาใช้ตัวแปรนั้นกัน
เยี่ยมมาก! เรามีตัวควบคุมการทำงาน แต่จะแสดงรายการไดรเวอร์เท่านั้น มาเพิ่มฟังก์ชันการทำงานโดยใช้การป้อนข้อความค้นหาง่ายๆซึ่งจะกรองรายการของเรา เพิ่มบรรทัดต่อไปนี้ใน index.html
ของเราด้านล่างแท็ก:
ng-model
ตอนนี้เรากำลังใช้ประโยชน์จาก บรรทัดนี้บอก ณ จุดนี้การผูกข้อมูลแบบสองทางจะเริ่มเข้ามา: ทุกครั้งที่ป้อนค่าในช่องค้นหา Angular จะทำให้แน่ใจได้ทันทีว่า โหลดแอพใหม่และดูแถบค้นหา โปรดสังเกตว่าตัวกรองนี้จะมองหาคีย์เวิร์ดสำหรับแอตทริบิวต์ทั้งหมดของโมเดลรวมถึงตัวกรองที่เราไม่ได้ใช้ สมมติว่าเราต้องการกรองตาม ตอนนี้กลับไปที่ โหลดแอพใหม่อีกครั้งและตอนนี้เรามีการค้นหาตามชื่อ เป้าหมายต่อไปของเราคือการสร้างหน้ารายละเอียดผู้ขับขี่ซึ่งจะให้เราคลิกที่ไดรเวอร์แต่ละคนและดูรายละเอียดอาชีพของเขา / เธอ ก่อนอื่นให้รวม ด้วยการเปลี่ยนแปลงดังกล่าวไปที่ AngularJS จะช่วยให้คุณสามารถผูกเส้นทางของคุณกับคอนโทรลเลอร์และมุมมองเฉพาะ แต่ก่อนอื่นเราต้องบอก Angular ว่าจะแสดงมุมมองบางส่วนเหล่านี้ที่ไหน ในกรณีนี้เราจะใช้ ตอนนี้เมื่อใดก็ตามที่เราสำรวจเส้นทางแอพของเรา Angular จะโหลดมุมมองที่เกี่ยวข้องและแสดงผลแทนแท็ก สิ่งที่เราต้องทำคือสร้างไฟล์ชื่อ สุดท้ายให้เราตัดสินใจว่าเราต้องการแสดงอะไรในหน้ารายละเอียด สรุปข้อเท็จจริงที่เกี่ยวข้องทั้งหมดเกี่ยวกับคนขับ (เช่นการเกิดสัญชาติ) พร้อมกับตารางที่มีผลการแข่งขันล่าสุดของเขา / เธอเป็นอย่างไร ในการทำเช่นนั้นเราเพิ่มไปที่ ในครั้งนี้เราให้รหัสคนขับกับบริการเพื่อที่เราจะได้รับข้อมูลที่เกี่ยวข้องกับคนขับรถบางคนเท่านั้น ตอนนี้เราแก้ไข สิ่งสำคัญที่ต้องสังเกตคือเราเพิ่งฉีด ตอนนี้เรามีข้อมูลอยู่ในขอบเขตแล้วเราต้องการเพียงมุมมองบางส่วนที่เหลือเท่านั้น มาสร้างไฟล์ชื่อ สังเกตว่าตอนนี้เรากำลังใส่ เพิ่ม CSS จำนวนมากและแสดงผลเพจของคุณ คุณควรลงเอยด้วยสิ่งนี้: ตอนนี้คุณพร้อมที่จะเปิดแอปของคุณและตรวจสอบให้แน่ใจว่าทั้งสองเส้นทางทำงานตามที่ต้องการ คุณยังสามารถเพิ่มเมนูแบบคงที่ใน แก้ไข (พฤษภาคม 2014): ฉันได้รับคำขอจำนวนมากสำหรับโค้ดเวอร์ชันดาวน์โหลดที่เราสร้างในบทช่วยสอนนี้ ฉันจึงตัดสินใจที่จะปล่อยมัน ที่นี่ (ปล้น CSS) อย่างไรก็ตามฉันทำจริงๆ ไม่ แนะนำให้ดาวน์โหลดเนื่องจากคู่มือนี้มีทุกขั้นตอนที่คุณต้องสร้างแอปพลิเคชันเดียวกันด้วยมือของคุณเองซึ่งจะเป็นแบบฝึกหัดการเรียนรู้ที่มีประโยชน์และมีประสิทธิภาพมากขึ้น ในบทช่วยสอนนี้เราได้กล่าวถึงทุกสิ่งที่คุณจำเป็นต้องใช้ในการเขียนแอปง่ายๆ (เช่นตัวป้อนสูตร 1) แต่ละหน้าที่เหลือในการสาธิตสด (เช่นตารางแชมป์คอนสตรัคเตอร์รายละเอียดทีมปฏิทิน) มีโครงสร้างพื้นฐานและแนวคิดเดียวกันกับที่เราได้ตรวจสอบที่นี่ สุดท้ายโปรดทราบว่า Angular เป็นเฟรมเวิร์กที่ทรงพลังมากและเราแทบจะไม่ทำให้พื้นผิวเป็นรอยเลยในแง่ของทุกสิ่งที่มีให้ ใน ส่วนที่ 2 ของบทช่วยสอนนี้เราจะยกตัวอย่างว่าเหตุใด Angular จึงโดดเด่นท่ามกลางเฟรมเวิร์ก MVC ส่วนหน้าแบบเพียร์: การทดสอบ เราจะตรวจสอบกระบวนการเขียนและเรียกใช้การทดสอบหน่วยกับ กรรม บรรลุการบูรณาการอย่างต่อเนื่องกับ Yeomen , พื้น และ โบเวอร์ และจุดแข็งอื่น ๆ ของเฟรมเวิร์กส่วนหน้าที่ยอดเยี่ยมนี้ AngularJS เป็นเฟรมเวิร์ก JavaScript MVC ที่พัฒนาโดย Google ซึ่งช่วยให้คุณสร้างแอปพลิเคชันฟรอนต์เอนด์ที่มีโครงสร้างดีทดสอบได้ง่ายและดูแลรักษาได้ AngularJS ขยาย HTML โดยให้คำสั่งที่เพิ่มฟังก์ชันการทำงานให้กับมาร์กอัปของคุณและช่วยให้คุณสร้างเทมเพลตไดนามิกที่มีประสิทธิภาพ นอกจากนี้คุณยังสามารถสร้างคำสั่งของคุณเองสร้างส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งเติมเต็มความต้องการของคุณและทำให้ตรรกะการจัดการ DOM ทั้งหมดเป็นนามธรรม$scope.nameFilter
คำสั่ง คำสั่งนี้ผูกฟิลด์ข้อความของเรากับ ng-repeat
ตัวแปรและตรวจสอบให้แน่ใจว่าค่าของมันเป็นค่าที่ป้อนข้อมูลล่าสุดอยู่เสมอ ตอนนี้ให้ไปที่ index.html อีกครั้งและทำการปรับปรุงเล็กน้อยสำหรับบรรทัดที่มี คำสั่ง: ng-repeat
driversList
ก่อนที่จะส่งออกข้อมูลให้ nameFilter
อาร์เรย์จะต้องถูกกรองโดยค่าที่เก็บไว้ใน $scope.nameFilter
nameFilter
ที่เราเชื่อมโยงกับมันได้รับการอัปเดตด้วยค่าใหม่ เนื่องจากการผูกใช้งานได้ทั้งสองวิธีขณะที่ ng-repeat
มีการอัปเดตค่าคำสั่งที่สองที่เกี่ยวข้อง (เช่น Driver.givenName
) จะได้รับค่าใหม่และมุมมองจะอัปเดตทันทีระบบการซื้อขายแลกเปลี่ยนที่ใช้งานได้จริง
Driver.familyName
เท่านั้น และ driversController
: ก่อนอื่นเราเพิ่มไปที่ $scope.driversList = [];
ด้านล่าง $scope.searchFilter = function (driver) ;
ไลน์:index.html
ng-repeat
เราอัปเดตบรรทัดที่มี คำสั่ง: $routeProvider
เส้นทาง
app.js
บริการ (ใน app.js
) ซึ่งจะช่วยให้เราจัดการกับสิ่งเหล่านี้ได้ เส้นทางการใช้งาน . จากนั้นเราจะเพิ่มเส้นทางดังกล่าวสองเส้นทาง: เส้นทางหนึ่งสำหรับตารางแชมเปี้ยนชิพและอีกเส้นทางสำหรับรายละเอียดไดรเวอร์ นี่คือ angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/drivers', {templateUrl: 'partials/drivers.html', controller: 'driversController'}). when('/drivers/:id', {templateUrl: 'partials/driver.html', controller: 'driverController'}). otherwise({redirectTo: '/drivers'}); }]);
ใหม่ของเรา:http://domain/#/drivers
driversController
จะโหลด partials/drivers.html
และมองหามุมมองบางส่วนเพื่อแสดงผลใน ng-view
แต่เดี๋ยวก่อน! เรายังไม่มีการดูบางส่วนใช่ไหม เราจะต้องสร้างสิ่งเหล่านั้นด้วยมุมมองบางส่วน
index.html
คำสั่งแก้ไข F-1 Feeder
ของเรา เพื่อสะท้อนสิ่งต่อไปนี้:partials/drivers.html
และใส่ HTML ตารางแชมป์ของเราไว้ที่นั่น นอกจากนี้เราจะใช้โอกาสนี้ในการเชื่อมโยงชื่อคนขับกับเส้นทางรายละเอียดคนขับของเรา:
Drivers Championship Standings {{$index + 1}} {{driver.Driver.givenName}} {{driver.Driver.familyName}}
{{driver.Constructors[0].name}} {{driver.points}} services.js
angular.module('F1FeederApp.services', []) .factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverDetails = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverRaces = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK' }); } return ergastAPI; });
:สถาปัตยกรรมที่ปรับขนาดได้และโมดูลาร์สำหรับ css
controllers.js
angular.module('F1FeederApp.controllers', []). /* Drivers controller */ controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) re.test(driver.Driver.familyName); ; ergastAPIservice.getDrivers().success(function (response) { //Digging into the response to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }). /* Driver controller */ controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); ergastAPIservice.getDriverRaces($scope.id).success(function (response) { $scope.races = response.MRData.RaceTable.Races; }); });
:$routeParams
:id
เข้าสู่ตัวควบคุมไดรเวอร์ บริการนี้จะช่วยให้เราเข้าถึงพารามิเตอร์ URL ของเรา (สำหรับ $routeParams.id
ในกรณีนี้) โดยใช้ partials/driver.html
<- Back to drivers list
และเพิ่ม:
{{driver.Driver.givenName}} {{driver.Driver.familyName}} Country: {{driver.Driver.nationality}}
Team: {{driver.Constructors[0].name}}
Birth: {{driver.Driver.dateOfBirth}}
Biography
Formula 1 2013 Results Round Grand Prix Team Grid Race {{race.round}} {{race.raceName}}
{{race.Results[0].Constructor.name}} {{race.Results[0].grid}} {{race.Results[0].position}} ng-show
true
คำสั่งเพื่อการใช้งานที่ดี คำสั่งนี้จะแสดงองค์ประกอบ HTML ก็ต่อเมื่อนิพจน์ที่ระบุคือ false
(เช่นไม่มี null
หรือ index.html
) ในกรณีนี้อวาตาร์จะปรากฏขึ้นก็ต่อเมื่อตัวควบคุมโหลดอ็อบเจ็กต์ไดรเวอร์เข้าสู่ขอบเขตแล้วเท่านั้นจบการสัมผัส
|_+_|
เพื่อปรับปรุงความสามารถในการนำทางของผู้ใช้ ความเป็นไปได้ไม่มีที่สิ้นสุด สรุป
ทำความเข้าใจพื้นฐาน
AngularJS คืออะไร?
ทำไมต้อง AngularJS?