Hello everyone, I am going to share to constant vs.value in angular, This is the most important part of angular and the best
practice to use constants and value in angular apps.
The angular support to global constant and
value, using the constant and value you can configure your constants and its
values. The values can be injected and can't injected as per you requirement. When
you want to inject your values that time use angular value and otherwise use to
angular constant.
The constant value never change and access the
value from anywhere and anytime in the apps.
The value and constant both are same but the value of values can be
change anywhere and anytime in the apps. This is the main difference over the constant
and value in angular.
Example over angular value
Example 1. storing the single value
as given below
// storing a single value
var app =
angular.module("valueApp", []);
//Here inject our constant
value into a value controller.
app.controller("valueCtrl", function (userId) {
console.log(userId);
userId = 10;
console.log(userId);
});
Example 2. storing the multiple
value inside the objet as given below
// Storing multiple values
inside of an object
var app =
angular.module("valueApp", []);
app.value("userConfig", { userName: "", userEmail: "", userContact: "" });
// Now we inject our constant
value into a value controller
// Values will be empty
app.controller("valueCtrl",function (userConfig) {
console.log(userConfig);
console.log("Name: ",
userConfig.userName);
console.log("EmailId: ",
userConfig.userEmail);
console.log("Contact: ",
userConfig.userContact);
});
Example 3. storing the multiple
value inside the objet as given below
// Storing multiple values
inside of an object
var app =
angular.module("valueApp", []);
app.value("userConfig", { userName: "", userEmail: "", userContact: "" });
// Now we inject our constant
value into a value controller
// Values will be populated
inside of controller
app.controller("valueCtrl", function (userConfig) {
// Values will be populated.
userConfig.userName = "Anil
Singh";
userConfig.userEmail = "anil.singh@gmail.com";
userConfig.userContact = "+91-9015519999";
console.log(userConfig);
console.log("Name: ",
userConfig.userName);
console.log("EmailId: ",
userConfig.userEmail);
console.log("Contact: ",
userConfig.userContact);
});
Example over the angular constant
Example 1. storing the single constant
as given below
// Storing a single constant
value.
var app =
angular.module("constantApp", []);
// Now we inject our constant
value into a constant controller.
app.controller("constantCtrl", function (contName) {
console.log(contName);
});
Example 2. storing the multiple constant
as given below
// Storing multiple constant
values inside of an object.
var app =
angular.module("constantApp", []);
app.constant("appConfig", {
appName: 'code-sample',
appVersion: 'v1.10',
appURL: 'http://www.code-sample.com/'
});
// Now we inject our constant
value into a constant controller
app.controller("constantCtrl", function (appConfig) {
console.log(appConfig);
console.log("App Name", appConfig.appName);
console.log("App Version",
appConfig.appVersion);
console.log("App URL", appConfig.appURL);
});
Summary Table as give below
- All the provider are instantiate only one time that means all are singletons.
- All the provide can be decorated constant can be decorated.
- The constant values can be inject any-time and any-where that value never changed.
- A angular value is an injectable value.
- A angular service is an injectable constructor.
- A angular factory is an injectable function.
Please send me a valuable feedback
about this.... Thank you very much!!