데이터 바인딩

귀하는 웹 페이지를 만들고, 동적 데이터가 있다고 생각 될 때마다 {{data bindings}}를 계속 사용합니다. 그러면 Angular는 $ scope 핸들러를 제공하며,이를 통해 (정적으로 또는 웹 서버 호출을 통해) 채울 수 있습니다.

이것은 데이터 바인딩에 대한 이해입니다. 나는 당신이 그것을 다운 생각합니다.

DOM 조작

데이터 조작을 포함하지 않는 간단한 DOM 조작 (예 : 마우스 오버의 색상 변경, 클릭시 요소 숨기기 / 표시)의 경우 jQuery 또는 구식 js로 충분하고 깨끗합니다. 이것은 angular의 mvc의 모델이 페이지의 데이터를 반영하는 것으로 가정하므로 색상, 표시 / 숨기기 등과 같은 CSS 속성은 모델에 영향을 미치지 않습니다.

여기서는 “단순한”DOM 조작이 더 깨끗하다는 점을 알 수 있지만, 실제로는 “단순”해야합니다. DOM 조작은 Angular가 실제로 빛나는 데이터 바인딩과 같은 영역 중 하나라고 생각합니다. 이것을 이해하면 Angular가 뷰를 어떻게 고려하는지 알 수 있습니다.

먼저 Angular 방식과 DOM 조작에 대한 바닐라 js 접근 방식을 비교하여 시작하겠습니다. 전통적으로 우리는 HTML을 아무것도하지 않는 것으로 생각하고 그렇게 작성합니다. 따라서 “onclick”과 같은 인라인 js는 “doing”이 아닌 HTML의 컨텍스트에 “doing”을 넣기 때문에 나쁜 습관입니다. 각도는 그 개념을 머리에 뒤집습니다. 뷰를 작성할 때 HTML은 많은 것을 “할”수 있다고 생각합니다. 이 기능은 각도 지시문에 추상화되어 있지만 이미 존재하거나 작성했다면 “어떻게”수행했는지 고려할 필요가 없습니다. 각도를 사용하면 사용할 수 있습니다. 또한 모든 뷰 로직이 실제로 뷰에 포함되어 있음을 의미합니다. 자바 스크립트 파일에 없습니다. 다시 말하지만, 자바 스크립트 파일에 작성된 지시문이 HTML의 기능을 향상시키는 것으로 간주 될 수 있으므로 DOM이 자체 조작에 대해 걱정하도록해야합니다. 간단한 예를 들어 설명하겠습니다.

이것은 우리가 사용하고자하는 마크 업입니다. 나는 직관적 인 이름을 주었다.

<div rotate-on-click="45"></div>

먼저, 맞춤 Angular Directive를 통해 HTML에이 기능을 제공했다면 이미 완료 되었다고 언급하고 싶습니다 . 그것은 신선한 공기의 숨결입니다. 잠시 후에 그것에 대해 더 자세히 설명합니다.

jQuery로 구현

여기에서 라이브 데모를 클릭하십시오 (클릭).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)',
    mozTransform: 'rotate('+deg+'deg)',
    msTransform: 'rotate('+deg+'deg)',
    oTransform: 'rotate('+deg+'deg)',
    transform: 'rotate('+deg+'deg)'
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Angular를 사용한 구현

여기에서 라이브 데모를 클릭하십시오 (클릭).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)',
          mozTransform: 'rotate('+deg+'deg)',
          msTransform: 'rotate('+deg+'deg)',
          oTransform: 'rotate('+deg+'deg)',
          transform: 'rotate('+deg+'deg)'
        });
      });
    }
  };
});

매우 가볍고 매우 깨끗하며 간단한 조작입니다! 제 생각에는 각도 접근법이 모든 측면에서, 특히 기능이 추상화되고 DOM에서 DOM 조작이 선언되는 방식에서 승리합니다. 기능은 html 속성을 통해 요소에 연결되어 있으므로 선택기를 통해 DOM을 쿼리 할 필요가 없으며 두 가지 멋진 클로저가 있습니다. 디렉토리 팩토리의 클로저는 하나입니다. , link함수 (또는 compile함수) 에서 지시문의 각 사용법에 대해 하나의 클로저 .

DOM 조작을위한 양방향 데이터 바인딩 및 지시문은 Angular를 최고로 만드는 시작일뿐입니다. Angular는 모든 코드를 모듈 식, 재사용 가능 및 쉽게 테스트 할 수있게하며 단일 페이지 앱 라우팅 시스템도 포함합니다. jQuery는 일반적으로 필요한 편의성 / 브라우저 방식 의 라이브러리 이지만 Angular는 단일 페이지 앱을 만들기위한 모든 기능을 갖춘 프레임 워크 입니다. 앵귤러 스크립트는 실제로 jQuery의 자체 “lite”버전을 포함하므로 가장 중요한 방법 중 일부를 사용할 수 있습니다. 따라서, jQuery (약간)를 사용하여 Angular IS를 사용한다고 주장 할 수 있지만 Angular는 훨씬 더 “마법”을 제공하여 앱을 만드는 과정에 도움을줍니다.

이것은 jQuery 배경이있는 경우 어떻게“AngularJS에 대해 생각합니까?”

일반적인 차이점.

위의 사항은 OP의 특정 관심사를 목표로합니다. 또한 다른 중요한 차이점에 대한 개요도 제공합니다. 각 주제에 대한 추가 자료를 읽는 것이 좋습니다.

Angular와 jQuery는 합리적으로 비교할 수 없습니다.

Angular는 프레임 워크이고 jQuery는 라이브러리입니다. 프레임 워크는 자리가 있고 라이브러리는 자리가 있습니다. 그러나 좋은 프레임 워크가 라이브러리보다 응용 프로그램을 작성하는 데 더 많은 힘을 가지고 있다는 데는 의문의 여지가 없습니다. 이것이 바로 프레임 워크의 요점입니다. 평범한 JS로 코드를 작성하거나 공통 함수 라이브러리를 추가하거나 프레임 워크를 추가하여 대부분의 작업을 수행하는 데 필요한 코드를 대폭 줄일 수 있습니다. 따라서 더 적절한 질문은 다음과 같습니다.

왜 프레임 워크를 사용합니까?

좋은 프레임 워크는 코드를 모듈화 (재사용 가능), DRY, 읽기 쉽고 성능이 뛰어나고 안전하도록 코드를 설계하는 데 도움이됩니다. jQuery는 프레임 워크가 아니므로 이러한 점에서 도움이되지 않습니다. 우리는 모두 jQuery 스파게티 코드의 전형적인 벽을 보았습니다. 이것은 jQuery의 잘못이 아닙니다. 코드를 작성하는 방법을 모르는 개발자의 잘못입니다. 그러나 개발자가 코드를 작성하는 방법을 알고 있다면, 얼마 전에 논의한 토대 (교실 등)를 제공하기 위해 일종의 최소 “프레임 워크”를 작성하거나 무언가를 추가 할 수 있습니다. 예를 들어, 좋은 코드를 작성하기 위해 프레임 워크의 일부로 작동하도록 RequireJS를 추가 할 수 있습니다.

다음은 현대 프레임 워크가 제공하는 것들입니다.

• 템플릿
• 데이터 바인딩
• 라우팅 (단일 페이지 앱)
• 깨끗하고 모듈 식이며 재사용 가능한 아키텍처
• 보안
• 편의를위한 추가 기능 / 기능

Angular에 대해 더 논의하기 전에 Angular가 유일한 종류는 아니라는 점을 지적하고 싶습니다. 예를 들어 Durandal은 jQuery, Knockout 및 RequireJS를 기반으로 구축 된 프레임 워크입니다. 다시 말하지만, jQuery 자체는 Knockout, RequireJS 및 그 위에 구축 된 전체 프레임 워크를 제공 할 수 없습니다. 그냥 비교할 수 없습니다.

행성을 파괴해야하고 죽음의 별이 있다면 죽음의 별을 ​​사용하십시오.

각도 (재검토)

프레임 워크가 제공하는 것에 대한 이전의 요점을 바탕으로 Angular가 제공하는 방식을 칭찬하고 이것이 왜 jQuery 단독보다 실제로 중요한지 명확히하고 싶습니다.

DOM 참조.

위의 예제에서 기능을 제공하기 위해 jQuery를 DOM에 연결해야한다는 것은 절대적으로 불가피합니다. 즉, 뷰 (html)는 “이미지 슬라이더”와 같은 일종의 식별자로 레이블이 지정되어 있기 때문에 기능에 관심이 있고 JavaScript는 해당 기능을 제공하는 데 관심이 있습니다. Angular는 추상화를 통해 해당 개념을 제거합니다. Angular로 코드를 올바르게 작성하면 뷰가 자체 동작을 선언 할 수 있습니다. 시계를 표시하려면 다음을 수행하십시오.

<clock></clock>

끝난.

예, 우리는 그것을 의미하기 위해 JavaScript로 이동해야하지만 jQuery 접근 방식과 반대 방식 으로이 작업을 수행하고 있습니다. 우리의 Angular 지시어 (자신의 작은 세계에 있음)는 html을 “증명”했으며 html은 기능을 그 자체에 연결합니다.

MVW Architecure / 모듈 / 의존성 주입

Angular는 코드를 간단하게 구성 할 수있는 방법을 제공합니다. 뷰는 뷰 (html)에 속하고 증강 뷰 기능은 지시문에 속하고 다른 로직 (아약스 호출과 같은)과 기능은 서비스에 속하며 서비스와 로직을 뷰에 연결하는 것은 컨트롤러에 속합니다. 서비스의 구성 및 수정 등을 처리하는 데 도움이되는 다른 각도 구성 요소도 있습니다. 작성하는 모든 기능은 응용 프로그램 전체에서 Dependency Injection을 관리하는 인젝터 하위 시스템을 통해 필요한 모든 위치에서 자동으로 사용할 수 있습니다. 응용 프로그램 (모듈)을 작성할 때 각각 재사용 가능한 구성 요소가있는 다른 재사용 가능한 모듈로 나누고 더 큰 프로젝트에 포함시킵니다. Angular 관련 문제를 해결하면 ve는 향후 재사용을 위해 유용하고 구조화되어 다음 프로젝트에 쉽게 포함되는 방식으로 자동으로 해결했습니다. ㅏ이 모든 것에 대한 엄청난 보너스는 코드를 테스트하기가 훨씬 쉽다는 것입니다.

Angular에서 “작업”을하는 것은 쉽지 않습니다.

감사합니다. 위에서 언급 한 jQuery 스파게티 코드는 “작업”을 한 다음 계속 진행 한 개발자의 결과입니다. 잘못된 Angular 코드를 작성할 수는 있지만 Angular가 그것에 대해 싸울 것이기 때문에 훨씬 어렵습니다. 즉, 제공하는 깔끔한 아키텍처를 이용해야합니다 (적어도 다소). 즉, Angular로 나쁜 코드를 작성하는 것이 더 어렵지만 깨끗한 코드를 작성하는 것이 더 편리합니다.

각도는 완벽하지 않습니다. 웹 개발 세계는 항상 성장하고 변화하고 있으며 문제를 해결하기 위해 새롭고 더 나은 방법이 제시되고 있습니다. 예를 들어 Facebook의 React와 Flux는 Angular에 비해 큰 장점이 있지만 자체 단점이 있습니다. 완벽한 것은 없지만 Angular는 지금까지도 여전히 훌륭합니다. jQuery가 한 번 웹 세계를 발전시키는 데 도움이되었던 것처럼 Angular도 마찬가지입니다.

---

답변