AngularJS รองรับแอปพลิเคชันหน้าเดียวผ่านหลายมุมมองในหน้าเดียว ในการทำเช่นนี้ AngularJS ให้คำสั่ง NG-View และ NG-Template รวมถึงบริการ $ RouteProvider
ng-view
แท็ก NG-View เพียงสร้างตัวยึดตำแหน่งซึ่งเป็นมุมมองที่สอดคล้องกัน (มุมมอง HTML หรือ NG-Template) ที่สามารถวางได้ตามการกำหนดค่า
ใช้
กำหนด DIV และ NG-View ในโมดูลหลัก
<div ng-app = "mainapp"> ... <div ng-view> </div> </div>
Ng-template
คำสั่ง NG-Template ใช้เพื่อสร้างมุมมอง HTML โดยใช้แท็กสคริปต์ มันมีคุณสมบัติ "ID" สำหรับมุมมองคอนโทรลเลอร์ที่แมปโดย $ routeProvider
ใช้
กำหนดประเภทเป็นบล็อกสคริปต์ของ NG-template ในโมดูลหลัก
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addstudent.html"> <h2> เพิ่มนักเรียน </h2> {{message}} </script> </div>$ RouteProvider
$ RouteProvider คือการกำหนดค่าของ URL กลุ่มแผนที่ไว้ในหน้า HTML ที่สอดคล้องกันหรือ NG-Template และแนบบริการที่ใช้คีย์เดียวกันกับคอนโทรลเลอร์
ใช้
กำหนดประเภทเป็นบล็อกสคริปต์ของ NG-template ในโมดูลหลัก
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addstudent.html"> <h2> เพิ่มนักเรียน </h2> {{message}} </script> </div>ใช้
กำหนดบล็อกสคริปต์ของโมดูลหลักและตั้งค่าการกำหนดค่าการกำหนดเส้นทาง
var mainapp = angular.module ("mainapp", ['ngroute']); mainapp.config (['$ routeprovider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/addstudent', {templateurl: 'addstudent.html', คอนโทรลเลอร์: 'addstudentcontroller'}) 'ViewstudentsController'})ต่อไปนี้เป็นประเด็นสำคัญที่ต้องพิจารณาในตัวอย่างข้างต้น
$ RouteProvider ถูกกำหนดเป็นฟังก์ชั่นการกำหนดค่าของโมดูล MainApp โดยใช้คำหลักเป็น '$ routeProvider';
$ routeProvider เมื่อมีการกำหนด URL "/addstudent" แผนที่ไปที่ "addstudent.html" addstudent.html ควรมีอยู่บนเส้นทางเดียวกับหน้า HTML หลัก หากไม่ได้กำหนดหน้า HTM แล้ว NG-Template จะถูกใช้โดย id = "addstudent.html" เราใช้ NG-template;
"มิฉะนั้น" คือมุมมองเริ่มต้นที่ใช้ในการตั้งค่า;
"Conlloer" ใช้เพื่อตั้งค่าคอนโทรลเลอร์ที่สอดคล้องกันของมุมมอง;
ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<html> <head> <title> มุมมอง js เชิงมุม </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"> </script> <body> <h2> แอปพลิเคชันตัวอย่าง "addstud </h2> <p> <a href = "#viewstudents"> ดูนักเรียน </a> </p> <div ng-view> </div> <script type = "text/ng-template" id = "addstudent.html"> <h2> เพิ่มนักเรียน </h2> {{message} <h2> ดูนักเรียน </h2> {{message}} </script> <script> var mainapp = angular.module ("mainapp", ['ngroute']); mainapp.config (['$ routeprovider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/addstudent', {templateurl: 'addstudent.html', คอนโทรลเลอร์: 'addstudentcontroller'}) 'ViewstudentsController'}) MainApp.Controller ('AddstudentController', ฟังก์ชั่น ($ scope) {$ scope.message = "หน้านี้จะถูกใช้เพื่อแสดงเพิ่มรูปแบบนักเรียน";}); MainApp.Controller ('ViewStudentsController', ฟังก์ชั่น ($ scope) {$ scope.message = "หน้านี้จะถูกใช้เพื่อแสดงนักเรียนทั้งหมด";}); </script> </body> </html>ผลลัพธ์
เปิด textangularjs.html ในเว็บเบราว์เซอร์ ผลลัพธ์มีดังนี้:
ข้างต้นเป็นการรวบรวมข้อมูลมุมมอง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!