การใช้ Views ใน AngularJS

ใน AngularJS นั้นรองรับการทำงานในลักษณะของ Single Page Application คือจัดการทุกอย่างในหน้าจอเดียว และเพื่อการนั้นเราต้องมีการทำงานลักษณะของ Multi View ซึ่งเป็นลักษณะการที่งานที่เอาหลาย View มาอยู่ในหน้าจอเดียวกัน การที่จะทำงานในลักษณะดังกล่าวได้นั้น ใน AngularJS จะต้องใช้ ng-view directives, ng-template directives และ$routeProvider services โดยที่ :

• ng-view directives : พื้นที่ที่ใช้แสดงข้อมูล

    ...
    

• ng-template directives : ใช้สำหรับสร้าง HTML view โดยจะสร้างในลักษณะของ Script ที่ต้องมี script type เป็น text/ng-template และต้องมี script id เพื่อให้ $routeProvider ใช้อ้างอิงได้

    ...
    

• $routeProvider : $routeProvider เป็นคีย์ service ใช้ตั้งค่าพวก urls จับคู่กับ html page หรือ ng-template เพื่อแสดงผล เพื่อกำหนดค่าการแสดงผลว่าผู้ใช้คลิกที่ไหนต้องแสดงหน้าจออะไร

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.

    when('/addStudent', {
        templateUrl: 'addStudent.htm',
        controller: 'AddStudentController'
    }).

    when('/viewStudents', {
        templateUrl: 'viewStudents.htm',
        controller: 'ViewStudentsController'
    }).

    otherwise({
        redirectTo: '/addStudent'
    });

}]);

จุดที่ต้องพิจารณาจากตัวอย่างข้างบนคือ.

• $routeProvider เป็นฟังก์ชั่นที่ถูกประกาศภายใน config ของ mainApp และใช้พารามิเตอร์ชื่อเดียวกันว่า '$routeProvider'.
• $routeProvider เมื่อกำหนด url "/addStudent" ทำการจับคู่กับ "addStudent.htm". และตัว addStudent.htm ต้องมีไฟล์อยู่ที่เดียวกับหน้าหลัก ถ้าไฟล์ดังกล่าวไม่มีอยู่จริงระบบจะเรียก ng-template เพื่อเรียกใช้ id="addStudent.htm" ng-template ที่เรากำหนดไว้.
• "otherwise" ใช้สหรับเชตค่า default view.
• "controller" ค่าที่เชตเพื่อให้สอดคล้องกับ View นั้นๆ.

ตัวอย่าง

    
    
    



    
AngularJS Sample Application
    

        Add Student
        View Students
        

        
        
        
    
    

ผลลัพธ์

กรณีคลิก Add Student

กรณีคลิก View Student

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.