- ทำความเข้าใจเกี่ยวกับการกำหนดเส้นทาง AngularJS
- การกำหนดค่า (Configuring) การกำหนดเส้นทาง AngularJS
- การใช้ประโยชน์จากมุมมอง (ng-view)
- พารามิเตอร์เส้นทาง (Route Parameters)
- การกำหนดเส้นทางขั้นสูงด้วย UI-Router
องค์ประกอบที่สำคัญที่สุดประการหนึ่งของการทำเว็บ Angular และทำแอพ คือการกำหนดเส้นทาง ในฐานะที่เป็นคุณลักษณะหลักของเฟรมเวิร์กโอเพ่นซอร์สไดนามิกที่พัฒนาโดย Google การกำหนดเส้นทางเป็นกลไกที่ช่วยให้คุณสามารถสร้าง Single Page Applications (SPA) SPA เหล่านี้เป็นรากฐานที่สำคัญในวิวัฒนาการของเว็บแอปพลิเคชันสมัยใหม่ นำเสนอการนำทางที่ราบรื่นและรวดเร็วไปยังส่วนต่าง ๆ ของการทำเว็บ Angular และทำแอพโดยไม่จำเป็นต้องรีเฟรชตลอดเวลา
เรามาเจาะลึกถึงหัวใจของการกำหนดเส้นทาง AngularJS และวิธีการทำเว็บ Angular และทำแอพที่มอบประสบการณ์ผู้ใช้ที่เหนือกว่า
1. ทำความเข้าใจเกี่ยวกับการกำหนดเส้นทาง AngularJS
ในบริบทของ AngularJS การกำหนดเส้นทางเป็นแนวคิดที่ช่วยให้คุณแบ่งแอปพลิเคชันหรือเว็บไซต์ของคุณออกเป็นมุมมองเชิงตรรกะและเชื่อมโยงมุมมองต่างๆ กับตัวควบคุม โดยพื้นฐานแล้วเป็นวิธีกำหนดสถานะของแอปพลิเคชัน แต่สิ่งนี้หมายความว่าอย่างไรสำหรับคุณ
เมื่อคุณทำเว็บ Angular และทำแอพ การกำหนดเส้นทางจะช่วยให้คุณสร้าง URL ต่างๆ สำหรับเนื้อหาต่างๆ ในแอปพลิเคชันของคุณได้ แต่ละ URL สอดคล้องกับมุมมองหรือสถานะที่แตกต่างกัน วิธีการนี้มีประโยชน์อย่างยิ่งใน SPA เนื่องจากช่วยให้ผู้ใช้สามารถนำทางผ่านแอปพลิเคชันได้ เช่นเดียวกับที่ทำในเว็บไซต์หลายหน้า แต่ด้วยประสบการณ์ที่ราบรื่นและโต้ตอบได้มากกว่า
2. การกำหนดค่า (Configuring) การกำหนดเส้นทาง AngularJS
หากต้องการใช้การกำหนดเส้นทางใน AngularJS คุณต้องรวม ngRoute โมดูลซึ่งให้บริการและคำสั่งการกำหนดเส้นทางและการเชื่อมโยงในรายละเอียด ขั้นแรก ให้ใส่ angular-route.js สคริปต์ในไฟล์ HTML ของคุณ:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>ถัดไป คุณเพิ่ม ngRoute การพึ่งพาในโมดูลแอปพลิเคชันของคุณ:
var app = angular.module('myApp', ['ngRoute']);ตอนนี้คุณสามารถกำหนดค่าเส้นทางโดยใช้ $routeProvider ฟังก์ชัน config() ของโมดูลของคุณ:
app.config(function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl : 'view1.html',
controller : 'View1Controller'
})
.when('/view2', {
templateUrl : 'view2.html',
controller : 'View2Controller'
})
.otherwise({
redirectTo: '/view1'
});
});ในตัวอย่างนี้ เมื่อ URL ลงท้ายด้วย ‘/view1’ AngularJS จะโหลด ‘view1.html’ และใช้ ‘View1Controller’ ในทำนองเดียวกัน ‘/view2’ จะโหลด ‘view2.html’ และ ‘View2Controller’ หาก URL ไม่ตรงกับสิ่งเหล่านี้ แอปพลิเคชันจะเปลี่ยนเส้นทางไปที่ ‘/view1’
3. การใช้ประโยชน์จากมุมมอง (ng-view)
คำสั่ง ng-view เป็นส่วนสำคัญของการกำหนดเส้นทาง AngularJS คำสั่งนี้เป็นตัวยึดตำแหน่งที่จะแสดงเนื้อหาที่เกี่ยวข้องกับเส้นทางปัจจุบัน โดยพื้นฐานแล้ว AngularJS จะแทนที่ ng-view องค์ประกอบด้วยเนื้อหาของเทมเพลตของเส้นทางปัจจุบัน ซึ่งกำหนดโดย templateUrl การ $routeProvider กำหนดค่า
สามารถใช้ คำng-viewสั่งในไฟล์ HTML หลักได้ดังนี้:
<div ng-view></div>เมื่อคุณทำเว็บ Angular และทำแอพ คุณสามารถวาง ng-view คำสั่งนี้ในส่วนใดก็ได้ของไฟล์ HTML หลักที่คุณต้องการโหลดเนื้อหาของมุมมองต่างๆ
4. พารามิเตอร์เส้นทาง (Route Parameters)
การทำเว็บ Angular และทำแอพแบบไดนามิกมักต้องมีการส่งพารามิเตอร์จากส่วนหนึ่งของแอปพลิเคชันไปยังอีกส่วนหนึ่ง การกำหนดเส้นทาง AngularJS รองรับสิ่งนี้ผ่านพารามิเตอร์เส้นทาง
ต่อไปนี้เป็นตัวอย่างของการส่งผ่านพารามิเตอร์ด้วยเส้นทาง:
app.config(function($routeProvider) {
$routeProvider
.when('/view/:id', {
templateUrl : 'view.html',
controller : 'ViewController'
})
});ในตัวอย่างข้างต้น :id เป็นพารามิเตอร์เส้นทาง คุณสามารถไปที่ ‘/view/1’ หรือ ‘/view/2’ และ ‘1’ หรือ ‘2’ จะพร้อมใช้งานเป็นพารามิเตอร์ใน ViewController:
app.controller('ViewController', function($scope, $routeParams) {
$scope.id = $routeParams.id;
});ใน ViewController เราฉีด $routeParams เพื่อเข้าถึงพารามิเตอร์เส้นทาง ขณะนี้ ตัวแปร id มีอยู่ในขอบเขตและสามารถใช้ใน ‘view.html’
5. การกำหนดเส้นทางขั้นสูงด้วย UI-Router
แม้ว่าการกำหนดเส้นทางในตัวของ AngularJS จะมีประสิทธิภาพและเหมาะสำหรับแอปพลิเคชันจำนวนมาก แต่อาจมีบางครั้งที่คุณต้องการคุณลักษณะการกำหนดเส้นทางขั้นสูงเพิ่มเติม นี่คือที่มาของ UI-Router UI-Router เป็นเฟรมเวิร์กการกำหนดเส้นทางที่ขยายได้สำหรับ AngularJS ซึ่งมีคุณสมบัติเช่นสถานะที่ซ้อนกันและมุมมองที่มีชื่อหลายรายการ
คุณอาจพบว่า UI-Router มีประโยชน์อย่างยิ่งเมื่อสร้างเว็บไซต์ด้วย Angular ที่ซับซ้อนกว่าหรือเมื่อสร้างแอปที่มีข้อกำหนดการนำทางที่ซับซ้อน
การกำหนดเส้นทางเป็นส่วนสำคัญของแอปพลิเคชัน AngularJS ใดๆ ความสามารถในการกำหนดและจัดการหลายสถานะหรือหลายมุมมองมีความสำคัญเมื่อทำเว็บ Angular และทำแอพ ช่วยให้คุณออกแบบประสบการณ์ผู้ใช้แบบอินเทอร์แอกทีฟที่ราบรื่น ซึ่งคล้ายกับการนำทางผ่านเว็บไซต์หลายหน้า ในขณะที่ยังคงความเร็วและฟังก์ชันการทำงานของแอปพลิเคชันหน้าเดียว
เมื่อคุณเจาะลึกลงไปใน AngularJS ต่อไป คุณจะค้นพบประสิทธิภาพและความยืดหยุ่นที่การกำหนดเส้นทางมีให้สำหรับโครงการพัฒนาเว็บและแอปของคุณ ไม่ว่าจะเป็นความสามารถในการกำหนดเส้นทางพื้นฐานที่มาพร้อมกับ AngularJS หรือคุณลักษณะขั้นสูงที่มีให้โดย UI-Router การกำหนดเส้นทางอย่างเชี่ยวชาญเป็นขั้นตอนสำคัญในการเดินทางของ AngularJS
ในบทความนี้ เราเพียงแค่ขีดข่วนพื้นผิวของสิ่งที่เป็นไปได้ด้วยการกำหนดเส้นทาง AngularJS เช่นเดียวกับเทคโนโลยีอื่นๆ วิธีที่ดีที่สุดในการเรียนรู้คือการลงมือทำ ดังนั้น เริ่มทำเว็บ Angular และทำแอพ ทดลองกำหนดเส้นทาง ทำผิดพลาด และเรียนรู้จากพวกเขา ด้วยเวลาและการฝึกฝน คุณจะมีความเชี่ยวชาญในการใช้ประโยชน์จากการกำหนดเส้นทาง AngularJS ให้เต็มศักยภาพ