การใช้ Modules ใน AngularJS

ใน AngularJS รองรับการทำงานในลักษณะของ Module โดยตัว Module นั้นทำหน้าที่แยกลอจิกการทำงานของ services, controllers, application และอื่นๆ นอกจากนั้นยังทำให้โคดดูสะอาด เพราะเราสามารถแยก Modules ออกเป็นไฟล์ได้ด้วย

ตัวอย่างกรณี Module อยู่ในไฟล์เดียวกับ controller

AngularJS Sample Application

    

        

            

                
Enter first name:
                

                    
                
            
            

                
Enter last name: 
                

                    
                
            
            

                
Name: 
                
{{student.fullName()}}
            
            

                
Subject:
                

                    

                        

                            

                                
Name
                                
Marks
                            
                            

                                
{{ subject.name }}
                                
{{ subject.marks }}
                            
                        
                    
                
            
        
    

ตัวอย่างกรณี Module อยู่คนละไฟล์กับ controller

    
    
    
    
    


    
AngularJS Sample Application
    

        

            

                
Enter first name:
                

                    
                
            
            

                
Enter last name: 
                

                    
                
            
            

                
Name: 
                
{{student.fullName()}}
            
            

                
Subject:
                

                    

                        

                            
Name
                            
Marks
                        
                        

                            
{{ subject.name }}
                            
{{ subject.marks }}
                        
                    
                
            
        
    

โดยที่ไฟล์ mainApp.js เก็บโคดดังนี้

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

และไฟล์ studentController.js เก็บโคดดังนี้

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Nopphanan",
      lastName: "Mayoe",
      fees:500,
      
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

ผลลัพธ์ของโคดที่ได้เหมือนกันดังรูป

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.