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

Question

I want to use several constants directly in html (and few times in controllers).

For example, this is main app module:

angular.module('website', [])
.constant('ROUTES', (function () {
    return {
        SIGN_IN: '/sign/in'
  }
})())
.config([..., 'ROUTES', function(..., ROUTES {
    $routeProvider.when(ROUTES.SIGN_IN, {templateUrl: 'pages/sign_in.html', controller:     'SignInController'});
}]);

So this is clear, how to use constants from controllers.

But how can I do something like this:

<html ng-app="website"> 
<body>
<a href="{{ROUTES.SIGN_IN}}">Sign in</a>
</body>
</html>

The point is to keep all routes in one place. So, can i do this, or may be i choosed wrong way?

just add ROUTES to the $scope in SignInController – Liviu T. Jul 06 '13 at 17:10 — Liviu T., Jul 06 '13 at 17:10
Thanks a lot, it's actualy what i need. – S Panfilov Jul 06 '13 at 17:22 — S Panfilov, Jul 06 '13 at 17:22

Fabio Bonfante · Accepted Answer · 2021-01-12T12:18:22.313

79

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
   });

edited Jan 12 '21 at 12:18

answered Jul 06 '13 at 17:36

Fabio Bonfante

5,128
1
32
37

I think this should be a concept that everyone attempts to understand before they go writing any controllers. I don't know how many times i've worked on a controller with scope and rootscope loaded into it. – CarComp May 20 '15 at 14:15
7

Keep in mind that the value defined in `$rootScope` will not be accessible directly in directives with isolated scopes. In such cases you can get this value with `$root.ROUTES` in the view. – fracz Dec 17 '15 at 07:33

score 19 · Answer 2 · answered Oct 28 '15 at 14:11

19

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

answered Oct 28 '15 at 14:11

Nimo

7,984
5
39
41

This is a good approach. Keeps the code running while maintaining separation from data. – Nikhil Sahu Dec 22 '16 at 11:41

score 16 · Answer 3 · answered Jul 11 '14 at 19:31

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>

I almost used this because it was familiar, and it's a good answer, but I do think the accepted answer is better overall. Upvoted both. — VSO, Mar 16 '16 at 17:34

score 1 · Answer 4 · answered Aug 14 '14 at 10:10

1

Also we can use helper, similar to ROR.

https://gist.github.com/merqlove/491023bcdd2145eef169#file-readme-md

answered Aug 14 '14 at 10:10

merqlove

3,674
1
23
22

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

4 Answers4

Linked