AngularJS การเส้นทาง
- หน้าก่อนหน้า AngularJS การกระทำอินเตอร์แอ็คทีฟ
- หน้าต่อไป AngularJS โปรแกรม
ngRoute โมดูลช่วยให้โปรแกรมของคุณเป็น Single Page Application。
สิ่งที่เรียกว่า Routing ใน AngularJS คืออะไร?
หากคุณต้องการเลื่อนไปยังหน้าเว็บต่างๆ ของโปรแกรม แต่ยังต้องการให้โปรแกรมเป็น SPA (Single Page Application) และไม่มีการโหลดหน้าเว็บอีกครั้ง คุณสามารถใช้ ngRoute โมดูล。
ngRoute โมดูลจะนำทางใช้งานของคุณไปยังหน้าเว็บต่างๆ โดยไม่ต้องโหลดโปรแกรมทั้งหมดอีกครั้ง。
ตัวอย่าง
เลื่อนไปยัง "red.htm"、"green.htm" และ "blue.htm"：
<body ng-app="myApp">
<p><a href="#/!">หน้าหลัก</a></p>
<a href="#!red">สีแดง</a>
<a href="#!green">สีเขียว</a>
<a href="#!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>
ฉันต้องการอะไร?
เพื่อที่โปรแกรมของคุณจะพร้อมสำหรับระบบทางระยะทาง，คุณจะต้อง
<script src="https://cdn.staticfile.net/angular.js/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"
});
});
โปรแกรมของคุณ config การกำหนด $routeProviderที่จะทำงานเมื่อโปรแกรมเรียกใช้ 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) {
var $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" และ "paris.htm" คือแบบ HTML ทั่วไป คุณสามารถเพิ่มความหมาย AngularJS ในส่วนต่างๆ ของแบบแผนที่เป็นส่วนทั้งหมดของแอปพลิเคชั่น AngularJS
เอกสารเหล่านี้ดูเหมือนนี้:
london.htm
<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>
paris.htm
<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>
แบบแผน
ในตัวอย่างก่อนหน้านี้ เราใช้ $routeProvider.when วิธีที่ใช้ templateUrl รายละเอียด
คุณยังสามารถใช้ รายละเอียด รายละเอียด มันอนุญาตให้คุณเขียน 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>มะนาวมีน้ำประมาณ 75%.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>มะละมิ้นมีน้ำประมาณ 95%.</p>"
});
});
วิธี otherwise
ในตัวอย่างก่อนหน้านี้ เราใช้ $routeProvider วิธี when
คุณยังสามารถใช้ otherwise วิธีเมื่อไม่มีทางเดินทางอื่นที่ตรงกับหลักฐานทั้งหมด มันจะกลายเป็นทางเดินทางเริ่มต้น
ตัวอย่าง
ถ้าไม่มีการคลิกลิงก์ "Banana" และไม่มีการคลิกลิงก์ "Tomato" โปรดบอกเขาเอง:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>มะนาวมีน้ำประมาณ 75%.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>มะละมิ้นมีน้ำประมาณ 95%.</p>"
})
.otherwise({
template : "<h1>None</h1><p>ยังไม่มีสิ่งที่ถูกเลือก</p>"
});
});
- หน้าก่อนหน้า AngularJS การกระทำอินเตอร์แอ็คทีฟ
- หน้าต่อไป AngularJS โปรแกรม
