Как получить прямой доступ к константе модуля в HTML на AngularJS

Я хочу использовать несколько констант непосредственно в HTML (и несколько раз в контроллерах).

Например, это основной модуль приложения:

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

Итак, понятно, как использовать константы из контроллеров.

Но как я могу сделать что-то вроде этого:

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

Суть в том, чтобы хранить все маршруты в одном месте. Итак, я могу сделать это, или я выбрал неправильный путь?

Ответы

Ответ 1

ИМХО, лучший способ сделать это - использовать $rootScope В html каждая область наследует от $rootScope, поэтому, если переменная отсутствует в текущей области angular, используйте объявленную в $rootScope.

Хорошим (IMHO) способом является инициализация этого в фазе "<фаза" 

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

 

Ответ 2

Немного похож на другие ответы, но очиститель IMO:

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

и

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

НТН

Ответ 3

Мне также нравится подход $rootScope, но в некоторых случаях я использовал фильтр.

В качестве упрощенного примера предположим, что существует константа CONFIG, определенная где-то как объект с свойством BuildVersion. Вы можете создать фильтр примерно так:

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

И в HTML:

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

или

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