Anuglar JS 공부 <1> 기본 주요 개념

Posted by lib oimb
2019. 1. 21. 01:14 AngularJS



AngularJS 공부를 시작한지는 몇일 지났지만 정리가 필요한 시점이 된거 같아 정리를 해보려고 한다. 



1. MVC & MVVM




AngularJS는 클라이언트 단에서 MVC & MVVM 프로그래밍을 하는것인데 이는 입력값을 어디에서 받는냐에 따라 관점이 달라지므로 총칭으로 MVW 이라고도 한다.

그림과 같이 입력값을 서버로부터 받아 Controller에서 바인딩을 하거나 클라이언트로부터 입력을 받아 View에서 데이터 바인딩을 한다.

여기서 데이터 바인딩은 말그대로 뷰와 컨트롤러사이의 데이터를 묶어주는 것을 말한다.



2. 양방향 데이터 바인딩






View 와 model이 서로 자동으로 데이터가 바인딩이 되는것을 말한다. View에서 $scope에 모델을 생성해 뷰에서 사용 할 경우 자동으로 $watch리스트에 등록 된다.

그림과 같이 DOM이 Rendering 과정을 거치게 되고 이후 바인딩된 데이터의 값의 변경이 일어나게 되면 $apply()를 호출하게 되고 $apply에 등록된 angularJS표현식(expression)이 실행된다 이후 리턴된 함수는 $digest loop를 돌게되어 $watch 리스트를 검사하게 된다. 이후 리턴한다.


Controller에서는 $scope를 통해 $scope 객체를 접근하게 되고 데이터를 바인딩하게 된다.

여기서 $scope가 아닌 동적으로 생성된 dom 객체는 compile 과정을 거치는 이는 아래에서 설명하겠습니다. 그리고 동적으로 생성된 이벤트에 의한 model값 변경은 따로 $apply 과정을 거쳐야 하는데 이는 추후 설명하겠다.


3. 의존성 주입





DI는 스프링의 개념에서 부터 나온 개념인데 간단하게 말해 필요로 하는 객체를 생성하지 않고 다른곳(컨테이너)로부터 객체를 주입받아서 사용하는 것을 말한다.

스프링에서는 스프링이 컨테이너가 되는것이고 Angular에서는 Angular FrameWork가 컨테이너 역할을 하는 것이다.


4. 지시자(Directive)





지시자는 앵귤러의 웹 컴포넌트 역할을 한다. 뷰 영역에 속한다. 지시자에는 Angular에서 제공하는 지시자(ng-app,ng-model,ng-...)과 사용자 정의 지시자(file-model,a-b-c)가 있다.

그림은 지시자가 해석되는 순서를 보여준다. 


1. HTML을 DOM으로 해석하고

2. 각각의 지시자에 대해 compile()을 진행한다. 결과로 DOM l객체와  link()함수를 반환한다.

3. 반환된 link함수에 대해 $scope를 주입시키게 되면 $digest loop가 돌게 되고 이후 자동을 $watch에 등록 되어진다.

4. 앵귤러 컨텍스트에 등록된 DOM은 브라우저에 렌더링하게 된다.


[1] DOM

var html = '<div ng-bind="exp">html object'</div>;

[2} compile

var linkFn = $compile(html);

[3] link($scope) injection

var element = linkFn($scope);

[4] append DOM

angular.element.append(element);


=> angular.element($compile(html)(scope));



이 댓글을 비밀 댓글로