AngularJS | 개념

AngularJS

JavaScript로 만든 Client측 MVC 아키텍쳐 프레임워크이다. SPA(Single Page Application = 단일 페이지 내에서 새로운 View를 동적으로 로드하여 사용) 로 단일 페이지 애플리케이션 웹개발의 정수이다.

데이터 관리와 로직, 그리고 표시관계를 깔끔하게 분리하여 원할하게 연결시킵니다.
특히 데이터베이스를 사용하는 CRUD(Create , Read , Update , Delete )을 중심으로 한 응용 프로그램에 위력을 발휘한다.

• ng-directives로 HTML을 확장한다.
• {{Expressions}}를 사용해서 데이터를 HTML에 바인딩한다.

특징

작성해야하는 자바 스크립트의 양이 줄어든다.

• MVC구조를 제공하고, MVC 구조를 위한 코드를 작성할 필요가 없음.
• 모델은 단순 자바스크립트 객체이고 setter, getter 함수를 작성할 필요가 없음.
• View와 Model 간 양방향 데이터 바인딩을 지원하여 서로 동기화 하는 코드 작성이 필요 없음.
• 콜백함수 등록으로부터 해방됨.

데이터의 모델을 단순 자바스크립트 객체이다.

• 양방향 데이터 바인딩으로 Model이 바뀌면 View도 바뀐다.
  (반대로도 마찬가지)

재사용이 쉬운 정적인 UI 컴포넌트를 만들수 있다.

• 복잡도가 높은 UI컴포넌트(지도, 그래프, 정렬가능한 테이블등)를 HTML태그로 만들 수 있게 해준다.

<map> , <graph> , <table sortable = "true"> 등등

의존관계 주입을 이용해 웹 어플리케이션을 개발

• 단위테스트가 가능하고, 보다 분리된 형태로 개발이 가능하다.

HTML, CSS 개발자와 자바스크립트 개발자를 명확히 나눈다

• 기존엔 DOM조작과 이벤트 처리를 위해 자바스크립트가 HTML을 잘알았어야 했는데 HTML, CSS개발자와 분리되기 어려웠다.
• Angular.js는 자바스크립트가 HTML의 구조를 알 필요가 없고, View코드와 Logic코드가 명확히 분리된다.

구성요소 및 개념

Model
- 단순 자바스크립트 객체로 된 데이터와 데이터 구조
- 변형되지 않은 단순 자바스크립트 객체 그대로 사용

View
- 템플릿과 모델이 합쳐져서 화면에 보여지는 DOM객체
- 템플릿이 HTML이여서 바로 DOM으로 해석됨
- DOM안의 Directives가 템플릿엔진인 $compile 지시어를 통해 $watch를 설정하고 Model의 변경을 계속 감시하게 됨

Controller
- 데이터를 저장하는 Model과 이를 사용자에게 보여주는 View를 서로 연결해주는 역할
- 자바스크립트로 되어있는 제어로직
- $scope(내장컴포넌트)에 의존해서 데이터를 View로 전달

Scope
- 특정 DOM 영역을 위한 모델
- Model과 View를 감시하고 반영하고 컨트롤러에 이벤트를 보내는 역할
- DOM과 가까운 계층구조로 DOM을 알 필요가 없어짐

Template
- HTML 자체를 템플릿으로 사용
- 지시어,표현식,필터등으로 템플릿을 제어함

Directives(지시어)
- HTML을 확장하는 AngularJS만의 지시어
( ex- {{expressions}}, ng-app, ng-controller등 )
- 사용자를 정의할 수 있음

Expressions(표현식)
- 해당 scope로 부터 함수나 변수에 접근하는 표현식으로 템플릿에서 사용
- 반복, 조건, 관련표현식은 존재하지 않고, 지시어로 존재함
- {{ }} 형태로 표기함

Filer
- 표현식이 화면에 표기되는 포맷
- {{ 표현식 | 필터 }}로 사용
- 사용자 정의를 할 수 있음

Data Binding
- Model과 View의 데이터를 실시간 연동함
- 양방향 데이터 바인딩

Compiler
- 템플릿에 AngularJS만의 지시어나 표현식을 처리하는 역할

Module
- 컨트롤러, 서비스, 필터, 지시어등 주요기능을 포함하여 응용프로그램의 서로 다른 기능을 구성하는 컨테이너 역할
-모든 JavaScript 기능들이 ng-app="모듈명"을 시작으로 모듈단위가 관리됨.

Service
- 특정 기능들을 담당하는 객체들
- 공통된 특정작업을 하는 Singleton 객체(인스턴스 1개만 존재하는 디자인패턴)

• 목록
  $compile, $controller, $filter, $log, $document, ....등

Dependency Injection(의존성 주입)
- 프로그래밍에서 구성요소간의 종속성을 소스코드에서 설정하지 않고 외부의 설정파일에서 주입하도록 하는 디자인 패턴
- 모듈의 결합도를 낮춰줌

Injector
- Dependency Injection을 담는 컨테이너 역할

작동 원리

DOM Content Loaded Event
-스타일 시트, 이미지 및 서브프레임이 로드를 완료할 때 까지 기다리지 않고 문서가 완전히 로드되고 구문분석이 될때 시작.

원리는 이렇다.
1. 브라우저가 HTML을 로드한다.(DOM 파싱)
2. AngularJS를 로드한다.
3. DOM Content Loaded Event를 기다린다.
4. DOM이 모두 로드되면 ng-app(지시자)를 찾는다.
5. ng-app에서는 Dependency Injection을 위해 사용되는 $injector 를 생성한다.
6. injector 지시어는 어플리케이션의 모델을 위한 컨텍스트가 되는 rootScope를 생성,
7. 최종적으로 ng-app을 기준으로 하위 DOM을 컴퍼일하고 rootScope와 링크시킨다.