AngularJS 지시어 란 무엇입니까?

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 () 값을 변경하십시오
• 동일한 요소에 정의 된 속성의 변경 사항을 감시합니다 (실제로 관찰되는 속성의 값입니다. 이는 범위 속성이므로 지시어는 "모델"을보고 변경 사항을 감시합니다)
• 기타

---

HTML에서 우리는 같은 일이 <a href="...">, <img src="...">, <br>, <table><tr><th>. a, href, img, src, br, table, tr 및 th가 무엇인지 어떻게 설명 하시겠습니까? 이것이 지시어입니다.

---

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

AngularJS 지시문 (ng-directives)은 HTML을 확장하기 위해 Angular에서 사용하는 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 코드가 작동하도록 변환합니다.

Directives are there to so you can build more complex components (widgets) using proper semantics. Just take a look at the angularjs example of directives - they're defining the tab pane (which isn't of course valid in regular HTML). It's more intuitive than using like div-s or spans to create structure which is then styled to look like a tab pane.

---

In AngularJS Directives are html re markers for a HTML DOM element like an attribute(restrict- A), element name(restrict- E), comment(restrict- M) or CSS class(restrict - C) that tell AngularJS's HTML compiler ($compile) to perform a specified behavior to that DOM element or even transform the DOM element and its children.Some Example are ng-bind ,ng-hide/show etc.

---

The homepage is very clear about this: When you hover over tabs in the last section:

We've extended HTML's vocabulary with a custom tabs element. The tabs abstracts the complex HTML structure and behavior necessary for rendering of tabs. The result is a more readable view and very easily reusable syntax."

Then in the next tab:

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;
        }

So you can invent html elements i.e tabs and let angular handle the rendering of those elements.

참고URL : https://stackoverflow.com/questions/13875466/what-is-an-angularjs-directive