В настоящее время я создаю веб-сайт, который использует NodeJS для сервера, Express Handlebars (Просто Handlebars, но на стороне сервера), и, надеюсь, AngularJS для некоторых приложений на стороне клиента.
AngularJS и Handlebars используют тот же синтаксис для шаблонов {{foo}}
Это вызывает проблему, когда код AngularJS будет сначала интерпретироваться с помощью Express Handlebars, который затем выдаст ошибку, потому что данные, которые он пытается вытащить, существуют только в Angular not Node.
Есть ли способ заставить AngularJS и Express Handlebars работать вместе?
ng в Express Handlebars.
Ваше первое решение возможно, AngularJS позволяет изменить символы начала и конца интерполяции текста следующим образом:
appModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
Затем вы можете использовать его в своем шаблоне:
<div>{[{message}]}</div>
Также см.: $interpolateProvider documentation
Надеюсь, что это поможет.
Вместо этого вы можете использовать синтаксис ng-bind:
<p ng-bind="user.profile.description"></p>
Это идентично
<p>{{user.profile.description}}</p>
В документах Angular для ngBind:
Как правило, вы не используете ngBind напрямую, но вместо этого вы используете двойную курсорную разметку, например {{expression}}, которая похожа, но менее подробная.
Предпочтительно использовать ngBind вместо {{expression}}, если шаблон на мгновение отображается браузером в его исходном состоянии до того, как Angular скомпилирует его. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.
Чтобы поддерживать стиль 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}}}}
Существует лучший способ:\{{foo}}. Содержимое ручек может быть экранировано одним из двух способов: встроенными экранами или вспомогательными блочными блоками. Встроенные escape-последовательности, созданные путем префикса блока усов с \. Необработанные блоки создаются с помощью {{{{скобки усов. Вы можете увидеть это http://handlebarsjs.com/expressions.html#helpers
Я бы рекомендовал использовать синтаксис привязки данных AngularJS (что похоже на Handlebars), и ваш сервер NodeJS просто служит статическому исходному коду AngularJS. Я предпочитаю выгружать шаблоны на клиента и поэтому уделять меньше внимания вашему серверу, не говоря уже о том, что AngularJS и другие MVC-фреймворки (мой любимый EmberJS) отлично подходят для динамического создания веб-страницы.
Я поклонник Yeoman и вот генератор для построения проекта Angular, обслуживаемого NodeJS: https://github.com/yeoman/generator-angular