Frontend/AngularJS

모듈과 지시자

필리힐리 2021. 10. 8. 23:59

모듈은 쉽게 정의하면 객체이다.

앵귤러JS는 이를 통해 동적인 프로그래밍이 가능하다.

 

* ng-app - AngularJS 애플리케이션의 초기 설정

HTML 코드에서 지시자 ng-app을 통해 모듈을 참조할 수 있다.

예시 코드에서 보면 가장 상위에 있는 div태그에 ng-app 지시자를 통해 invoice1 모듈을 참조하는걸 볼 수 있다.

 

* ng-controller - AngularJS에서 데이터를 제어하기 위해 사용

간단하게 말하면 js 파일에서 mvc 패턴을 구현

 

* ng-model - 사용자가 입력 또는 선택한 값을 제어

<select>, <input>과 같이 사용자가 값을 입력하는 태그들에 ng-model 지시자를 넣으면 입력된 값을 동적으로 제어할 수 있다.

예시 코드에서 보면 <input type="number">에서 입력된 값 qty, cost가 invoice에 있는 변수 qty와 cost에 실시간으로 입력된다.

 

* ng-repeat - 자바의 forEach와 같은 개념으로 여러개의 값이 들어있는 객체에서 값을 하나 하나 꺼내서 변수에 담아준다.

예시에선 배열인 currencies['USD', 'EUR', 'CNY']에서 값을 하나 하나 꺼내 c에 담아준다.

 

 

 

 

'Frontend > AngularJS' 카테고리의 다른 글

바인딩 (Angular, AngularJS 아님)  (0) 2021.09.19
모듈 (Angular, AngularJS 아님)  (0) 2021.09.19
기본 구조 (Angular, AngularJS 아님)  (0) 2021.09.18