การกำหนดเส้นทาง AngularJS
โมดูล นี้ngRouteช่วยให้แอปพลิเคชันของคุณกลายเป็นแอปพลิเคชันหน้าเดียว
การกำหนดเส้นทางใน AngularJS คืออะไร?
หากคุณต้องการนำทางไปยังหน้าต่างๆ ในแอปพลิเคชันของคุณ แต่คุณต้องการให้แอปพลิเคชันเป็น SPA (แอปพลิเคชันหน้าเดียว) โดยไม่ต้องโหลดหน้าซ้ำ คุณสามารถใช้ngRouteโมดูลได้
ngRouteโมดูลกำหนดเส้นทางแอปพลิเคชันของคุณไปยังหน้าต่างๆ โดยไม่ต้องโหลดแอปพลิเคชันทั้งหมดซ้ำ
ตัวอย่าง:
ไปที่ "red.htm", "green.htm" และ "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
ฉันต้องการอะไร?
เพื่อให้แอปพลิเคชันของคุณพร้อมสำหรับการกำหนดเส้นทาง คุณต้องรวมโมดูลเส้นทาง AngularJS:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
จากนั้นคุณต้องเพิ่มการngRouteพึ่งพาในโมดูลแอปพลิเคชัน:
var app = angular.module("myApp", ["ngRoute"]);
ตอนนี้แอปพลิเคชันของคุณมีสิทธิ์เข้าถึงโมดูลเส้นทาง ซึ่งจัดเตรียมไฟล์$routeProvider.
ใช้$routeProviderเพื่อกำหนดค่าเส้นทางต่างๆ ในแอปพลิเคชันของคุณ:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
มันไปไหน?
แอปพลิเคชันของคุณต้องการคอนเทนเนอร์เพื่อใส่เนื้อหาที่การจัดเส้นทางให้มา
คอนเทนเนอร์นี้เป็นng-viewคำสั่ง
มีสามวิธีในการรวมng-viewคำสั่งในใบสมัครของคุณ:
ตัวอย่าง:
<div ng-view></div>
ตัวอย่าง:
<ng-view></ng-view>
ตัวอย่าง:
<div
class="ng-view"></div>
แอปพลิเคชันสามารถมีได้เพียงng-viewคำสั่งเดียว และนี่จะเป็นตัวยึดตำแหน่งสำหรับมุมมองทั้งหมดที่มีให้ในเส้นทาง
$routeProvider
ด้วย$routeProviderคุณสามารถกำหนดว่าจะแสดงหน้าใดเมื่อผู้ใช้คลิกลิงก์
ตัวอย่าง:
กำหนด$routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
กำหนด$routeProviderโดยใช้configวิธีการสมัครของคุณ งานที่ลงทะเบียนในconfigวิธีการจะดำเนินการเมื่อกำลังโหลดแอปพลิเคชัน
คอนโทรลเลอร์
คุณ ยัง$routeProviderสามารถกำหนดคอนโทรลเลอร์สำหรับ "มุมมอง" แต่ละรายการได้ด้วย
ตัวอย่าง:
เพิ่มตัวควบคุม:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"london.htm" และ "paris.htm" เป็นไฟล์ HTML ปกติ ซึ่งคุณสามารถเพิ่มนิพจน์ AngularJS ได้เช่นเดียวกับส่วน HTML อื่นๆ ของแอปพลิเคชัน AngularJS ของคุณ
ไฟล์มีลักษณะดังนี้:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
แม่แบบ
ในตัวอย่างก่อนหน้านี้ เราได้ใช้templateUrlคุณสมบัติใน
$routeProvider.whenวิธีการ
คุณยังสามารถใช้templateคุณสมบัติ ซึ่งช่วยให้คุณเขียน HTML ได้โดยตรงในค่าคุณสมบัติ และไม่อ้างอิงถึงหน้า
ตัวอย่าง:
เขียนเทมเพลต:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
วิธีอื่น
ในตัวอย่างก่อนหน้านี้ เราได้ใช้whenวิธี$routeProviderของ
คุณยังสามารถใช้otherwiseวิธีนี้ ซึ่งเป็นเส้นทางเริ่มต้นเมื่อไม่มีวิธีอื่นที่ตรงกัน
ตัวอย่าง:
หากไม่ได้คลิกลิงก์ "กล้วย" หรือ "มะเขือเทศ" ให้แจ้งให้ทราบ:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});