AngularJS MVC

AngularJS MVC

• AngularJS jsFiddle Example

AngularJS도 자바스크립트 MVC 프레임워크 중 하나이지만 AngularJS는 smalltalk-80언어부터 시작된 전통적인 MVC패컨을 구현하지 않고 MVVM(Model-View-View-Model)과 비슷하지만 독자적인 방식으로 MVC패턴을 구현했다.
초기 AngularJS는 전통적은 MVC 패턴을 흡사하게 구현하여 MVC패너으로 소개됐다. 하지만 AngularJS가 버전이 올라가면서 다양한 기능이 추가됨에 따라 MVVM에 가깝게 되어 AngularJS 사용자들 간에 MVVM 프레임워크라는 주장이 다분했다. 그런데 AngularJS 팀에서는 AngularJS를 어느 패턴으로 분류하지 않고 사용하는 사람 마음대로 정의하라는 의미에서 MVW(Model-View-Whatever) 프레임워크라 칭하였다._{http://plus.google.com/+AngularJS/posts/aZNVhj355G2} 그래서 AngularJS를 정식으로 소개할 때는 자바스크립트 MVW 프레임워크라고 한다.
하지만 어찌됐든 사용자 인터페이스와 데이트와 애플리케이션로직을 분리하는 개념은 MVC 패턴과 같다. 시작하세요 AngularJS 프로그래밍 - 113p

모델^Model

도메인에 해당하는 정보를 나타내는 오브젝트. 대체로 애플리케이션의 데이터와 행위를 포함한다.

뷰^View

모델의 정보를 UI에서 보여준느 역활. 하나의 모델을 다양한 뷰에서 사용할 수 있고, 여러 모델을 하나의 뷰에서 사용할 수 있다.

컨트롤러^Controller

애플리케이션에서 사용자의입력을 받아 모델에 변경된 상태를 반영한다. 이는 모델을 변하게 하여 결국 뷰를 갱신학 헤나다. 컨트롤러는 직접 뷰를 변경하는 것이 아니라 주요 로직이 모델을 변경하고 그 결과가 뷰로 나타나는 것이다.

모델

AngularJS에서는 하나의 엔티티^Entity나 여러 개의 엔티티가 모델이 된다. 하지만 AngularJS는 모델을 정의하는 데 있어서 다른 자바스크립트 프레임워크와 다른점이 있다. ExtJS나 BackboneJS에서는 기본 모델 클래스가 있고 이를 개별 모델 클래스가 상속하는 구조인 반면 AngularJS에서는 별다른 상속없이 순수 자바스크립트 객체가 모델이 된다. 중요한 점은 이러한 모델 객체에 AngularJS의 $scope 객체로부터 접근할 수 있어야 한다는 것이다.

모델은 컨트롤러 에서 $Scope 객체를 선언하거나 템플릿에서 선언할 수 있다. 다음 코드는 컨트롤러에서 모델을 선언한 코드이다.

function mainCtrl($scope){
	// 컨트롤러에서 모델 선언
	$scope.userId : "userid";
	$scope.bookmark : { name: "구글", url: "www.google.com", img: "google.png" };
	$scope.bookmarkList: [{name: "구글", url: "www.google.com", img: "google.png"},{name: "네이버", url: "naber.com", img: "naver.png"}];
}

위 코드는 컨트롤러에서 모델을 선언하고 있다. $scope의 속성명은 모델명을 날타내고 값은 모델이 된다. 여기서 모델은 단순한 문자열이 될 수도 있고 객체나 배열이 될 수도 있다. 즉 모델은 평범한 자바스크립트 객체^{Plain Old JavaScript Object}다. 모델은 자바크스립트에서 선언할 수 도 있지만 HTML 템플릿에서 선언할 수 있다.

<div ng-init="userId='userId'; bookmark={ name: '구글', url: 'www.google.com', img: 'google.png' };">
<p>
	{{userId}}, {{bookmark}}
</p>
<button ng-click="userEmail='username@gmail.com'">이메일 추가
</div>

<input type="text" ng-model="search">
<ul>
	<li ng-repeat="bookmark in bookmarkList">
		<p><a href="{{bookmark.href}}>{{bookmarek.name}}</a></p>
	</li>
</ul>

위 코드에서 <input> 태그에서 ng-model 속성에 search 값을 대입했다. AngularJS는 ng-model 지시자를 사용하면 해당 모델이 $scope에 없을 경우 암묵적으로 $scope에서 search 속성을 만들고 <input> 태그값을 search 속성 값으로 대입한다. 즉 모델을 만들고 데이터를 연결한다.

뷰

AngularJS에서 뷰는 문서 객체 모델^{Document Object Model}이다. 브라우저는 HTML 문서를 읽어 DOM을 생성하는데 AngularJS는 이 DOM이 뷰가 되는 것이다. 템플릿과 뷰를 혼동 할 수 있는데 AngularJS에서는 HTML문서가 템플릿이고 이 템플릿을 AngularJS가 읽어서 뷰를 생성한다. 뷰 생성과정

1. HTML으로 작성한 템플릿을 브라우저가 읽는다.
2. 브라우저는 문서 객체 모델^DOM을 생성한다.
3. <script src="angular.js">가 실행되어 AngularJS소스가 실행된다.
4. DOM 생성 시 DOM Content Loaded 이벤트 발생시 AngularJS가 생성된 DOM을 읽고뷰를 컴파일 한다. 컴파일 시 확장 태그나 속성을 읽고 처리한 후 데이터를 바인딩한다.
5. 컴파일로 완료된 동적 DOM, 즉 뷰가 생성된다.

컨트롤러

컨트롤러는 많은 일을 담당하지 않는다. 단 하나의 역활 애플리케이션의 로직만을 담당한다. 컨트롤러는 모델의 상태를 정의, 변경할 수 있다. 결국은 $scope 객체에 데이터나 행위를 선언하는 것이다.

컨트롤러를 작성할 때 주의할 점이 있다. 컨트롤러는 단 하나의 뷰에 해당하는 애플리케이션의 로직만을 담당해야 한다. 화면상의 로직이 아니라 애플리케이션의 비즈니스로직이다. 즉 DOM을 조작하는 행위와 같은 화면 상의 로직은 다음에 설명한 지시자에서 구현하고 컨트롤러에서는 애플리케이션의 비즈니스 로직만을 구현해야 한다. 다음과 같은 코드는 사용해서는 안된다.

function demoCtrl($scope){
	$scope.addBoomark = function(name, url){
		$("ul#bookmarkList").add("<li>이름 : "+name+", 주소: "+url+"</li>"); 
		// 컨트롤러에서 DOM을 조작해서는 안된다.
	};
}

AngularJS는 하나의 화면에 여러 컨트롤러를 작성 할 수 있다. 하나의 화면은 사실 여러 뷰의 조합으로 이뤄질 수 있기 때문이다.