Express 핸들바와 각도 JS 사용

Express 핸들바와 각도 JS 사용

배경

현재 서버, Express Handlebars(Just Handlebars, 서버측) 및 Angular를 사용하는 웹사이트를 구축하고 있습니다.JS는 클라이언트 측을 위한 것입니다.

문제

AngularJS 및 핸들바는 템플릿 작성에 동일한 구문을 사용합니다.
{{foo}}
이로 인해 Angular가JS 코드는 먼저 Express Handlebars에 의해 해석됩니다.풀링하려는 데이터가 노드가 아닌 Angular에만 존재하기 때문에 오류가 발생합니다.

질문

Angular를 구할 방법은 없을까?JS와 Express 핸들바가 함께 작동합니까?

생각할 수 있는 해결책

• Angular 구문 변경JS
  • 나는 백본을 보고 있었다.JS와 구문을 변경할 수 있을 것 같습니다.비슷한 게 있을 수도 있어 Angular.JS.
• 작성하다ngExpress 핸들바의 도우미
  • 구문 분석되지 않은 내용만 반환됩니다.그러나 나는 이것을 어떻게 해야 할지 알 수 없었다.

첫 번째 해결책은 가능하다, AngularJS를 사용하면 텍스트 보간 시작/종료 기호를 다음과 같이 변경할 수 있습니다.

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

그런 다음 템플릿에서 사용할 수 있습니다.

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

참고 항목: $interpolateProvider 매뉴얼

이게 도움이 됐으면 좋겠다.

대신 항상 ng-bind 구문을 사용할 수 있습니다.

<p ng-bind="user.profile.description"></p>
이것은 와 동일합니다.
<p>{{user.profile.description}}</p>

ngBind의 Angular docs에서:

일반적으로 ngBind를 직접 사용하는 것이 아니라 {{ expression }}과 같은 더블컬리 마크업을 사용합니다.이것은 유사하지만 상세하지 않습니다.

Angular가 템플릿을 컴파일하기 전에 브라우저에 raw 상태로 일시적으로 표시되는 경우 {{ expression }} 대신 ngBind를 사용하는 것이 좋습니다.ngBind는 요소 속성이기 때문에 페이지 로드 중에는 바인딩이 사용자에게 표시되지 않습니다.

각을 유지하려면JS Style, 두 번째 솔루션이 더 좋습니다. Express 핸들 바에 도우미를 만듭니다.

핸들바 웹사이트 참조:http://handlebarsjs.com/block_helpers.html, 도우미를 등록할 수 있습니다.raw-helper

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

hbs 템플릿에 4중으로 저장하여 사용할 수 있습니다. {{{{

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

더 나은 방법이 있습니다.\ { foo } 。핸들 바의 내용은 인라인 이스케이프 또는 raw block helper의 두 가지 방법 중 하나로 이스케이프할 수 있습니다.콧수염 블록 앞에 \를 붙여 인라인 이스케이프를 만듭니다.미처리 블록은 {{{ 콧수염 브레이스}를 사용하여 작성됩니다.http://handlebarsjs.com/expressions.html#helpers 를 참조해 주세요.

Angular를 사용하는 것이 좋습니다.JS의 데이터 바인딩 구문(핸들바와 유사한 것)으로 노드가JS 서버는 정적 Angular를 간단하게 처리합니다.JS 소스 코드템플리트를 클라이언트에 오프로드하여 Angular는 말할 것도 없고 서버에 대한 부하가 줄어듭니다.JS 및 기타 MVC 프레임워크(가장 좋아하는 것은 Ember)JS)는 웹 페이지를 동적으로 구축하는데 매우 적합합니다.

저는 Yeoman의 팬이며, Node에서 제공하는 Angular 프로젝트를 구축하기 위한 발전기입니다.JS: https://github.com/yeoman/generator-angular

언급URL : https://stackoverflow.com/questions/25366412/using-express-handlebars-and-angular-js