AngularJS_AngularJS의 사용자 정의 지시문 사용에 대한 심층 설명

AngularJS의 사용자 정의 지침은 사용자 고유의 지침과 DOM을 컴파일할 때 컴파일러가 실행하는 기본 핵심 기능입니다. 이해하기 어려울 수 있습니다. 이제 코드를 복제하지 않고 애플리케이션의 여러 페이지에서 일부 특정 코드를 재사용하고 싶다고 가정해 보겠습니다. 그런 다음 이 코드를 별도의 파일에 넣고 반복해서 입력하는 대신 사용자 지정 지시문을 사용하여 코드를 호출할 수 있습니다. 이러한 코드는 이해하기 더 쉽습니다. AngularJS에는 네 가지 유형의 사용자 지정 지시문이 있습니다.

1. 요소 명령
2. 속성 명령
3. CSS 클래스 지시문
4. 댓글 명령

기존 앱에 구현하기 전에 맞춤 지시어가 어떤 모습인지 살펴보겠습니다.

요소 명령

코드 스니펫을 삽입하는 데 사용되는 다음 태그를 html로 작성하세요. 특정 코드를 사용하고 싶을 때에는 위의 태그를 사용하여 코드를 포함시킵니다.

<guitar-reviews> ... </guitar-reviews>

JS 파일에서 다음 코드 줄을 사용하여 위의 angleJS 사용자 지정 지시어를 적용합니다.

app.directive('guitarReviews', function() {
 return {
  restrict  : 'E', // used E because of element 
  templateUrl : 'custom-directives/reviews.html'
 };
});

코드 설명:

app.controller와 마찬가지로 app.directive를 먼저 정의한 뒤 html에서 사용하는 요소 태그명인 GuitarReview를 정의합니다. 그런데 Guitar-review와 GuitarReviews가 다르다는 사실을 알고 계셨나요? 이는 Guitar-Reviews의 하이픈이 Camel Case로 변환되어 JS 파일에서는 GuitarReviews가 되기 때문입니다. 다음 단계는 매개변수를 반환하는 익명 함수입니다. 제한: 'E'는 사용자 정의 요소 지시문을 정의하고 있으며 templateUrl은 포함할 코드 조각 파일을 가리킨다는 의미입니다.

속성 지시어

html 파일의 html 태그에 다음 속성을 입력하세요. 이 태그는 코드 조각을 보관하는 데 사용됩니다. 특정 코드 부분을 사용하고 싶을 때, 우리는 코드를 포함시키기 위해 이와 같은 태그를 입력하기만 하면 됩니다.

<div guitar-reviews> ... </div>

JS 파일에서 다음 코드를 사용하여 위의 angleJS 사용자 정의 지시문을 적용합니다.

app.directive('guitarReviews', function() {
 return {
  restrict  : 'A', // used A because of attribute 
  templateUrl : 'custom-directives/reviews.html'
 };
});

참고: AngularJS에서는 맞춤 지시어에 CSS와 주석 대신 간단한 CSS와 일반 주석을 사용할 것을 권장합니다.

이제 앱에서 맞춤 명령을 구현해 보겠습니다. 여기에서 프로젝트 파일을 다운로드할 수 있습니다. 리뷰 부분에 대한 코드를 별도의 파일에 넣은 다음 코드 조각을 요소에 할당하고 마지막으로 세부사항.html 페이지에서 사용했습니다.

첫걸음

지정된 폴더 아래에 cDirectives라는 새 폴더를 만들어 맞춤 지침을 저장하세요. 그런 다음 이 폴더에 사용자 리뷰를 보관할 review.html 파일을 만듭니다. 이 시점에서 폴더 계층 구조는 다음과 같습니다.

2단계

details.html에서 리뷰 섹션을 잘라내고 다음과 같이 태그를 추가하세요.

3단계

details.html 페이지에서 잘라낸 코드를 아래와 같이 review.html에 복사하세요.

<!-- Review Tab START, it has a new controller -->
<div ng-show="panel.isSelected(3)" class="reviewContainer" ng-controller="ReviewController as reviewCtrl" >
 
<!-- User Reviews on each guitar from data.json - simple iterating through guitars list -->
<div class="longDescription uReview" ng-repeat="review in guitarVariable[whichGuitar].reviews"> 
  <h3>Review Points: {{review.star}} </h3>
  <p> {{review.body}} ~{{review.name}} on <date>{{review.createdOn | date:'MM/yy'}} </p>
</div><!-- End User Reviews -->
 
<!-- This is showing new review preview-->
<div ng-show="add === 1" class="longDescription uReview" > 
  <h3>Review Points: {{reviewCtrl.review.star}} <span ng-click="add=0">X</span></h3>
  <p> {{reviewCtrl.review.body}} ~ {{reviewCtrl.review.name}} </p>
</div>
 
<!-- Add new Review to specific guitar - click this link to show review adding pannel -->
<a href ng-click="add=1" class="addReviewLink">Add review</a>  
 
<!-- form validates here using form name and .$valid and on submission we are going to addReview function with guitarID -->
<form class="reviewForm" name="reviewForm" ng-submit="reviewForm.$valid && reviewCtrl.addReview(guitarVariable.indexOf(guitarVariable[whichGuitar]))" novalidate ng-show="add===1" >
  <div>
    Review Points: 
    <!-- ng-option here is setting options, cool&#63; -->
    <select ng-model="reviewCtrl.review.star" ng-options="point for point in [5,4,3,2,1]" required >    
    </select>
    Email: 
    <input type="email" ng-model="reviewCtrl.review.name" required>
    <button type="submit">Submit</button>
    </div>
    <textarea placeholder="Enter your experience with this guitar..." ng-model="reviewCtrl.review.body"></textarea>
</form><!-- END add new review -->
</div><br /><!-- END Review Tab -->

4단계

이제 사용자 리뷰 태그에 작업을 추가할 수 있습니다. Controller.js를 열고 다음 코드를 추가해 보겠습니다.

GuitarControllers.directive('userReviews', function() {
 return {
  restrict  : 'E', // used E because of element 
  templateUrl : 'partials/cDirectives/reviews.html'
 };
});

코드 설명:

여기서 지시어는 userReviews(카멜 형식)가 되며 하이픈은 사라졌습니다. 아래에서는 templateURL의 파일이 호출될 때 로드되고 지시어가 요소 E로 제한된다고 말할 수 있습니다.

방금 지시어를 맞춤설정했습니다. 애플리케이션에서 아무것도 변경되지 않은 것처럼 보이지만 이제 코드는 이전보다 더 잘 계획되어 있습니다. 설명 및 사양에 대한 지시문을 사용자 정의할 수 있습니까? 직접 시도해 보세요.