Usando o Express Handlebars e o Angular JS

fundo

Atualmente, estou construindo um site que usa o NodeJS para o servidor, o Express Handlebars (apenas o Handlebars, mas o lado do servidor) e, com sorte, o AngularJS para algumas coisas do lado do cliente.

O problema

AngularJS e Handlebars usam a mesma syntax para modelar
{{foo}}
Isso causa um problema em que o código AngularJS será interpretado pelo Express Handlebars primeiro, o que causará um erro, pois os dados que ele está tentando extrair só existem em Angular e não em Nó.

A questão

Existe uma maneira de trabalhar com o AngularJS e o Express Handlebars?

Soluções possíveis

  • Mude a syntax do AngularJS
    • Eu estava olhando para BackboneJS e parece que é possível alterar a syntax. Pode haver algo semelhante é o AngularJS.
  • Crie um auxiliar no Express Handlebars.
    • Apenas retornaria seu conteúdo não analisado. No entanto, não consegui descobrir como fazer isso.

Sua primeira solução é possível, o AngularJS permite alterar os símbolos de início / término da interpolação de texto da seguinte forma:

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

Então você poderia usá-lo em seu modelo:

 
{[{message}]}

Veja também: $ interpolateProvider documentation

Espero que isto ajude.

Você sempre pode usar a syntax ng-bind:


Isso é idêntico ao

{{user.profile.description}}

Dos documentos angulares para ngBind :

Normalmente, você não usa ngBind diretamente, mas usa a marcação dupla encaracolada como {{expression}}, que é semelhante, mas menos detalhada.

É preferível usar ngBind em vez de {{expression}} se um modelo for exibido momentaneamente pelo navegador em seu estado bruto antes que Angular o compile. Como ngBind é um atributo de elemento, ele torna as ligações invisíveis para o usuário enquanto a página está sendo carregada.

Para manter o estilo AngularJS, sua segunda solução é melhor: Crie um auxiliar no Express Handlebars.

Referências ao site do Handlebars: http://handlebarsjs.com/block_helpers.html , você pode registrar um ajudante raw-helper

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

e usá-lo em seu modelo hbs colocando-o em um stash quádruplo {{{{

 {{{{raw-helper}}}} 
Total Members: {{members.length}}
{{{{/raw-helper}}}}

Existe uma maneira melhor: \ {{foo}}. O conteúdo do guiador pode ser escapado de uma das duas maneiras, escoras inline ou auxiliares de bloco brutos. Escapes embutidos criados prefixando um bloco de bigode com \. Blocos brutos são criados usando {{{{chaves de bigode. Você pode ver este http://handlebarsjs.com/expressions.html#helpers

Eu recomendaria usar a syntax de binding de dados do AngularJS (que é semelhante ao Handlebars) e fazer com que seu servidor NodeJS simplesmente sirva o código-fonte estático do AngularJS. Eu prefiro descarregar o modelo no cliente e, portanto, colocar menos ênfase em seu servidor, sem mencionar que o AngularJS e outras estruturas MVC (minha favorita é EmberJS) são ótimas para construir dinamicamente a página da web.

Eu sou fã de Yeoman e aqui é um gerador para a construção de um projeto Angular servido pelo NodeJS: https://github.com/yeoman/generator-angular