Home > DeveloperSection > Beginner > AngularJs Modules

AngularJs Modules


Angular JS Angularjs Model 
Ratings:
0 Comment(s)
 1448  View(s)
Rate this:

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:

<div ng-app="mainApp" ng-controller="studentController">

..

<script src="mainApp.js"></script>

<script src="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>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="mainApp.js"></script>

<script src="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;

            }

        };

    });

Output:


Don't want to miss updates? Please click the below button!

Follow MindStick