constant and value angular

What are constant and value in angularjs?

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", []);

app.value("userId", 0);

//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", []);

app.constant("contName", "My App");

// 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
  1. All the provider are instantiate only one time that means all are singletons.
  2. All the provide can be decorated constant can be decorated.
  3. The constant values can be inject any-time and any-where that value never changed.
  4. A angular value is an injectable value.
  5. A angular service is an injectable constructor.
  6. A angular factory  is an injectable function.


Please send me a valuable feedback about this.... Thank you very much!!

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^