한국어 번역 완료

AngularJS 개발 지침

AngularJS 성능 향상을 위해 따라야 할 사항

일회성 바인딩(::): Angular 1.3부터 값이 설정된 뒤 표현식이 변하지 않는 경우 일회성 바인딩을 사용할 수 있습니다. 환자 식별자는 설정 후 바뀌지 않으므로 {{::patient.identifier}}가 적합합니다. 일회성 표현식은 undefined가 아닌 값으로 안정화된 첫 digest 후 재계산을 멈추지만, 값이 undefined인 동안 watcher는 계속 유지됩니다. 선택 속성이 없을 수 있는 조건은 undefined를 반환하지 않도록 this.conceptUIConfig.required == true처럼 작성하십시오. directive의 읽기 전용 속성도 필요한 곳에서 일회성 바인딩으로 전달합니다.

Directive 선택 속성: 격리 scope 속성을 =?로 선언하면 선택적으로 만들 수 있습니다. =로 선언한 속성이 전달되지 않으면 undefined 상태의 watcher가 남지만 =?를 사용하면 실제 전달된 속성에만 watcher가 추가됩니다.

ng-repeat에는 track by를 사용하십시오: http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

운영 환경에서 DebugInfo 비활성화: Angular는 기본적으로 DOM 계층 전체에 ng-binding, ng-scope, ng-isolate-scope 등의 클래스를 jQuery data로 추가하여 로딩 시간이 늘어납니다. 운영 환경에서는 이를 끌 수 있습니다. 자세한 내용: https://docs.angularjs.org/guide/production

작은 요소 표시·숨김에는 ng-if/ng-show 대신 CSS 클래스를 사용하십시오. 데이터 바인딩이나 핸들러가 없는 작은 화살표 같은 요소는 toggle directive가 active 클래스를 바꾸게 하고 CSS로 표시 상태를 제어하면 됩니다.

One-time binding ( :: )

Directive's optional attributes

Use track by with ng-repeat.

Disable DebugInfo in production

Use css class to show and hide small elements instead of ng-if/ng-show

one-time binding

<span>{{::patient.identifier}}</span>

<span ng-if="::observation.isRequired()" class="asterick">*</span>

observation.js

isRequired: function () {
        return this.conceptUIConfig.required;
   },

Passing attributes to directive as one-time binding

<section address-fields data-address-levels="::addressLevels" data-address="patient.address"
         field-validation="::fieldValidation"></section>

attributeTypes.js

scope : {
    targetModel : '=',
    attribute : '=',
    fieldValidation : '=',
    isAutoComplete: '&',
    getAutoCompleteList: '&',
    getDataResults: '&',
    isReadOnly: '&',
    isForm : '='
}

Usage 1

<attribute-types target-model="patientProgram.patientProgramAttributes" attribute="attributeType"></attribute-types>

Usage 2

<attribute-types target-model="patient" attribute="::attribute" field-validation="::fieldValidation"
                 is-auto-complete="isAutoComplete" get-auto-complete-list="getAutoCompleteList"
                 get-data-results="getDataResults" is-read-only="isReadOnly"></attribute-types>

app.js

$compileProvider.debugInfoEnabled(false);

<div toggle="displayPatientContactDetails">
    <i class="fa fa-caret-right" ng-hide="displayPatientContactDetails"></i>
    <i class="fa fa-caret-down" ng-show="displayPatientContactDetails"></i>  
    <span>Patient Contact Details</span> 
 </div>

div{
  &.active{
    .fa-caret-right{
      display: none;
    }
    .fa-caret-down{
      display: block;
    }
  }
  .fa-caret-down{
    display:none;
  }
}

<div toggle="displayPatientContactDetails">
    <i class="fa fa-caret-right"></i>
    <i class="fa fa-caret-down"></i>  
    <span>Patient Contact Details</span> 
 </div>

Screen Shot 2016-03-03 at 10.49.41 am.png

원문 정보

Bahmni Wiki · CC BY-SA 4.0

원문 보기 ↗