Difference between angular value and constant

AngularJS provides various services to make you write your code modular and testable.

Why should I use value/constant ?

1. To avoid poluting the global namespace. e.g., window.myVar = 20
2. Makes you think modular and easily testable : Consider, If your module depends on various values from the global namespace, then that would increase your efforts to find out the dependencies and writing test cases a challenge. Following angular way of injecting the values into module simplifies TDD (Test Driven Development) approach.
3. Easy way to inject into any Angular components like controller, directives, service, provider or factory etc.,

Value:

Angular value allows you to initialize a shared/global data as a "value" that can be injected and used in most of the angular components. The values can be modified in any component and can be propagated through out the application, thus it allows the application to maintain a common value & share among different Angular components.

Syntax:

angular.module('dsApp').value('loggedInUserName', 'David');

Logged in user name can be modified in authentication service after a successful logIn or logOff.

Constant:

Angular constant allows you define a constant that can be used through out the application just like a value, but it is not meant to be modified.

Syntax:

angular.module('dsApp').constant('tversion', 1);

The above line declares a constant "template version" that can be used throughout the application to bust the HTML template caches and server the latest changes to the client without the need to manually clear of browser caches.

See how the above constant can be used for cache busting during deployments.

Usage:

angular.module('app').config(['$stateProvider', '$urlRouterProvider', 'tversion', function ($stateProvider, $urlRouterProvider, tversion) {
    $stateProvider.state({
        name: 'login',
        url: '/login',
        controller: 'loginController',
        templateUrl: '/app_common/login/login-view.html?tversion=' + tversion
    });
    $stateProvider.state({
        name: 'signup',
        url: '/signup',
        controller: 'signupController',
        templateUrl: '/app_common/login/signup-view.html?tversion=' + tversion
    });
    $stateProvider.state({
        name: 'associate',
        url: '/associate',
        controller: 'associateController',
        templateUrl: '/app_common/login/associate-view.html?tversion=' + tversion
    });
}]);

Difference:

The following table lists out the major differences between these two angular services.

Hope this article clarifies the difference between these two angular services and help you to take a decision on when to pick which one.