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>