AngularJS 지시문
AngularJS를 사용하면 Directives 라는 새로운 속성으로 HTML을 확장할 수 있습니다 .
AngularJS에는 애플리케이션에 기능을 제공하는 일련의 내장 지시문이 있습니다.
AngularJS를 사용하면 고유한 지시문을 정의할 수도 있습니다.
AngularJS 지시문
AngularJS 지시문은 접두사가 있는 확장된 HTML 속성입니다 ng-.
이 ng-app지시문은 AngularJS 애플리케이션을 초기화합니다.
ng-init지시문 은 애플리케이션 데이터를 초기화합니다.
지시문 은 ng-modelHTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인딩합니다.
AngularJS 지시문 참조 에서 모든 AngularJS 지시문에 대해 읽어보세요 .
예시
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
이 ng-app지시문은 또한 <div> 요소가 AngularJS 애플리케이션의 "소유자"임을 AngularJS에 알려줍니다.
데이터 바인딩
위 {{ firstName }}의 예에서 표현식은 AngularJS 데이터 바인딩 표현식입니다.
AngularJS의 데이터 바인딩은 AngularJS 표현식을 AngularJS 데이터와 바인딩합니다.
{{ firstName }}로 묶입니다 ng-model="firstName".
다음 예제에서는 두 개의 텍스트 필드가 두 개의 ng-model 지시문과 함께 바인딩됩니다.
예시
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
사용 ng-init은 그리 흔하지 않습니다. 컨트롤러에 대한 장에서 데이터를 초기화하는 방법을 배웁니다.
HTML 요소 반복
지시문 은 ng-repeatHTML 요소를 반복합니다.
예시
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
지시문 은 ng-repeat실제로
컬렉션의 각 항목에 대해 HTML 요소를 한 번 복제합니다 .
ng-repeat객체 배열에 사용되는 지시문 :
예시
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS는 데이터베이스 CRUD(Create Read Update Delete) 애플리케이션에 적합합니다.
이러한 개체가 데이터베이스의 레코드라고 상상해 보십시오.
인앱 지침
ng-app지시문은 AngularJS 애플리케이션 의 루트 요소 를 정의합니다.
이 ng-app지시문은 웹 페이지가 로드될 때 응용 프로그램을 자동 부트스트랩 (자동으로 초기화)합니다.
열 지시
ng-init지시문은 AngularJS 응용 프로그램의 초기 값을 정의 합니다 .
일반적으로 ng-init를 사용하지 않습니다. 대신 컨트롤러나 모듈을 사용합니다.
나중에 컨트롤러와 모듈에 대해 자세히 알아볼 것입니다.
모델링 지침
지시문 은 ng-modelHTML 컨트롤(입력, 선택, 텍스트 영역)의 값을 애플리케이션 데이터에 바인딩합니다.
ng-model지시문은 다음을 수행할 수도 있습니다 .
- 애플리케이션 데이터(번호, 이메일, 필수)에 대한 유형 검증을 제공합니다.
- 응용 프로그램 데이터에 대한 상태를 제공합니다(잘못됨, 더티, 터치됨, 오류).
- HTML 요소에 대한 CSS 클래스를 제공합니다.
- HTML 요소를 HTML 양식에 바인딩합니다.
ng-model다음 장에서 지시문에 대해 자세히 읽어보십시오 .
새 지시문 만들기
내장된 모든 AngularJS 지시문 외에도 고유한 지시문을 만들 수 있습니다.
.directive함수 를 사용하여 새 지시문을 만듭니다.
새 지시문을 호출하려면 새 지시문과 동일한 태그 이름을 가진 HTML 요소를 만드십시오.
지시어의 이름을 지정할 때는 카멜 케이스 이름을 사용해야
w3TestDirective하지만 호출할 때는 -분리된 이름 을 사용해야 합니다 w3-test-directive.
예시
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
다음을 사용하여 지시문을 호출할 수 있습니다.
- 요소 이름
- 기인하다
- 등급
- 논평
아래 예제는 모두 동일한 결과를 생성합니다.
요소 이름
<w3-test-directive></w3-test-directive>
기인하다
<div w3-test-directive></div>
등급
<div class="w3-test-directive"></div>
논평
<!-- directive: w3-test-directive -->
제한
일부 메소드에서만 호출하도록 지시문을 제한할 수 있습니다.
예시
restrict값이 있는 속성을 추가하여 "A"지시문은 속성에 의해서만 호출될 수 있습니다.
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
법적 제한 값은 다음과 같습니다.
E요소 이름의 경우A속성에 대한C학급을 위해M댓글을 위해
기본적으로 값은 EA, 요소 이름과 속성 이름 모두 지시문을 호출할 수 있음을 의미합니다.