삽질을 거듭하다가 결국 부족함을 채워야 함을 깨닫고 augular 프로젝트에 투입되었을 때 알아야할 것들에 대해서 빠르게 그리고 요점만 정리한다.
뷰(html)와 모델을 연결, 모델을 변경하면 자동으로 뷰(html)이 바뀌거나 뷰를 바꾸어도 자동으로 모델이 변경되는 편리한 프레임워크.
모델을 정의하는 scope가 있고 뷰와 연결시켜주는 데이터 바인딩이 있고 변경을 감지하는 방법이 주요 배울 사항이다.
컨트롤러나 디렉티브의 유효범위 내에서 저장공간이라고 이해하면 쉽다 뷰는 scope 를 통해서 컨트롤러 내부에 정의된 모델(데이터)이나 핸들러 함수에 접근할 수 있다.($ctrl처럼 뷰 자체에도 만들 수가 있는데 차이점은??) 뷰에서 scope는 프로토타입 상속 구조를 이루고 있어서 부모 scope의 프로퍼티에 접근 가능하다. rootScope를 기준으로 scope 컨트롤러나 디렉티브 내에서 해당 DOM에 할당이 되며 컨트롤러 계층과 같이 계층 구조를 생성한다.
일반 scope와는 달리 오직 자신의 scope 내에서만 모델과 핸들러를 찾는다. 독립적인 사용자정의 디렉티브를 만드는데 좋은 방법이다.
scope에 할당된 모델(데이터)가 변경되었을 경우 뷰(html)에 반영이 되는 것. 반대로 뷰가 변경되었을 때 뷰와 연결되어 있는 scope의 모델이 반영되는 것.
- 뷰(html) 내에서
{{ expression }}로 사용, 양방향 데이터 바인딩 지원 - 뷰(html)의 속성 중
ng-model로 양방향 바인딩 지정 가능
일반적인 이벤트 루프가 실행될 때 Angular Context가 실행되고, 바인딩된 뷰와 모델들의 변경 사항을 체크하고 뷰와 모델을 업데이트 하는 것이다.
- 모델의 변경을 감시하는 것은
$watch이며 바인딩된 것을 리스트로 추가하여 관리한다. $digest루프는 감시하고 있던$watch리스트를 돌면서 모델 변경을 체크하고 뷰를 업데이트 한다.
브라우저 이벤트가 발생하면 $apply()가 호출되고 이를 통해 Angular Context에 들어간다. 그 후 $digest 루프를 호출하여 $watch 리스트를 돌면서 변경이 일어났는지 확인(dirty-checking)을 하는데, $watch 가 변경된 경우에 다시 $digest 루프를 호출하여 모든 $watch의 변경을 요청하게 된다. 무한루프에 빠지지 않기 위해 10번까지만 수행한다. 그래서 결국 변경이 일어난 $watch에 해당하는 스코프 객체(모델)를 뷰에 업데이트 하게 된다.
- 브라우저 이벤트 ->
$apply->$digest루프 ->$watchdirty checking ->$digest루프 ->$watch(scope 모델) 변경 -> 뷰 업데이트
브라우저 이벤트가 발생을 해야 $apply를 호출하고 모델 변경을 감지하기 ng-click 등을 사용하는 경우는 내부적으로 $apply를 호출하기 때문에 모델 변경 감지가 일어나게 된다.
모델을 변경한 경우에 뷰가 업데이트 되지 않는 경우는 $apply가 호출되지 않기 때문에 Angular Context 로 진입하지 못하는 것이다. 아래와 같이 명시적으로 $apply를 호출해 주어야 한다. Angular 로 작성한 곳에서는 $apply를 사용하면 동작하지 않는다.
$('btn').click(() => {
$scope.title = 'Hi, Angular';
$scope.$apply();
});
$scope.$watch()를 사용하여 특정 모델이 변경된 경우를 알 수가 있다.
=는 양방향 데이터 바인딩이다.@는 텍스트 바인딩이다. 속성에 표시한 대로 그냥 텍스트로 인식.&는 함수를 바인딩한다. 바인딩된 함수를 호출할 때 파라미터는 객체 하나로만 전달하면, 그 객체의 프로퍼티들이 각각 파라미터로 사용되어 호출된다.