AngularJS 지시어 란 무엇입니까?

AngularJS 설명서와 여러 자습서를 읽는 데 많은 시간을 보냈으며 설명서가 얼마나 접근하기 어려운지 놀랐습니다.

AngularJS를 선택하는 다른 사람들에게도 유용 할 수있는 간단하고 대답 가능한 질문이 있습니다.

AngularJS 지시어 란 무엇입니까?

어딘가에 지시문에 대한 간단하고 정확한 정의가 있어야하지만 AngularJS 웹 사이트 는 놀랍게도 쓸모없는 정의를 제공합니다.

홈페이지에서 :

지시문은 AngularJS에서 사용할 수있는 독특하고 강력한 기능입니다. 지시문을 사용하면 응용 프로그램에 맞는 새로운 HTML 구문을 만들 수 있습니다.

에서 개발자 문서 :

지시문은 HTML 새로운 트릭을 가르치는 방법입니다. DOM 컴파일 중 지시문은 HTML과 일치하여 실행됩니다. 이를 통해 지시문이 동작을 등록하거나 DOM을 변환 할 수 있습니다.

그리고 아이러니하게도, 관객들이 이미 자신들이 무엇인지 이해한다고 가정하는 지시문에 대한 일련의 이야기 가 있습니다.

누구든지 명확한 참조를 위해 지시어가 무엇인지 설명하는 정확한 정의를 제공 할 수 있습니까?

1. 그것이 무엇입니까 ( 예를 들어 jQuery 의 명확한 정의 참조 )
2. 어떤 실질적인 문제와 상황을 다루려고 하는가
3. 어떤 디자인 패턴을 구현하거나 대안 으로 AngularJS의 취지에 따른 MVC / MVW 미션에 적합한 지 .

그것은 무엇입니까 (예를 들어 jQuery의 명확한 정의 참조)?

지시문은 본질적으로 Angular 컴파일러가 DOM에서 찾을 때 실행 되는 함수 ^† 입니다. 함수는 거의 모든 것을 할 수 있으므로 지시문이 무엇인지 정의하기가 다소 어렵다고 생각합니다. 각 지시어에는 ng-repeat, tab, make-up-your-own과 같은 이름이 있으며 각 지시어는 주석에서 요소, 속성, 클래스 등을 사용할 수있는 위치를 결정합니다.

^† 지시문에는 일반적으로 (포스트) 링크 기능 만 있습니다. 복잡한 지시문에는 컴파일 기능, 사전 연결 기능 및 사후 연결 기능이있을 수 있습니다.

어떤 실질적인 문제와 상황이 해결되어야합니까?

지시어가 할 수있는 가장 강력한 일은 HTML을 확장하는 것입니다. 확장은 응용 프로그램을 빌드하기위한 DSL ( Domain Specific Language )입니다. 예를 들어, 응용 프로그램이 온라인 쇼핑 사이트를 운영하는 경우 "쇼핑 카트", "쿠폰", "특별"등 지시문을 갖도록 HTML을 확장 할 수 있습니다. 'div'및 'span'이 아닌 온라인 쇼핑 '도메인 (@WTK에서 이미 언급 한대로).

지시문은 HTML을 구성 요소화할 수도 있습니다. HTML을 재사용 가능한 구성 요소로 묶습니다. ng-include를 사용하여 많은 HTML을 가져 오면 지시문을 리팩터링해야 할 때입니다.

어떤 디자인 패턴을 구현하거나 대안으로 angularjs의 의도 된 MVC / MVW 미션에 적합합니까?

지시문은 DOM을 조작하고 DOM 이벤트를 포착하는 위치입니다. 이것이 지시문의 컴파일 및 링크 함수가 모두 "요소"를 인수로받는 이유입니다. 당신은 할 수 있습니다

• 지시문을 대체 할 HTML (예 : 템플리트) 무리를 정의하십시오.
• 이 요소 (또는 그 자식)에 이벤트를 바인딩
• 수업 추가 / 제거
• text () 값을 변경하십시오
• 동일한 요소에 정의 된 속성에 대한 변경 사항을 감시합니다 (실제로 관찰되는 속성의 값입니다. 이는 범위 속성이므로 지시어는 "모델"을보고 변경 사항을 감시합니다)
• 기타

각도 지시어에 대한 실제로 간단하고 초기 정의는 다음과 같습니다.

AngularJS 지시문 (ng-directives)은 Angular에서 HTML을 확장하는 데 사용되는 ng 접두사 (ng-model, ng-app, ng-repeat, ng-bind)가있는 HTML 특성입니다. ( 에서 : W3schools 각도 튜토리얼 )

이것의 몇 가지 예는

NG-응용 프로그램 지시자는 AngularJS와 응용 프로그램을 정의합니다.

NG 모델 지시자는 애플리케이션 데이터를 제어 HTML (입력, 선택한 텍스트 영역)의 값을 결합한다.

NG-바인드 하는 HTML보기로 지시 바인딩 응용 프로그램 데이터.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

적어도이 튜토리얼은 Angular에 대한 가장 좋은 소개 중 하나였습니다. 더 완벽한 접근 방식은 @ mark-rajcok이 이전에 말한 모든 것입니다.

문서를 보면 지시문은 객체와 동작을 만들기 위해 angularjs가 구문 분석 할 수있는 구조입니다. 위젯 (구성 요소)의 구조, 작동 방식 및 데이터를 제공하는 방법 그런 다음 Angularjs는 이러한 지시문 에 대해 실행하여 html / javascript 코드가 작동하도록 변환합니다.

지시어가 있으므로 올바른 의미를 사용하여 더 복잡한 구성 요소 (위젯)를 작성할 수 있습니다. 지시문의 angularjs 예제를 살펴보십시오-탭 창을 정의하고 있습니다 (물론 일반 HTML에서는 유효하지 않습니다). div-s 또는 span과 같은 구조를 사용 하여 탭 창 처럼 보이 도록 구조를 만드는 것보다 직관적 입니다.

AngularJS 지시문에는 AngularJS의 HTML 컴파일러 ($ 컴파일) DOM 요소에 지정된 동작을 수행하거나 심지어 DOM 요소와 그 자식을 변환합니다. 일부 예는 ng-bind, ng-hide / show 등입니다.

홈페이지는 이것에 대해 매우 분명합니다 : 마지막 섹션에서 탭 위로 마우스를 가져 가면 :

우리는 커스텀 tabs 요소로 HTML의 어휘를 확장했습니다 . 는 tabs탭의 렌더링에 필요한 복잡한 HTML 구조와 동작을 추상화합니다. 그 결과 더 읽기 쉬운 뷰와 매우 쉽게 재사용 가능한 구문이 완성되었습니다. "

그런 다음 다음 탭에서

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

따라서 html 요소를 발명 할 수 있습니다. 즉 tabs, 각도로 해당 요소의 렌더링을 처리 할 수 있습니다 .