Angular JS, 간략한 정리와 소개

##Angular JS, 간략한 정리와 소개

###Angular JS, 뭐여 이게?  - 맛보기 소개 -
 
####Definition
AngularJS 는 자바스크립트 프레임워크이다.

AngularJS 는 특정 지시자를 통해 HTML 속성을 확장하고 HTML 표현식을 이용해 데이터를 바인딩 할 수 있다.
 
####Features
- 자바스크립트 라이브러리로 이루어져 있다.
- 스크립트 파일로 분리할 수 있고, 스크립트 태그를 통해 웹 페이지에 추가할 수도 있다.
 
####AngularJS Directives

#####Extends HTML
with `ng-directives`

`ng-directives` 를 이용하여 HTML 을 확장한다.

- ng-app : AngularJS application 임을 정의
- ng-model : 앱 데이터에 HTML 요소들의 값을 바인딩
- ng-bind : HTML view 를 위한 앱 데이터 바인딩  
  
  
  
  

**Example** : [try_ng_intro](http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro 'w3schools')
- AngularJS 는 웹페이지가 로드될 때 자동으로 시작된다.
- ng-app 지시자는 AngularJS 애플리케이션의 소유자가 `<div>` 엘리먼트임을 말해준다.
- ng-model 지시자는 input 필드의 값과 애플리케이션 변수 `name` 을 바인딩 한다.
- ng-bind 지시자는 `<p>` 엘리먼트에 `name` 애플리케이션 변수를 innerHTML 로 바인딩 한다.
- ng-init : AngularJS 애플리케이션 변수 초기화

**Example** : [try_ng_intro_directives](http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_directives 'w3schools')
- 예제를 보면 어렵지 않게 이해할 수 있다.

----
**잠깐!!**

**Alternatively with valid HTML5**

> HTML5 유효성 체크 기능을 사용할 수 있도록 지원한다.

지시자를 사용할 때
`ng-????` 대신 `data-ng-????` 를 사용하면 된다.

*뭐가 다름?*

- 걍 똑같음. HTML5 의 유효성 체크 기능을 사용할 때, 오류를 피하기 위해 AngularJS 가 친절히 지원하고 있을 뿐이니 뭘 써도 무방함.
- 재밌는건 `x-ng-???` 를 써도 된다는 점?
- 자세한 내용은 : [docs](https://docs.angularjs.org/guide/directive)

----
 
#####AngularJS Expressions
- AngularJS 의 표현식은 이중 대괄호안에 작성됩니다 : {{ expression }}
- AngularJS 표션식은 ng-bind 지시자와 같은 방식으로 HTML 에 바인딩 됩니다.
- 표현식이 작성된 곳에 데이터를 출력합니다.
 



**Example**  : [try_ng_intro_expression](http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_expression 'w3schools')
 
######AngularJS Controllers
- AngularJS 는 controllers 에 의해 제어된다.
- ng-controller 지시자는 contoller 를 정의한다.
- controller 코드는 페이지가 로드될 때 실행된다.

 


**Example** : [try_ng_intro_controller](http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_controller 'w3schools')
- ng-controller 지시자에 의해 페이지가 로딩되면서 `parsonController` 가 실행되었다.
- 보면 알 수 있다.

**맛보기 끗.**