Использование Express Handlebars и Angular JS

Фон

В настоящее время я создаю веб-сайт, который использует NodeJS для сервера, Express Handlebars (Просто Handlebars, но на стороне сервера), и, надеюсь, AngularJS для некоторых приложений на стороне клиента.

Проблема

AngularJS и Handlebars используют тот же синтаксис для шаблонов
{{foo}}
Это вызывает проблему, когда код AngularJS будет сначала интерпретироваться с помощью Express Handlebars, который затем выдаст ошибку, потому что данные, которые он пытается вытащить, существуют только в Angular not Node.

Вопрос

Есть ли способ заставить AngularJS и Express Handlebars работать вместе?

Возможные решения

Измените синтаксис AngularJS
- Я смотрел BackboneJS, и похоже, что можно изменить синтаксис. Возможно, что-то похожее на AngularJS.
Создайте помощник ng в Express Handlebars.
- Он просто вернет свой неанализируемый контент. Однако я не мог понять, как это сделать.

Ответ 1

Ваше первое решение возможно, AngularJS позволяет изменить символы начала и конца интерполяции текста следующим образом:

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

Затем вы можете использовать его в своем шаблоне:

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

Также см.: $interpolateProvider documentation

Надеюсь, что это поможет.

Ответ 2

Вместо этого вы можете использовать синтаксис ng-bind:

<p ng-bind="user.profile.description"></p>
Это идентично <p>{{user.profile.description}}</p>

В документах Angular для ngBind:

Как правило, вы не используете ngBind напрямую, но вместо этого вы используете двойную курсорную разметку, например {{expression}}, которая похожа, но менее подробная.

Предпочтительно использовать ngBind вместо {{expression}}, если шаблон на мгновение отображается браузером в его исходном состоянии до того, как Angular скомпилирует его. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.

Ответ 3

Чтобы поддерживать стиль AngularJS, ваше второе решение лучше, Создать помощник в Express Handlebars.

Ссылки на веб-сайт Handlebars: http://handlebarsjs.com/block_helpers.html, вы можете зарегистрировать вспомогательный raw-helper

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

и используйте его в своем шаблоне hbs, поместив его в четырехстрочный {{{{

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

Ответ 4

Существует лучший способ:\{{foo}}. Содержимое ручек может быть экранировано одним из двух способов: встроенными экранами или вспомогательными блочными блоками. Встроенные escape-последовательности, созданные путем префикса блока усов с \. Необработанные блоки создаются с помощью {{{{скобки усов. Вы можете увидеть это http://handlebarsjs.com/expressions.html#helpers

Ответ 5

Я бы рекомендовал использовать синтаксис привязки данных AngularJS (что похоже на Handlebars), и ваш сервер NodeJS просто служит статическому исходному коду AngularJS. Я предпочитаю выгружать шаблоны на клиента и поэтому уделять меньше внимания вашему серверу, не говоря уже о том, что AngularJS и другие MVC-фреймворки (мой любимый EmberJS) отлично подходят для динамического создания веб-страницы.

Я поклонник Yeoman и вот генератор для построения проекта Angular, обслуживаемого NodeJS: https://github.com/yeoman/generator-angular