AngularJS와 jQuery의 차이점


388

나는 하나의 js 라이브러리 만 알고 있으며 jQuery 입니다.
그러나 그룹의 다른 코더는 AngularJS 를 새 프로젝트의 기본 라이브러리로 변경 하고 있습니다.

나는 그것에 대해 아무것도 모른다. jQuery와 어떻게 다릅니 까?
jQuery에서 비슷한 작업을 수행하는 함수 집합이 이미 있습니다. AngularJS와 함께 jQuery를 계속 사용할 수 있습니까?

답변:


414
  1. Angular 1은 프레임 워크 인 반면 Angular 2는 플랫폼 입니다. ( REF )

Angular2는 개발자에게 화면에 데이터를 표시하는 것 이상의 기능을 제공합니다. 예를 들어, angular2 cli 도구를 사용하면 코드를 "사전 컴파일"하고 필요한 자바 스크립트 코드 ( tree-shaking )를 생성 하여 다운로드 크기를 35Kish로 줄일 수 있습니다.

  1. Angular2 에뮬레이트 된 Shadow DOM. ( REF )

이것은 SEO 문제를 해결하고 브라우저에서 작동하지 않는 Nativescript 등으로 작업 할 수있는 서버 렌더링의 문을 엽니 다.

  • 공식 문서 사이트

  • ng-conf 2016의 첫 번째 기조 연설

  • 리소스 링크 원본 : 기본적으로 jQuery는 DOM 요소를 조작하고 제어 할 수있는 훌륭한 도구입니다. 웹 애플리케이션이 아닌 웹 사이트 구축과 같이 DOM 요소에만 의존하고 데이터 CRUD는없는 경우 jQuery는 최고의 도구 중 하나입니다. (이 목적으로 AngularJS를 사용할 수도 있습니다.)

AngularJS는 프레임 워크 입니다. 그것은 다음과 같은 특징이 있습니다

  1. 양방향 데이터 바인딩
  2. MVW 패턴 (MVC-ish)
  3. 주형
  4. 사용자 지정 지시문 (재사용 가능한 구성 요소, 사용자 정의 마크 업)
  5. REST 친화적
  6. 딥 링크 (동적 페이지에 대한 링크 설정)
  7. 양식 검증
  8. 서버 커뮤니케이션
  9. 현지화
  10. 의존성 주입
  11. 전체 테스트 환경 (단위, e2e)

프레젠테이션훌륭한 소개를 확인하십시오.

공식 개발자 안내서 를 읽는 것을 잊지 마십시오

또는이 멋진 비디오 자습서 에서 배우십시오

더 많은 튜토리얼 비디오를보고 싶다면이 게시물, 60 개 이상의 AngularJS 튜토리얼 모음을 확인하십시오 .

AngularJS와 함께 jQuery를 문제없이 사용할 수 있습니다.

실제로 AngularJS는 jQuery lite를 사용하는데 이는 훌륭한 도구입니다.

에서 자주 묻는 질문

Angular는 jQuery 라이브러리를 사용합니까?

예, Angular는 응용 프로그램을 부트 스트랩 할 때 앱에 jQuery가 있으면 jQuery를 사용할 수 있습니다. 스크립트 경로에 jQuery가 없으면 Angular는 jQLite라고하는 jQuery 하위 집합의 자체 구현으로 돌아갑니다.

그러나 AngularJS 컨트롤러에서 DOM을 수정하기 위해 jQuery를 사용하지 말고 지시문에서 수행하십시오.

최신 정보:

Angular2가 릴리스되었습니다. 초보자를위한 훌륭한 리소스 목록은 다음과 같습니다.


8
Angular js에서 전체 응용 프로그램을 개발해야합니까 아니면 몇 페이지에서 사용할 수 있고 몇 개의 apges에서 간단한 jquery를 사용할 수 있습니다
Mirage

8
+1 좋은 답변입니다. Angular가 MVVM 패턴에 더 가깝다고 말합니다.
GFoley83

8
나는 Angular가 MVW
iConnor

2
몇 년 동안 MVC에 가깝습니다. 그러나 이제는 리팩토링 및 API 개선이 MVVM에 더 가깝습니다. Angular $ scope에서 VM처럼 작동합니다 (모델보기).
무적

14
(나와 같이) 궁금해하는 미래의 사람들을 위해, MVW == Model-View-Whatever" m odel - v iew - w hatever-works-for-you" 에서와 같이 Model-View-Whatever 입니다. 즉, MV * 입니다.
David Frye

40

개발자의 관점에서 jQueryAngularJS의 차이점 에 대해 추가하고 싶습니다 .

AngularJS에서는 달성하고자하는 것에 대해 매우 체계적인 견해와 접근 방식 을 가져야합니다 . 작업을 완료하는 것은 거의 선형적인 방식을 따르지 않지만, 다양한 객체 간의 교환은 요청과 작업을 처리하므로 각도는 MVC 기반 프레임 워크 이므로 필요 합니다. 코딩은 인터랙션이 완료되기를 원하는 방식에 따라 크게 달라 지므로 최종 애플리케이션에 대한 최소한의 일반 청사진도 필요합니다.

jQuery는 자유 시 와 같다. 당신은 선을 쓰고 당신의 임무를 완수하기 위해 적절한 관계와 운동량을 유지한다.

Angular JS에서는 모멘텀과 관계를 적절하게 유지해야 할뿐만 아니라 몇 가지 규칙을 따라야하지만시는 구조적이며 많은 규칙에 묶여있는 고전 Spencerian sonnet (유명한 고전 시인)과 비슷합니다.

AngularJS와 비교할 때 jQuery는 코드 및 함수 모음과 비슷합니다 (이미 언급했듯이 DOM 조작 및 빠른 효과 달성에 탁월함). AngularJS는 개발자가 엔터프라이즈 웹을 구축 할 수있는 실제 프레임 워크입니다 -체계적으로 구성된 라우팅 및 관리 내에서 많은 데이터 바인딩 및 교환이 가능한 응용 프로그램.

또한 AngularJS는 작업을 완료하기 위해 jQuery의존 하지 않습니다 . jQuery에는없는 두 가지 뛰어난 기능이 있습니다.

1- Angular JS는 단순히 목표를 달성하는 것이 아니라 목표를 코딩하고 달성하는 방법을 가르쳐줍니다. AngularJS는 Javascript의 핵심과 핵심을 완전히 활용하고 DI (dependency-injection)와 같은 기술을 앱에 통합 할 수있는 방법을 제공합니다. angularJS를 사용하려면 Javascript로 더 높은 코딩 기술을 배워야합니다.

2- Angular JS는 지시문을 처리하고 앱을 구성하기 위해 완전히 독립적입니다. 그런 다음 jQuery가 동일한 (독립적) 작업을 수행 할 수 있다고 주장 할 수도 있지만 실제로 AngularJS는 위의 행에서 언급 된 것처럼 여러 번 MVC 기반 방식으로 가장 우수합니다.

마지막으로, 이름과의 전쟁은 편견이나 주관적인 것에 크게 방해가되기 때문에 전쟁이 없다는 점입니다. jQuery의 규모와 위대함이 입증되었지만 그 사용법과 한계 (모든 프레임 워크 또는 소프트웨어)는 토론과 비슷한 토론의 관심사입니다.

최신 정보:

AngularJS를 사용하는 것은 구현 측면에서 비용이 많이 들기 때문에 결정적이지만 향후 응용 프로그램의 확장, 변환 및 유지 관리를위한 강력한 기반을 찾습니다. AngularJS는 새로운 웹 세계를위한 것입니다. 이는 최소한의 리소스 소비 (서버에서 필요한 리소스 만로드), 빠른 응답 시간 및 높은 수준의 유지 관리 성 및 구조화 된 시스템을 감싸는 확장 성이 특징 인 응용 프로그램 구축을 목표로합니다.


"angularJS를 사용하려면 Javascript를 사용하여 더 높은 코딩 기술을 배워야합니다 (또는 반드시 배워야합니다)"-높은 기술이 무엇을 의미하는지 예를 들어 주시겠습니까?
antew

@MostafaTalebi, 나는 단지 농담했지만 실제로 그 부분을 얻지 못했습니다 "JavaScript는 개념에 가깝습니다 ??" 이것은 무엇을 의미 하는가?? 더 설명해 주시겠습니까? 어쨌든 우리가 연락 할 수 있습니까?
azerafati

나는 그것이 스크립트 :))) 의미
모스 타파 Talebi

나는 한 가지를 섞었다! 예를 들어 우리는 서버 측에 php를 사용하고 MVC 개념에 따라 프레임 워크를 취하고 자바 스크립트를 사용하는 템플릿에서 Angular js도 사용하므로 angular js MVC는 쓸모가 없습니다.
Farhad

28

AngularJS : AngularJS는 무거운 웹 애플리케이션을 개발하기위한 것입니다. AngularJS는 응용 프로그램이 부트 스트랩 될 때 웹 응용 프로그램에 jQuery가 있으면 jQuery를 사용할 수 있습니다. 스크립트 경로에 없으면 AngularJS는 jQuery 하위 세트의 자체 구현으로 돌아갑니다.

JQuery : jQuery는 작고 빠르며 기능이 풍부한 JavaScript 라이브러리입니다. HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 것을 훨씬 간단하게 만듭니다. jQuery는 AJAX 호출 및 DOM 조작과 같은 JavaScript의 복잡한 작업을 단순화합니다.

자세한 내용은 여기를 참조하십시오 : angularjs-vs-jquery


20

나는 이것이 차이점을 간단히 설명하는 매우 좋은 차트 라고 생각 합니다 . 간단히 살펴보면 대부분의 차이점을 알 수 있습니다.

여기에 이미지 설명을 입력하십시오

내가 추가하고 싶은 한 가지가입니다, AngularJS와는 추적을 할 수 MVVM의 동안 디자인 패턴을 JQuery와 표준 객체 지향 패턴 중 하나를 수행하지 않습니다.


12

그들은 다른 수준에서 작동합니다.

초보자 관점에서 차이점을 보는 가장 간단한 방법 은 jQuery 는 본질적으로 JavaScript의 추상이므로 JavaScript에 대한 페이지를 디자인하는 방법은 jQuery에 대해 수행하는 방식과 거의 같습니다 . DOM으로 시작한 다음 그 위에 비헤이비어 레이어를 만듭니다. Angular.Js 에서는 그렇지 않습니다 . 프로세스는 실제로 처음부터 시작되므로 최종 결과는 원하는 관점입니다.

으로 jQuery를 당신과 함께, DOM-조작을 할 Angular.Js 는 전체 웹 응용 프로그램을 만들 수 있습니다.


jQuery 는 다양한 브라우저 특성을 추상화하고 IE6 검사 등을 추가하지 않고도 DOM과 함께 작동하도록 제작되었습니다. 시간이 지남에 따라 훌륭하고 강력한 API를 개발하여 많은 작업을 수행 할 수 있었지만 핵심적으로 DOM을 다루고 요소를 찾고 UI를 변경하는 등의 목적으로 사용되었습니다. 너트와 볼트로 직접 작동하는 것으로 생각하십시오.

Angular.JsMVC 개념을 프론트 엔드 엔지니어링 에 추가하기 위해 jQuery 위에 레이어로 구축되었습니다 . Angular.Js 는 DOM과 함께 작동하는 API를 제공하는 대신 데이터 바인딩, 템플릿, 사용자 정의 구성 요소 ( jQuery UI 와 유사 하지만 JS를 통해 트리거하는 대신 선언적) 및 기타 기능을 제공합니다. 너트와 볼트 수준에서 직접 연결하는 대신 서로 연결할 수있는 구성 요소를 사용하여 더 높은 수준에서 작동하는 것으로 생각하십시오.

또한 , Angular.Js는 당신에게 컨트롤러, 서비스 및 지침과 같은 다양한 프로젝트에 적용되는 구조와 개념을 제공합니다. jQuery 자체는 동일한 작업을 수행하기 위해 여러 가지 방법으로 사용될 수 있습니다. 고맙게도 Angular.Js 는 프로젝트에 쉽게 들어가고 나갈 수 있습니다. 시스템을 처음부터 다시 배울 필요없이 여러 사람이 동일한 프로젝트에 기여할 수있는 건전한 방법을 제공합니다.


짧은 비교는 다음과 같습니다.

jQuery

  • CSS 선택기에 대한 적절한 지식을 가진 사람들이 쉽게 사용할 수 있습니다
  • DOM 조작에 사용되는 라이브러리입니다
  • 모델과 관련이 없습니다
  • 웹 페이지의 내용을 쉽게 조작
  • UI를 더욱 매력적으로 만들기 위해 스타일 적용
  • 쉬운 DOM 순회
  • 효과 및 애니메이션
  • 간단한 AJAX 호출 및
  • 유틸리티 유용성
  • 양방향 바인딩 기능이 없습니다
  • 프로젝트의 규모가 커지면 복잡하고 유지하기가 어렵습니다
  • 때로는 Angular 와 동일한 기능을 달성하기 위해 더 많은 코드를 작성해야합니다.

Angular.Js

  • MVVM 프레임 워크입니다
  • SPA (단일 페이지 응용 프로그램)를 만드는 데 사용
  • 라우팅, 지시문, 양방향 데이터 바인딩, 모델, 의존성 주입, 단위 테스트 등과 같은 주요 기능이 있습니다.
  • 모듈 식
  • 프로젝트 크기가 증가 할 때 유지 관리 가능
  • 빠르다
  • 양방향 데이터 바인딩 REST 친화적 MVC 기반 패턴
  • 딥 링크
  • 템플릿
  • 내장 양식 검증
  • 의존성 주입
  • 현지화
  • 전체 테스트 환경
  • 서버 커뮤니케이션

그리고 훨씬 더

여기에 이미지 설명을 입력하십시오

이것이 도움이된다고 생각하십시오.

더 찾을 수 있습니다 -


3

jquery :-

jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and its lightweight as well as fast.

So, using jQuery, we can:

easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more 

AngularJS :-

AngularJS is a product by none other the Search Engine Giant Google and its an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.

As being a framework, it dictates us to follow some rules and a structured approach. Its
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).

In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:

Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.