AngularJS의 기본기 scope,model,view,controller,directives 알아보기

AngularJS 자세한 의미 원본 참조 -> http://www.nextree.co.kr/p3241/

AngularJS 기본 개념

AngularJS(앵귤러js)를 쉽게 이해하기 위해서 알아두어야 할 기본 개념으로 다음과 같이 5가지를 선정하였고 간단하게 설명하겠다.

1. Scope

- Scope는 모델 변경을 감지하고 표현하기위한 책임을 갖는다

- Scope는 DOM 구조와 가깝게 하이어라키 구조를 갖는다

2. Model 

- 모델은 화면 템플릿에 합쳐지는 데이터를 가지고 있는 일반 자바스크립트 객체이다. (데이터라고 생각하면 된다.)

- Scope는 항상 모델을 참조하고 있다.

3. View 

- 템플릿 스트링과 모델을 합쳐서 HTML을 만들고 DOM으로 해석되어 Browser에 표현된다 .

- Angular는 템플릿이 HTML이어서 바로 DOM으로 해석되고 DOM안에 directive가 템플릿 엔진인 $compile지시어를 통해 $watch를 설정하고 모델의 변경을 계속 감시하게 된다.

- View는 템플릿으로 Scope의 투영체이고, Scope는 Model과 View의 연결하며 controller로 이벤트를 보내는 역할을 한다.

4. Controller 

- Controller는 View뒤에서 반드시 수행하는 코드이다.

- Controller 역할은 모델을 생성하고 콜백 메소드를 가지고 View로 퍼블리싱을 담당한다 .

- Controller 는 자바스크립트이고 업무적 행위를 정의한다. 또한 DOM rendering 정보가 일체 없다 .

5. Directives (지시어)

- 지시어는 HTML 을 확장하여 주고 행위를 일으키는 주체이다 .

- 예를들어 앞의 예제에서 보았듯이 데이터 바인딩을 위한 이중 중괄호 표기{{}}, 컨트롤러가 뷰의 어느 부분을 감독할지를 지정하는 ng-controller, 인풋을 해당 모델의 구성물에 바인딩하는 ng-model 모두 Directive를 이용한 확장 문법이다.