What is Modules
AngularJS supports modular approach. Modules are used to separate logic such as services, controllers, application 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 −.
- Application Module −used to initialize an application with controller(s).
- Controller Module-used to define the controller.
Application Modules
Here is a file named mainApp.js that contains the following code −var mainApp = angular.module("mainApp", []);
Here, we declare an application mainApp module using angular.module function and pass an empty array to it. This array generally contains dependent modules.
<html >
<head>
<title>Angular JS Modules</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Riya";
$scope.lastName = "Malhotra";
});
</script>
</body>
</html>