Objectives and outcomes

In this tutorial we are going to learn about AngularJS ngMessageFormat module. This module is used for extending $interpolate service with code to handle pluralizaton and gender related messages. For this module to work we need to link angular-message-format.js file to our application. ngMessageFormat module is linked to application using dependency injection. The file can be linked using four ways:



If you have downloaded angular package on localhost

<script src="angular-1.4.6/angular-message-format.js"></script>


Using CDN

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-message-format.js"></script>


Using npm

npm install angular-message-format@1.4.6


Using bower

bower install angular-message-format@1.4.6


Code for Gender example



HTML code:

<html>
<head>
<title>AngularJS ngMessageFormat Module</title>
<meta charset="utf-8">
<script src="angular-1.4.6/angular.min.js"></script>
<script src="angular-1.4.6/angular-message-format.js"></script>
</head>
<body>
<div ng-app="msg_format" ng-controller="msg_format_control1">
Select Reciever:<br>
<select ng-model="reciever" ng-options="person as person.name for person in recievers">
</select>
<p>{{reciever.gender, select,
male {{{reciever.name}} unwrapped his gift. }
female {{{reciever.name}} unwrapped her gift. }
other {{{reciever.name}} unwrapped their gift. }
}}</p>
</div>
</body>
</html>


Javascript

<script>
function Person(name, gender) 
{
this.name = name;
this.gender = gender;
}
	
var martin   = new Person("Martin", "male"),
donna     = new Person("Donna", "female"),
ashley = new Person("Ashley", "");
	
var app = angular.module('msg_format', ['ngMessageFormat']);
app.controller('msg_format_control1', ['$scope', function($scope) 
{
$scope.recievers = [martin, donna, ashley];
$scope.reciever = $scope.recievers[0];
}]);
</script>


Code for Plural and Gender



HTML code:

<html>
<head>
<title>AngularJS ngMessageFormat</title>
<meta charset="utf-8">
<script src="angular-1.4.6/angular.min.js"></script>
<script src="angular-1.4.6/angular-message-format.js"></script>
</head>
<body>
<div ng-app="msg_format ng-controller="msg_format_control2">
Select recipients:<br>
<select multiple size=5 ng-model="recipients" ng-options="person1 as person1.name for person1 in people">
</select><br>
<p>{{recipients.length, plural,
=0 {{{sender.name}} has not given any gifts to anyone.}
=1 {  {{recipients[0].gender, select,
female { {{sender.name}} gave {{recipients[0].name}} her gift.}
male { {{sender.name}} gave {{recipients[0].name}} his gift.}
other { {{sender.name}} gave {{recipients[0].name}} their gift.}
}}
}
other {{{sender.name}} gave {{recipients.length}} people gifts.}
}}</p>
</div>
</body>
</html>


Javascript

<script>
function Person1(name, gender) 
{
this.name = name;
this.gender = gender;
}
	
var tina   = new Person1("Tina", "female"),
alfred     = new Person1("Alfred", "male"),
alex   = new Person1("Alex", "male"),
monty   = new Person1("Monty", "");
var app = angular.module('msg_format',['ngMessageFormat']);	
app.controller('msg_format_control2', ['$scope', function($scope) 
{
$scope.people = [tina, alfred, monty];
$scope.recipients = [tina];
$scope.sender = alex;
}]);
</script>


Example for Gender

Select Reciever:

{{reciever.gender, select, male {{{reciever.name}} unwrapped his gift. } female {{{reciever.name}} unwrapped her gift. } other {{{reciever.name}} unwrapped their gift. } }}


In the above example the appropriate message is selected based on 'select' keyword. And message is selected with refrence to gender.


Example for Plural and Gender

Select recipients:

{{recipients.length, plural, =0 {{{sender.name}} has not given any gifts to anyone.} =1 { {{recipients[0].gender, select, female { {{sender.name}} gave {{recipients[0].name}} her gift.} male { {{sender.name}} gave {{recipients[0].name}} his gift.} other { {{sender.name}} gave {{recipients[0].name}} their gift.} }} } other {{{sender.name}} gave {{recipients.length}} people gifts.} }}


In the above example the appropriate message is selected using 'plural' keyword. If we perform multi-select then we can observe the plural effect and if we select single option the we can notice gender effect.