javascript - ejemplo práctico de web app con angularjs, nodejs y mongodb

Utilizando Express Handlebars y Angular JS

Question

Fondo

Actualmente estoy construyendo un sitio web que usa NodeJS para el servidor, Express Handlebars (Just Handlebars pero del lado del servidor), y con suerte AngularJS para algunas cosas del lado del cliente.

El problema

AngularJS y Handlebars usan la misma sintaxis para crear plantillas
{{foo}}
Esto causa un problema donde el código AngularJS será interpretado primero por Express Handlebars, que arrojará un error porque los datos que está tratando de extraer solo existen en Angular not Node.

La pregunta

¿Hay alguna manera de hacer que AngularJS y Express Handlebars trabajen juntos?

Soluciones posibles

• Cambiar la sintaxis de AngularJS
  • Estaba mirando BackboneJS y parece que es posible cambiar la sintaxis. Posiblemente podría haber algo similar es AngularJS.
• Crea un auxiliar ng en Express Handlebars.
  • Simplemente devolverá su contenido no analizado. Sin embargo, no pude entender cómo hacer esto.

Answer 1

Hay una mejor manera: / {{foo}}. El contenido de los manillares se puede escapar de una de dos maneras: escapes en línea o ayudantes de bloque crudos. Escapes en línea creados al anteponer un bloque de bigote con /. Los bloques sin procesar se crean usando {{{{llaves de bigote. Puedes ver esto http://handlebarsjs.com/expressions.html#helpers

Answer 2

Para mantener el estilo AngularJS, su segunda solución es mejor. Cree un ayudante en Express Handlebars.

Referencias al sitio web de Handlebars: http://handlebarsjs.com/block_helpers.html , puede registrar un helper raw-helper

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

y úsalo en tu plantilla hbs poniéndolo en un escondite cuádruple {{{{

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

Answer 3

Siempre puede usar la sintaxis ng-bind en su lugar:

<p ng-bind="user.profile.description"></p>
Esto es idéntico a
<p>{{user.profile.description}}</p>

De los documentos angulares para ngBind :

Normalmente, no usas ngBind directamente, sino que usas el marcado doblemente rizado como {{expression}} que es similar pero menos detallado.

Es preferible utilizar ngBind en lugar de {{expression}} si el navegador muestra momentáneamente una plantilla en su estado bruto antes de que Angular la compile. Como ngBind es un atributo de elemento, hace que los enlaces sean invisibles para el usuario mientras se carga la página.

Answer 4

Su primera solución es posible, AngularJS permite cambiar los símbolos de inicio / final de la interpolación de texto de esta manera:

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

Entonces podrías usarlo en tu plantilla:

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

Ver también: documentación de $ interpolateProvider

Espero que esto ayude.

Answer 5

Yo recomendaría usar la sintaxis de enlace de datos de AngularJS (lo que se parece a los Manubrios) y hacer que su servidor NodeJS simplemente sirva el código fuente estático de AngularJS. Prefiero descargar la plantilla en el cliente y, por lo tanto, poner menos énfasis en su servidor, sin mencionar que AngularJS y otros frameworks MVC (mi favorito es EmberJS) son excelentes para construir dinámicamente la página web.

Soy un fan de Yeoman y aquí hay un generador para construir un proyecto Angular servido por NodeJS: https://github.com/yeoman/generator-angular