AngularJs Modules

Hi everyone in this article I’m explaining about modules in angularjs.

Introduction:

When working on large projects, javascript code very quickly goes from being just one line to multiple files even the conventional practices that we were using so for creating angularjs application won’t help. To keep things crisp we need a rather modular approach.

Modules in angularjs help us to do that we use modules to break the code into separate blocks based on the usability of each code block left us understand this by creating a sample.

AngularJS supports modular approach. Modules are used to seperate logics say services, controllers, application etc. and keep the code clean. We define modules in seperate js files and name them as per the module.js file.

In this example we're going to create two modules.

1. Application Module - used to initialize an application with controller(s).

2. Controller Module - used to define the controller.

Application Module:

MainApp.js

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

Here we've declared an application mainApp module using angular.module function. We've passed 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: 'English', marks: 75 },
               { name: 'Hindi', marks: 67 }
            ],
            fullName: function () {
                var studentObject;
                studentObject = $scope.student;
                return studentObject.firstName + " " + studentObject.lastName;
            }
        };
    });

Here we've declared a controller studentController module using mainApp.controller function.

Use Modules:

<divng-app="mainApp"ng-controller="studentController">
..
<scriptsrc="mainApp.js"></script>
<scriptsrc="studentController.js"></script>

Here we've used application module using ng-app directive and controller using ng-controller directive. We've imported mainApp.js and studentController.js in the main html page.

Example:

Following example will showcase all the above mentioned modules.

testAngularJS.htm

<html>
<head>
<title>Angular JS Modules</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<scriptsrc="mainApp.js"></script>
<scriptsrc="studentController.js"></script>
<style>
table, th , td {
  border: 1pxsolidgrey;
  border-collapse: collapse;
  padding: 5px;
}
tabletr:nth-child(odd) {
  background-color: #f2f2f2;
}
tabletr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<divng-app="mainApp"ng-controller="studentController">
<tableborder="0">
<tr><td>Enter first name:</td><td><inputtype="text"ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><inputtype="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>
   <trng-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;
            }
        };
    });

Output:

Leave Comment

1 Comments

View All Comments

Amy Jones

26-Jun-2019

Having read this I believed it was extremely informative. I appreciate you finding the time and effort to put this informative article together. I once again find myself personally spending a significant amount of time both reading and posting comments. But so what, it was still worthwhile!

articles

AngularJs Modules

Introduction:

Application Module:

Controller Module:

Use Modules:

Example:

testAngularJS.htm

MainApp.js

studentController.js

Output:

Anonymous User

Leave Comment

1 Comments

Comments

Liked By