AngularJS는 아주 간단하게 Web App을 만들 수 있는 가벼운 MVC Framework다.
Web App개발에 꽤 발목을 잡는 부분중에 하나가 HTML을 랜더링할 때 DOM을 사용한 인터렉션부분일 것이다.
JavaScript로 값을 지정하기 위해서 DOM조작을 하여 지정해야 하는데 이 부분에서 HTML과 JavaScript 사이의 의존성이 상당히 깊어지게 된다.
이런 이유로 스파게티소스가 되어 버리는(개발자 실력에 따른 부분이겠지만) 경우가 많아지고, 소스의 가시성, 보안성, 연장성을 저하시키게 된다.
jQuery나 템플릿엔진, 각종 MVC Framework를 사용하면 이런 문제가 다소 해결되기는 하지만 Controller / Model과 View가 완전하게 분리되는 경우는 없고 오히려 더 복잡해지는 경우가 허다하다.
AngularJS는 HTML을 템플릿엔진으로 두고 적극적으로 활용하는 방향을 체택하여 이런 문제를 해결할 수 있는 Framework이다.
HTML과 JavaScript의 DOM 핸들링을 자동으로 수행하기 때문에 상당히 간단하며 직관적인 코드가 된다.
View와 Controller / Model의 분리가 용이해지기 때문에 가시성또한 높아지며 Unit Test도 간단해 지리라 생각된다.
그러면 간단하게 셈플부터 살펴보자. input box에 값을 넣으면 바로 페이지에 문자를 표시하는 것을 jQuery로 작성한 셈플이다.
<!doctype html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<label>Name:</label>
<input type="text" name="yourname" value="Wany">
<hr/>
<h1>Hello,<span id="yourname"></span></h1>
<script>
$(function(){
var elem_in=$("input[name='yourname']"),
elem_out=$("#yourname");
var showName = function(name){
elem_out.text(name);
};
showName(elem_in.val());
elem_in.on('keyup', function(){
setTimeout(showName, 0, $(this).val());
});
});
</script>
</body>
</html>
jQuery를 사용했기 때문에 꽤 간단하지만, JavaScript부분에서는 셀렉터를 의식한 코딩을 해야 한다.
이 코드를 AngularJS로 작성하면 다음과 같이 된다.
<!doctype html>
<html ng-app>
<head>
<script src="js/angular-1.0.0.min.js"></script>
</head>
<body>
<label>Name: </label>
<input type="text" ng-model="yourname" value="Wany">
<hr/>
<h1>Hello, {{yourname}}</h1>
</body>
</html>
정말 간단하다.
여기서 자세히 보면 <html>테그 안에 못보던 속성이 들어가 있는게 보일것이다.
ng-app을 넣어줌으로서 자동으로 어플리케이션(페이지)을 초기화 해준다.
input요소의 name속성 대신에 ng-model이란 속성명으로 “yourname”을 지정해주고 그 이름을 표시할 곳에 {{yourname}}을 적어주면 DOM처리를 구현한 JavaScript와 동일한 결과를 얻을 수 있다.
이 샘플은 어디까지나 이런 식으로 작성한다는 것을 보여주기 위한 맛보기다.
MVC에 관련된 셈플을 보게되면 그 간단함에 많이 놀랄것이다.
API Reference도 셈플까지 잘 나와있어서 참고하기 편하다.
게다가 개발 가이드에 관련된 자세한 문서들도 제공하고 있으니 많은 도움이 될 것이다.
