สิ่งที่ควรรู้

ในส่วนนี้เราจะมารู้จักกับ Angular UI Router กันนะครับ

UI Router คือ อะไร ?

UI Router เป็น library ตัวหนึ่งของ AngularJS เป็น Routing Framework

ที่ช่วยในการจัดการองค์ประกอบต่างๆ ในหน้าเว็บให้อยู่ในรูปแบบ State Machine

ทำไมถึงใช้ UI Router ในเมื่อมี $route ของ AngularJS อยู่แล้ว

โดย UI Router จะต่างกับ $route ของ AngularJS ที่จัดการเป็นลักษณะของ URL Route เพียงอย่างเดียว

และ UI Router ดีกว่าตรงที่สามารถกำหนด view ที่เป็นลักษณะ nested view ได้และสามารถใช้ view ได้หลาย view ในหน้าเดียว

ต่างกับ $route ที่สามารถกำหนดได้แค่ view ในระดับเดียวกัน

การเตรียมพร้อมก่อนใช้

ดาวห์โหลด Angular UI Router

สามารถดาว์โหลด angular-ui-router.min.js ได้จาก https://github.com/angular-ui/ui-router

หรือที่นี่ angular-ui-router.js

โดยเราจะวางไฟล์ angular-ui-router.min.js ไว้ที่ js/lib

วิธีเรียกใช้ UI Router

ในไฟล์ html ให้ทำการเรียกใช้ angular-ui-router.js

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
		...
		<!--AngularJS Javascript -->
		<script src="js/lib/angular.min.js"></script>
		<!--AngularUI Router Library -->
		<script src="js/lib/angular-ui-router.js"></script>
		<script src="js/app.js"></script>
    </body>
</html>

ในไฟล์ app.js ที่เก็บ module ของ AngularJS ไว้ให้ทำการเพิ่ม Dependency Injection เข้าไปดังนี้

angular.module('application', ['ui.router']);