① SPA(Single page Application) 프레임워크

1. AngularJS 소개

② Front-End 에 MVC 패턴을 적용

- 페이지주소가 바뀌지 않으면서 또

다른 View를 동적으로 로드하여 사용하는것

- Model - 화면을 구성하는데 필요한 데이터

또는 화면을 구성하는데 필요한 데이터를 저장하는곳

- View - 화면

- Controller - 사용자의 요청에 맞는 데이터를 Model에 담거나 담긴 데이터를 view에 반영하는 로직

2. AngularJS의 특징

① 데이터 중심적

② 테스트 주도적

③ 선언적 HTML

④ 양방향 데이터 바인딩

- 대상Dom을 먼저 선택하여 출력하는 방식이 아님

- 뷰와 컨트롤러가 분리되어 테스트 친화적 구조

- 커스텀 테그 및 테그 내에서 속성을 통해

   단순한 구조의 DOM을 만들수있음

- 모델의 변경에 대하여 자동으로 데이터가 바인딩 됨

3. AngularJS의 초기화 과정

① Automatic Initialzation 페이지가 로딩되면서 

     자동 실행하도록 설정된 경우

② Manul Initialzation 페이지가 로드 된 후

    수동으로 실행하도록 설정된 경우

- DomContentLoaded 이벤트가 발생하면서

   이벤트 핸드러를 통해 실행

- Document.ready state 속성값이 complete이면 실행

① 문서내에 ng-app 지시자 확인

② 모듈 및 지시자와 연관된 모듈을 로딩

③ 애플리케이션 Injector생성

④ Dom트리를 순회하며 지시자들을 찾아

     매핑 지시자와 스코프를 결합해 모델의 변경을 뷰에 출력

4. AngularJS의 장점

① Dom 제어 기반방식보다 적은 양의 코드로 개발가능

② 구조화된 코드로 인해 향후 유지보수 비용 감소

③ 코드(모듈) 간의 의존성이 적어 유연성과 재사용성이 증가

④ 양방향 데이터 바인딩으로 인해 뷰의 갱신이 자동으로 이루어져 뷰를 업데이트 하는등의 번거로운 작업이 감소하고 모델(데이터)에 더욱 집중 가능

5. AngularJS의 단점

① 양방향 데이터 바인딩에서의

     성능 저하(Dirty-checking) 문제

② Dom 제어 방식이 아니므로

     Dom의 세밀한 제어가 필요한 경우의 적합하지 않음

③ 간단한 기능 구현이 아니라면 어느정도의 학습비용

④ 불필요할수있는 이벤트들의 자동 바인딩

⑤ 버전의 파편화

-1.3 이상부터 IE9 이상 지원

① 양방향 데이터 바인딩에서의

     성능 저하(Dirty-checking) 문제

양방향 데이터 바인딩을 위해 watch가 동작하는 경우

- HTML요소의 이벤트 핸들러가 동작하는 경우

DOM 이벤트(ng-click, ng-mousedown, ng-change, ng-checked 등)

- AJAX 통신의 결과가 도착한 경우

$http와 $resource에서 응답이 돌아왔을 때

- URL Hash값이 변경되었을 때

$location에서 URL을 변경한 후

- timer에 의해 발생된 tick 이벤트의 핸들러가 작동할 때

$timeout 이벤트가 발생한 후

1. 로드속도

서버로드

AngularJS

2. 바인딩에 따른 속도

단방향 바인딩

양방향 바인딩