How to directly access module's constant in HTML on AngularJS

IMHO the better way to do this is use the $rootScope In html every scope inherits from the $rootScope, so if a variable isn't present in the current scope angular use the one declared in $rootScope.

A good way is to initialize this in the run "phase"

angular.module('myApp')
  .run(function ($rootScope) {
      $rootScope.ROUTES = ROUTES
   });

 


Slightly similar to other answers but IMO cleaner:

angular.module('website')
    .constant("ROUTES", {
        SIGN_IN: "/sign/in"
    })
    .run(function ($rootScope, ROUTES) {
        $rootScope.ROUTES = ROUTES;
    });

And:

<a href="{{ROUTES.SIGN_IN}}">Sign in</a>

HTH


I also like the $rootScope approach, but I have, in some situations used a filter.

As a simplified example, suppose there is a constant CONFIG defined somewhere as an object with a property called BuildVersion. You could create a filter something like this:

angular.module('myApp')
  .filter('interpolate', ['CONFIG', function (CONFIG) {
      return function (text) {
          return String(text).replace(/\%VERSION\%/mg, CONFIG.BuildVersion);
      };  
  }]);

And in the HTML:

<html ng-app="website"> 
    <body>
        <div>{{'%VERSION%' | interpolate}}</div>
    </body>
</html>

or

<html ng-app="website"> 
    <body>
        <div>{{'bla bla bla %VERSION%.' | interpolate}}</div>
    </body>
</html>