AngularJS와 응용 프로그램을 작성하는 옥 또는 핸들 바의 사용은 무엇입니까

나는 누군가가 나를 여기 똑바로 기록을 넣을 수 있습니다 기대했다, 그래서 나는, 전체 자바 스크립트 전체 스택 응용 프로그램 (틱) 새로운, 그리고 각도에 완전히 새로운입니다.

클라이언트 측을 작성하는 것은 AngularJS와를 사용하여 애플 리케이션 왜 내가 옥 또는 핸들 바 같은 템플릿 프레임 워크를 사용해야합니다.

나는 나도 이러한 템플릿 프레임 워크 중 하나를 사용한 적이 있다고한다. 그래서 나는 완전히 장점에 익숙하지 않은입니다. 내가 예를 들어 핸들 바에서 볼 때, 내가 등 루핑과 같은 각도에서하는 것과 같은 많은 일들을 수행

지금까지 내가 말할 수있는, 그것은 적절한 HTML을 사용하여 각도에서 템플릿을 만든 다음 모든 템플릿 클라이언트 측을 수행하고 노드를 사용하여 API 첫 번째 방법으로이 문제를 결합하고, 예를 들어 몽고하는 대부분의 감각을 만들 것입니다.

이 혼란의 이유는 많은 예제 내가 제이드의 GitHub의 메이크업의 사용을 찾을 수 있다는 것입니다, 그리고 그것은 나를 위해 카운터 직관적 인 것 같다.

가르치 려하고, 바로 저를 설정하십시오. 나는 더 나보다 많이 아는 사람들로부터 몇 가지 모범 사례를 배우고 싶어요.

감사

해결법

==============================
1.의심없이 각도 환경에서 옥을 선호하는 사람들은 해당 뷰 로직이 영업 이익은 주석 마찬가지로, 서버에서 클라이언트 및 비즈니스 로직에 속하는 이해하지 못한다.

의심없이 각도 환경에서 옥을 선호하는 사람들은 해당 뷰 로직이 영업 이익은 주석 마찬가지로, 서버에서 클라이언트 및 비즈니스 로직에 속하는 이해하지 못한다.

당신이 그것을 할 수있는 아주 좋은 이유가없는 한 그렇게하지 마십시오. 엔지니어링에서 적은 움직이는 부품과 시스템은보다 안정적인 시스템 및 인터페이스 경계 (클라이언트 / 서버)가 존중되는 시스템은 매우 간단한 구조와 노동 가능하면 깨끗한 부문에 기본적으로, 장기적으로 더 유지 보수입니다. 당신이 이유를 무시하는 경우, 당신이해야하지만주의의 위험 부담 않습니다.

최근에 나는 직선 각도 템플릿 그냥 단순 유지를 통해, 옥에 혼합보다 훨씬 더 나은 일을 할 것 몇 가지 코드를 검토했다.

이외에도 템플릿 확장에서, 옥은 각도가 이미 제공하지 않는 테이블에 가치 아무것도 제공하지 않습니다. 정직하자 "상속 이상의 찬성 구성"(즉, 파셜)의 소리 원리를 사용하여, 당신은 이제까지 템플릿 확장 성을 필요가 없습니다. 옥은 거의 HTML보다 "구문 분석에보다 쉽게"입니다. 피해야 - 옥 간접의 또 다른 레벨을 추가하면서 그들은, 그러나 하찮게 다르다.

최적화 조기 최적화는 일반적으로 나쁜 일이라고 기억 : 서버 측 템플릿에 대해 하나의 유효한, 전문 경우가 있습니다. 성능이 문제에서 진정으로, 그리고 당신이 처리 할 수있는 여분의 서버 용량이 경우, 서버 측 템플릿을 지원할 수 있습니다. 이것은 서버 측 작업을 많이하고 비용이 서버에 감소 요청의 이익에 의해 상쇄되는 트위터와베이스 캠프, 같은 제품에 적용됩니다.

핸들 바대로, AngularJS와의 (놀라운) 클라이언트 측 템플릿을 교체 할 필요가 없다.
==============================
2.나는 일반 HTML을 쓰기 싫어하기 때문에 AngularJS와 소비하는 템플릿을 생성하는 옥을 사용합니다. 그것은 다음과 같은 :

나는 일반 HTML을 쓰기 싫어하기 때문에 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보다 훨씬 청소기입니다.
==============================
3.사람들은이 차이에 대해 신경 이유를 솔직히 이해가 안 :

사람들은이 차이에 대해 신경 이유를 솔직히 이해가 안 :
```
<html ng-app>
 
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   
   <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")
```
내가 하나가 약간 더 읽을 찾을 것을 제외하고. 약간. 사람들이 너무 주제에 대한 열렬한 왜 나는하지 않습니다. 그것은 모든 bikeshedding입니다. 차이는 무시할하고 유능한 프로그래머는 쉽게 구글에 5 초 후에 다른에 하나를 번역 할 수 있습니다. 당신이 원하는 것을 사용하고 아무 이상 다른 사람 싸움을 할 수 있습니다. 당신의 전투를 선택하고 원자 원자로와 같은, 실제로 문제가 그 일에 대한 토론에 참여)
==============================
4.TL 그래서, DR은 서버에, 당신은 어떤 언어로 사용할 수 있습니다 [옥, HAML를, ...]은 렌더링 및 HTML 직장 때문에이 AngularJS와 함께 할 아무것도하지 않는 응용 프로그램에 대한 바로 HTML 구조를 생성하는 프론트 엔드에 런타임.

TL 그래서, DR은 서버에, 당신은 어떤 언어로 사용할 수 있습니다 [옥, HAML를, ...]은 렌더링 및 HTML 직장 때문에이 AngularJS와 함께 할 아무것도하지 않는 응용 프로그램에 대한 바로 HTML 구조를 생성하는 프론트 엔드에 런타임.

당신은 서버에 제이드를 사용하지 않아도, 그것은 새로운 개발자를 혼동하기 때문에 내가 사용하지 않는 것이 좋습니다. 당신이 보는 것을 프로젝트에서 그것의 깨끗하고 그들이 그것을 사용 만하기 때문에 그들은 옥을 사용하고 AngularJS와 함께 사용하는 경우, 그것은 단지 작업이 어떤 논리없이 일반 HTML을 생성하는 것입니다.
==============================
5.허용 대답은 다소 일방적이고 HTML에 대한 사전 컴파일러의 설정이 모든 HTML 프로젝트의 종류에 대해 잘 사용했다는 사실 무시 : 구성 및 마크 업 유연성을 결과를.

허용 대답은 다소 일방적이고 HTML에 대한 사전 컴파일러의 설정이 모든 HTML 프로젝트의 종류에 대해 잘 사용했다는 사실 무시 : 구성 및 마크 업 유연성을 결과를.

각도 응용 프로그램에 혼자 근무? 옥에게 시험을주십시오.

옥, 모듈화 HTML에 당신의 능력을 향상 디버깅 HTML에 소요도 마크 업 재고 구축을 장려 시간이 줄어 듭니다.

디자인 타임 HTML 부분에 반복의 끔찍한 금액이있을 수 있습니다. HTML 출력이 옥 파일 세트를 기반으로하는 경우 팀은 요구 사항 변경에 유연하게 행동하기가 쉽습니다. 또한, 재 작성 옥 통해 마크 업을 변경하면 다시 쓰는 순수한 HTML보다 훨씬 더 강력 포함되어 있습니다.

즉 존재 제가 생산 또는 개발 단계에서 옥 각도 혼합 향해 일반적인 인식을 회피했다. 구문 지식의 또 다른 요구 세트를 소개하는 대부분의 팀에 대한 나쁜 아이디어와 DRY 원칙으로 금지 될 몇 가지 작업을 멀리 추출하여 비효율적 인 프로젝트 관리를 숨길 수있는 옥을 사용하는 것입니다 (예를 들어, 마크 업 준비에 게으른)
==============================
6.나는 위의 모든 답변을 읽고 조금 아무도 AngularJS와를 생성하는 매우 유용한 일을 템플릿을 통해 옥을 사용하게 한 측면을 언급 없었다 놀랐다했습니다.

나는 위의 모든 답변을 읽고 조금 아무도 AngularJS와를 생성하는 매우 유용한 일을 템플릿을 통해 옥을 사용하게 한 측면을 언급 없었다 놀랐다했습니다.

이미 이야기 한 것처럼, 생산, 원시 HTML과 옥을 입력 사이의 현실적인 시나리오의 차이는 실제로 주목할만한, 그러나 우리는 결코 잊지 않을해야 더 중요한 것은 때때로 우리가 동적으로 변경 및 AngularJS와 템플릿을 다시 초기화 필요가 있다는 것입니다.

그것을 간단하게 말하자면, 때때로 우리는 innerHTML을 통해 HTML을 변경 한 다음 다시 컴파일 내용을 AngularJS와 강제 할 필요가있다. 그것에게 이점을 가질 수 옥 통해 이러한 뷰를 생성 할 때이 작업 정확하게 유형입니다.

또한, AngularJS와는 잘 알려진 정의되는 구조 모델과 잘 작동합니다. 사실, 우리가 실제로 (말, JSON 렌더러를 상상) 정확한 구조를 모르는 발생합니다. 비취가 일을 할 것입니다 동안 AngularJS와는, (경우에도 각 응용 프로그램을 구축했다) 여기에 매우 서투른 될 것입니다.
==============================
7.당신은 옥을 통해 각 템플릿을 포함 할 수 있습니다.

당신은 옥을 통해 각 템플릿을 포함 할 수 있습니다.
```
script(type="text/ng-template", id="admin")
  include partials/admin
```
캐시 템플릿을 위해 나는 훨씬 덜 깨지기 쉬운 자바 스크립트 파일의 탈출 템플릿을 포함 이상으로 이것을 인식.

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

==============================

8.옥은 확실히 훨씬 더 가까이 HTML로 말 HAML보다. 그래서 컨텍스트 스위치는 실제로 매우 최소이다. 그러나 그것은 완전히 존재하지 않습니다. 그것은 모두에서 개발자에게 문제가되지 않을 수도 있습니다. 당신의 디자이너가 와서 당신이 제대로 작동하려면 중첩 된 태그를 얻는 방법을 물을 때, 당신은 당신이 처음에 만든 불필요한 문제를 해결하고 있습니다.

옥은 확실히 훨씬 더 가까이 HTML로 말 HAML보다. 그래서 컨텍스트 스위치는 실제로 매우 최소이다. 그러나 그것은 완전히 존재하지 않습니다. 그것은 모두에서 개발자에게 문제가되지 않을 수도 있습니다. 당신의 디자이너가 와서 당신이 제대로 작동하려면 중첩 된 태그를 얻는 방법을 물을 때, 당신은 당신이 처음에 만든 불필요한 문제를 해결하고 있습니다.

HTML은 여전히 매우 읽기 쉽게 기록 할 수 있으며, 파셜은 더 이해하게하는 데 사용할 수 있습니다. 그것은 옥 또는 HTML 일 - 아무것도의 500 개 라인을 읽기 어렵다.

다음은 옥 템플릿입니다

.product-container

    .input-group.msB.col-md-5.no-padding
        .fnt-light-navyblue.mtB(for='name')
            strong Name the sticker
        input.full-input(type='text', placeholder='Awesome Batman Sticker')
    .clear

    .form-group.mmT
        label.form-label.fnt-light-navyblue
            strong Choose size
        .selector-group(ng-repeat="size in sizes", ng-class="{ 'msT': !$first}")
            - raw
            span.radio
                input.radio(name='choose_sticker_size',
                            ng-model="selectedSize",
                            type='radio',
                            value='{{size}}',
                            id="sticker-{{size}}")
                span.fake-radio
            label(for='sticker-{{size}}') {{size}} inch
            - endraw
    // end form-group
    .clear

그리고 해당 HTML

<div class="product-container">

    <div class="input-group msB col-md-5 no-padding">
        <div for="name" class="fnt-light-navyblue mtB">
            <strong>Name the product</strong>
        </div>
        <input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
    </div>
    <div class="clear"></div>

    <div class="form-group mmT">
        <label class="form-label fnt-light-navyblue">
            <strong>Choose size</strong>
        </label>
        <div
            class="selector-group"
            ng-class="{ 'msT': !$first}"
            ng-repeat="size in sizes">
                {% raw %}
                <span class="radio">
                    <input
                        id="sticker-{{size}}"
                        class="radio"
                        name="choose_sticker_size"
                        ng-model="selectedSize"
                        type="radio"
                        value="{{ size }}" />
                    <span class="fake-radio"></span>
                </span>
                <label for="sticker-{{size}}">{{size}}</label>
                {% endraw %}
        </div>
    </div><!-- end form-group -->
    <div class="clear"></div>
</div>

읽기 쉽게 작성 할 때 나는 HTML은 매우 특히 스위치를 보장하도록 불이익을 참조하십시오니까. 물론 충분, 각 괄호는 눈에 거슬리는입니다. 그러나 나는 오히려 제가 도입 된 간접는 HTML을 깨는 여부를 디자이너의 의심을 처리하는 것보다, 그들을 것이다. (이되지 않을 수도 있습니다. 그러나 그것을 증명하는 것은 가치있는 노력하지 않습니다)

==============================
9.우선, 당신은 항상 서버 측 템플릿의 일종이 필요합니다.

우선, 당신은 항상 서버 측 템플릿의 일종이 필요합니다.

그것은 종종 서버에 대한 몇 가지 정적 요소를 렌더링함으로써 완화 그래서 순수 클라이언트 측 템플릿은 로딩 시간이 큰 단점이있다. 이 방법은 사용자가 부분적으로 페이지를로드 할 때, 그는 이미 페이지의 일부 요소를 볼 수 있습니다.

사람들은 때때로 대신 지킬 같은 정적 HTML 생성기를 사용 비록 물론, 템플릿,이 경우에 편리합니다.

이곳에 언급되지 않은 것 제이드를 사용하는 또 다른 이유가있다.

공백.

당신이 들여 쓰기와 줄 바꿈 인간 유지 보수 HTML을 작성하는 경우, 모든 단일 LINEBREAK은 공백 텍스트 노드가 발생합니다. 그것은 어떤 경우에는 인라인 요소의 서식 나사, 그리고 자바 스크립트 코드를 더 이상 만들 꽤 많이 있습니다.

당신은 여기에서 자세한 내용을 읽을 수 있습니다 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

당신이 옥 코드를 작성하는 경우, 그것은이 문제가없는 한 줄 HTML로 컴파일됩니다.
==============================
10.팀에서 작업 할 때, 프런트 엔드 가능성이 정적 HTML로 자신의 페이지를 디자인 선호한다. 동적 HTML 템플릿으로 정적 에러의 원인이라고 번역 및 옥을 추가하는 등의 번역 단계를 더 추가한다.

팀에서 작업 할 때, 프런트 엔드 가능성이 정적 HTML로 자신의 페이지를 디자인 선호한다. 동적 HTML 템플릿으로 정적 에러의 원인이라고 번역 및 옥을 추가하는 등의 번역 단계를 더 추가한다.

많은 사람들이, 나는 단순함을 선호!

from https://stackoverflow.com/questions/18174856/whats-the-use-of-jade-or-handlebars-when-writing-angularjs-apps by cc-by-sa and MIT license

'MONGODB' 카테고리의 다른 글

[MONGODB] 2 차원 지리 지수 제대로 몽구스 스키마의 배열에 객체를 정의하는 방법 (0)	2019.12.28
[MONGODB] MongoDB의의 mongorestore 실패 : 유효하지 로케일 ::면 :: _ S_create_c_locale 이름 (0)	2019.12.28
[MONGODB] 언제 관계형 데이터베이스 대신되는 NoSQL 데이터베이스를 사용해야합니까? 동일한 사이트에 모두 사용하기 괜찮습니까? (0)	2019.12.28
[MONGODB] MongoDB의 : initAndListen에서 예외 : 20 읽기 전용 디렉토리에 대한 잠금 파일을 만들 시도 : / 데이터 / dB, 종료 (0)	2019.12.27
[MONGODB] MongoDB를 errno를 연결할 수 없습니다 : (61) 연결이 거부 됨 (0)	2019.12.27

복붙노트

[MONGODB] AngularJS와 응용 프로그램을 작성하는 옥 또는 핸들 바의 사용은 무엇입니까

AngularJS와 응용 프로그램을 작성하는 옥 또는 핸들 바의 사용은 무엇입니까

해결법

1.의심없이 각도 환경에서 옥을 선호하는 사람들은 해당 뷰 로직이 영업 이익은 주석 마찬가지로, 서버에서 클라이언트 및 비즈니스 로직에 속하는 이해하지 못한다.

2.나는 일반 HTML을 쓰기 싫어하기 때문에 AngularJS와 소비하는 템플릿을 생성하는 옥을 사용합니다. 그것은 다음과 같은 :

3.사람들은이 차이에 대해 신경 이유를 솔직히 이해가 안 :

4.TL 그래서, DR은 서버에, 당신은 어떤 언어로 사용할 수 있습니다 [옥, HAML를, ...]은 렌더링 및 HTML 직장 때문에이 AngularJS와 함께 할 아무것도하지 않는 응용 프로그램에 대한 바로 HTML 구조를 생성하는 프론트 엔드에 런타임.

5.허용 대답은 다소 일방적이고 HTML에 대한 사전 컴파일러의 설정이 모든 HTML 프로젝트의 종류에 대해 잘 사용했다는 사실 무시 : 구성 및 마크 업 유연성을 결과를.

6.나는 위의 모든 답변을 읽고 조금 아무도 AngularJS와를 생성하는 매우 유용한 일을 템플릿을 통해 옥을 사용하게 한 측면을 언급 없었다 놀랐다했습니다.

7.당신은 옥을 통해 각 템플릿을 포함 할 수 있습니다.

9.우선, 당신은 항상 서버 측 템플릿의 일종이 필요합니다.

10.팀에서 작업 할 때, 프런트 엔드 가능성이 정적 HTML로 자신의 페이지를 디자인 선호한다. 동적 HTML 템플릿으로 정적 에러의 원인이라고 번역 및 옥을 추가하는 등의 번역 단계를 더 추가한다.

'MONGODB' 카테고리의 다른 글

티스토리툴바