ส่วนหน้าของเว็บ

การสอนทีละขั้นตอนสำหรับแอป AngularJS ตัวแรกของคุณ

AngularJS มีการพัฒนาและดียิ่งขึ้น ปัจจุบันเรียกว่า Angular ซึ่งถูกเขียนขึ้นใหม่ทั้งหมดในเวิร์กโฟลว์การพัฒนาใหม่ เช็คเอาท์ บทช่วยสอน Angular 5 ใหม่ของเรา และใหม่กว่า บทแนะนำแบบเต็มสแต็ก Angular 6 ที่มี Material และ Firebase .

AngularJS คืออะไร?

AngularJS เป็นเฟรมเวิร์ก JavaScript MVC ที่พัฒนาโดย Google ซึ่งช่วยให้คุณสร้างแอปพลิเคชันฟรอนต์เอนด์ที่มีโครงสร้างดีทดสอบได้ง่ายและบำรุงรักษาได้

และทำไมฉันจึงควรใช้?

หากคุณยังไม่ได้ลอง AngularJS คุณกำลังพลาด เฟรมเวิร์กประกอบด้วยชุดเครื่องมือที่รวมเข้าด้วยกันอย่างแน่นหนาซึ่งจะช่วยให้คุณสร้างแอปพลิเคชันฝั่งไคลเอ็นต์ที่มีโครงสร้างดีและสมบูรณ์ในรูปแบบโมดูลาร์โดยใช้โค้ดน้อยลงและมีความยืดหยุ่นมากขึ้น

AngularJS ขยาย HTML โดยการให้ คำสั่ง ที่เพิ่มฟังก์ชันการทำงานให้กับมาร์กอัปของคุณและช่วยให้คุณสร้างเทมเพลตไดนามิกที่มีประสิทธิภาพ คุณยังสามารถสร้างคำสั่งของคุณเองสร้างส่วนประกอบที่ใช้ซ้ำได้ซึ่งเติมเต็มความต้องการของคุณและแยกตรรกะการจัดการ DOM ทั้งหมดออกไป

นอกจากนี้ยังใช้การผูกข้อมูลแบบสองทางโดยเชื่อมต่อ HTML (มุมมอง) ของคุณกับวัตถุ JavaScript (แบบจำลอง) ของคุณอย่างราบรื่น พูดง่ายๆคือหมายความว่าการอัปเดตใด ๆ ในโมเดลของคุณจะปรากฏในมุมมองของคุณทันทีโดยไม่จำเป็นต้องมีการจัดการ DOM หรือการจัดการเหตุการณ์ใด ๆ (เช่นด้วย jQuery)

Angular ให้บริการที่อยู่เหนือ XHR ซึ่งทำให้โค้ดของคุณง่ายขึ้นอย่างมากและช่วยให้คุณสามารถเรียก API แบบนามธรรมไปยังบริการที่ใช้ซ้ำได้ ด้วยวิธีนี้คุณสามารถย้ายโมเดลและตรรกะทางธุรกิจของคุณไปที่ส่วนหน้าและสร้างเว็บแอปที่ไม่เชื่อเรื่องพระเจ้าส่วนหลังได้

สุดท้ายฉันชอบ Angular เพราะความยืดหยุ่นในการสื่อสารกับเซิร์ฟเวอร์ เช่นเดียวกับเฟรมเวิร์ก JavaScript MVC ส่วนใหญ่ช่วยให้คุณสามารถทำงานกับเทคโนโลยีฝั่งเซิร์ฟเวอร์ใดก็ได้ตราบเท่าที่สามารถให้บริการแอปของคุณผ่านทางเว็บ API ของ RESTful แต่ Angular ยังให้บริการ ด้านบน ของ XHR ที่ทำให้โค้ดของคุณง่ายขึ้นอย่างมากและช่วยให้คุณสามารถเรียก API แบบนามธรรมไปยังบริการที่ใช้ซ้ำได้ ด้วยเหตุนี้คุณจึงสามารถย้ายโมเดลและตรรกะทางธุรกิจของคุณไปยังส่วนหน้าและสร้างเว็บแอปที่ไม่เชื่อเรื่องพระเจ้าในส่วนหลังได้ ในโพสต์นี้เราจะทำทีละขั้นตอน

ฉันจะเริ่มต้นที่ไหน

ขั้นแรกให้ตัดสินใจว่าลักษณะของแอปที่เราต้องการสร้าง ในคู่มือนี้เราไม่ต้องการใช้เวลากับแบ็คเอนด์มากเกินไปดังนั้นเราจะเขียนบางอย่างตามข้อมูลที่เข้าถึงได้ง่ายบนอินเทอร์เน็ตเช่นแอปฟีดกีฬา

เนื่องจากฉันเป็นแฟนตัวยงของการแข่งรถและ Formula 1 ฉันจะใช้บริการ autosport API เพื่อทำหน้าที่เป็นแบ็คเอนด์ของเรา โชคดีที่พวกที่ เออร์กัสต์ ใจดีพอที่จะให้ API มอเตอร์สปอร์ตฟรีซึ่งจะเหมาะกับเรา

สำหรับข้อมูลสรุปเกี่ยวกับสิ่งที่เรากำลังจะสร้างลองดูที่ไฟล์ การสาธิตสด . ในการปรับแต่งการสาธิตและแสดงเทมเพลต Angular บางส่วนฉันใช้ธีม Bootstrap จาก WrapBootstrap แต่เนื่องจากบทความนี้ไม่ได้เกี่ยวกับ CSS ฉันจะสรุปมันออกจากตัวอย่างและปล่อยทิ้งไว้

บทแนะนำการเริ่มต้นใช้งาน

มาเริ่มต้นแอปตัวอย่างของเราด้วยเอกสารสำเร็จรูป ฉันขอแนะนำ เมล็ดเชิงมุม โครงการเนื่องจากไม่เพียง แต่มอบโครงกระดูกที่ยอดเยี่ยมสำหรับการบูตเครื่องเท่านั้น แต่ยังเป็นพื้นฐานสำหรับการทดสอบหน่วยด้วย กรรม และ จัสมิน (เราจะไม่ทำการทดสอบใด ๆ ในการสาธิตนี้ดังนั้นเราจะทิ้งสิ่งนั้นไว้ในตอนนี้ดู ส่วนที่ 2 ของบทช่วยสอนนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าโครงการของคุณสำหรับหน่วยและการทดสอบแบบ end-to-end)

แก้ไข (พฤษภาคม 2014): ตั้งแต่ฉันเขียนบทช่วยสอนนี้ไฟล์ เมล็ดเชิงมุม โครงการได้ผ่านการเปลี่ยนแปลงอย่างหนัก (รวมถึงส่วนเสริมของ โบเวอร์ เป็นผู้จัดการแพ็คเกจ) หากคุณมีข้อสงสัยเกี่ยวกับวิธีการปรับใช้โครงการให้ดูส่วนแรกของโครงการอย่างรวดเร็ว คู่มืออ้างอิง . ใน ส่วนที่ 2 ของบทช่วยสอน โบเวอร์ ในบรรดาเครื่องมืออื่น ๆ จะกล่าวถึงในรายละเอียดมากขึ้น

ตกลงตอนนี้เราได้โคลนที่เก็บและติดตั้งการอ้างอิงแล้วโครงกระดูกของแอปจะมีลักษณะดังนี้:

angularjs กวดวิชา - เริ่มต้นด้วยโครงกระดูก

ตอนนี้เราสามารถเริ่มเขียนโค้ดได้แล้ว ในขณะที่เรากำลังพยายามสร้างฟีดกีฬาสำหรับการแข่งขันชิงแชมป์การแข่งรถเรามาเริ่มต้นด้วยมุมมองที่เกี่ยวข้องที่สุด: ตารางแชมป์ .

วิธีการเรียนรู้การเขียนโปรแกรม 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

ตอนนี้เรากำลังใช้ประโยชน์จาก $scope.nameFilter คำสั่ง คำสั่งนี้ผูกฟิลด์ข้อความของเรากับ ng-repeat ตัวแปรและตรวจสอบให้แน่ใจว่าค่าของมันเป็นค่าที่ป้อนข้อมูลล่าสุดอยู่เสมอ ตอนนี้ให้ไปที่ index.html อีกครั้งและทำการปรับปรุงเล็กน้อยสำหรับบรรทัดที่มี คำสั่ง:

ng-repeat

บรรทัดนี้บอก driversList ก่อนที่จะส่งออกข้อมูลให้ nameFilter อาร์เรย์จะต้องถูกกรองโดยค่าที่เก็บไว้ใน $scope.nameFilter

ณ จุดนี้การผูกข้อมูลแบบสองทางจะเริ่มเข้ามา: ทุกครั้งที่ป้อนค่าในช่องค้นหา Angular จะทำให้แน่ใจได้ทันทีว่า 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 แต่เดี๋ยวก่อน! เรายังไม่มีการดูบางส่วนใช่ไหม เราจะต้องสร้างสิ่งเหล่านั้นด้วย

มุมมองบางส่วน

AngularJS จะช่วยให้คุณสามารถผูกเส้นทางของคุณกับคอนโทรลเลอร์และมุมมองเฉพาะ

แต่ก่อนอื่นเราต้องบอก Angular ว่าจะแสดงมุมมองบางส่วนเหล่านี้ที่ไหน ในกรณีนี้เราจะใช้ index.html คำสั่งแก้ไข F-1 Feeder ของเรา เพื่อสะท้อนสิ่งต่อไปนี้:

partials/drivers.html

ตอนนี้เมื่อใดก็ตามที่เราสำรวจเส้นทางแอพของเรา Angular จะโหลดมุมมองที่เกี่ยวข้องและแสดงผลแทนแท็ก สิ่งที่เราต้องทำคือสร้างไฟล์ชื่อ

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

และใส่ HTML ตารางแชมป์ของเราไว้ที่นั่น นอกจากนี้เราจะใช้โอกาสนี้ในการเชื่อมโยงชื่อคนขับกับเส้นทางรายละเอียดคนขับของเรา:

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) ในกรณีนี้อวาตาร์จะปรากฏขึ้นก็ต่อเมื่อตัวควบคุมโหลดอ็อบเจ็กต์ไดรเวอร์เข้าสู่ขอบเขตแล้วเท่านั้น

จบการสัมผัส

เพิ่ม CSS จำนวนมากและแสดงผลเพจของคุณ คุณควรลงเอยด้วยสิ่งนี้:

หน้าที่แสดงผลด้วย CSS

ตอนนี้คุณพร้อมที่จะเปิดแอปของคุณและตรวจสอบให้แน่ใจว่าทั้งสองเส้นทางทำงานตามที่ต้องการ คุณยังสามารถเพิ่มเมนูแบบคงที่ใน

|_+_|

เพื่อปรับปรุงความสามารถในการนำทางของผู้ใช้ ความเป็นไปได้ไม่มีที่สิ้นสุด

แก้ไข (พฤษภาคม 2014): ฉันได้รับคำขอจำนวนมากสำหรับโค้ดเวอร์ชันดาวน์โหลดที่เราสร้างในบทช่วยสอนนี้ ฉันจึงตัดสินใจที่จะปล่อยมัน ที่นี่ (ปล้น CSS) อย่างไรก็ตามฉันทำจริงๆ ไม่ แนะนำให้ดาวน์โหลดเนื่องจากคู่มือนี้มีทุกขั้นตอนที่คุณต้องสร้างแอปพลิเคชันเดียวกันด้วยมือของคุณเองซึ่งจะเป็นแบบฝึกหัดการเรียนรู้ที่มีประโยชน์และมีประสิทธิภาพมากขึ้น

สรุป

ในบทช่วยสอนนี้เราได้กล่าวถึงทุกสิ่งที่คุณจำเป็นต้องใช้ในการเขียนแอปง่ายๆ (เช่นตัวป้อนสูตร 1) แต่ละหน้าที่เหลือในการสาธิตสด (เช่นตารางแชมป์คอนสตรัคเตอร์รายละเอียดทีมปฏิทิน) มีโครงสร้างพื้นฐานและแนวคิดเดียวกันกับที่เราได้ตรวจสอบที่นี่

สุดท้ายโปรดทราบว่า Angular เป็นเฟรมเวิร์กที่ทรงพลังมากและเราแทบจะไม่ทำให้พื้นผิวเป็นรอยเลยในแง่ของทุกสิ่งที่มีให้ ใน ส่วนที่ 2 ของบทช่วยสอนนี้เราจะยกตัวอย่างว่าเหตุใด Angular จึงโดดเด่นท่ามกลางเฟรมเวิร์ก MVC ส่วนหน้าแบบเพียร์: การทดสอบ เราจะตรวจสอบกระบวนการเขียนและเรียกใช้การทดสอบหน่วยกับ กรรม บรรลุการบูรณาการอย่างต่อเนื่องกับ Yeomen , พื้น และ โบเวอร์ และจุดแข็งอื่น ๆ ของเฟรมเวิร์กส่วนหน้าที่ยอดเยี่ยมนี้

ทำความเข้าใจพื้นฐาน

AngularJS คืออะไร?

AngularJS เป็นเฟรมเวิร์ก JavaScript MVC ที่พัฒนาโดย Google ซึ่งช่วยให้คุณสร้างแอปพลิเคชันฟรอนต์เอนด์ที่มีโครงสร้างดีทดสอบได้ง่ายและดูแลรักษาได้

ทำไมต้อง AngularJS?

AngularJS ขยาย HTML โดยให้คำสั่งที่เพิ่มฟังก์ชันการทำงานให้กับมาร์กอัปของคุณและช่วยให้คุณสร้างเทมเพลตไดนามิกที่มีประสิทธิภาพ นอกจากนี้คุณยังสามารถสร้างคำสั่งของคุณเองสร้างส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งเติมเต็มความต้องการของคุณและทำให้ตรรกะการจัดการ DOM ทั้งหมดเป็นนามธรรม