앵귤러 (=Angular) 개념 및 특징 정리

-

 

[정의]

2009년에 발표한 구글에서 만든 자바스크립트 프레임워크

자바스크립트로 만든 클라이언트 측 MVC/MVVM 프레임워크

 

모던 단일 페이지

웹 어플리케이션 개발의 정수

 

 

[특징]

자바스크립트로 작성할 코드량을 줄여줌

: DOM을 선택/조작하는 코드 작성 불필요

 

양방향 데이터 바인딩이 가능

: 모델의 데이터와 뷰 데이터가

양방향 데이터 바인딩이 되어

모델이 바뀌면 뷰 데이터도 같이 변경됨

 

HTML, CSS, 로직 등의 개발 영역의 분리

: 기존에는 DOM 조작과 이벤트 처리를 위해

HTML을 숙지하고 있어야 했지만,

AngularJS는 뷰 코드와 로직 코드가

명확히 분리

 

 

 

[개념 및 주요요소]

 

Model

: 단순 자바스크립트 객체로 된 데이터

: 보통 JSON으로 표현되는 어플리케이션의

특정한 데이터 구조

: JSON 데이터를 jQuery의 $.ajax 메서드를

래핑한 Angular의 $http를 통해

XHR (XMLHttp Request)로 서버에서

가져오거나 페이지를 로딩할 때, 코드에서

직접 (DB에서) 읽어오도록 가능함

그 뒤 모델을 변경한 다음 다시 반영이 가능

 

 

View

: 템플릿과 모델이 합쳐져서 보여지는 화면

(DOM 구조)

: MVC 프레임워크를 사용한다면,

뷰를 갱신할 모델 데이터를 내려받은 뒤,

HTML에서 해당 데이터를 보여줌

 

 

Controller

: 비지니스 로직 영역

: 서버에서 직접 뷰로 접근하는 중간통로

: 필요시마다 서버와 클라이언트 통신으로 데이터를 변경

 

 

Scope

: 뷰와 컨트롤러 사이에서 데이터를 연결

: 모델과 뷰를 감시

: 컨트롤러에 이벤트를 보내는 역활

 

 

Directive

: HTML을 확장하는 AngularJS의 지시어

ex) ng-app, ng-controller, ng-click 등

 

 

Data Binding

: 모델과 뷰의 데이터를 실시간으로 연동

 

 

Module

: 모든 자바스크립트 기능들이

ng-app="모듈명"을 시작으로

모듈 단위로 관리됨

: 컨트롤러, 서비스, 필터 등을 포함

: 응용프로그램의 서로 다른 기능을 구성하는

컨테이너

 

 

Service

: 특정 기능을 담당하는 객체

: 싱글톤 객체로 인스턴스가 하나만 존재

 

 

Filter

: 모델 정보를 뷰에 뿌리기 전에

실행하는 컴포넌트

 

 

Template

: 사용하는 지시자가 포함된 마크업 소스

: 커스텀 마크업(지시자)를

컴파일해서 변경하기 전 코드

 

 

지시자

: HTML을 확장해서 주는

커스텀 마크업 Syntax를

생성할 수 있는 컴포넌트

: HTML 본래의 목적대로

정보의 구조화를 돕는 역활

 

 

표현식

: 마크업 코드 내에서 이중 중괄호 안에 코드

 

 

의존성 주입 (Annotation)

: 각 모듈에서 사용할 코드를

DI 패턴을 사용하여 제공함

: 의존성을 선언하는 방식 3가지

( Inline Array / $inject 속성 / Implicit )

 

 

 

[사용법]

http://angularjs.org/ 에서 다운

or

CDN (Content Delivery Network)

방식으로 링크해서 사용

 

 

[관련 사이트]

http://angularjs.org/

https://docs.angularjs.org/api

https://www.w3schools.com/angular/default.asp

http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-angularjs-in-one-day/