Angular란?
- TypeScript를 기반으로 개발된 개발 플랫폼
- 확장 가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크
- 라우팅, 폼관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 통합함
- 애플리케이션 개발, 빌드, 테스트, 수정에 필요한 개발자 도구가 있다.
Angular JS란?
- 구글이 만든 오픈소스 웹 어플리케이션 프레임워크
- 자바스크립트 사용
- MVVM 프레임워크
특징
- Dom을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 된다.
- 양방향 데이터 바인딩이 가능하다. 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어서, 모델이 바뀌면 뷰 데이터도 같이 변경된다.
- 뷰 코드와 로직 코드가 명확히 분리된다.
주요 개념
Model
- 단순 자바스크립트 객체로 된 데이터
- JSON으로 표현된느 애플리케이션의 특정한 데이터 구조
View
- 템플릿과 모델이 합쳐져서 보여지는 화면
- Dom구조로 이루어짐
- MVC 프레임워크를 사용하면 뷰를 갱신할 모델 데이터를 내려받은 뒤 HTML에서 해당 데이터를 보여준다.
Controller
- 자바스크립트로 된 로직 영역
- 서버에서 직접 뷰로 접근하는 일종의 중간 통로. 필요할 때마다 서버와 클라이언트 통신으로 데이터 변경
Scope
- 뷰와 컨트롤러 사이에서 데이터를 연결해주는 역할
- 모델과 뷰를 감시하고 컨트롤러에 이벤트를 보내는 역할
Directive
- html을 확장하는 AngularJS의 지시어
ng-app같은 것- 애플리케이션이 필요한 곳에 여러 번 사용할 수 있는 작은 HTML 조각 형태
- 디렉티브를 사용하면 애플리케이션에 쉽게 DOM을 주입할 수 있다.
Module
- 모든 자바스크립트 기능들이
ng-app="모듈명"으로 모듈단위 관리됨 - 컨트롤러, 서비스, 필터 등을 포함
- 응용프로그램의 서로 다른 기능을 구성하는 컨테이너
Service
- 특정 기능을 담당하는 객체
- 싱글톤 객체로 인스턴스가 하나만 존재
1
2
3
4
5
myApp.service("Math", function () {
this.multiply = function (x, y) {
return x * y;
};
});
양방향 데이터 바인딩
- 완전히 동기화된 데이터. 모델을 갱신하면 뷰에 반영되고, 뷰를 갱신하면 모델에 반영되는 형태. 별다른 작업 없이도 데이터가 동기화된다.
