개념 01 - 데이터 바인딩, DI, Directives

01. 데이터 바인딩

AngularJs 공식 홈페이지 Data-bindnig 개념 - https://docs.angularjs.org/guide/databinding

AngularJs( 이하 ng ) 에서의 데이터 바인딩 기술은 ng 에서 가장 특징적인 기능 중에 하나 입니다.

데이터 바인딩은 모델(데이터) 와 View 컴퍼넌트 사이에 자동 동기화를 해주는 기능입니다.

모델 즉 입력된 데이터가 변하면, 화면에 보여지는 View 부분도 바로 변화가 적용됩니다.

아래는 데이터 바인딩의 예제 입니다. 입력 창에 데이터를 입력하면 바로 화면에 출력 됩니다

이러한 기능은 jquery를 이용해서 이벤트를 등록해서도 구현할 수 있지만, ng를 이용하면 간편하게 구현할 수 있습니다.

02. Dependency Injection

ng 애플리케이션은 보통 여러 모듈들 ( 컨트롤러, 뷰, 서비스 등) 로 이루어진 집합체입니다.

ng 애플리케이션은 모듈화하는데 최적화 되어있고, 기본적으로 모듈화를 하게되면 테스트하거나, 확장하기가 쉽습니다.

구현한 각각의 모듈들은 메인 애플리케이션에 의해 주입(Injection) 이 되어지고, 여러개의 모듈을 합쳐서 하나의 애플리케이션을 제작할 수 있습니다.

03. Directives ( 지시자 )

기본적으로 ng-app, ng-controller, ng-model ..등 을 지시자라고 합니다. 이를 해용해서 HTML 문서를 확장하여 ng 애플리케이션을 제작하는 것입니다. 지시자는 컨트롤러나 서비스 단계에서 특정한 기능을 하는 새로운 지시자를 생성할 수도 있으며, 기본적으로 제공하는 지시자는 다음과 같습니다.

참조 : http://www.w3schools.com/angular/angular_ref_directives.asp

Directive	Description	Explained
ng-app	Defines the root element of an application.	Directives
ng-bind	Binds the innerHTML of HTML elements to application data.	Introduction
ng-click	Defines the behavior when an element is clicked.	HTML Events
ng-controller	Defines the controller object for an application.	Controllers
ng-disabled	Binds application data to the HTML disabled attribute.	HTML DOM
ng-hide	Hides or shows HTML elements.	HTML DOM
ng-include	Includes HTML in an application.	Includes
ng-init	Defines initial values for an application.	Directives
ng-model	Binds the value of HTML controls to application data.	Directives
ng-repeat	Defines a template for each data in a collection.	Directives
ng-show	Shows or hides HTML elements.	HTML DOM