Using Constants and Values in Services in AngularJS

In AngularJS, constants and values are used to store reusable data that can be injected into controllers, services, and other components. They help in maintaining configuration settings, shared data, and application-wide values.

This guide will cover:

✔️ What are Constants and Values?
✔️ Key differences between Constants and Values
✔️ How to use Constants and Values in Services?
✔️ Best Practices

---

1. What is a Constant in AngularJS?

A Constant is a fixed value that remains unchanged throughout the lifecycle of an AngularJS application. It is defined using the .constant() method.

Characteristics of Constants

Cannot be modified after definition.
Available during the configuration phase (config()).
Can be injected into services, controllers, and even config() functions.

Syntax

javascriptCopyEditapp.constant("API_URL", "https://api.example.com");

How to Use a Constant?

app.controller("MyController", function($scope, API_URL) {
    $scope.apiUrl = API_URL;
});

Output: https://api.example.com (The constant remains the same throughout the app.)

---

2. What is a Value in AngularJS?

A Value is a simple JavaScript object that can hold strings, numbers, arrays, or functions. It is defined using the .value() method.

Characteristics of Values

Can be modified after initialization.
Cannot be injected into config() functions.
Best for storing dynamic application-wide data.

Syntax

app.value("userData", { username: "JohnDoe", age: 25 });

How to Use a Value?

app.controller("UserController", function($scope, userData) {
    $scope.username = userData.username;
});

🔹 Output: "JohnDoe" (The value can be changed later.)

---

3. Key Differences Between Constants and Values

Feature	Constant	Value
Can be modified?	No	Yes
Available in config()?	Yes	No
Can store objects and functions?	Yes	Yes
Use case	Fixed configurations	Dynamic, modifiable data

---

4. Using Constants and Values in Services

Using Constants in Services

Constants can be injected into services to provide configuration settings.

app.constant("API_ENDPOINT", "https://api.example.com");

app.service("ApiService", function(API_ENDPOINT) {
    this.getUrl = function() {
        return API_ENDPOINT;
    };
});

The API_ENDPOINT remains unchanged inside the service.

Using Values in Services

Values can be injected into services for storing and updating data.

app.value("sessionData", { isLoggedIn: false });

app.service("AuthService", function(sessionData) {
    this.login = function() {
        sessionData.isLoggedIn = true;
    };

    this.logout = function() {
        sessionData.isLoggedIn = false;
    };

    this.checkLoginStatus = function() {
        return sessionData.isLoggedIn;
    };
});

The sessionData value can be modified dynamically.

---

5. When to Use Constants vs. Values?

Use Constants When:

• You need fixed values (e.g., API URLs, configuration settings).
• You want to access them in config() functions.

Use Values When:

• You need modifiable values (e.g., user session, runtime settings).
• You don’t need them inside config() functions