AngularJS supports modular methods. Modules are used to represent separate logical services, controllers, applications, etc. and keep the code neat. We define the module in a separate js file and name it in the form of a module.js file. In this example, we want to create two modules.
Application Module - Used to initialize controller applications
Controller Module - Used to define controllers
Application module
mainApp.js
var mainApp = angular.module("mainApp", []);
Here, we have declared the mainApp module for the application using the angular.module function. We have passed an empty array to it. This array usually contains slave modules.
Controller module
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 have declared a controller that uses the mainApp.controller function of the studentController module.
Using module
<div ng-app="mainApp" ng-controller="studentController">..<script src="mainApp.js"></script><script src="studentController.js"></script>
Here, we use the ng-app directive and the controller to apply the module using the ng-controller directive. We have imported mainApp.js and studentController.js in the main HTML page.
Example
The following examples will show all the modules mentioned above.
testAngularJS.htm
<html> <head><title>Angular JS Modules</title><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><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></tr></table></div><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script><script src="mainApp.js"></script><script src="studentController.js"></script></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
Open textAngularJS.htm in a web browser. The results are as follows.
The above is the information on the AngularJS module related knowledge. We will continue to add relevant knowledge in the future. Thank you for your support for this site!