Introduction
This tip will demonstrate the different ways to share data in Angular JS using Value and Constant. As we all know, Angular JS is a client side framework to create SPA (Single Page Application) and is maintained by Google. So, this post is dedicated to the Angular JS developer who is going to learn Angular JS. It will explain how to use Value and Constant in project and what the differences are between the two.
Value
It can store different types of values like string, number, object, date time and even function. It can directly inject with services or controllers. We can create a value services using two different ways:
app.value("NAME_OF_APP", "Angular JS");
$provide.value("NAME_OF_APP", "Angular JS");
Note: Value cannot be injected in Config section.
Example: Let's create an example which shows how to use Value in Angular JS. First, create a script.js and add the following line of code:
(function () {
'use strict';
var app = angular.module('myApp', []);
app.value('appName', 'Angular JS');
app.value('users', {
getAllUsers: function () {
return [
{
id: 1001,
name: 'Mukesh Kumar',
company: 'XYZ',
city: 'Delhi'
},
{
id: 1002,
name: 'Rahul Singh',
company: 'ABC',
city: 'Noida'
},
{
id: 1003,
name: 'Yaduveer Saini',
company: 'MNO',
city: 'Faridabad'
}
];
}
});
app.controller('DummyController', DummyController);
DummyController.$Inject = ['$scope', 'appName', 'users']
function DummyController($scope, appName, users) {
this.getAppName = function () {
return appName;
},
this.getUsers = function () {
return users.getAllUsers();
}
}
})();
Now, create a view to bind the Value data. So, create Index.html and add the following line of code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body ng-app='myApp'>
<div class="container-fluid">
<h2>Share Data using Value in AngularJS</h2>
<br />
<div class="row">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Constant Example [As a Service]</div>
<div class="panel-body">
<div ng-controller='DummyController as vm' class='col-md-6'>
<form class="form-inline" role="form">
<div>
I love <b>{{vm.getAppName()}}</b> website.<br />
<br />
</div>
<div>
<table class="table">
<tr style="font-weight:bold;
background-color:black; color:white;">
<td>
ID
</td>
<td>
Name
</td>
<td>
Company
</td>
<td>
City
</td>
</tr>
<tr ng-repeat="user in vm.getUsers()">
<td>
{{user.id}}
</td>
<td>
{{user.name}}
</td>
<td>
{{user.company}}
</td>
<td>
{{user.city}}
</td>
</tr>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you run the application, the output will be as shown in the following screen:
Constant
As the name says, we should use Constant when the value is not going to change in future. It means, the value of Constant will be fixed lifelong. The main purpose behind the Constant to store values and reuse those which are not going to change. It also stores string, number, object, etc. It can also be injected with module configuration along with services and controllers.
When working with multiple modules in Angular JS, there should be individual Constant file for each module.
As like Value, Constant can also be created in two different ways:
app.constant("NAME_OF_APP", "Angular JS");
$provide.constant("NAME_OF_APP", "Angular JS");
Note: Value can be injected in Config section.
Example: Let's create an example which shows how to use Constant in Angular JS. First, create a script.js and add the following line of code:
(function () {
'use strict';
var app = angular.module('myApp', []);
app.constant('WEBSITE_TITLE', 'www.asp.net');
app.config(function ($provide) {
$provide.constant('FRUIT', 'Mango');
});
app.controller('DummyController', DummyController);
DummyController.$Inject = ['$scope', 'WEBSITE_TITLE', 'FRUIT']
function DummyController($scope, WEBSITE_TITLE, FRUIT) {
this.getWebsiteTitle = function () {
return WEBSITE_TITLE;
},
this.getFruitName = function () {
return FRUIT;
}
}
})();
Now, add Index.html where you need to add the following line of code that displays the constant data on UI.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body ng-app='myApp'>
<div class="container-fluid">
<h2>Share Data using Constant in AngularJS</h2>
<br />
<div class="row">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Constant Example [As a Service]</div>
<div class="panel-body">
<div ng-controller='DummyController as vm' class='col-md-6'>
<form class="form-inline" role="form">
<div>
I love <b>
<a href="http://www.asp.net">
{{vm.getWebsiteTitle()}}</a></b> website.<br />
I love <b>{{vm.getFruitName()}}</b> Fruit.
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After running the application, the output will come as the following screen shows:
Conclusion
Therefore, today, we have seen the difference between Value and Constant in Angular JS and how to use both in project.
I hope this post will help you. Please provide your feedback using comments, which helps me to improve for my next post. If you have any doubts, please post in the comments section and if you like this post, please share it with your friends. Thanks!
