AngularJS 기본 학습 노트 지침_AngularJS

AngularJS는 지시어를 통해 HTML 속성을 확장합니다.

AngularJS 지시어
AngularJS 지시문은 ng- 접두사가 붙은 확장된 HTML 속성입니다.

ng-app 지시문은 AngularJS 애플리케이션을 초기화하는 데 사용됩니다.

ng-init 지시문은 애플리케이션 데이터를 초기화하는 데 사용됩니다.

ng-model 지시문은 HTML 컨트롤(예: 입력, 선택, 텍스트 영역 등)의 값을 애플리케이션 데이터에 바인딩하는 데 사용됩니다.

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

또한 ng-app 지시문은 해당 요소가 위치한 dc6dce4a544fdca2df29d5ac0ea9906b 요소가 AngularJS 애플리케이션의 루트 요소, 즉 범위임을 AngularJS에 알려줍니다.

데이터 바인딩

위의 예에서 {{ firstName }}은 AngularJS 데이터 바인딩 표현식입니다.

AngularJS 데이터 바인딩에서 AngularJS 표현식은 AngularJS 데이터를 사용하여 동기적으로 업데이트합니다.

　{{ firstName }}는 ng-model="firstName"을 통해 데이터를 동기식으로 업데이트합니다.

<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 지시문을 사용하는 것은 AngularJS 개발에서 매우 일반적입니다. 컨트롤러 섹션에서는 데이터를 초기화하는 더 나은 방법을 볼 수 있습니다.
HTML 요소 반복
ng-repeat 지시문은 HTML 요소를 반복적으로 생성하는 데 사용됩니다.

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

객체 배열에 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(즉, 생성, 읽기, 업데이트 및 삭제) 작업에 매우 적합합니다. 이러한 객체가 데이터베이스에서 왔다고 상상해 보십시오.

ng-app 지시문

ng-app 지시문은 AngularJS 애플리케이션의 루트 요소를 정의합니다.

웹페이지가 로드되면 ng-app 명령이 애플리케이션을 자동 부트스트랩(자동 초기화)합니다. 즉, AngularJS 애플리케이션의 실행을 자동으로 초기화하고 안내합니다.

다음 장에서는 ng-app 지시문(예: ng-app="myModule")에 값을 할당하여 모듈과 연결하는 방법을 알아봅니다.

ng-init 지시어
　ng-init 지시어는 AngularJS 애플리케이션의 값을 초기화하는 데 사용됩니다.

일반적으로 ng-init 명령을 사용할 필요는 없으며 대신 컨트롤러나 모듈을 사용하여 초기화 작업을 수행합니다.

다음 장에서는 컨트롤러와 모듈에 대해 배우게 됩니다.

ng-model 지시문
ng-model 지시문은 HTML 컨트롤(예: 입력, 선택, 텍스트 영역 등)의 값을 애플리케이션 데이터에 바인딩하는 데 사용됩니다.

ng-model 지시문도 사용할 수 있습니다:

인증번호, 이메일 주소, 필수 항목 등 데이터 인증을 제공합니다.
데이터 상태(예: 유효하지 않음, 더러움, 접촉됨, 오류)를 제공합니다.
HTML 요소에 대한 CSS 스타일 클래스를 제공합니다.
HTML 요소를 HTML 양식에 바인딩합니다.

ng-반복 지시문

ng-repeat 지시문은 데이터 컬렉션(또는 배열)의 각 요소에 해당하는 HTML 요소를 생성하는 데 사용됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.