Data-binding AngularJS

Contents
1. Hello World!
2. Bootstrap
3. HTML Compiler
4. Data Binding
5. Scope

1. Hello World!
https://www.youtube.com/watch?v=uFTFsKmkQnQ#t=118/

2. 부트스트랩(Bootstrap)
* 그 자체의 동작에 의해서 어떤 소정의 상태로 이행하도록
설정되어 있는 방법.
* 컴퓨터의 전원을 켜거나 리셋 키를 누르는 따위의 동작으로
시스템을 시동하는 일.
* 컴퓨터가 켜지면서 기본적인 소프트웨어를 메모리에 올리는
프로세스.
[네이버 지식백과] 부트 스트랩 [Bootstrap] (정보통신용어사전)

* AngularJS의 부트스트랩의 2가지 방식.
1) ng-app 지시자(Directive)를 이용한 부트스트
랩
2) angular.bootstrap 메서드를 이용한 부트스트
랩
* AngularJS에서의 부트스트랩이란?
정적인 HTML 문서를 AngularJS 웹 애플리
케이션으로 동작하게 하기 위한 프로세스.

https://docs.angularjs.org/guide/bootstrap/
1) angular.js 실행
DOMContentLoaded Event
document.readyState == "complete“
2) ng-app 지시자 탐색.
auto-bootstrap
3) 모듈(Module) 로드
4) $Injector 설정
5) $compile & $rootScope 생성
6) DOM 렌더링하여 View 생성

1) angular.js 파일 실행
* 브라우저는 HTML를 로드하고 DOM 객체를 파싱.
* DOMContentLoaded Event
모든 객체들을 로드하는 load 이벤트와 다름.
DOM 만을 로드한 상태.
* document.readyState === 'complete'

* ng-app
- 웹 애플리케이션을 자동 초기화
(Automatic Initialization)
- Auto-bootstrap 이 되도록 해주는 directive.
- root , $rootScope
* 여기까지는 부트스트랩이 되기 위한 준비 과정
https://docs.angularjs.org/api/ng/directive/ngApp
2) ng-app 지시자 탐색

3) 지시자(Directive)와 관련된 모듈 로드
https://docs.angularjs.org/guide/module
* 지금부터 본격적인 부트스트랩 과정
* ng-app으로 명시된 모듈은 $injector를 환경설정

* $injector
dependency injection container
* ng-app으로 명시된 모듈은 $injector 를 자
동으로 생성하며 하나만 존재.
* 주어진 함수나 생성자 함수에 정의된 프로바
이더를 호출하여 실제 서비스에 주입하는
$injector를 제공.
https://docs.angularjs.org/guide/concepts
https://docs.angularjs.org/api/auto/service/$injector
4) $injector 설정

* $injector는 $compile & $rootScope를 생성한다 .
* $injector 는 $provider 를 통해 등록된 서비스 프로바이더를 이용해 서비스 인스턴스
를 생성하는 역할을 한다. 그리고 $injector 는 angularjs 웹 애플리케이션이 생성 될
때 자동 생성되며 하나만 가질 수 있다.
* $injector 를 이용하여 특정 서비스 객체를 얻을 수 있고, 특정 서비스가 해당 모듈에
정의되었는지 확인할 수 있다.
* Angular 코드 자체에서 대부분 사용되며 우리가 사용할 일은 거의 없는 편인데 외부
세상에서 AngularJS 웹 애플리케이션의 특정 서비스를 가지고 와야 사용할 수 있다.
* 주어진 함수나 생성자 함수에 정의된 프로바이더를 호출해 실제 서비스를 주입하는
$injector 를 제공한다.
4) $injector 설명 추가

* $compile
- DOM 과 Directives 해석한다.
- $compile 서비스를 통해 DOM을 컴파일하고
$rootScope와 링크한다.
* $rootScope
- ng-app 지시자
- $rootScope.Scope
- DOM tree처럼 scope도 계층이 있고
최상위에 존재.
https://docs.angularjs.org/guide/compiler
5) $compile & $rootScope 생성

6) DOM 다시 렌더링 하여 View 생성
* $compile
주어진 템플릿 DOM에 scope 를 연결하고
scope 객체에 의해 새로 만들어진 DOM(View)
을 반환.
* 컴파일러(Compiler)
- $compile 서비스를 통해 DOM을 컴파일.
- $rootScope와 데이터의 바인딩이 이루어짐
(linking).
- $scope는 모델을 이어주는 것.

HTML Compiler
https://docs.angularjs.org/guide/compiler/
* AngularJS 에서의 템플릿이란?
- DOM 자체를 템플릿으로 사용한다.
ng-app 속성이 부여된 <html> 혹은 <body> 즉,
HTML, DOM 자체가 템플릿이다.
- ng 로 시작되는 속성, {{ }} 를 제외하고 모두 순수한 html 코드이다.
* AngularJS 의 HTML 컴파일러는 무엇을 컴파일 할까?
- DOM
- 지시자(Directive)

HTML Compiler
https://docs.angularjs.org/guide/compiler/
* AngularJS에서의 컴파일 과정은?
- $interpolate > $watch > $digest
- $interpolate 서비스를 이용해서
text와 attribute를 매칭시킨다.
- 표현이 watch에 등록되어 있고,
digest 싸이클의 일부로서 업데이트 되는 것이다.

* $scope
- 단순한 자바스크립트 객체이지만 양방향 데이터 바인딩의
핵심
- 뷰와 컨트롤러를 이어주는 징검다리
- 이벤트 전파 처리
- 계층적 구조
- 부트스트랩 과정에서 scope 에 해당 API 들이
등록된다고 생각할 수 있다 .
- 이들을 통하여 무한 이벤트 루프 속에서
실시간 바인딩이 가능하다.

* $watch()
대상 $scope 에 특정 표현식을 감지하는 리스너 함수를 등
록.
* $digest()
- $scope와 자식으로 등록된 모든
$watch 리스너 함수를 실행한다.
- $watch 리스너 함수가 보는 표현식에 대하여
변화가 없으면 리스너 함수를 실행시키지 않음.

http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes
* Controller
- 인자로 $scope를 전달받는
단순한 자바스크립트 함수이다.
- ng-controllor 지시자를 이
용하여 템플릿에서 사용할 수
있다.
- [주의] 컨트롤러는 단 하나의
뷰에 해당하는 애플리케이션의
로직만을 담당해야 한다.

http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes
* Router
라우터를 통하여 한 페이지 내
에서 뷰의 이동이 이루어진다.

* 무한 이벤트 루프를 통하여 컴파일은 끊임없이 이루어진다.

처음에 보았던 그 그림입니다.
이제 무한 루프가 어떻게 이
루어지는지 알아 봅시다.

Data Binding
* 데이터 바인딩에 대해 다시 생각해 봅시다.
http://msdn.microsoft.com/en-us/library/ms752347(v=vs.110).aspx
http://msdn.microsoft.com/ko-kr/library/ms752347(v=vs.110).aspx
- 데이터 바인딩은 바인딩 타겟과 바인딩 소스 사이의 다리 역할을 합니다.
- 타켓 프로퍼티는 종속성 속성이며, 이는 기본적인 데이터 바인딩입니다.
(input type=“text” value=“” id=“”)

* OneWay 바인딩을 사용하면, 소스 속성이 변경된 경우 대상 속성이 자동으로 업데이트되지만 대상
속성이 변경된 경우에는 변경 내용이 소스 속성으로 전파되지 않습니다.
* 이 형식의 바인딩은 바인딩 되는 컨트롤이 암시적으로 읽기 전용인 경우 적합합니다.
예를 들어 주식 시세 표시기와 같은 소스에 바인딩 하거나 대상 속성에 테이블의 데이터 바인딩 된 배
경색과 같이 변경을 위해 제공된 컨트롤 인터페이스가 없을 수 있습니다.
* 대상 속성의 변경 내용을 모니터링 할 필요가 없는 경우OneWay 바인딩 모드를 사용하
면 TwoWay 바인딩 모드의 오버헤드를 줄일 수 있습니다.

* TwoWay 바인딩의 경우에는 소스 속성이 변경되면 자동으로 대상 속성이 업데이트되고,
대상 속성이 변경되면 자동으로 소스 속성이 업데이트됩니다.
* 이 형식의 바인딩은 편집 가능한 폼이나 기타 완전 대화형 UI 시나리오에 적합합니다.
* OneWayToSource 는 OneWay 바인딩의 반대입니다. 즉, 대상 속성이 변경될 때 소스 속성을 업데
이트합니다.
이에 대한 한 가지 예제 시나리오는 UI에서 소스 값을 다시 확인하기만 하면 되는 경우입니다.

* 자바스크립트 실행 환경
- Event Loop: 자바스크립트 이벤트 처리.
- 단일 쓰레드(Single Thread) 환경.
- Event-driven callbacks.
- Non-Blocking I/O
http://html5lab.kr/archives/1481

* 이벤트 루프?
- 하나의 쓰레드에서 이벤트 큐에 쌓이며 순차적으로 처리.
- 이벤트는 사용자 이벤트 뿐만이 아닌 브라우저 레이아웃,
렌더링 등을 모두 포함. 따라서 자바스크립트 실행시간이
걸리면 그 사이에 발생하는 렌더링 이벤트와 같은 다른
이벤트가 실행 큐에 등록되어 언제까지 처리되지 않음.
- 근본적인 대책은 각 프로세스를 단축해야 하지만 이벤트루
프
구조를 잘 이용하면 큰 작업을 여러 조각으로 나누어 처리
가능.
(setTimeout, Web Workers … )
http://html5lab.kr/archives/1481

http://www.slideshare.net/rockdoli/nodejs-8492796
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop
http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Ruby/EventMachine#s-1.1
Event Loop는 는 프로그램 내에서 이벤트나 메시지를 전송하기 위해서 사용하는 프로그래밍 구조다.
외부 혹은 내부에 이벤트 공급자(event provider)가 있어서, 이벤트를 처리할 이벤트 핸들러(event
handler)를 호출한다. 보통 이벤트가 외부에서 전달될 때까지, 특정 영역에서 대기한다.

http://www.slideshare.net/rockdoli/nodejs-8492796
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop

마무리.
* Model ? View ?
View(DOM) 보다는 Model 변경이 많은 경우 좋다.
* 콜백 응답 시간의 중요성. / Promise ?? Web Workers ??
* AngularJS 는 SPA 개발에 좋다.
DOM 조작이 많을 경우(게임?) 에는 좋은 프레임워크가 아니다?
* Think in AngularJS (ko)
페이지 디자인 하지 말고 DOM 조작을 통해 페이지 변경해라. jQuery 를 함께 쓰지 말자. SPA는 웹페이지가
아닌 애플리케이션이다.
* angularjs-style-guide (ko)
Digest Cycle 최적화 : 가장 중요한 변수만 감시. $watch 작성은 간단히.
* AngularJS ? Node.js? JavaScript 를 잘 알아야겠다.

references
Sites
* https://docs.angularjs.org/guide/
* http://mobicon.tistory.com/category/AngularJS%20%26%20MV*
Books
* 시작하세요! AngularJS 프로그래밍

끝… ?
Dependency Injection
https://docs.angularjs.org/guide/di/

Data-binding AngularJS

Data-binding AngularJS

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente(20)

Destacado

Destacado(20)

Similar a Data-binding AngularJS

Similar a Data-binding AngularJS(20)

Data-binding AngularJS

Notas del editor