English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS Modules

AngularJS supports modular methods. Modules are used to separate logic (such as services, controllers, applications, etc.) from code, and maintain code cleanliness. We define modules in separate js files and name them according to the module.js file. In the following example, we will create two modules-

  • Application Module (Application Module)- used to initialize the applicationcontroller(s).

  • Controller Module(Controller Module) - used to define controllers.

Application Module

Below is a file named mainApp.js that contains the following code-

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

Here, we use the angular.module function to declare an application module named mainApp and pass an empty array to it. This array typically contains related 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 use the mainApp.controller function to declare a controller module named studentController.

Using modules

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

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

Online examples

The following examples demonstrate the usage of all the aforementioned modules.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Modules</title>/title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script src=""/run/angularjs/src/module/mainApp.js"></script>
　　　　　　<script src=""/run/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>Example of AngularJS Module Usage</h/h2>
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController"
　　　　　　　　　
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter name:</td>/td>
　　　　　　　　　　　　　　　<td><input type="text" ng-model = "student.firstName"/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter surname: </td>/td>
　　　　　　　　　　　　　　　<td><input type="text" ng-model = "student.lastName"/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Name: </td>/td>
　　　　　　　　　　　　　　　<td>{{ student.fullName() }}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Subject:</td>/td>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　　　　　<th>Name</th>/th>
　　　　　　　　　　　　　　　　　　　　　　　　<th>Score</th>/th>
　　　　　　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　　　　　　　<tr ng-repeat = "subject in student.subjects"
　　　　　　　　　　　　　　　　　　　　　　　　<td>{{ subject.name }}</td>/td>
　　　　　　　　　　　　　　　　　　　　　　　　<td>{{ subject.marks }}</td>/td>
　　　　　　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　　　　</table>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　</body>
</html>
Test and see‹/›

mainApp.js

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

studentController.js

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

Output Result

Open the file in a web browsertextAngularJS.htm.

AngularJS FormsAngularJS HTML DOM