[AngularJS 1.x] AngularJS - 01. 소개

AngularJS란?

AngularJS는 구글에서 제작하고 2009년에 발표된 자바스크립트 프레임워크이다.

그렇다면 프레임워크는 무엇인가?

"프레임워크" 는 많은 뜻이 있다. JavaScript 프레임워크의 목적은 보통 웹사이트에 필요한 작업을 하는 데에 불필요한 작업들을 줄이는 것이다. 프레임워크는 기본적으로 틀을 잡아주며, 특정 문제를 해결하기 위해 설계되어 있다.

AngularJS 개념

• AngularJS 는 SPA(Single Page Application) 프레임워크라고 합니다.

- 예를 들어, 하나의 웹 페이지가 실행할 때 View 단에 해당되는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view를 동적으로 로드하여 사용하는 것을 SPA 라고 한다.

- 아래 그림의 좌측 단일페이지는 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는 형태이지만, SPA는 우측의 그림 처럼 최초한번 페이지전체를 로딩한후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다. 

• AngularJS 는 동적인 WEB Application 구현을 위해 구글에서 제작한 MVC 패턴의 자바스크립트 프레임워크

- MVC란 Model View Controller의 약자로 에플리케이션을 세가지의 역할로 구분한 개발 방법론이다. 

- 아래의 그림처럼 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다.

- MVC패턴의 각 역할

* Controller

사용자가 접근 한 URL에 따라서 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다. 

* Model

일반적으로 CI의 모델은 데이터베이스 테이블에 대응된다. 이를테면 Topic이라는 테이블은 topic_model이라는 Model을 만든다. 그런데 이 관계가 강제적이지 않기 때문에 규칙을 일관성 있게 정의하는 것이 필요하다.

* View

View는 클라이언트 측 기술인 html/css/javascript들을 모아둔 컨테이너이다. 

AngularJS 주요 개념

Model (모델)	단순 자바스크립트 객체로 된 데이터 및 데이터 구조 변형되지 않은 단순 자바스크립트 객체를 그대로 사용
View (뷰)	템플릿과 모델이 합쳐져서 화면에 보여지는 DOM DOM안에 directive가 템플릿 엔진인 $compile지시어를 통해 $watch를 설정하고 모델의 변경을 계속 감시하게 됨
Controller (컨트롤러)	자바스크립트로된 제어 로직 모델을 생성하고 메소드를 가지고 View로 퍼블리싱을 담당
Scope	특정 DOM 영역을 위한 모델 모델과 뷰를 감시하고, 반영하고, 컨트롤러에 이벤트를 보내는 역할
Template	HTML 자체를 템플릿으로 사용 지시어, 표현식, 필터 등으로 템플릿 제어
Directives (지시어)	HTML을 확장하는 AngularJS만의 지시어 (예 : {{}}, ng-app, ng-controller 등) 사용자 정의를 할 수 있음
Expressions (표현식)	해당 Scope로 부터 함수나 변수에 접근하는 표현식으로 템플릿에서 사용 반복 및 조건 관련 표현식은 존재하지 않고, 지시어로 존재함
Filter	표현식이 화면에 표기되는 포맷 (예 : {{ 표현식 | 필터 }} 형태로 사용) 사용자 정의를 할 수 있음
Data Binding	모델과 뷰의 데이터를 실시간 연동 양방향 데이터 바인딩
Module	컨트롤러, 서비스, 필터, 지시어 등을 포함하여, 응용프로그램의 서로 다른 기능을 구성하는 컨테이너 모든 Javascript 기능들이 ng-app="첫 모듈명" 을 시작으로 모듈 단위로 관리됨
Service	특정 기능을 담당하는 객체들 (예 : 여러 컨트롤러가 공유 해야 하는 데이터) 공통된 특정 작업을 수행하는 Singleton 객체 (인스턴스가 1개만 존재하는 디자인 패턴)
Dependency Injection  (의존성 주입)	프로그래밍에서 구성요소간의 종속성을 소스코드에서 설정하지 않고 외부의 설정파일 등을 통해 주입하도록 하는 디자인 패턴으로, 종속성의 설정을 컴파일 시에서 실행 시로 조정해 모듈 간의 결합도를 낮춤
Injector	Dependency Injection을 담는 컨테이너 역할

AngularJS 특징

AngularJS의 특징을 정리해보면 다음과 같다.

1. MVC 구조

2. 양방향 데이터 바인딩

3. 지시자를 이용한 HTML 확장

4. 의존관계 주입

5. 단일 페이지 웹 어플리케이션을 위한 라우터

6. $q를 이용한 자바스크립트 비동기 프로그래밍 지원

7. 자바스크립트 테스팅 지원

8. CSS3 Animation 처리 지원

9. 모바일 터치 이벤트 지원

각 특징에 대한 자세한 내용은 다음 포스팅에서 올리도록 하겠습니다.

참고 : http://han41858.tistory.com/3

       : http://webclub.tistory.com/206