AngularJS - Modüller

AngularJS, modüler yaklaşımı destekler. Modüller, hizmetler, denetleyiciler, uygulama vb. Gibi mantığı koddan ayırmak ve kodu temiz tutmak için kullanılır. Modülleri ayrı js dosyalarında tanımlıyoruz ve modül.js dosyasına göre adlandırıyoruz. Aşağıdaki örnekte, iki modül oluşturacağız -

Application Module - kontrolör (ler) ile bir uygulamayı başlatmak için kullanılır.
Controller Module - denetleyiciyi tanımlamak için kullanılır.

Uygulama Modülü

İşte aşağıdaki kodu içeren mainApp.js adlı bir dosya -

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

Burada bir başvuru beyan ediyoruz mainAppaçısal modül işlevini kullanarak modül ve ona boş bir dizi iletir. Bu dizi genellikle bağımlı modülleri içerir.

Denetleyici Modülü

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      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;
      }
   };
});

Burada bir kontrolör ilan ediyoruz studentController modülü mainApp.controller işlevini kullanarak.

Modülleri Kullan

<div ng-app = "mainApp" ng-controller = "studentController">
   ...
   <script src = "mainApp.js"></script>
   <script src = "studentController.js"></script>
	
</div>

Burada, ng-app yönergesini kullanan uygulama modülünü ve ngcontroller yönergesini kullanan denetleyiciyi kullanıyoruz. MainApp.js ve studentController.js'yi ana HTML sayfasında içe aktarıyoruz.

Misal

Aşağıdaki örnek, yukarıda belirtilen tüm modüllerin kullanımını göstermektedir.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Modules</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "/angularjs/src/module/mainApp.js"></script>
      <script src = "/angularjs/src/module/studentController.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            <tr>
               <td>Name: </td>
               <td>{{student.fullName()}}</td>
            </tr>
            <tr>
               <td>Subject:</td>
               
               <td>
                  <table>
                     <tr>
                        <th>Name</th>
                        <th>Marks</th>
                     </tr>
                     <tr ng-repeat = "subject in student.subjects">
                        <td>{{ subject.name }}</td>
                        <td>{{ subject.marks }}</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
      
   </body>
</html>

mainApp.js

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

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      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;
      }
   };
});

Çıktı

TextAngularJS.htm dosyasını bir web tarayıcısında açın. Sonucu görün.