Data-binding AngularJS
•Descargar como PPTX, PDF•
16 recomendaciones•2,102 vistas
팀 주간세미나 자료.(2014/07/18) 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
- 2. Contents 1. Hello World! 2. Bootstrap 3. HTML Compiler 4. Data Binding 5. Scope
- 9. 2. 부트스트랩(Bootstrap) * 그 자체의 동작에 의해서 어떤 소정의 상태로 이행하도록 설정되어 있는 방법. * 컴퓨터의 전원을 켜거나 리셋 키를 누르는 따위의 동작으로 시스템을 시동하는 일. * 컴퓨터가 켜지면서 기본적인 소프트웨어를 메모리에 올리는 프로세스. [네이버 지식백과] 부트 스트랩 [Bootstrap] (정보통신용어사전)
- 10. * AngularJS의 부트스트랩의 2가지 방식. 1) ng-app 지시자(Directive)를 이용한 부트스트 랩 2) angular.bootstrap 메서드를 이용한 부트스트 랩 * AngularJS에서의 부트스트랩이란? 정적인 HTML 문서를 AngularJS 웹 애플리 케이션으로 동작하게 하기 위한 프로세스.
- 11. * AngularJS의 부트스트랩의 2가지 방식. 1) ng-app 지시자(Directive)를 이용한 부트스트 랩 2) angular.bootstrap 메서드를 이용한 부트스트 랩 * AngularJS에서의 부트스트랩이란? 정적인 HTML 문서를 AngularJS 웹 애플리 케이션으로 동작하게 하기 위한 프로세스.
- 12. 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 생성
- 13. 1) angular.js 파일 실행 * 브라우저는 HTML를 로드하고 DOM 객체를 파싱. * DOMContentLoaded Event 모든 객체들을 로드하는 load 이벤트와 다름. DOM 만을 로드한 상태. * document.readyState === 'complete'
- 14. * ng-app - 웹 애플리케이션을 자동 초기화 (Automatic Initialization) - Auto-bootstrap 이 되도록 해주는 directive. - root , $rootScope * 여기까지는 부트스트랩이 되기 위한 준비 과정 https://docs.angularjs.org/api/ng/directive/ngApp 2) ng-app 지시자 탐색
- 15. 3) 지시자(Directive)와 관련된 모듈 로드 https://docs.angularjs.org/guide/module * 지금부터 본격적인 부트스트랩 과정 * ng-app으로 명시된 모듈은 $injector를 환경설정
- 16. * $injector dependency injection container * ng-app으로 명시된 모듈은 $injector 를 자 동으로 생성하며 하나만 존재. * 주어진 함수나 생성자 함수에 정의된 프로바 이더를 호출하여 실제 서비스에 주입하는 $injector를 제공. https://docs.angularjs.org/guide/concepts https://docs.angularjs.org/api/auto/service/$injector 4) $injector 설정
- 17. * $injector는 $compile & $rootScope를 생성한다 . * $injector 는 $provider 를 통해 등록된 서비스 프로바이더를 이용해 서비스 인스턴스 를 생성하는 역할을 한다. 그리고 $injector 는 angularjs 웹 애플리케이션이 생성 될 때 자동 생성되며 하나만 가질 수 있다. * $injector 를 이용하여 특정 서비스 객체를 얻을 수 있고, 특정 서비스가 해당 모듈에 정의되었는지 확인할 수 있다. * Angular 코드 자체에서 대부분 사용되며 우리가 사용할 일은 거의 없는 편인데 외부 세상에서 AngularJS 웹 애플리케이션의 특정 서비스를 가지고 와야 사용할 수 있다. * 주어진 함수나 생성자 함수에 정의된 프로바이더를 호출해 실제 서비스를 주입하는 $injector 를 제공한다. 4) $injector 설명 추가
- 18. * $compile - DOM 과 Directives 해석한다. - $compile 서비스를 통해 DOM을 컴파일하고 $rootScope와 링크한다. * $rootScope - ng-app 지시자 - $rootScope.Scope - DOM tree처럼 scope도 계층이 있고 최상위에 존재. https://docs.angularjs.org/guide/compiler 5) $compile & $rootScope 생성
- 19. 6) DOM 다시 렌더링 하여 View 생성 * $compile 주어진 템플릿 DOM에 scope 를 연결하고 scope 객체에 의해 새로 만들어진 DOM(View) 을 반환. * 컴파일러(Compiler) - $compile 서비스를 통해 DOM을 컴파일. - $rootScope와 데이터의 바인딩이 이루어짐 (linking). - $scope는 모델을 이어주는 것.
- 20. HTML Compiler https://docs.angularjs.org/guide/compiler/ * AngularJS 에서의 템플릿이란? - DOM 자체를 템플릿으로 사용한다. ng-app 속성이 부여된 <html> 혹은 <body> 즉, HTML, DOM 자체가 템플릿이다. - ng 로 시작되는 속성, {{ }} 를 제외하고 모두 순수한 html 코드이다. * AngularJS 의 HTML 컴파일러는 무엇을 컴파일 할까? - DOM - 지시자(Directive)
- 21. HTML Compiler https://docs.angularjs.org/guide/compiler/ * AngularJS에서의 컴파일 과정은? - $interpolate > $watch > $digest - $interpolate 서비스를 이용해서 text와 attribute를 매칭시킨다. - 표현이 watch에 등록되어 있고, digest 싸이클의 일부로서 업데이트 되는 것이다.
- 22. * $scope - 단순한 자바스크립트 객체이지만 양방향 데이터 바인딩의 핵심 - 뷰와 컨트롤러를 이어주는 징검다리 - 이벤트 전파 처리 - 계층적 구조 - 부트스트랩 과정에서 scope 에 해당 API 들이 등록된다고 생각할 수 있다 . - 이들을 통하여 무한 이벤트 루프 속에서 실시간 바인딩이 가능하다.
- 23. * $watch() 대상 $scope 에 특정 표현식을 감지하는 리스너 함수를 등 록. * $digest() - $scope와 자식으로 등록된 모든 $watch 리스너 함수를 실행한다. - $watch 리스너 함수가 보는 표현식에 대하여 변화가 없으면 리스너 함수를 실행시키지 않음.
- 24. http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes * Controller - 인자로 $scope를 전달받는 단순한 자바스크립트 함수이다. - ng-controllor 지시자를 이 용하여 템플릿에서 사용할 수 있다. - [주의] 컨트롤러는 단 하나의 뷰에 해당하는 애플리케이션의 로직만을 담당해야 한다.
- 25. http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes * Router 라우터를 통하여 한 페이지 내 에서 뷰의 이동이 이루어진다.
- 26. * 무한 이벤트 루프를 통하여 컴파일은 끊임없이 이루어진다.
- 27. 처음에 보았던 그 그림입니다. 이제 무한 루프가 어떻게 이 루어지는지 알아 봅시다.
- 28. 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=“”)
- 29. * OneWay 바인딩을 사용하면, 소스 속성이 변경된 경우 대상 속성이 자동으로 업데이트되지만 대상 속성이 변경된 경우에는 변경 내용이 소스 속성으로 전파되지 않습니다. * 이 형식의 바인딩은 바인딩 되는 컨트롤이 암시적으로 읽기 전용인 경우 적합합니다. 예를 들어 주식 시세 표시기와 같은 소스에 바인딩 하거나 대상 속성에 테이블의 데이터 바인딩 된 배 경색과 같이 변경을 위해 제공된 컨트롤 인터페이스가 없을 수 있습니다. * 대상 속성의 변경 내용을 모니터링 할 필요가 없는 경우OneWay 바인딩 모드를 사용하 면 TwoWay 바인딩 모드의 오버헤드를 줄일 수 있습니다.
- 30. * TwoWay 바인딩의 경우에는 소스 속성이 변경되면 자동으로 대상 속성이 업데이트되고, 대상 속성이 변경되면 자동으로 소스 속성이 업데이트됩니다. * 이 형식의 바인딩은 편집 가능한 폼이나 기타 완전 대화형 UI 시나리오에 적합합니다. * OneWayToSource 는 OneWay 바인딩의 반대입니다. 즉, 대상 속성이 변경될 때 소스 속성을 업데 이트합니다. 이에 대한 한 가지 예제 시나리오는 UI에서 소스 값을 다시 확인하기만 하면 되는 경우입니다.
- 32. * 자바스크립트 실행 환경 - Event Loop: 자바스크립트 이벤트 처리. - 단일 쓰레드(Single Thread) 환경. - Event-driven callbacks. - Non-Blocking I/O http://html5lab.kr/archives/1481
- 33. * 이벤트 루프? - 하나의 쓰레드에서 이벤트 큐에 쌓이며 순차적으로 처리. - 이벤트는 사용자 이벤트 뿐만이 아닌 브라우저 레이아웃, 렌더링 등을 모두 포함. 따라서 자바스크립트 실행시간이 걸리면 그 사이에 발생하는 렌더링 이벤트와 같은 다른 이벤트가 실행 큐에 등록되어 언제까지 처리되지 않음. - 근본적인 대책은 각 프로세스를 단축해야 하지만 이벤트루 프 구조를 잘 이용하면 큰 작업을 여러 조각으로 나누어 처리 가능. (setTimeout, Web Workers … ) http://html5lab.kr/archives/1481
- 34. 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)를 호출한다. 보통 이벤트가 외부에서 전달될 때까지, 특정 영역에서 대기한다.
- 36. 마무리. * 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 를 잘 알아야겠다.
Notas del editor
- jQuery 가 HTML 구조를 자바스크립트가 잘 알고 있다. AngularJS는 DOM 자체를 템플릿으로 사용한다. HTML, CSS 그리고 AngularJS에서 제공하는 특정한 요소나 속성인 지시자가 포함된다. 그리고 ng 로 시작하는 속성과 { { } } 를 제외하고는 모두 순수한 HTML 코드이다. AngularJS는 DOM 자체가 템플릿이므로 일일이 자바스크립트로 render 같은 함수를 호출하거나 그 결과를 DOM으로 삽입할 일이 없다. 삽입할 필요가 없을 뿐 Angular 코드 내부에서 이 일들을 하고 있다
- jQuery 가 HTML 구조를 자바스크립트가 잘 알고 있다. AngularJS는 DOM 자체를 템플릿으로 사용한다. HTML, CSS 그리고 AngularJS에서 제공하는 특정한 요소나 속성인 지시자가 포함된다. 그리고 ng 로 시작하는 속성과 { { } } 를 제외하고는 모두 순수한 HTML 코드이다. AngularJS는 DOM 자체가 템플릿이므로 일일이 자바스크립트로 render 같은 함수를 호출하거나 그 결과를 DOM으로 삽입할 일이 없다. 삽입할 필요가 없을 뿐 Angular 코드 내부에서 이 일들을 하고 있다
- AngularJS에서의 부트스트랩이란? 정적인 HTML 문서를 AngularJS 웹 애플리케이션으로 동작하게 하기 위한 프로세스. Ng-app 지시자를 이용한 자동 부트스트랩. 1번만 선언 가능. 값은 안 써도 된다. 수동으로 부트스트랩하면 자동으로 부트스트랩할 때와 달리 하나의 페이지에 여러 개의 DOM을 부트스트랩 할 수 있다. - 한 페이지에서 서로 다른 AngularJS 웹 애플리케이션을 만들고자 할 때 사용하거나, - DOMContentLoaded 이벤트가 발생한 시점이 아닌 별도의 시점에서 AngularJS를 부트스트랩할 때 사용한다. 지시자(Directive)? extend HTML with custom attributes and elements. - HTML element 또는 attribute를 확장할 수 있게 해준다. 즉, 사용자 정의하여 새로운 HTML syntax를 브라우징 할 수 있게 한다 - Angular가 해석하는 Behavior Extension 을 directive 라고 한다 - Angular는 미리 번들링 된 directives 들도 있지만 사용자가 만들 수도 있다 - 지시자의 해석은 서버에서도 미리 컴파일 되는 것도 아니다. 컴파일은 그냥 웹브라우저에서 수행한다
- AngularJS에서의 부트스트랩이란? 정적인 HTML 문서를 AngularJS 웹 애플리케이션으로 동작하게 하기 위한 프로세스. Ng-app 지시자를 이용한 자동 부트스트랩. 1번만 선언 가능. 값은 안 써도 된다. 수동으로 부트스트랩하면 자동으로 부트스트랩할 때와 달리 하나의 페이지에 여러 개의 DOM을 부트스트랩 할 수 있다. - 한 페이지에서 서로 다른 AngularJS 웹 애플리케이션을 만들고자 할 때 사용하거나, - DOMContentLoaded 이벤트가 발생한 시점이 아닌 별도의 시점에서 AngularJS를 부트스트랩할 때 사용한다. 지시자(Directive)? extend HTML with custom attributes and elements. - HTML element 또는 attribute를 확장할 수 있게 해준다. 즉, 사용자 정의하여 새로운 HTML syntax를 브라우징할 수 있게 한다 - Angular가 해석하는 Behavior Extension 을 directive 라고 한다 - Angular는 미리 번들링된 directives 들도 있지만 사용자가 만들 수도 있다 - 지시자의 해석은 서버에서도 미리 컴파일 되는 것도 아니다. 컴파일은 그냥 웹브라우저에서 수행한다
- 1. 최초의 AngularJS는 angular.js 스크립트가 실행되고 DOMContentLoaded 이벤트가 발생하여 document.readState 가 'complete' 상태가 되면 HTML 페이지를 읽으면서 ng-app 속성을 찾는다. 2. 그리고 ng-app 속성을 발견하면 다음과 같은 부트스트랩 절차가 이루어진다. 3. ng-app에 값으로 주어진 모들을 로드한다. (여기부터 부트 스트랩이다.) 4. 애플리케이션에서 유일한 injector를 생성한다. 5. ng-app 지시자가 적용된 정적 DOM을 루트로 하여 컴파일한다. 컴파일 시 $rootScope 를 전달하고 6. 정적 DOM에 AngularJS가 적용되어 동적 DOM이 만들어지면서 이를 브라우저가 렌더링하여 우리가 보는 뷰가 만들어진다. (모델과 뷰가 연결된…) AngularJS가 뷰를 생성하는 과정 1. HTML로 작성한 템플릿을 브라우저가 읽는다. 2. 브라우저는 문서 객체 모델 DOM 을 생성한다. 3. <script src="angular.js">가 실행되어 AngularJS 소스가 실행된다. 4. DOM 생성 시 DOM Content Loaded 이벤트가 발생하는데 AngularJS가 이때 생성된 정적 DOM을 읽고 뷰를 컴파일 한다. 컴파일 시 확장 태그나 속성을 읽고 처리한 후 데이터를 바인딩한다. 6. 컴파일을 완료하면 동적 DOM, 즉 뷰가 생성된다.
- 브라우저는 HTML를 로드하고 DOM객체로 파싱한다. DOMContentLoaded 이벤트가 발생하면 Angular 는 애플리케이션 경계를 결정해주는 ng-app 지시자를 찾는다 DOMContentLoaded : 모든 객체들을 로드하하는 load 이벤트와 달리 DOM 만을 로드한 상태. 문서가 완전히 로딩되어 해석 된 경우 DOMContentLoaded 이벤트는 (load 이벤트가 완전히 로딩 된 페이지를 검색하는 데 사용할 수 있는) 로딩 완료하는 스타일 시트, 이미지, 그리고 서브 프레임을 기다리지 않고, 소성한다.
- DOMContentLoaded 이벤트가 발생하면 Angular 는 애플리케이션 경계를 결정해주는 ng-app 지시자를 찾는다 ng-app : Directive 는 auto-bootstrap 이 되도록 해주는 지시자
- 지금부터 본격적인 부트스트랩 과정이라고 볼 수 있다. ng-app으로 명시된 모듈은 $injector를 환경설정 한다. 모듈에 대한 설명은 생략. 모듈은 컨테이너 같은 것 … 여기선 Directive 와 관련된 모듈만 로드.
- $injector는 $compile & $rootScope를 생성한다 $injector 는 angular.js에서 웹 애플리케이션에 하나면 존재하며 ng-app 으로 명시된 모듈은 $injector 를 환경설정한다. 의존성 주입 관계? 컨테이너 같은 것. $injector 는 $provider 를 통해 등록된 서비스 프로바이더를 이용해 서비스 인스턴스를 생성하는 역할을 한다. 그리고 $injector 는 angularjs 웹 애플리케이션이 생성 될 때 자동 생성되며 하나만 가질 수 있다. $injector 를 이용하여 특정 서비스 객체를 얻을 수 있고, 특정 서비스가 해당 모듈에 정의되었는지 확인할 수 있다. Angular 코드 자체에서 대부분 사용되며 우리가 사용할 일은 거의 없는 편인데 외부 세상에서 AngularJS 웹 애플리케이션의 특정 서비스를 가지고 와야 사용할 수 있다. (p.200) 주어진 함수나 생성자 함수에 정의된 프로바이더를 호출해 실제 서비스를 주입하는 $injector 를 제공한다. di 는 코드 간의 의존성을 줄이기 위해 사용하는 소프트웨어 디자인 패턴 중 하나.
- $compile 서비스를 통해 DOM을 컴파일하고 $rootScope와 링크한다. DOM tree 처럼 scope 도 계층을 가지는데 최상위에 존재하고 자식들은 많이 가질 수 있다. 1 : N 5,6번은 HTM Compiler 에서 다시 설명합니다.
- 여기서 DOM (VIEW)와 데이터의 바인딩이 이루어진다. (링킹) $scope 는 모델을 이어주는 것. 컴파일과 링크에 대해선 HTML Compiler에서 좀 더 설명할께요.
- AngularJS는 DOM 자체를 템플릿으로 사용한다. HTML, CSS 그리고 AngularJS에서 제공하는 특정한 요소나 속성인 지시자가 포함된다. 그리고 ng 로 시작하는 속성과 { { } } 를 제외하고는 모두 순수한 HTML 코드이다. Angular는 지시자(Directive)를 통하여 DOM을 확장하게 된다. 지시자가 어떻게 컴파일 되는지 알아보자. - AngularJS는 ng-app 속성이 부여된 html / body 인. HTML, DOM 자체가 템플릿이다. - Compiler는 DOM 과 지시자(Directive) 를 해석. 브라우저에서 사용자가 보는 화면을 그리려면 HTML 문서를 작성해야 한다. 1. 작성한 HTML 문서를 웹 서버에 배포해 두면 2. 사용자의 웹 브라우저가 URL을 받아 해당 웹 서버로 요청을 보내고 3. 웹 서버는 응답함으로서 요청한 HTML 문서를 보내준다. 이와 같은 방식으로 웹 애플리케이션도 마찬가지로 HTML 문서를 작성해야 한다. 하지만 한 번 작성하면 오랫동안 바뀌지 않는 웹 페이지와 다르게 브라우저의 요청이 있을 때마다 주어진 데이터에 따라 내용이 바뀌어야 한다. 이러한 일을 웹 템플릿 시스템을 이용해 해결했고 주로 서버 측에서 했다. 근래에는 서버에서 데이터와 템플릿을 조합해 요청마다 전체 페이지를 브라우저로 보내주기 보다는 JSON 포맷의 데이터나 HTML 페이지의 일부 조각만 서버가 보내주고 클라이언트에서는 이를 동적으로 처리하는 AJAX 기술을 많이 사용해 왔다. $interpolate 서비스를 이용해서 text와 attribute를 매칭시킨다. 표현이 watch에 등록되어 있고, digest 싸이클의 일부로서 업데이트 되는 것이다
- AngularJS는 DOM 자체를 템플릿으로 사용한다. HTML, CSS 그리고 AngularJS에서 제공하는 특정한 요소나 속성인 지시자가 포함된다. 그리고 ng 로 시작하는 속성과 { { } } 를 제외하고는 모두 순수한 HTML 코드이다. Angular는 지시자(Directive)를 통하여 DOM을 확장하게 된다. 지시자가 어떻게 컴파일 되는지 알아보자. - AngularJS는 ng-app 속성이 부여된 html / body 인. HTML, DOM 자체가 템플릿이다. - Compiler는 DOM 과 지시자(Directive) 를 해석. 브라우저에서 사용자가 보는 화면을 그리려면 HTML 문서를 작성해야 한다. 1. 작성한 HTML 문서를 웹 서버에 배포해 두면 2. 사용자의 웹 브라우저가 URL을 받아 해당 웹 서버로 요청을 보내고 3. 웹 서버는 응답함으로서 요청한 HTML 문서를 보내준다. 이와 같은 방식으로 웹 애플리케이션도 마찬가지로 HTML 문서를 작성해야 한다. 하지만 한 번 작성하면 오랫동안 바뀌지 않는 웹 페이지와 다르게 브라우저의 요청이 있을 때마다 주어진 데이터에 따라 내용이 바뀌어야 한다. 이러한 일을 웹 템플릿 시스템을 이용해 해결했고 주로 서버 측에서 했다. 근래에는 서버에서 데이터와 템플릿을 조합해 요청마다 전체 페이지를 브라우저로 보내주기 보다는 JSON 포맷의 데이터나 HTML 페이지의 일부 조각만 서버가 보내주고 클라이언트에서는 이를 동적으로 처리하는 AJAX 기술을 많이 사용해 왔다. $interpolate 서비스를 이용해서 text와 attribute를 매칭시킨다. 표현이 watch에 등록되어 있고, digest 싸이클의 일부로서 업데이트 되는 것이다
- 부트스트랩 과정에서 scope 에 해당 API 들이 등록된다고 생각. 이들을 통하여 무한 이벤트 루프 속에서 실시간 바인딩이 가능. $scope 특징 뷰와 컨트롤러를 이어주는 다리 연결된 DOM에서의 실행환경 양방향 데이터 바인딩 처리 이벤트 전파 처리 계층적 구조
- 컨트롤러 함수 인자로 $scope를 전달받는 단순한 자바스크립트 함수이다. ng-controllor 지시자를 이용하여 템플릿에서 사용할 수 있다. [주의] 컨트롤러는 단 하나의 뷰에 해당하는 애필리케이션의 로직만을 담당해야 한다. 라우터 를 통하여 한 페이지 내에서 뷰의 이동이 이루어진다. $scope 특징 뷰와 컨트롤러를 이어주는 다리 연결된 DOM에서의 실행환경 양방향 데이터 바인딩 처리 이벤트 전파 처리 계층적 구조
- 컨트롤러 함수 인자로 $scope를 전달받는 단순한 자바스크립트 함수이다. ng-controllor 지시자를 이용하여 템플릿에서 사용할 수 있다. [주의] 컨트롤러는 단 하나의 뷰에 해당하는 애필리케이션의 로직만을 담당해야 한다. 라우터 를 통하여 한 페이지 내에서 뷰의 이동이 이루어진다.
- 무한 이벤트 루프를 통하여 컴파일은 끊임없이 이루어진다.
- 데이터 바인딩에 대해 다시 생각해 봅니다. MS 개발자 사이트 설명 인용. 첫번째 그림 설명 - 데이터 바인딩은 바인딩 대상과 바인딩 소스 사이의 다리 역할을 합니다. 타켓 프로퍼티는 종속성 속성이며, 이는 기본적인 데이터 바인딩이다. (input type=“text” value=“” id=“”) 두번째 그림 설명 – 데이터 흐름의 방향
- MS 개발자 사이트 설명.
- - 다이어그램 이해 + scope.$apply(stimulusFn) 호출로 Angular Execution Context로 들어가고, stimulusFN은 이안에서 수행할 일이다 + Angular가 stimulusFn 을 수행하고 애플리케이션의 상태를 변경한다 + Angular는 다음으로 $digest 루프로 들어가고, 이는 $evalAsync 큐와 $watch 목록을 처리하는 작은 루프이다. + $evalAsync는 현재 스택 프레임 외부에서 발생하는 스케쥴 잡에 사용된다 + $watch 펑션은 변경을 감지하고 DOM에 새로운 값으로 업데이트 하는 역할을 수행한다
- 요리사들, 손님들, 서빙 1명. 입.출력 함수 호출 시점에서 block 하지 않는 것을 의미한다. 이벤트 루프는 이벤트를 모니터잉하는 무한 루프를 가지고 있는 이벤트(또는 콜백)이 발생하면 발생한 순서대로 해당 이벤트를 처리합니다. 여기서 이야기하는 이벤트는 자바스크립트 이벤트뿐만 아니라, 브라우저 레이아웃 이벤트와 렌더링 이벤트등도 포함됩니다. 따라서 자바스크립트 실행시간이 걸리면 그 사이에 발생하는 렌더링 이벤트와 같은 다른 이벤트가 실행큐에 등록되어 언제까지 처리되지 않는다는 것입니다. 근본적인 대책은 각 프로세스를 단축해야 하지만 이벤트루프 구조를 잘 이용하면 큰 작업을 여러 조각으로 나누어 처리할 수 있습니다. setTimeout함수에 의한 의사적인 병렬처리 백그라운드에서 자바스크립트를 실행하는 Web Workers를 이용하자! 키보드 / 마우스 이벤트 처리, 화면 표시, 사용자가 등록한 Idle / Timeout 함수 처리 등이 모두 이 메인 이벤트 루프에서 처리됩니다.
- 요리사들, 손님들, 서빙 1명. 입.출력 함수 호출 시점에서 block 하지 않는 것을 의미한다. 이벤트 루프는 이벤트를 모니터잉하는 무한 루프를 가지고 있는 이벤트(또는 콜백)이 발생하면 발생한 순서대로 해당 이벤트를 처리합니다. 여기서 이야기하는 이벤트는 자바스크립트 이벤트뿐만 아니라, 브라우저 레이아웃 이벤트와 렌더링 이벤트등도 포함됩니다. 따라서 자바스크립트 실행시간이 걸리면 그 사이에 발생하는 렌더링 이벤트와 같은 다른 이벤트가 실행큐에 등록되어 언제까지 처리되지 않는다는 것입니다. 근본적인 대책은 각 프로세스를 단축해야 하지만 이벤트루프 구조를 잘 이용하면 큰 작업을 여러 조각으로 나누어 처리할 수 있습니다. setTimeout함수에 의한 의사적인 병렬처리 백그라운드에서 자바스크립트를 실행하는 Web Workers를 이용하자! 키보드 / 마우스 이벤트 처리, 화면 표시, 사용자가 등록한 Idle / Timeout 함수 처리 등이 모두 이 메인 이벤트 루프에서 처리됩니다.
- http://mobicon.tistory.com/327 Step 1) Model을 먼저 생각하고 Service를 만든다 Step 2) Model이 표현될 View에 대해 생각해 보고 template을 만들고, 필요하면 자동 모델 바인딩되는 Directive도 만든다. Step 3) 각 View 를 Controller에 연결한다 (ng-view and routing, ng-controller) https://github.com/nacyot/angularjs-style-guide/blob/master/README-ko-kr.md/