In this 19th day of AngularJS article series, we are going to be learning next key players/concept of AngularJS, understanding the concept of Value and Constant service of AngularJS. Before moving on to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14
  15. Introduction To AngularJS – Day 15
  16. Introduction To AngularJS – Day 16
  17. Introduction to AngularJS – Day 17
  18. Introduction to AngularJS – Day 18

Value(name, value)

Value service is nothing but global variables, you can change it and use it in any controller. A value can be a string, array or a number. It can inject anywhere. It’s not possible to inject any other service in value service.

Syntax:

app.value(name, value);
name – is nothing but a label for accessing the actual value.
value – value is nothing but actual data.

Example:
In the below example we are going to assign a user data to value:

app.js

  1. /// <reference path="angular.min.js" />
  2. var app = angular.module("myApp", []);
  4. //Creating value
  5. app.value("user_data", {
  6. first_name: 'Jeetendra',
  7. last_name: 'Gund',
  8. city: 'Pune',
  9. tech: '.NET, C#, AngularJS',
  10. author_at: 'C# Corner'
  11. });
  13. //Creating controller & injecteing value('user_data') in controller
  14. app.controller("myController", function ($scope, user_data) {
  16. $scope.result = user_data;
  18. });
index.html
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Welcome to C# Corner</title>
  5. <meta charset="utf-8" />
  6. <script src="app/angular.min.js"></script>
  7. <script src="app/app.js"></script>
  8. </head>
  9. <body>
  10. <div ng-controller="myController">
  11. <h2 style="color:red">Value and Constant in AngularJS</h2>
  12. <h2>Author Details:</h2>
  13. <h3>Name : {{result.first_name}} {{result.last_name}}</h3>
  14. <h3>City : {{result.city}}</h3>
  15. <h3>Technology : {{result.tech}}</h3>
  16. <h3>Author At : {{result.author_at}}</h3>
  17. </div>
  18. </body>
  19. </html>
Output:

Output
In the above example we can see I have created value ‘user_data’ and injected it in ‘myController’. Now I am going to change the value ‘user_data’ of ‘tech’ property, see below code:
  1. /// <reference path="angular.min.js" />
  2. var app = angular.module("myApp", []);
  4. //Creating value
  5. app.value("user_data", {
  6. first_name: 'Jeetendra',
  7. last_name: 'Gund',
  8. city: 'Pune',
  9. tech: '.NET, C#, AngularJS',
  10. author_at: 'C# Corner'
  11. });
  13. //Creating controller & injecteing value('user_data') in controller
  14. app.controller("myController", function ($scope, user_data) {
  16. $scope.result = user_data;
  18. });
  19. app.controller("myCtrl", function ($scope, user_data) {
  20. user_data.tech = user_data.tech + ", MVC";
  21. $scope.test = user_data;
  22. });
I just created another controller, ‘myCtrl,’ and injected the created value ‘user_data’. I have added some values in ‘tech’ property of ‘user_data’ value. I have just used that created controller in html view ‘</div>’ see below code:
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Welcome to C# Corner</title>
  5. <meta charset="utf-8" />
  6. <script src="app/angular.min.js"></script>
  7. <script src="app/app.js"></script>
  8. </head>
  9. <body>
  10. <div ng-controller="myController">
  11. <h2 style="color:red">Value and Constant in AngularJS</h2>
  12. <h2>Author Details:</h2>
  13. <h3>Name : {{result.first_name}} {{result.last_name}}</h3>
  14. <h3>City : {{result.city}}</h3>
  15. <h3>Technology : {{result.tech}}</h3>
  16. <h3>Author At : {{result.author_at}}</h3>
  17. </div>
  18. <div ng-controller="myCtrl"></div>
  19. </body>
  20. </html>
Now run the application in the browser you can see the output as follows:

output
In the above screen shot you can see we added value in ‘user_data’ of ‘tech’ property is updated in our first ‘myController’ also. Now, you can understand how to create a value in AngularJS and change it anywhere and it's updated everywhere.
 
Constant(name, value)

This Constant service, name defines itself as nothing to be changed. Once assigned value to constant service cannot be changed in the application. You can inject anywhere only exclude from config. You can assign value to constant but it cannot be changed, like value service we see above.

Syntax:

app.constant(name, value);

name – it contains the label for a constant.
value – it contains the value for a constant.

Example:

In the below example, we store some needed values in ‘web.config’ file and later on access or read from ‘web.config’. We can do the same thing in this AngularJS constant service as follows:

app.js
  1. /// <reference path="angular.min.js" />
  2. var app = angular.module("myApp", []);
  4. //Creating Constant
  5. app.constant("connectionStrings", {
  6. data_source: 'Jeet_Server',
  7. initial_catalog: 'Jeet_AngularJS',
  8. user_id: 'Jeet',
  9. password: 'Admin@2016',
  10. MultipleActiveResultSets: 'True',
  11. App: 'EntityFramework'
  12. });
  14. //Creating controller & injecteing constant('connectionStrings') in controller
  15. app.controller("myConstantController", function ($scope, connectionStrings) {
  17. $scope.Conn_String = connectionStrings;
  19. });
In the above code you can see how we create constant value ‘connectionString’ and inject in controller ‘myConstantController’. Here we used ‘web.config’ connection string tag values.

constant.html
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>Welcome to C# Corner</title>
  5. <meta charset="utf-8" />
  6. <script src="app/angular.min.js"></script>
  7. <script src="app/app.js"></script>
  8. </head>
  9. <body>
  10. <div ng-controller="myConstantController">
  11. <h2 style="color:red">Value and Constant in AngularJS</h2>
  12. <h2>Constant values 'connectionStrings'</h2>
  13. <h3>Data Source : {{Conn_String.data_source}}</h3>
  14. <h3>Initial Catalog : {{Conn_String.initial_catalog}}</h3>
  15. <h3>User Id : {{Conn_String.user_id}}</h3>
  16. <h3>Password : {{Conn_String.password}}</h3>
  17. <h3>MultipleActiveResultSets : {{Conn_String.MultipleActiveResultSets}}</h3>
  18. <h3>App : {{Conn_String.App}}</h3>
  19. </div>
  20. </body>
  21. </html>
Output:

Output
Now run the application in browser, you can see how we can use Constant values in controller in output as follows:

Great, Value and Constant service in AngularJS with example created successfully!

Summary

I hope that beginners as well as students understand the concept of Value and Constant service in AngularJS with Example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!

Read more articles on AngularJS: