Angular vs Jquery
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
jQuery란? #
jQuery는 웹 사이트에서 javaScript를 보다 쉽게 사용할 수 있게 해주는 DOM(Document Object Model) 조작 라이브러리이다. jQuery는 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 AJAX를 호출하거나 DOM을 조작하는데 필요한 복잡한 코드를 훨씬 더 간단하게 만들어준다.
주요기능으로는 다음과 같다.
- HTML / DOM 조작
- CSS 조작
- AJAX / JSONP
- 이벤트 처리
- 효과 및 애니메이션
- 브라우저 간 호환성
- 경량 (축소 및 gzip)
Angular란? #
AngularJS는 SPA(Single Page web Applications) 방식의 웹 개발을 위한 프레임워크이다. SPA를 구축하기 위한 구조화된 환경을 제공함으로써 체계적이지 않은 코드를 생성할 위험이 크게 줄어든다. Angular는 DOM을 추상화하고 이벤트 핸들러를 관리하는 시스템을 갖추고 있으며 AJAX / JSONP를 지원한다.
주요기능으로는 다음과 같다.
- MVC 지원
- 양방향 데이터 바인딩
- RESTful API
- 의존성 주입
- 템플릿
- HTML 확장
- 양식 유효성 검사
비교 #
Ajax #
AngularJS에서는 '$http' 모듈을 통해, JQuery는 '$.ajax()' 함수를 통해 접근 할 수 있습니다.
-
Angular
$http({ method : 'get', // http 통신방법 url : root+"/login", // 통신할 URL params : { "mem_id" : memId }, // 파라미터로 보낼 데이터 responseTyps : 'json', // 데이터타입 headers: { "Content-Type" : "application/json; charset=utf-8", "Accept" : "application/json" } // 헤더 }).then(function(response){ // 성공했을 시 돌아오는 리턴값 ), function(error){ // 실패했을 시 error }); -
JQuery
$.ajax({ method : 'get', // http 통신방법 url : root+"/login", // 통신할 URL data : { "mem_id" : memId }, // 파라미터로 보낼 데이터 dataTyps : 'json', // 데이터타입 success : function(result){ // 성공했을 시 리턴값 }, error : function(){ // 실패했을 시 error } });
양방향 데이터 바인딩 #
데이터 바인딩이랑 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법으로, 단방향 데이터 바인딩과 양방향 데이터 바인딩이 있다. 양방향 데이터 바인딩은 데이터의 변화를 실시간으로 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다. AngularJS는 ng-model을 통해 간단하게 양방향 데이터 바인딩이 가능하다.
-
Angular
<!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="name"> <hr/> <h1> name : {{name}}</h1> </body> </html> -
JQuery
<!doctype html> <html> <head> <script src="js/jquery-1.7.1.min.js"></script> </head> <body> <div> <label>Input:</label> <input type="text" id="input" /> </div> <div> <label>Output:<label> <span id="output"></span> </div> <script> $(function(){ $('#input').keyup(function (event) { $('#output').html($('#input').val()); }); }); </script> </body> </html>
템플릿 #
AngularJS는 화면과 데이터의 분리를 용이하게 하는 템플릿 시스템을 제공함으로써 레이아웃을 좀 더 쉽게 제어할 수 있고 재사용이 가능한 어플리케이션을 만들 수 있게 한다.
-
AngularJS
<body ng-init="person = {name: 'yeonsu', favorite : ['수박', '귤', '사과']}"> <h1> hello {{person.name}}</h1> <h2> 좋아하는 과일</h2> <ul ng-repeat='fruit in person.favorite'> <li><a href="#{{fruit}}">{{fruit}}</a></li> </ul> </body> -
JQuery
<script> $(function() { var name="Yeonsu"; var favorite = ["Watermelon", "Orange", "Strawberry"]; $("#greeting").text("hello " + name); for (var i = favorite.length - 1; i >= 0; i--) { $("#favorite").append("<li><a href='#" + favorite[i] + "'>" + favorite[i] + "</a></li>"); } }); </script> <body> <h1 id="greeting"></h1> <h2>좋아하는 과일</h2> <ul id="favorite"></ul> </body>
