AngularJS ng-view พร้อมตัวอย่าง: วิธีการใช้ View

ทุกวันนี้ทุกคนคงเคยได้ยินเกี่ยวกับ “Single Page Applications” เว็บไซต์ชื่อดังหลายแห่ง เช่น Gmail ใช้แนวคิดของ Single Page Applications (SPA)

SPA เป็นแนวคิดที่เมื่อผู้ใช้ร้องขอหน้าอื่น แอปพลิเคชันจะไม่นำทางไปยังหน้านั้น แต่จะแสดงมุมมองของหน้าใหม่ภายในหน้าที่มีอยู่แทน

มันให้ความรู้สึกกับผู้ใช้ว่าเขาไม่เคยออกจากเพจเลยตั้งแต่แรก เช่นเดียวกันนี้สามารถทำได้ใน Angular ด้วยความช่วยเหลือของ Views ร่วมกับ Routes

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้-

• มุมมองคืออะไร?
• คำสั่ง ng-view ใน AngularJS
• วิธีการใช้ ng-view ใน AngularJS พร้อมตัวอย่าง

มุมมองคืออะไร?

มุมมองคือเนื้อหาที่แสดงต่อผู้ใช้ โดยพื้นฐานแล้วสิ่งที่ผู้ใช้ต้องการเห็น ตามมุมมองของแอปพลิเคชันนั้นจะแสดงให้ผู้ใช้เห็น

การรวมกันของมุมมองและเส้นทางช่วยในการแบ่งแอปพลิเคชันในมุมมองแบบลอจิคัลและเชื่อมโยงมุมมองที่แตกต่างกันกับตัวควบคุม

การแบ่งแอปพลิเคชันออกเป็นมุมมองต่างๆ และการใช้การกำหนดเส้นทางเพื่อโหลดส่วนต่างๆ ของแอปพลิเคชันช่วยในการแบ่งแอปพลิเคชันตามตรรกะและทำให้สามารถจัดการได้มากขึ้น

สมมติว่าเรามีแอปพลิเคชันการสั่งซื้อ ซึ่งลูกค้าสามารถดูคำสั่งซื้อและสั่งซื้อใหม่ได้

แผนภาพด้านล่างและคำอธิบายที่ตามมาสาธิตวิธีทำให้แอปพลิเคชันนี้เป็นแอปพลิเคชันหน้าเดียว

ตอนนี้ แทนที่จะมีสองหน้าเว็บที่แตกต่างกัน หน้าหนึ่งสำหรับ "ดูคำสั่งซื้อ" และอีกหน้าหนึ่งสำหรับ "คำสั่งซื้อใหม่" AngularJSคุณจะสร้างมุมมองที่แตกต่างกันสองรายการที่เรียกว่า "ดูคำสั่งซื้อ" และ "คำสั่งซื้อใหม่" ในหน้าเดียวกันแทน

นอกจากนี้เรายังจะมีลิงก์อ้างอิง 2 ลิงก์ในแอปพลิเคชันของเราชื่อ #show และ #new

• ดังนั้นเมื่อแอปพลิเคชันไปที่ MyApp/#show ก็จะแสดงมุมมอง View Order ขณะเดียวกันก็จะไม่ออกจากหน้า มันจะรีเฟรชส่วนของหน้าที่มีอยู่ด้วยข้อมูล "ดูคำสั่งซื้อ" เช่นเดียวกับมุมมอง "คำสั่งซื้อใหม่"

ด้วยวิธีนี้ การแยกแอปพลิเคชันออกเป็นมุมมองต่างๆ จะกลายเป็นเรื่องง่ายขึ้น เพื่อให้สามารถจัดการได้ง่ายขึ้น และทำการเปลี่ยนแปลงได้ง่ายทุกเมื่อที่ต้องการ

และแต่ละมุมมองจะมีตัวควบคุมที่เกี่ยวข้องเพื่อควบคุมตรรกะทางธุรกิจสำหรับฟังก์ชันการทำงานนั้น

คำสั่ง ng-view ใน AngularJS

“ngView” เป็นคำสั่งที่เสริมบริการ $route โดยรวมเทมเพลตที่แสดงผลของเส้นทางปัจจุบันไว้ในไฟล์เลย์เอาต์หลัก (index.html)

ทุกครั้งที่เส้นทางปัจจุบันเปลี่ยนแปลง มุมมองจะรวมการเปลี่ยนแปลงตามการกำหนดค่าของบริการ $route โดยไม่ต้องเปลี่ยนหน้าเอง

เราจะมาปกปิด เส้นทาง ในบทถัดไป เราจะเน้นที่การเพิ่มมุมมองหลาย ๆ มุมมองลงในแอปพลิเคชันของเรา

ด้านล่างนี้คือผังงานทั้งหมดเกี่ยวกับวิธีการทำงานของกระบวนการทั้งหมด เราจะอธิบายรายละเอียดสำหรับทุกกระบวนการในตัวอย่างของเราที่แสดงด้านล่าง

วิธีการใช้ ng-view ใน AngularJS

ลองมาดูตัวอย่างว่าเราสามารถนำ ng-view ใน AngularJS ไปใช้ได้อย่างไร ในตัวอย่างของเรา เราจะนำเสนอสองตัวเลือกให้กับผู้ใช้

• หนึ่งคือการแสดง "กิจกรรม" และอีกอย่างคือการเพิ่ม "กิจกรรม"
• เมื่อผู้ใช้คลิกที่ลิงก์เพิ่มกิจกรรม พวกเขาจะเห็นมุมมองสำหรับ "เพิ่มกิจกรรม" และเช่นเดียวกันสำหรับ "แสดงกิจกรรม"

โปรดทำตามขั้นตอนด้านล่างเพื่อรับตัวอย่างนี้

ขั้นตอน 1) รวมไฟล์เชิงมุมเป็นการอ้างอิงสคริปต์

ไฟล์เส้นทางนี้จำเป็นเพื่อใช้ฟังก์ชันการมีหลายเส้นทางและมุมมอง ไฟล์นี้สามารถดาวน์โหลดได้จากเว็บไซต์ angularJS

ขั้นตอน 2) เพิ่มแท็ก href และแท็ก div

ในขั้นตอนนี้

1. เพิ่มแท็ก href ซึ่งจะแสดงลิงก์ไปยัง "การเพิ่มกิจกรรมใหม่" และ "การแสดงกิจกรรม"
2. นอกจากนี้ ให้เพิ่มแท็ก div ด้วยคำสั่ง ng-view ซึ่งจะแสดงถึงมุมมอง ซึ่งจะทำให้สามารถแทรกมุมมองที่เกี่ยวข้องเมื่อใดก็ตามที่ผู้ใช้คลิกที่ "ลิงก์เพิ่มกิจกรรมใหม่" หรือ "ลิงก์แสดงกิจกรรม"

ขั้นตอน 3) ในแท็กสคริปต์สำหรับ Angular JS ของคุณ ให้เพิ่มโค้ดดังต่อไปนี้

อย่าเพิ่งกังวลเกี่ยวกับการกำหนดเส้นทาง เราจะพูดถึงเรื่องนี้ในบทถัดไป ตอนนี้มาดูโค้ดสำหรับมุมมองกันก่อน

1. โค้ดส่วนนี้หมายความว่าเมื่อผู้ใช้คลิกที่แท็ก href “NewEvent” ซึ่งถูกกำหนดไว้ในแท็ก div ก่อนหน้านี้ มันจะไปที่หน้าเว็บ add_event.html และจะนำโค้ดจากที่นั่นไปใส่ลงในมุมมอง ประการที่สอง สำหรับการประมวลผลตรรกะทางธุรกิจสำหรับมุมมองนี้ ให้ไปที่ “AddEventController”
2. โค้ดส่วนนี้หมายความว่าเมื่อผู้ใช้คลิกที่แท็ก href “DisplayEvent” ซึ่งถูกกำหนดไว้ในแท็ก div ก่อนหน้านี้ มันจะไปที่หน้าเว็บ show_event.html นำโค้ดจากตรงนั้นไปใส่ในมุมมอง ประการที่สอง สำหรับการประมวลผลตรรกะทางธุรกิจสำหรับมุมมองนี้ ให้ไปที่ "ShowDisplayController"
3. โค้ดส่วนนี้หมายความว่ามุมมองเริ่มต้นที่แสดงต่อผู้ใช้คือมุมมอง DisplayEvent

   

ขั้นตอน 4) เพิ่มตัวควบคุมเพื่อประมวลผลตรรกะทางธุรกิจ

ถัดไปคือการเพิ่มตัวควบคุมเพื่อประมวลผลตรรกะทางธุรกิจสำหรับทั้งฟังก์ชัน "DisplayEvent" และ "Add New Event"

เราเพียงแค่เพิ่มตัวแปรข้อความให้กับแต่ละอ็อบเจ็กต์ขอบเขตสำหรับตัวควบคุมแต่ละตัว ข้อความนี้จะแสดงขึ้นเมื่อแสดงมุมมองที่เหมาะสมแก่ผู้ใช้

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

ขั้นตอน 5) สร้างเพจชื่อ add_event.html และ show_event.html

ถัดไป สร้างเพจชื่อ add_event.html และ show_event.html ทำให้หน้าต่างๆ เรียบง่าย ดังที่แสดงด้านล่าง

ในกรณีของเรา หน้า add_event.html จะมีแท็กส่วนหัวพร้อมกับข้อความ "เพิ่มกิจกรรมใหม่" และมีนิพจน์เพื่อแสดงข้อความ "นี่คือการเพิ่มกิจกรรมใหม่"

ในทำนองเดียวกัน หน้า show_event.html จะมีแท็กส่วนหัวสำหรับเก็บข้อความ “แสดงกิจกรรม” และยังมีนิพจน์ข้อความเพื่อแสดงข้อความ “นี่คือการแสดงกิจกรรม”

ค่าของตัวแปรข้อความจะถูกฉีดตามคอนโทรลเลอร์ที่แนบมากับมุมมอง

สำหรับแต่ละหน้า เราจะเพิ่มตัวแปรข้อความ ซึ่งจะถูกแทรกจากตัวควบคุมแต่ละตัวตามลำดับ

• add_event.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>
	
{{message}}

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

จากผลลัพธ์เราจะสังเกตได้ 2 สิ่ง

1. แถบที่อยู่จะแสดงมุมมองปัจจุบันที่กำลังแสดงอยู่ ดังนั้น เนื่องจากมุมมองเริ่มต้นคือการแสดงหน้าจอแสดงเหตุการณ์ แถบที่อยู่จึงแสดงที่อยู่สำหรับ "DisplayEvent"
2. ส่วนนี้คือมุมมองที่ถูกสร้างขึ้นโดยอัตโนมัติ เนื่องจากมุมมองเริ่มต้นคือมุมมองแสดงเหตุการณ์ จึงทำให้ส่วนนี้แสดงให้ผู้ใช้เห็น

ตอนนี้ให้คลิกที่ลิงก์ Add New Event ในเพจที่แสดง คุณจะได้รับผลลัพธ์ด้านล่าง

Output:

1. แถบที่อยู่จะแสดงว่ามุมมองปัจจุบันคือมุมมอง "เพิ่มกิจกรรมใหม่" โปรดสังเกตว่าคุณจะยังคงอยู่ในหน้าแอปพลิเคชันเดียวกัน คุณจะไม่ถูกนำไปยังหน้าการสมัครใหม่
2. ส่วนนี้คือมุมมอง และตอนนี้จะเปลี่ยนเพื่อแสดง HTML สำหรับฟังก์ชัน "เพิ่มกิจกรรมใหม่" ตอนนี้ในส่วนนี้ แท็กส่วนหัว "เพิ่มกิจกรรมใหม่" และข้อความ "นี่คือการเพิ่มกิจกรรมใหม่" จะแสดงให้ผู้ใช้เห็น