web-dev-qa-db-fra.com

Utilisation des guidons Express et Angular JS

Contexte

Je suis en train de construire un site Web qui utilise NodeJS pour le serveur, Express Handlebars (Just Handlebars but server), et j'espère AngularJS pour certains trucs côté client.


Le problème

AngularJS et Handlebars utilisent la même syntaxe pour les modèles
{{foo}}
Cela provoque un problème où le code AngularJS sera d'abord interprété par Express Handlebars, qui générera ensuite une erreur car les données qu'il tente d'extraire n'existent que dans Angular et non dans Node.


La question

Existe-t-il un moyen de faire fonctionner AngularJS et Express Handlebars?


Solutions possibles

  • Modifiez la syntaxe d'AngularJS
    • Je regardais BackboneJS et il semble qu'il soit possible de changer la syntaxe. Il pourrait y avoir quelque chose de similaire est AngularJS.
  • Créez une aide ng dans Express Handlebars.
    • Il retournerait simplement son contenu non analysé. Cependant, je ne pouvais pas comprendre comment procéder.
javascriptnode.jsangularjsexpresshandlebars.js
43
Noah Huppert

Votre première solution est possible, AngularJS permet de changer les symboles de début/fin d'interpolation de texte comme ceci:

appModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

Ensuite, vous pouvez l'utiliser dans votre modèle:

<div>{[{message}]}</div>

Voir aussi: documentation $ interpolateProvider

J'espère que cela t'aides.

71
runTarm

Vous pouvez toujours utiliser la syntaxe ng-bind à la place:

<p ng-bind="user.profile.description"></p>
Ceci est identique à
<p>{{user.profile.description}}</p>

À partir des documents Angular pour ngBind :

En règle générale, vous n'utilisez pas ngBind directement, mais à la place, vous utilisez le balisage double bouclé comme {{expression}} qui est similaire mais moins verbeux.

Il est préférable d'utiliser ngBind au lieu de {{expression}} si un modèle est momentanément affiché par le navigateur dans son état brut avant Angular le compile. Puisque ngBind est un attribut d'élément, il rend le des liaisons invisibles à l'utilisateur pendant le chargement de la page.

18
teleaziz

Afin de maintenir le style AngularJS, votre deuxième solution est meilleure, Créez un assistant dans Express Handlebars.

Références au site Web sur le guidon: http://handlebarsjs.com/block_helpers.html , vous pouvez enregistrer un assistant raw-helper

Handlebars.registerHelper('raw-helper', function(options) {
    return options.fn();
});

et utilisez-le dans votre modèle hbs en le mettant dans un quadruple-stash {{{{

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}
14
Isaddo

Il y a une meilleure façon:\{{foo}}. Le contenu du guidon peut être échappé de deux manières: les échappements en ligne ou les aides de bloc brutes. Échappements en ligne créés en préfixant un bloc de moustache avec \. Les blocs bruts sont créés en utilisant des accolades {{{{{moustache). Vous pouvez le voir http://handlebarsjs.com/expressions.html#helpers

11
Peyton Zhao

Je recommanderais d'utiliser la syntaxe de liaison de données d'AngularJS (ce qui ressemble à un guidon) et que votre serveur NodeJS serve simplement le code source statique d'AngularJS. Je préfère décharger les modèles sur le client et donc mettre moins de stress sur votre serveur, sans oublier que AngularJS et d'autres frameworks MVC (mon préféré est EmberJS) sont parfaits pour construire dynamiquement la page Web.

Je suis fan de Yeoman et voici un générateur pour construire un Angular servi par NodeJS: https://github.com/yeoman/ générateur-angulaire

9
Glavin001