Angular 탄생 배경 #

오늘날 JAVA를 이용한 시스템 개발에 많이 사용되는 프레임워크인 Angular는 2009년 Google의 직원인 Miskio Heavery의 개인 프로젝트에서 출발하였다. 개인 차원에서 시작한 프로젝트였지만 초기 아이디어에 대한 반응이 좋아서 현재는 구글의 공식 지원 프로젝트가 되었다.

Angular의 인기몰이 #

구글 트렌드에 의해 실시된 웹 프레임워크 트렌드 조사에 의하면 2013년부터 Angular는 다른 프레임워크를 압도적으로 제치고 가장 많이 사용되는 프레임워크로 올라서게 되었다.

Angular의 인기비결 #

Angular가 많이 사용되는 이유는 여러가지가 있지만 특히 다음과 같은 장점 때문에 활용성이 부각되고 있다.

자바 스크립트 코드량 감소 #

MVC(Model-View-Controller)제공과 양방향 바인딩 제공으로 전체적인 코드량을 감소시켜 준다.

재사용 가능한 UI컴포넌트 작성 가능 #

Directive를 이용한 HTML태그 확장 기능을 제공한다.

의존관계 주입 #

JQuery 지원 #

구글의 지원 #

Angular의 주요 개념 #

$scope (스코프) #

변수 이름 충돌 방지 / 계층적 메모리 관리 / $rootScore의 child
특정 DOM영역을 위한 모델
모델과 뷰를 감시/반영/컨트롤러에 이벤트 보냄
DOM과 가가운 계층구조
별도로 DOM을 익힐 필요가 없음

Controller (컨트롤러) #

scope객체를 초기화하는 역할로 자바스크립트로 구성된 제어 로직
$scope <객체>를 이용하여 모델값을 지정하거나, 함수를 추가할 수 있음
모델을 생성하고 메소드를 가지고 View로 퍼블리싱을 담당

Model (모델) #

$scope의 개체의 Property와 function은 model로 볼 수 있음

Template (테플릿) #

HTML 자체를 템플릿으로 사용
지시어, 표현식, 필터 등으로 템플릿 제어

Directives (지시어) #

HTML을 확장하는 AngularJS만의 지시어
예 : {{}}, ng-app, ng-controller
사용자 정의로 구성 가능

Expressions (표현식) #

해당 Scope로부터 함수나 변수에 접근하는 표현식으로 템플릿에서 사용
반복 및 조건 관련 표현식으로 존재하지 않고, 지시어로만 존재

Filter (필터) #

표현식이 화면에 표기되는 포맷
{{표현식|필터}} 형태로 사용
사용자 정의 가능

Data Binding (데이터 바인딩) #

모델과 뷰의 데이터를 실시간 연동
양방향 데이터 바인딩

Module (모듈) #

Controller, Service, Filter, Directives 등을 포함하는 프로그램의 각 기능을 구성하는 컨테이너
모든 자바스크립트 기능들이 ng-app="초기 모듈명"을 시작으로 모듈로 관리됨

Service (서비스) #

 특정 기능을 담당하는 객체들
 공통된 특정 작업을 수행하는 Singleton object
 Singleton은 instance가 단일로 존재하는 Design Pattern

Dependency Injection (의존성 주입) #

프로그램의 구성요소간의 종속성을 소스코드에 설정하지 않고 외부의 설정파일 등을 통해 주입하도록 하는 디자인 패턴으로, 종속성의 설정을 실행 시로 조정해 모듈간의 결합도를 낮춤

Injector (주입자) #

Dependency Injection을 담는 Container의 역할

Compiler (컴파일러) #

템플릿에 AngularJS만의 지시어나 표현식을 처리(parsing)라는 역할

Angular의 개발 방식 #

선언형 프로그래밍 #

Angular는 무엇을 할것인지에 관심을 두는 선언형 프로그래밍을 지향한다.

Angular의 핵심문법 #

클로저 #

외부함수의 변수에 접근할 수 있는 내부 함수이다. Non 블로킹 아키텍처의 핵심 개념으로 사용된다.

변수선언 #

var a=10 , b=20 과 같은 페이닝 형식의 초기화 가능

블록 유효범위 없음 #

함수에 대한 반환을 가지는 객체생성을 통한 내부함수 호출 #

익명함수에 대한 반환을 가지는 객체 생성 #

참고문헌 #

AngularJS의 개발방식에 대하여(SlideShare 자료)

https://www.slideshare.net/mrg7211/20141025-angular-js-and-javascript

AngularJS 소개 - 특징, 철학, 주요개념, 동작방식 http://heiswed.tistory.com/entry/AngularJS-소개