English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Modules
  • 时间：2024-12-22

AngularJS - Modules

Previous Page Next Page  

AngularJS supports modular approach. Modules are used to separate logic such as services, controllers, apppcation etc. from the code and maintain the code clean. We define modules in separate js files and name them as per the module.js file. In the following example, we are going to create two modules −

    Apppcation Module − used to initiapze an apppcation with controller(s).

    Controller Module − used to define the controller.

Apppcation Module

Here is a file named mainApp.js that contains the following code −

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

Here, we declare an apppcation mainApp module using angular.module function and pass an empty array to it. This array generally contains dependent modules.

Controller Module

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: Engpsh ,marks:75},
         {name: Hindi ,marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

Here, we declare a controller studentController module using mainApp.controller function.

Use Modules

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

Here, we use apppcation module using ng-app directive, and controller using ngcontroller directive. We import the mainApp.js and studentController.js in the main HTML page.

Example

The following example shows use of all the above mentioned modules.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Modules</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/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 sopd 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 Apppcation</h2>
      <span 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>
      </span>
      
   </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: Engpsh ,marks:75},
         {name: Hindi ,marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

Output

Open the file textAngularJS.htm in a web browser. See the result.