[node.js] AngularJs 앱을 작성할 때 Jade 또는 Handlebars를 사용하는 방법

Program / 글쓴이

나는 전체 자바 스크립트 풀 스택 응용 프로그램에 대해 새롭고 Angular에 완전히 새롭기 때문에 누군가가 나를 위해 바로 기록을 올릴 수 있기를 바랐습니다.

AngularJS를 사용하여 클라이언트 측 앱을 작성할 때 Jade 또는 Handlebars와 같은 템플릿 프레임 워크를 사용해야하는 이유는 무엇입니까?

나는 이러한 템플릿 프레임 워크를 사용한 적이 없다고 말해야한다. 그래서 나는 이점에 대해 완전히 익숙하지 않습니다. 하지만 예를 들어 Handlebars를 보면 루프 등 Angular에서하는 것과 동일한 작업을 많이 수행합니다.

내가 말할 수있는 한, 적절한 HTML을 사용하여 Angular에서 템플릿을 만든 다음 모든 템플릿 클라이언트 측을 수행하고이를 노드 및 몽고를 사용하는 API 첫 번째 접근 방식과 결합하는 것이 가장 합리적입니다.

이 혼란의 이유는 GitHub에서 찾은 많은 예제가 Jade를 사용하고 있으며 나에게 반 직관적 인 것처럼 보이기 때문입니다.

나를 깨달아 주시고 똑바로 세우십시오. 저보다 훨씬 더 많이 아는 사람들로부터 몇 가지 모범 사례를 배우고 싶습니다.

감사

답변

의심 할 여지없이 Angular 환경에서 Jade를 선호 하는 사람들 은 OP가 언급 한 것처럼 뷰 로직이 클라이언트에 있고 비즈니스 로직이 서버에 속한다는 것을 이해하지 못합니다.

당신이 그것을 할 아주 좋은 이유가 없다면 그것을하지 마십시오. 엔지니어링에서는 움직이는 부품이 적은 시스템이 더 안정적인 시스템이고, 인터페이스 경계 (클라이언트 / 서버)가 존중되는 시스템은 장기적으로 더 유지 관리가 가능하므로 기본적으로 가장 단순한 아키텍처와 가능한 경우 깨끗한 분업을 사용합니다. 우선하는 이유가있는 경우해야 할 일을 수행하되 주의 해야합니다 .

최근에 저는 단순한 Angular 템플릿이 Jade에서 믹싱하는 것보다 단순성을 유지하는 것보다 훨씬 더 나은 일을 할 수있는 코드를 검토했습니다.

템플릿 확장 외에도 Jade는 Angular가 아직 제공하지 않는 테이블에 가치가 없습니다. 솔직 해지자. “상속보다 구성을 선호”(즉, 부분)라는 건전한 원칙을 사용하면 템플릿 확장 성 이 필요 하지 않습니다 . Jade는 HTML보다 “파싱하기가 더 쉽지”않습니다. 그것들은 사소하게 다르지만 Jade는 또 다른 수준의 간접적 인 방향을 추가합니다.

서버 측 템플릿에 대한 유효한 특수 사례가 하나 있습니다. 최적화, 조기 최적화는 일반적으로 나쁜 일이라는 것을 기억하십시오. 성능이 진정으로 문제가 되고이를 처리 할 수있는 서버 용량이있는 경우 서버 측 템플릿이 도움이 될 수 있습니다. 이것은 Twitter 및 Basecamp와 같은 제품에 적용되며 서버 측 작업을 많이 수행하는 비용은 서버에 대한 요청 감소로 상쇄됩니다.

Handlebars의 경우 AngularJS의 (놀라운) 클라이언트 측 템플릿을 교체 할 필요가 없습니다.

답변

일반 HTML 작성을 싫어하기 때문에 Jade를 사용하여 AngularJS에서 사용하는 템플릿을 생성합니다. 다음과 같이 보입니다.

.control-group(
  ng-form
  name='emailGroup'
  ng-class='{"ng-error": emailGroup.$invalid}'
)
  label.control-label Email
  .controls
    input(
      type='email'
      ng-model='user.email'
      required
      placeholder='you@example.com'
      focus-on='focusEmail'
    )

… 일반 HTML보다 훨씬 더 깔끔하다고 생각합니다.

답변

솔직히 사람들이 이것의 차이점에 관심을 갖는 이유를 이해하지 못합니다.

<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>

이:

html(ng-app="ng-app")
  // Body tag augmented with ngController directive  
  body(ng-controller="MyController")
    input(ng-model="foo", value="bar")
    // Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup
    button(ng-click="changeFoo()") {{buttonText}}
    script(src="angular.js")

사람이 조금 더 읽을 수있는 것을 제외하고는. 약간 . 사람들이 그 주제에 대해 왜 그렇게 열광하는지 이해하지 못합니다. 그것은 모두 자전거 흘리기입니다. 그 차이는 무시할 만하고 유능한 프로그래머라면 구글에서 5 초만에 쉽게 번역 할 수 있습니다. 당신이 원하는 것을 사용하고 다른 사람들이 아무것도 놓고 다투게하십시오. 전투를 선택하고 원자로 와 같이 실제로 중요한 것에 대한 토론에 참여하십시오 .)

답변

  1. AngularJS에는 자체 템플릿 엔진이 있으므로 핸들 바를 사용할 필요가 없습니다.
  2. 그들이 Jade를 사용하는 이유는 html로 컴파일되고 나중에 프런트 엔드에서 angularJS가 제공하는 서버 렌더러이기 때문입니다.

따라서 TL; DR은 서버에서 어떤 언어 [jade, haml, …]를 사용하여 애플리케이션에 대한 html 구조 만 생성 할 수 있습니다. angularJS와는 아무런 관련이 없습니다. 프론트 엔드의 런타임.

서버에서 Jade를 사용할 필요가 없으며 새로운 개발자에게 혼란을 줄 수 있으므로 사용하지 않는 것이 좋습니다. 당신이 보는 프로젝트에서 그들은 더 깨끗하고 익숙하기 때문에 Jade를 사용하며 angularJS와 함께 사용하는 경우 논리없이 일반 HTML을 생성하는 것이 유일한 작업입니다.

답변

받아 들여지는 대답은 다소 일방적이며 HTML 용 사전 컴파일러 설정이 모든 종류의 HTML 프로젝트에 유용하다는 사실을 무시합니다. 구성 및 결과 마크 업 유연성.

Angular 앱에서 혼자 작업하십니까? Jade를 사용해보세요.

Jade는 HTML을 모듈화하는 능력을 향상시키고 HTML 디버깅에 소요되는 시간을 줄이며 마크 업 인벤토리 구축을 장려합니다.

디자인 타임 동안 HTML 부분에 엄청난 양의 반복이있을 수 있습니다. HTML 출력이 jade 파일 집합을 기반으로하는 경우 팀이 변화하는 요구 사항에 유연하게 대처할 수 있습니다. 또한 jade 포함을 재구성하여 마크 업을 변경하는 것은 순수한 HTML을 다시 작성하는 것보다 훨씬 강력합니다.

즉, 나는 생산 또는 개발 단계에서 각도와 옥을 혼합하는 것에 대한 일반적인 혐오감을 인식합니다. 또 다른 필수 구문 지식 세트를 도입하는 것은 대부분의 팀에게 나쁜 생각이며 jade를 사용하면 DRY 원칙에 의해 금지되는 일부 작업을 추상화하여 비효율적 인 프로젝트 관리를 숨길 수 있습니다 (예 : 마크 업 준비에 게으름).

답변

위의 모든 답변을 읽었으며 AngularJS 템플릿 생성보다 옥을 사용하는 것이 매우 유용한 한 가지 측면을 언급 한 사람이 아무도 없다는 사실에 약간 놀랐습니다.

이미 말했듯이 프로덕션에서 raw html과 jade를 입력하는 것 사이의 현실적인 시나리오 차이는 실제로 주목할 만하지 만 우리가 절대 잊지 말아야 할 더 중요한 것은 때때로 동적으로 변경되고 다시 초기화 된 angularjs 템플릿이 필요하다는 것 입니다.

간단히 말해서 , 때때로 innerHTML을 통해 html을 변경 한 다음 AngularJS가 내용을 다시 컴파일하도록 강제해야합니다. 그리고 이것은 옥을 통해 그러한 뷰를 생성 할 때 정확히 유형의 작업이 이점을 가질 수 있습니다.

또한 AngularJS는 구조가 잘 알려진 모델과 잘 작동합니다. 실제로 우리는 실제로 정확한 구조를 알지 못합니다 (예 : JSON 렌더러를 상상해보십시오). AngularJS는 (앵귤러 앱을 구축하고 있더라도) 꽤 서 투르지만 jade가 작업을 수행합니다.

답변

Jade를 통해 각도 템플릿을 포함 할 수 있습니다.

script(type="text/ng-template", id="admin")
  include partials/admin

캐싱 템플릿의 경우 자바 스크립트 파일에 이스케이프 된 템플릿을 포함하는 것보다 훨씬 덜 취약하다고 생각합니다.

참조 : https://docs.angularjs.org/api/ng/service/$templateCache