본문으로 바로가기

AngularJS 란 무엇인가?

category Web Tech/AngularJS 2015. 10. 24. 13:24


AngularJS 개념

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


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


이러한 SPA 를 편하게 사용하도록 도움을 주는 것이 AngularJS 와 같은 자바스크립트 프레임워크입니다.

그래서 AngularJS 는 SPA 를 만들때 도움을 주는 프레임워크이고 자바스크립트 기반의 MV* 오픈소스 프레임워크라고도 합니다.


결론적으로 SPA & 자바스크립트 기반의 MV* 프레임워크입니다. 





MVC

그렇다면, MV* 패턴은 무엇인가?


자바스크립트 공부를 시작하면서 생소한 용어들 중에 디자인 패턴이란 용어가 있습니다.


디자인 패턴은 건축으로치면 공법에 해당하는 것으로 소프트웨어의 개발 방법을 공식화 한 것으로써, 소수의 뛰어난 엔지니어가 해결한 문제들에 대한 규칙들을 다수의 엔지니어들이 문제를 처리 할 수 있도록 한 규칙들이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법을 디자인 패턴이라고 합니다.


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


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



위의 그림을 웹에 적용해 보자면...


1. 사용자가 웹사이트에 접속한다. (Uses)

2. Controller는 사용자가 요청한 웹페이지를 서비스 하기 위해서 모델을 호출한다. (Manipulates)

3. 모델은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후에 그 결과를 리턴한다.

4 .Controller는 Model이 리턴한 결과를 View에 반영한다. (Updates)

5. 데이터가 반영된 VIew는 사용자에게 보여진다. (Sees)

 


Controller


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




Model


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



View


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








MV* (통칭으로 MVstar 라고 말합니다)

- MVC

Model

View

Controller


- MVVM (Model-View-ViewModel)

- MVP (Model View Presenter)


MVC 패턴의 프레임워크를 통칭적으로 MV스타(MV*) 프레임워크라고 합니다.




AngularJS 참고사이트


Angular Seed 


 – 처음 시작을 위한 기본구조 제공


 – http://github.com/angualr/angular-seed 


 – http://ionicframework.com




AngularJS 구성요소


1. 지시자(Directive) 


– 뷰(View) 영역 

– 특정한 html 태그에 AngularJS 의 기능을 적용하고자 할 때 사용하는 것이 Directive 란 지시자를 사용하는데 AngularJS 의 Directive 는 ng 로 시작하는 지시자들이 많이 있습니다. 예) ng-*


2. 필터(Filters) 


– 어떤 데이터를 화면에 출력하는데 있어서 원하는 데이터만을 필터링하여 가져다 사용할 수 있도록 해주는 기능입니다.



3. 데이터 바인딩(Data Binding) 


– 표형태의 데이터들을 원하는 위치에 사용하기 편하게 바인딩하도록 해줍니다.



4. 컨트롤러(Controller) 


– 메인 컴포넌트 

– 기능별로 묶어서 사용하도록 해줍니다.



5. 서비스(Service) 


– 비즈니스 로직





AngularJS Expressions(표현식)


표현식 (Expressions)


– {{ }} 로 사용됨 (표현식 안에는 자바스크립트 문법을 사용할 수 있습니다)

– JavaScript 의 모든 문법을 지원하지 않음.

– 배열 등 선언 가능합니다.



사용 예


– {{ 표현식 }}

– {{ name }} 

– {{ 3 % 5 }} 의 결과값이 출력됩니다.

– {{ “안녕” + “하세요“ }} 문자열과 문자열을 접합한 결과가 나타납니다.





지시자(Directive)

새로운 형태의 HTML 태그/속성/속성값을 만들어서 정의해주는 것을 지시자라고 합니다.


다음의 ng-app="" 과 같은 태그와 속성/속성값을 정의할 수 있습니다.


ex) <body ng-app="">




See the Pen AngularJS Hello by jaeheekim (@jaehee) on CodePen.


위의 코드와 같이 html 이나 body 태그에 ng-app="" 을 지시자를 명시해 줌으로써 AngularJS 를 사용할 준비 단계를 설정합니다.

ng-app 은 data-ng-app 으로 사용할 수 있는데 ng 앞에는 모두 data 가 생략되어 있습니다.


다시말해서, ng-app 은 모듈을 정의해 주는 것입니다.



Jaehee's e-room


'Web Tech > AngularJS' 카테고리의 다른 글

angularJS factory & form validation  (0) 2015.11.03
AngularJS 이벤트 기초 알아보기  (0) 2015.11.02
AngularJS Directive  (0) 2015.11.02
AngularJS 의 View, Controllers, Scope의 관계  (0) 2015.10.26
AngularJS module  (0) 2015.10.26