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?
4 answers
solution1
79 ACCPTED 2013-07-06 17:36:18
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
});
solution2
19 2015-10-28 14:11:23
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
solution3
16 2014-07-11 19:31:44
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>
solution4
1 2014-08-14 10:10:19
Also we can use helper, similar to ROR.
https://gist.github.com/merqlove/491023bcdd2145eef169#file-readme-md
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.