Contents

Develop
2015.11.26 17:46

[js] AngularJS 란?

조회 수 1320 댓글 0
Atachment
첨부 '1'
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

angularjs.png

 

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도 셈플까지 잘 나와있어서 참고하기 편하다.

게다가 개발 가이드에 관련된 자세한 문서들도 제공하고 있으니 많은 도움이 될 것이다.


?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
1009 Develop [ios] How To Use UIScrollView to Scroll and Zoom Content (Using Objective-C) file hooni 2016.03.23 2095
» Develop [js] AngularJS 란? file hooni 2015.11.26 1320
1007 PPT [ppt] OCB기술개발팀 OJT 자료 file hooni 2015.11.13 1704
1006 Develop [php] 한글 문자열 자르기 (utf-8) hooni 2015.11.10 1780
1005 Develop [c] 한글 문자열 출력 hooni 2015.11.10 2023
1004 Develop [ios] NavigationController 에서 왼쪽(back) 버튼 후킹하기 hooni 2015.10.23 1691
1003 Develop [ios] ViewController Push할 때 애니메이션 효과 hooni 2015.10.23 1287
1002 Develop [linux] CentOS Apache 웹서버에 HTTPS 적용 hooni 2015.10.23 1212
1001 Etc [eng] 숙제 ㅋㅋㅋ secret hooni 2015.10.14 1
1000 Develop [c] 기막힌 정렬 코드 ㅋㄷ file hooni 2015.10.13 1276
999 Develop [ios] 상위 ViewController 가져오기 hooni 2015.10.12 1475
998 Develop [ios] 최상위 ViewController 가져오기 hooni 2015.10.12 1487
Board Pagination Prev 1 ... 10 11 12 13 14 15 16 17 18 19 ... 99 Next
/ 99