Puis-je accéder directement au module constant à partir de HTML sous AngularJS

Je veux utiliser peu de constantes directement en html et quelques fois dans les contrôleurs.

Par exemple, il s'agit du module principal de l'application:

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

Donc, c'est clair, comment utiliser les constantes des contrôleurs.

Mais comment puis-je faire quelque chose comme ça:

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

Le but est de garder toutes les routes en un seul endroit. Alors, puis-je faire cela, ou peut-être que j'ai choisi le mauvais chemin?

IMHO la meilleure façon de le faire est d'utiliser le $ rootScope In html chaque portée hérite de $ rootScope, donc si une variable n'est pas présente dans la portée actuelle, utilisez la seule qui soit déclarée dans $ rootScope.

Un bon moyen (IMHO) consiste à l'initialiser dans la phase "phase"

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

J'aime aussi l'approche $ rootScope, mais j'ai utilisé, dans certaines situations, un filtre.

Comme un exemple simplifié, supposons qu'il existe une CONFIG constante définie quelque part comme un objet avec une propriété appelée BuildVersion. Vous pouvez créer un filtre quelque chose comme ceci:

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

Et dans le HTML:

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

ou

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

Légèrement semblable à d'autres réponses mais nettoyant IMO:

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

Et:

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

HTH

Nous pouvons également utiliser helper, similaire à ROR.

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