โครงการสาธิต AngularJS: วิธีสร้างแอปด้วย AngularJS
เผยแพร่แล้ว: 2020-09-10หากคุณกำลังเรียนรู้การพัฒนาแบบฟูลสแตก คุณต้องเคยเจอคำถามว่า “จะรันโปรเจ็กต์ AngularJS ได้อย่างไร” ไม่ต้องกังวลเพราะในบทความนี้ เราจะแชร์บทช่วยสอนโดยละเอียดเกี่ยวกับการสร้างแอปด้วย AngularJS
หลังจากเสร็จสิ้นโปรเจ็กต์นี้ คุณจะคุ้นเคยกับพื้นฐานของ AngularJS การนำไปใช้งาน และมีแอปที่ใช้งานได้ซึ่งคุณสามารถอวดให้เพื่อนๆ ของคุณได้ดู คุณสามารถบุ๊กมาร์กบทช่วยสอนนี้ได้ เนื่องจากเราได้แสดงขั้นตอนสำหรับขั้นตอนการพัฒนาต่างๆ ควบคู่ไปกับโค้ด
โปรดทราบว่าคุณควรเข้าใจโค้ดก่อนที่จะนำไปใช้ นั่นเป็นเหตุผลที่เราไม่แนะนำให้คัดลอกและวางโค้ด อย่างไรก็ตาม หากคุณรู้ว่าโค้ดแต่ละบรรทัดทำงานอย่างไร คุณสามารถคัดลอกและวางโค้ดนั้นได้อย่างอิสระ การทำความเข้าใจวิธีการทำงานของโค้ดจะช่วยให้คุณเรียนรู้ได้อย่างมีประสิทธิภาพสูงสุด
สารบัญ
AngularJS คืออะไร? บทนำสั้นๆ
ก่อนที่เราจะพูดถึงโครงการ AngularJS เรามาพูดถึงเทคโนโลยีกันก่อนดีกว่า AngularJS อนุญาตให้ผู้ใช้ขยาย HTML สำหรับแอปพลิเคชัน เป็นเฟรมเวิร์กเว็บส่วนหน้าที่ใช้ JavaScript HTML ล่าช้าในมุมมองไดนามิกสำหรับเว็บแอป และ Angular แก้ปัญหานั้น
AngularJS มีชุมชนผู้ใช้และนักพัฒนาที่เจริญรุ่งเรือง ซึ่งคุณสามารถถามคำถามและขจัดความสับสนได้ Angular มอบการเชื่อมโยงข้อมูล ตัวควบคุม และเครื่องมือที่มีประสิทธิภาพอื่นๆ แก่ผู้ใช้เพื่อปรับปรุงส่วนหน้าของหน้าเว็บ คุณจะค้นพบแนวคิดมากมายในโครงการของเราในขณะที่เราจะนำไปใช้ในบทช่วยสอนของเรา
ข้อกำหนดเบื้องต้นสำหรับโปรเจ็กต์ AngularJS สำหรับผู้เริ่มต้น
ก่อนที่คุณจะเริ่มทำงานกับโปรเจ็กต์ AngularJS คุณควรทำความคุ้นเคยกับแนวคิดต่อไปนี้:
HTML
HTML ย่อมาจาก HyperText Markup Language รับผิดชอบโครงสร้างหน้าเว็บใด ๆ และเป็นส่วนสร้างแรกสำหรับการพัฒนาเว็บ คุณควรทำความคุ้นเคยกับไวยากรณ์ องค์ประกอบ และการใช้งานของ HTML ก่อนที่คุณจะเริ่มทำงานในโครงการนี้
CSS
CSS ย่อมาจาก Cascading Style Sheets และเป็นภาษาหลักสำหรับการเพิ่มภาพลงในหน้าเว็บ มีความสำคัญพอๆ กับ HTML เพราะทำให้หน้าเว็บดูดีขึ้นและเข้าถึงได้ง่ายขึ้น แม้ว่า HTML เป็นสิ่งจำเป็นสำหรับขั้นตอนแรกของโครงการ AngularJS แต่คุณจะต้องเพิ่ม CSS เข้าไปในภายหลัง นั่นเป็นเหตุผลที่คุณควรทำความคุ้นเคยกับมันก่อนที่จะเริ่มทำงานในโครงการ AngularJS สำหรับผู้เริ่มต้น
JavaScript
AngularJS ใช้จาวาสคริปต์ การทำความคุ้นเคยกับไวยากรณ์ โค้ด และการนำไปใช้งานของ JS จะทำให้แง่มุมทางเทคนิคของ AngularJS ง่ายขึ้นสำหรับคุณเช่นกัน ตรวจสอบให้แน่ใจว่าคุณเข้าใจพื้นฐานของ JS เป็นอย่างดี ก่อนที่คุณจะเริ่มทำงานกับงานนี้
นอกเหนือจากข้อกำหนดเบื้องต้นเหล่านี้ คุณควรทำความคุ้นเคยกับพื้นฐานของ AngularJS ด้วย โครงการนี้ถือว่าคุณมีความรู้ด้าน HTML, CSS, JS และ AngularJS เมื่อเราเอามันออกไปให้พ้นทางแล้ว เรามาเริ่มกันเลย
วิธีเรียกใช้โครงการ AngularJS – บทช่วยสอน
ในบทช่วยสอนนี้ เราจะสร้างแอปฟีดกีฬาของ AngularJS แอปฟีดกีฬาจะแสดงสถิติการแข่งขันหรือเหตุการณ์ ตัวอย่างเช่น คุณสามารถสร้างแอปที่แสดงตารางคะแนนของการแข่งขันหรือตารางคะแนนของทีม IPL เราเลือกที่จะทำงานในแอพ Sports-feed เพราะไม่ต้องการการพัฒนาส่วนหลังมากนัก
HTML
ก่อนอื่นเราจะเริ่มต้นด้วยการสร้าง HTML สำหรับแอปพลิเคชันของเรา นี่คือเทมเพลตสำหรับโค้ด HTML ของเรา
<body ng-app=”F1FeederApp” ng-controller=”driversController”>
<ตาราง>
<หัว>
<tr><th colspan="4″>อันดับแชมป์นักแข่ง</th></tr>
</thead>
<tbody>
<tr ng-repeat=”driver in driversList”>
<td>{{$ดัชนี + 1}}</td>
<td>
<img src=”img/flags/{{driver.Driver.nationality}}.png” />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
</body>
คุณต้องสังเกตเห็น {{ และ }} สิ่งเหล่านี้เรียกว่านิพจน์และช่วยให้คุณดำเนินการคำนวณเพื่อคืนค่าที่ต้องการ ตัวอย่างเช่น นี่คือนิพจน์ที่ถูกต้องบางส่วน:
- {{ 2 + 2 }}
- {{ ชื่อของฉัน }}
คุณสามารถพูดได้ว่าเป็นข้อมูลโค้ดขนาดเล็กของ JavaScript อย่างไรก็ตาม จะเป็นการดีที่สุดหากคุณไม่ได้ใช้นิพจน์เพื่อใช้ตรรกะระดับสูง ในการทำเช่นนั้น คุณควรใช้คำสั่ง นิพจน์เหมาะสำหรับการใช้งานตรรกะระดับต่ำเท่านั้น งานหลักของนิพจน์คือการผูกข้อมูลแอปพลิเคชันที่จำเป็นกับ HTML
เรียนรู้: เงินเดือนนักพัฒนา HTML ในอินเดีย: สำหรับ Freshers & มีประสบการณ์
คำสั่งในหลักจรรยาบรรณของเรา
แนวคิดที่สำคัญที่สุดอย่างหนึ่งที่คุณจะค้นพบขณะทำงานในโครงการ AngularJS คือคำสั่ง คำสั่งเป็นเครื่องหมายบนองค์ประกอบ DOM เพื่อแจ้ง AngularJS ว่าต้องแนบลักษณะการทำงานเฉพาะกับองค์ประกอบแต่ละรายการ คำสั่งสามารถบอกให้ Angular ทำงานต่างๆ เช่น การแปลงองค์ประกอบ DOM และลูกของมัน แทนที่ด้วยองค์ประกอบ DOM อื่น คำสั่งที่ทรงพลังส่วนใหญ่เริ่มต้นด้วย “ng-” โดยที่ “ng” ย่อมาจาก Angular
ต่อไปนี้คือคำสั่งต่างๆ ที่เราได้ใช้ในโค้ดของเราด้านบน พร้อมกับแอปพลิเคชันเหล่านี้:
ng-app
คำสั่งนี้จะบูตแอพและกำหนดขอบเขต เป็นคำสั่งที่จำเป็นเพราะคุณสามารถมีหลายแอพใน AngularJS และมันจะบอกโปรแกรมถึงจุดเริ่มต้นและจุดสิ้นสุดของแต่ละแอพ
ng-controller
คำสั่งนี้กำหนดตัวควบคุมที่จะมีอำนาจในมุมมองของผู้ใช้ เราได้ระบุไดรเวอร์คอนโทรลเลอร์ในส่วนนี้ ซึ่งจะแสดงรายการไดรเวอร์ (รายการไดรเวอร์) ในแอปของเรา
งะ-ซ้ำ
คำสั่งนี้เป็นหนึ่งในแนวทางที่ใช้กันมากที่สุดในหมู่นักพัฒนาเชิงมุม กำหนดขอบเขตเทมเพลตระหว่างการวนซ้ำผ่านคอลเล็กชัน
Angular มีคำสั่งมากมาย และเมื่อคุณทำงานในโครงการ AngularJS เพิ่มเติมสำหรับผู้เริ่มต้น คุณจะค้นพบแอปพลิเคชันเพิ่มเติมสำหรับพวกเขา นั่นเป็นเหตุผลที่เราแนะนำให้ทำงานในโครงการต่างๆ ในขณะที่เรียนรู้ทักษะเฉพาะ
ผู้ควบคุม
การมีมุมมองจะไม่มีประโยชน์เว้นแต่เราจะเพิ่มตัวควบคุม ดังนั้น เราจะเพิ่ม driversController ที่นี่:
angular.module('F1FeederApp.controllers', [])
ตัวควบคุม ('driversController', ฟังก์ชัน ($ ขอบเขต) {
$scope.driversList = [
{
คนขับรถ: {
ให้ชื่อ: 'เซบาสเตียน',
familyName: 'เวทเทล'
},
คะแนน: 322,
สัญชาติ: “เยอรมัน”,
ตัวสร้าง: [
{ชื่อ: “กระทิงแดง”}
]
},
{
คนขับรถ: {
ให้ชื่อ: 'เฟอร์นันโด',
familyName: 'อลอนโซ่'
},
คะแนน: 207,
สัญชาติ: “สเปน”,
ตัวสร้าง: [
{ชื่อ: “เฟอร์รารี”}
]
}
];
});
ตัวแปรเฉพาะที่คุณอาจสังเกตเห็นคือ $scope เรากำลังส่งตัวแปรนี้เป็นพารามิเตอร์ไปยังคอนโทรลเลอร์ เนื่องจากจะเชื่อมโยงคอนโทรลเลอร์กับมุมมอง $scope เก็บข้อมูลทั้งหมดเพื่อใช้ในเทมเพลต และข้อมูลทั้งหมดที่คุณเพิ่มเข้าไปจะสามารถเข้าถึงได้ในมุมมอง
เราจะเพิ่มอาร์เรย์ข้อมูลแบบคงที่สำหรับตอนนี้และแทนที่ในภายหลังเมื่อเราดำเนินการในโครงการของเรา
ก่อนอื่นให้เพิ่มคอนโทรลเลอร์ลงใน app.js ซึ่งควรมีลักษณะดังนี้:
angular.module ('F1FeederApp', [
'F1FeederApp.controllers'
]);
โค้ดเล็กๆ นี้เริ่มต้นแอปของเราและลงทะเบียนโมดูลที่แอปของเราใช้ ตอนนี้เราต้องเพิ่มข้อมูลทั้งหมดนี้ลงในไฟล์ index.html ของเรา:
<!DOCTYPE html>
<html>
<head>
<title>ตัวป้อน F-1</title>
</head>
<body ng-app=”F1FeederApp” ng-controller=”driversController”>
<ตาราง>
<หัว>
<tr><th colspan="4″>อันดับแชมป์นักแข่ง</th></tr>
</thead>
<tbody>
<tr ng-repeat=”driver in driversList”>
<td>{{$ดัชนี + 1}}</td>
<td>
<img src=”img/flags/{{driver.Driver.nationality}}.png” />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
<script src="bower_components/angular/angular.js”></script>
<script src=”bower_components/angular-route/angular-route.js”></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
ในขั้นตอนนี้ คุณสามารถเริ่มแอปของคุณได้ อย่างไรก็ตาม โปรดทราบว่าคุณจะต้องดีบักแอป ขั้นตอนสำคัญในการเรียนรู้วิธีเรียกใช้โปรเจ็กต์ AngularJS คือการดีบักแอป
โหลดข้อมูลจากเซิร์ฟเวอร์
ตอนนี้เราจะเพิ่มฟังก์ชันการดึงข้อมูลสดจากเซิร์ฟเวอร์ RESTful ในแอปของเรา ในการสื่อสารกับเซิร์ฟเวอร์ HTTP AngularjS มีสองบริการคือ $http และ $resource ในโค้ดของเรา เราจะใช้ $http เนื่องจากมีนามธรรมระดับสูง เราจะสร้างบริการที่กำหนดเองเพื่อทำให้การเรียก API เซิร์ฟเวอร์ของเราเป็นนามธรรม มันจะดึงข้อมูลและเป็นตัวห่อหุ้มรอบ $http ดังนั้น เราจะเพิ่มรหัสต่อไปนี้ในไฟล์ services.js ของเรา:
angular.module('F1FeederApp.services', [])
โรงงาน ('ergastAPIservice', ฟังก์ชัน ($http) {
วาร์ ergastAPI = {};
ergastAPI.getDrivers = ฟังก์ชัน () {
ส่งคืน $http({
วิธีการ: 'JSONP'
URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
}
ส่งคืน ergastAPI;
});
ก่อนอื่นเราได้สร้างโมดูลใหม่ที่เรียกว่า F1FeederApp.services และเพิ่มบริการ ergastAPIservice โปรดทราบว่าเราได้ส่ง $http เป็นพารามิเตอร์ไปยังบริการ เราจะบอกให้ Angular เพิ่มโมดูลของเราในแอป ในการทำทั้งหมดนั้น เราต้องแทนที่โค้ดใน app.js ด้วยสิ่งต่อไปนี้:
angular.module ('F1FeederApp', [
'F1FeederApp.controllers',
'F1FeederApp.services'
]);
เราจะต้องแก้ไข controller.js เล็กน้อยและเพิ่ม ergastAPIservice ในรูปแบบของการพึ่งพา จากนั้นขั้นตอนนี้จะเสร็จสิ้น:
angular.module('F1FeederApp.controllers', [])
ตัวควบคุม ('driversController', ฟังก์ชัน ($ ขอบเขต, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
ergastAPIservice.getDrivers ().success (ฟังก์ชัน (การตอบสนอง) {
//ขุดลงไปในคำตอบเพื่อรับข้อมูลที่เกี่ยวข้อง
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
หากต้องการตรวจสอบว่ารหัสใช้งานได้หรือไม่ ให้โหลดแอปพลิเคชันของคุณซ้ำ คุณจะสังเกตเห็นว่าเราไม่ได้แก้ไขเทมเพลต แต่รวมเฉพาะตัวแปร nameFilter ในส่วนถัดไป เราจะใช้ตัวแปรนั้น:
ใช้ตัวกรอง
จนถึงตอนนี้ เราได้เพิ่มตัวควบคุมการทำงานลงในแอปของเราแล้ว ตอนนี้เราจะเพิ่มฟังก์ชันการทำงานเพิ่มเติมด้วยการเพิ่มแถบป้อนข้อความสำหรับค้นหาข้อความ คุณสามารถรวมโค้ดต่อไปนี้ใน index.html ของคุณใต้แท็ก <body>:
<input type=”text” ng-model=”nameFilter” placeholder=”Search…”/>
เรากำลังใช้คำสั่ง "ng-model" ที่นี่ มันจะผูกฟิลด์ข้อความกับตัวแปร “$scope.nameFilter” คำสั่งช่วยให้แน่ใจว่าค่าตัวแปรของเรายังคงอัปเดตตามค่าอินพุต มาบอก "ng-repeat" ว่าต้องกรองอาร์เรย์ "driversList" ด้วยค่าที่มีอยู่ใน "nameFilter" ก่อนจึงจะส่งออกข้อมูล:
<tr ng-repeat=”driver in driversList | ตัวกรอง: nameFilter”>
เรากำลังดำเนินการผูกข้อมูลสองแบบที่แตกต่างกันที่นี่ อันดับแรก เมื่อใดก็ตามที่คุณป้อนค่าในช่องค้นหา Angular จะทำให้แน่ใจว่าตัวแปร $scope.nameFilter ได้รับการอัปเดตตามนั้น ประการที่สอง ทันทีที่ nameFilter อัปเดต ng-repeat คำสั่งที่สองที่แนบมาจะได้รับค่าใหม่และการอัปเดต
สมมติว่าเราต้องการกรองโดยใช้ Driver.familyName และ Driver.givenName เท่านั้น เราจะต้องเพิ่ม driversController ด้านล่าง $scope.driversList = [] ดังนี้:
$scope.searchFilter = ฟังก์ชั่น (ไดรเวอร์) {
var คำสำคัญ = ใหม่ RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || keyword.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);
};
เพื่อจบกระบวนการนี้ เราต้องอัปเดตบรรทัดด้วยคำสั่ง ng-repeat เท่านั้น:
<tr ng-repeat=”driver in driversList | ตัวกรอง: searchFilter”>
คุณสามารถโหลดแอปซ้ำเพื่อดูว่ารหัสทำงานหรือไม่ แอพของเราตอนนี้มีฟังก์ชั่นการค้นหา ต่อไปเราจะเพิ่มเส้นทาง
การเพิ่มเส้นทาง
เราต้องสร้างหน้าที่แสดงรายละเอียดของไดรเวอร์ของเรา หน้าดังกล่าวควรอนุญาตให้ผู้ใช้คลิกที่คนขับและดูข้อมูลอาชีพของตนได้ เราจะเริ่มต้นด้วยการเพิ่มบริการ $routeProvider ในไฟล์ app.js จะช่วยให้คุณจัดการกับเส้นทางการสมัครต่างๆ ได้อย่างถูกต้อง
ตอนนี้เราจะเพิ่มเส้นทางสำหรับข้อมูลนักแข่งและอีกเส้นทางสำหรับป้ายบอกคะแนนแชมป์เปี้ยน ตอนนี้ไฟล์ app.js ของเรามีลักษณะดังนี้:
angular.module ('F1FeederApp', [
'F1FeederApp.services',
'F1FeederApp.controllers',
'เส้นทางง'
])
config(['$routeProvider', ฟังก์ชัน($routeProvider) {
$routeProvider.
เมื่อ (“/drivers”, {templateUrl: “partials/drivers.html”, ตัวควบคุม: “driversController”})
เมื่อ (“/drivers/:id”, {templateUrl: “partials/driver.html”, ตัวควบคุม: “driverController”})
มิฉะนั้น ({redirectTo: '/drivers'});
}]);
หลังจากเพิ่มรหัสนี้แล้ว เมื่อผู้ใช้ไปที่ https://domain/#drivers ก็จะโหลด driversController และค้นหามุมมองบางส่วน หากคุณได้ติดตามบทช่วยสอนนี้มาจนถึงตอนนี้ คุณต้องสังเกตเห็นสิ่งหนึ่ง เราไม่ได้เพิ่มมุมมองบางส่วน! ดังนั้นขั้นตอนต่อไปของเราคือการเพิ่มแอปพลิเคชันของเรา:
การเพิ่มมุมมองบางส่วน
คุณลักษณะที่ยอดเยี่ยมของ AngularJS คือช่วยให้คุณสามารถผูกเส้นทางต่างๆ กับมุมมองและตัวควบคุมต่างๆ อย่างไรก็ตาม เพื่อให้ AngularJS ดำเนินการนี้ คุณควรทราบว่าสามารถแสดงมุมมองบางส่วนเหล่านั้นได้ที่ใด
ดังนั้นเราจึงใช้คำสั่ง ng-view และเพิ่มลงในไฟล์ index.html ของเรา:
<!DOCTYPE html>
<html>
<head>
<title>ตัวป้อน F-1</title>
</head>
<body ng-app=”F1FeederApp”>
<ng-view></ng-view>
<script src="bower_components/angular/angular.js”></script>
<script src=”bower_components/angular-route/angular-route.js”></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
เนื่องจากการใช้งานนี้ เมื่อเรานำทางผ่านเส้นทางของแอป Angular จะโหลดมุมมองที่เกี่ยวข้องและแสดงผล มันจะกำหนดตำแหน่งสำหรับการแสดงผลผ่านแท็ก <ng-view> ตอนนี้ เราต้องสร้างไฟล์ชื่อ partials/drivers.html เท่านั้น และใส่โค้ด HTML ของตารางแชมป์เปี้ยนที่นั่น ขณะที่เราดำเนินการ เราจะเชื่อมโยงเส้นทางข้อมูลผู้ขับขี่กับชื่อคนขับด้วย:
<input type=”text” ng-model=”nameFilter” placeholder=”Search…”/>
<ตาราง>
<หัว>
<tr><th colspan="4″>อันดับแชมป์นักแข่ง</th></tr>
</thead>
<tbody>
<tr ng-repeat=”driver in driversList | ตัวกรอง: searchFilter”>
<td>{{$ดัชนี + 1}}</td>
<td>
<img src=”img/flags/{{driver.Driver.nationality}}.png” />
<a href=”#/drivers/{{driver.Driver.driverId}}”>
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</a>
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
เรากำลังเข้าสู่ขั้นตอนสุดท้ายของการพัฒนา หน้าข้อมูลไดรเวอร์ของเราต้องการข้อมูล นั่นคือสิ่งที่เราจะเพิ่มเข้าไป ในการทำเช่นนั้น เราต้องเขียนโค้ดต่อไปนี้ใน services.js:
angular.module('F1FeederApp.services', [])
.factory('ergastAPIservice', ฟังก์ชัน ($http) {
วาร์ ergastAPI = {};
ergastAPI.getDrivers = ฟังก์ชัน () {
ส่งคืน $http({
วิธีการ: 'JSONP'
URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
}
ergastAPI.getDriverDetails = ฟังก์ชัน (id) {
ส่งคืน $http({
วิธีการ: 'JSONP'
URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
});
}
ergastAPI.getDriverRaces = ฟังก์ชัน (id) {
ส่งคืน $http({
วิธีการ: 'JSONP'
URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
});
}
ส่งคืน ergastAPI;
});
ตอนนี้เราจะแก้ไข controllers.js เรามุ่งหวังที่จะเชื่อมต่อ ID ของผู้ขับขี่ทุกรายเข้ากับบริการ ดังนั้นการดึงข้อมูลของเราจึงยังคงเฉพาะสำหรับไดรเวอร์ที่ร้องขอ
angular.module('F1FeederApp.controllers', [])
/* ตัวควบคุมไดรเวอร์ */
ตัวควบคุม ('driversController', ฟังก์ชัน ($ ขอบเขต, ergastAPIservice) {
$scope.nameFilter = null;
$scope.driversList = [];
$scope.searchFilter = ฟังก์ชั่น (ไดรเวอร์) {
var re = ใหม่ RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
ergastAPIservice.getDrivers ().success (ฟังก์ชัน (การตอบสนอง) {
//ขุดลงไปในการตอบสนองเพื่อรับข้อมูลที่เกี่ยวข้อง
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
})
/* ตัวควบคุมไดรเวอร์ */
ตัวควบคุม ('driverController', ฟังก์ชัน ($ ขอบเขต, $ routeParams, ergastAPIservice) {
$scope.id = $routeParams.id;
$scope.races = [];
$scope.driver = null;
ergastAPIservice.getDriverDetails ($ scope.id).success (ฟังก์ชัน (การตอบสนอง) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
});
ergastAPIservice.getDriverRaces ($ scope.id).success (ฟังก์ชัน (การตอบสนอง) {
$scope.races = response.MRData.RaceTable.Races;
});
});
โปรดทราบว่าเราได้เพิ่มบริการ $routePrams ในตัวควบคุมไดรเวอร์ จะช่วยให้คุณเข้าถึงพารามิเตอร์ของ URL และเป็นขั้นตอนที่สำคัญ
ตอนนี้ เราจะสร้างไฟล์ชื่อ partials/driver.html เนื่องจากเราได้เพิ่มข้อมูลที่จำเป็นทั้งหมดแล้ว และต้องจัดการกับส่วนที่เหลือของมุมมองบางส่วนเท่านั้น เราใช้คำสั่ง ng-show ในโค้ดด้านล่าง คำสั่งนี้จะช่วยให้แน่ใจว่าแอปของเราแสดงเฉพาะองค์ประกอบ HTML ที่จำเป็นเมื่อนิพจน์เป็นจริง ซึ่งหมายความว่าแม้ว่าเงื่อนไขจะเป็นโมฆะ แอปก็จะไม่แสดงองค์ประกอบ HTML นี่คือรหัส:
<section id="main">
<a href=”./#/drivers”><- กลับไปที่รายการไดรเวอร์</a>
<nav id=”secondary” class=”main-nav”>
<div class="driver-picture">
<div class="avatar">
<img ng-show=”driver” src=”img/drivers/{{driver.Driver.driverId}}.png” />
<img ng-show=”driver” src=”img/flags/{{driver.Driver.nationality}}.png” /><br/>
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</div>
</div>
<div class="driver-status">
ประเทศ: {{driver.Driver.nationality}} <br/>
ทีม: {{driver.Constructors[0].name}}<br/>
เกิด: {{driver.Driver.dateOfBirth}}<br/>
<a href=”{{driver.Driver.url}}” target=”_blank”>ชีวประวัติ</a>
</div>
</nav>
<div class="main-content">
<table class="result-table">
<หัว>
<tr><th colspan=”5″>ผลลัพธ์ของสูตร 1 2013</th></tr>
</thead>
<tbody>
<tr>
<td>รอบ</td> <td>กรังปรีซ์</td> <td>ทีม</td> <td>กริด</td> <td>การแข่งขัน</td>
</tr>
<tr ng-repeat=”race in races”>
<td>{{race.round}}</td>
<td><img src=”img/flags/{{race.Circuit.Location.country}}.png” />{{race.raceName}}</td>
<td>{{race.Results[0].Constructor.name}}</td>
<td>{{race.Results[0].grid}}</td>
<td>{{race.Results[0].position}}</td>
</tr>
</tbody>
</table>
</div>
</section>
ขั้นตอนสุดท้าย (CSS)
ถึงตอนนี้ คุณมีแอปตัวป้อนกีฬาที่ทำงานได้อย่างถูกต้อง ดังที่เราได้พูดคุยกันก่อนหน้านี้ CSS มุ่งเน้นที่การทำให้หน้าเว็บดูน่าสนใจ ดังนั้นในขั้นตอนนี้ คุณจะมีอิสระในการเพิ่ม CSS ให้กับแอปของคุณและปรับปรุงรูปลักษณ์ คุณสามารถเปลี่ยนแบบอักษร เปลี่ยนพื้นหลัง เพิ่มรูปภาพต่างๆ หรือทำให้การเปลี่ยนบางส่วนเคลื่อนไหวเพื่อปรับปรุง UI ของแอปพลิเคชัน ส่วนทางเทคนิคของโครงการของเราเสร็จสมบูรณ์แล้ว
ชำระเงิน: เงินเดือนนักพัฒนาเต็มกองในอินเดีย
เรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนา
ตอนนี้คุณได้สร้างแอป AngularJS แล้ว! เราหวังว่าคุณจะสนุกกับการกวดวิชานี้ จำไว้
Angular เป็นเฟรมเวิร์กที่ค่อนข้างแข็งแกร่งพร้อมฟังก์ชันมากมาย รายการในบทความนี้มีน้อยมากเมื่อเปรียบเทียบกับสิ่งที่ Angular สามารถทำได้ เมื่อคุณทำงานในโครงการ AngularJS ขั้นสูง คุณจะค้นพบความสามารถที่ทรงพลังมากขึ้น
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาแบบฟูลสแตก เราขอแนะนำให้คุณไปที่บล็อกของเรา คุณจะพบแหล่งข้อมูลมากมายในด้านต่างๆ ของสาขานี้ นี่คือบางส่วนสำหรับการอ่านเพิ่มเติม:
- 10 สุดยอดทักษะในการเป็นนักพัฒนาแบบฟูลสแตก
- ทำไมต้องเป็นนักพัฒนาแบบฟูลสแตก?
- จะเป็นผู้พัฒนาซีรีส์ฟูลสแตกได้อย่างไร
ในทางกลับกัน คุณยังสามารถเรียนหลักสูตรการพัฒนาแบบฟูลสแตกและเรียนรู้จากผู้เชี่ยวชาญในอุตสาหกรรมผ่านโครงการ วิดีโอ และการมอบหมายงาน
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาแบบฟูลสแตก โปรดดูประกาศนียบัตร PG ของ upGrad & IIIT-B ด้านการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการมากกว่า 9 โครงการ และการมอบหมายงาน , สถานะศิษย์เก่า IIIT-B, โครงการหลักที่นำไปปฏิบัติได้จริง & ความช่วยเหลือด้านงานกับบริษัทชั้นนำ