AngularJS와 jQuery의 간단한 비교..

요즘 시간이 날때마다, AngularJS를 조금씩 공부하고 있다.

AngularJS는 보통 자바스크립트 MVW(Model View Whatever) 프레임워크라고 하고,

jQuery는 자바스크립트 Library라고 한다.

예전부터 AngularJS에 대한 궁금증을 가지고 있었는데..

드디어 시간을 내서 AngularJS에 대해서 공부를 했다.

아래 소스를 보면, 간단하게 AngualrJS와 jQuery의 차이점에 대해서 파악해 볼 수 있다.

동일한 결과를 가져오는 두가지의 소스이다.

먼저, jQuery를 이용한 방법이다.

먼저, HTML에는 TABLE과, TBODY를 설정했다.

<table id="tbl">
    <tbody></tbody>
</table>

이어서, Javascript 파일에서 아래의 ArrayData를 $.each를 사용해서 반복한다.

$(function() {
    var arrData = [{
            id: 1,
            name: "Apple"
        }, {
            id: 2,
            name: "Banana"
        }, {
            id: 3,
            name: "Orange"
        }, {
            id: 4,
            name: "Mango"
        }
    ];

    var html = "";

    $.each(arrData, function(idx) {
        html += '<tr>' + '<td>' + arrData[idx].id + '</td>' + '<td>' + arrData[idx].name + '</td>' + '</tr>';
    });

    $("#tbl").html(html);
});

아래링크를 통해서, 다시한번 소스와 결과를 확인해보자.

http://plnkr.co/edit/F7jWVI7GpeMov8ZJyWgT?p=info

이번엔 동일한 결과를 가져오기 위한, AngularJS의 소스이다.

  <table>
     <tbody>
       <tr ng-repeat="data in arrData">
         <td>{{ data.id }}</td>
         <td>{{ data.name }}</td>
       </tr>
     </tbody>

var ngApp = angular.module("ngApp", []);

ngApp.controller("ngController", function($scope) {
    $scope.arrData = [{
            id: 1,
            name: "Apple"
        }, {
            id: 2,
            name: "Banana"
        }, {
            id: 3,
            name: "Orange"
        }, {
            id: 4,
            name: "Mango"
        }
    ];
});

무엇이 다른지 눈치를 챘는가?

물론, 이것은 AngularJS의 굉장히 작은 부분이다.

내가 보여준 것은 굉장히 간단한 로직이지만, 로직이 복잡해질 수록, AngularJS는 진가를 발휘할것이다.

http://plnkr.co/edit/KBx4rcwI0Ee8BCOp6J9B?p=info