AngularJS Modules
Modules are the AngularJS way of packaging similar functional codes under a single name. In simple terms it is like package of Java. AngularJS Modules consist of two main parts.
- An AngularJS module can define its own Controllers, Services, factories and directives.These can be access through out the module.
- Second part is it can have its own dependencies, when dependencies are defined then AngularJS will go find the module with particular name and make sure their controllers,services,factories and directives are available to this module.
Suppose if we want to declare a module for our application “HelloApp”, this is how we need to define it
var myApp = angular.module('HelloApp',[]);
- The first argument is the name of the AngularJS modules in our case it is “HelloApp”
- The Second argument [] , is an array of other angular modules which this module depend on. In our case we dont depend on any other modules.
In order to define the depenedencies simply add their module name in the array seperated by comma. Suppose our “HelloApp” is depending on two other modules “WelcomeApp” and “GreetingApp”, then we can add dependencies like below
angular.module('HelloApp',['WelcomeApp','GreetingApp']);
AngularJS Controller
AngularJS Controllers is the place wherein which we will be writing all our business logic such as fetching data from the server and sending it to the UI, Event handling mechanisms, deciding which block to show, etc.. all these and more happens within the controllers.
We can register a controller with our angular module using the controller function provided by modules. The AngularJS controller has two main parts they are
- The first parameter is a string that specifies the controller name, in our case we naming our controller as “HelloCtrl”
- The second argument is the actual controller definition. We can inject $scope as a parameter to our controller with which we can pass values to and fro to our view.
A controller can be define like below
var myApp = angular.module('HelloApp',[]);
myApp.controller('HelloCtrl', function ($scope){
});
Now lets take our AngularJS HelloWorld Example and add Module & Controller to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>HelloWorld Application</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="HelloCtrl">
<form>
<input type="text" ng-model="username" placeholder="Enter your name">
<button ng-click="updateUserMessage(username)" type="button">Update Message</button>
</form>
<script type="text/javascript">
angular.module('myApp', [])
.controller('HelloCtrl',function($scope)
{
$scope.message = '';
$scope.updateUserMessage = function(username)
{
$scope.message = "Welcome "+username+"!!!"
};
});
</script>
<h2>{{message}}</h2>
</div>
</body>
</html>
Output
How everything works ?
-
- The ng-app directive is added to the <body> tag. ng-app defines the starting point of the angularjs application flow. Here our application name is “myApp”, which will be used in the module of our angular application.
- We have created controller “HelloCtrl” using ng-controller directive. All the business logic will be performed here.
- Within the <form> tag, We have an input tag, which is associated with the ng-model “username”. Here AngularJS stores the value entered by the user in the text field to the variable “username” which is mentioned in the ng-model.
- Once the user clicks on the “Update Message” button, updateUserMessage() method will be called, passing the username to Angular Script.
- Once the Angular Script received the username, we are appending the username with the welcome message and assigning it to the variable $scope.message.
- The Welcome message along with the username will be displayed in the UI. Since AngularJS follows two-way binding and we have used the same variable in the UI and as well as the script.
Working with Multi Controllers
There will times where you may need to create more than one controller on a single angular module. It possible in angularjs. For example lets create two controller one for addition and one for subtraction.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Angular Calculator</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
</script>
</head>
<body ng-app="CalcApp">
<div ng-controller="AddCtrl">
<h3>Addition</h3>
<p>
<label>Value for A:</label> <input type="number" id="a" ng-model="a">
</p>
<p>
<label>Value for B:</label> <input type="number" id="b" ng-model="b">
</p>
<p>
<button ng-click="add(a,b)">Add</button>
Result: {{ result }}
</p>
</div>
<div ng-controller="SubCtrl">
<h3>Subtraction</h3>
<p>
<label>Value for A:</label> <input type="number" id="a" ng-model="a">
</p>
<p>
<label>Value for B:</label> <input type="number" id="b" ng-model="b">
</p>
<p>
<button ng-click="subtract(a,b)">Subtract</button>
Result: {{ result }}
</p>
</div>
<script type="text/javascript">
var myApp = angular.module('CalcApp', []);
myApp.controller('AddCtrl', function($scope) {
$scope.result = 0;
$scope.add = function(a, b) {
$scope.result = a + b;
};
});
myApp.controller('SubCtrl', function($scope) {
$scope.result = 0;
$scope.subtract = function(a, b) {
$scope.result = a - b;
};
});
</script>
</body>
</html>
We have created two controllers, AddCtrl and SubCtrl for performing the add and subtraction operation respectively. Upon clicking the Add button, the ng-click calls the add() method of the Controller1 (AddCtrl) and display the result on {{ result }} . Same thing happens for the Subtraction operation as well, it calls the SubCtrl
Output :
Hit on the URL
http://localhost:8080/AngularJS_Tutorial/AngularCalculator.html
Leave a Reply