AngularJS Modules

Modules are used to seperate logics and keep the code clean. So we can define modules in separate js file. Here we will create two modules i.e. Controller Module and Application Module.

Controller Module: controller.js
Here we are declaring a controller userController module using myApp.controller function.

 myApp.controller("userController", function($scope) {
 $scope.user = {
 first_name: "Tim",
 last_name: "Shawn",
 full_name: function() {
 var userObj;
 userObj = $scope.user;
 return userObj.first_name + " " + userObj.last_name;
 }
 };
 });

Application Module : module.js

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

Here we declare myApp module using angular.module function. We are passing an empty array to it. Generally this array contains dependent modules.

Html:

 <div ng-app="myApp" ng-controller="userController">
 <table border="0">
 <tr><td>First name:</td><td><input type="text" ng-model="user.first_name"></td></tr>
 <tr><td>Last name: </td><td><input type="text" ng-model="user.last_name"></td></tr>
 <tr><td>Full name: </td><td>{{user.full_name()}}</td></tr>
 </table>
 </div>

Following example shows the full code of AngularJS Modules:

<html>
 <head>
 <title>AngularJS Modules</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="module.js"></script>
 <script src="controller.js"></script>
 </head>
 <body>
 <h2>AngularJS Modules</h2>
 <div ng-app="myApp" ng-controller="userController">
 <table border="0">
  <tr><td>First name:</td><td><input type="text" ng-model="user.first_name"></td></tr>
  <tr><td>Last name: </td><td><input type="text" ng-model="user.last_name"></td></tr>
  <tr><td>Full name: </td><td>{{user.full_name()}}</td></tr>
 </table>
 </div>
 </body>
</html>