javascript - jQuery 배경이 있다면 "AngularJS에서 생각하기"?



(10)

필요한 패러다임 변화를 기술 할 수 있습니까?

긴급 대 선언적

jQuery 를 사용하면 단계별로 DOM을 알려야합니다. AngularJS 를 사용 하면 원하는 결과를 설명 할 수는 있지만 원하는 결과는 설명 할 수 없습니다. 이것에 더 많은 것을 here . Mark Rajcok의 답변도 확인하십시오.

클라이언트 측 웹 앱을 어떻게 다르게 설계하고 설계합니까?

AngularJS는 MVC 패턴 을 사용하는 전체 클라이언트 측 프레임 워크입니다 ( 그래픽 표현을 확인하십시오 ). 그것은 크게 우려의 분리에 초점을 맞추고 있습니다.

가장 큰 차이점은 무엇입니까? 무엇을하고 / 사용을 중단해야합니까? 대신에 / 사용을 시작해야하는 것은 무엇입니까?

jQuery 는 라이브러리입니다.

AngularJS 는 MVC, 의존성 주입 , 데이터 바인딩 등과 같은 멋진 것들을 결합한 매우 훌륭한 테스트 가능한 아름다운 클라이언트 측 프레임 워크 입니다.

관심분리 하고 테스트 ( 단위 테스트 및 종단 간 테스트)에 중점을 두어 테스트 중심 개발을 용이하게합니다.

가장 좋은 방법은 멋진 튜토리얼을 통해 시작하는 것 입니다. 몇 시간 내에 단계를 수행 할 수 있습니다. 그러나 당신이 뒤에서 개념을 습득하기를 원한다면, 추가 읽기를위한 무수한 참조가 포함됩니다.

서버 측 고려 사항 / 제한 사항이 있습니까?

이미 pure jQuery를 사용하고있는 기존 애플리케이션에서 사용할 수있다. 그러나 AngularJS 기능을 최대한 활용하려면 RESTful 방식을 사용하여 서버 측 코딩을 고려할 수 있습니다 .

이렇게하면 리소스 팩토리 를 활용 하여 서버 측 RESTful API 추상화 하고 서버 측 호출 (get, save, delete 등)을 매우 쉽게 할 수 있습니다.

jQuery 에서 클라이언트 측 애플리케이션을 개발하는 것에 익숙하다고 가정하지만 이제 AngularJS 사용하기 시작하겠습니다. 필요한 패러다임 변화를 기술 할 수 있습니까? 다음은 답변 구성에 도움이되는 몇 가지 질문입니다.

  • 클라이언트 측 웹 응용 프로그램을 어떻게 다르게 설계하고 설계합니까? 가장 큰 차이점은 무엇입니까?
  • 무엇을하고 / 사용을 중단해야합니까? 대신에 / 사용을 시작해야할까요?
  • 서버 측 고려 사항 / 제한 사항이 있습니까?

jQueryAngularJS 의 자세한 비교를 원하지 않습니다.


Answer #1

1. 페이지를 디자인하지 말고 DOM 조작으로 페이지를 변경하십시오.

jQuery에서는 페이지를 디자인 한 다음 동적으로 만든다. 이는 jQuery가 기능 보강을 위해 설계 되었기 때문에 단순한 전제로부터 엄청나게 성장했기 때문입니다.

그러나 AngularJS에서는 아키텍처를 염두에두고 처음부터 시작해야합니다. "나는이 DOM 조각이 있고 그것을 X로 만들고 싶다"고 생각하는 대신, 성취하고자하는 것으로 시작한 다음 응용 프로그램을 설계하고 마지막으로보기를 설계해야합니다.

2. AngularJS로 jQuery를 늘리지 마십시오.

비슷하게, jQuery가 X, Y, Z를 사용한다는 생각으로 시작하지 마라. 그래서 모델과 컨트롤러를 위해 AngularJS를 추가 할 것이다. 이것은 처음 시작했을 때 정말 유혹스러운 일입니다. 새로운 AngularJS 개발자가 적어도 "각도 방법"에 익숙해지기 전까지는 jQuery를 전혀 사용하지 말 것을 항상 권장합니다.

저는 많은 개발자와 메일 링리스트에서 150이나 200 줄의 코드로 된 jQuery 플러그인을 사용하여 정교한 솔루션을 만들었습니다. 콜백 콜렉션과 함께 AngularJS에 코드를 붙여서 혼란스럽고 복잡한 코드를 $apply . 그러나 그들은 결국 그것을 얻는다! 문제는 대부분의 경우 jQuery 플러그인이 AngularJS에서 코드의 일부분으로 재 작성되어 갑자기 모든 것이 이해할 수 있고 간단해진다는 것입니다.

결론은 다음과 같습니다. 솔루션을 만들 때 먼저 AngularJS에서 생각하십시오. 해결책을 생각할 수 없다면 지역 사회에 물어보십시오. 그 후에도 쉬운 해결책이 없다면 jQuery에 자유롭게 도달하십시오. 그러나 jQuery가 버팀목이되지 않도록하거나 AngularJS를 마스터하지 마십시오.

3. 항상 건축술의 점에서 생각하십시오

먼저 단일 페이지 응용 프로그램응용 프로그램 이라는 것을 알아야합니다. 그들은 웹 페이지가 아닙니다 . 따라서 우리는 클라이언트 측 개발자처럼 생각하는 것 외에도 서버 측 개발자처럼 생각할 필요가 있습니다. 우리는 우리의 응용 프로그램을 개별적이고 확장 가능하며 테스트 가능한 구성 요소로 나누는 방법에 대해 생각해야합니다.

그렇다면 어떻게 해야할까요? AngularJS에서 어떻게 생각하십니까? jQuery와는 다른 몇 가지 일반적인 원칙이 있습니다.

보기는 "공식 기록"입니다.

jQuery에서는 프로그래밍 방식으로 뷰를 변경합니다. 우리는 다음과 같이 정의 된 드롭 다운 메뉴를 가질 수 있습니다 :

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

jQuery에서는 애플리케이션 로직에서 다음과 같이 활성화 할 것이다.

$('.main-menu').dropdownMenu();

우리가보기를 볼 때 여기에 기능이 있다는 것이 즉시 명백하지 않습니다. 소규모 응용 프로그램의 경우에는 문제가 없습니다. 그러나 사소한 응용 프로그램의 경우 상황이 빨리 혼란스럽고 유지하기가 어려워집니다.

AngularJS에서는보기가 뷰 기반 기능의 공식 기록입니다. 우리의 ul 선언은 다음과 같이 보입니다.

<ul class="main-menu" dropdown-menu>
    ...
</ul>

이 둘은 같은 일을하지만, AngularJS 버전에서는 템플릿을 보는 사람은 무엇이 일어나야 하는지를 알고 있습니다. 개발 팀의 새로운 멤버가 올 때마다, 그녀는 이것을보고 나서 dropdownMenu 라는 지시어가 작동한다는 것을 수 있습니다; 그녀는 옳은 답을 직관적으로 이해할 필요가 없으며 모든 코드를 살펴볼 필요가 없습니다. 보기는 일어났던 것을 우리에게 나타내었다. 훨씬 더 청결한.

AngularJS에 익숙하지 않은 개발자는 종종 특정 종류의 모든 링크를 찾아 지침을 추가하는 것과 같은 질문을합니다. 우리가 대답 할 때 개발자는 항상 깜짝 놀라게됩니다. 그러나 당신이 그렇게하지 않는 이유는 이것이 half-jQuery, half-AngularJS, 그리고 좋지 않다는 것입니다. 여기서 문제는 개발자가 AngularJS의 컨텍스트에서 "jQuery를 수행"하려고한다는 것입니다. 그것은 결코 잘 작동하지 않을 것입니다. 보기 공식 기록입니다. 지시어 (아래에서 더 자세히 설명)를 벗어나서 DOM을 절대로 변경 하지 마십시오 . 지시문이 보기에 적용되므로 의도가 명확합니다.

주의 사항 : 디자인하지 말고 마크 업하십시오. 설계하고 설계해야합니다.

데이터 바인딩

이것은 AngularJS의 가장 놀라운 기능 중 하나이며 이전 섹션에서 언급 한 DOM 조작의 종류를 수행해야 할 필요성을 없앴습니다. AngularJS는 자동으로보기를 업데이트하므로 사용자는 필요하지 않습니다! jQuery에서는 이벤트에 응답 한 다음 컨텐츠를 업데이트합니다. 같은 것 :

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

다음과 같은보기 :

<ul class="messages" id="log">
</ul>

우려 사항을 혼합하는 것 외에도 앞서 언급 한 의도를 나타 내기 위해 동일한 문제가 있습니다. 하지만 더 중요한 것은 수동으로 DOM 노드를 참조하고 업데이트해야한다는 것입니다. 그리고 우리가 로그 엔트리를 지우고 싶다면, 그것도 DOM에 대해 코딩해야합니다. 우리는 DOM과 다른 논리를 어떻게 테스트합니까? 프레젠테이션을 변경하려면 어떻게해야합니까?

이것은 조금 지저분하고 사소한 허약입니다. 그러나 AngularJS에서는 다음과 같이 할 수 있습니다.

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

그리고 우리의 견해는 다음과 같이 보일 수 있습니다 :

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

그러나 우리의 견해는 다음과 같이 보일 수 있습니다.

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

그리고 이제 정렬되지 않은 목록을 사용하는 대신 부트 스트랩 경고 상자를 사용합니다. 그리고 우리는 컨트롤러 코드를 변경할 필요가 없었습니다! 그러나 더 중요한 것은 로그가 어디서 어떻게 업데이트 되더라도 뷰가 변경된다는 것입니다. 자동으로. 산뜻한!

여기에 표시하지 않았지만 데이터 바인딩은 양방향입니다. 따라서 이러한 로그 메시지는 <input ng-model="entry.msg" /> 를 수행하여 뷰에서 편집 할 수도 있습니다. 그리고 기뻐했습니다.

독특한 모델 계층

jQuery에서 DOM은 모델과 비슷합니다. 그러나 AngularJS에는보기와 완전히 독립적으로 원하는 방식으로 관리 할 수있는 별도의 모델 계층이 있습니다. 이는 위의 데이터 바인딩을 돕고, 관심사의 분리를 유지하며 훨씬 더 큰 테스트 가능성을 제공합니다. 다른 답변은이 시점에서 언급 했으므로 여기에 남겨 두겠습니다.

관심사 분리

그리고 위의 모든 내용이이 과도기적 주제에 묶여 있습니다. 귀하의 견해는 일어날 것으로 예상되는 것에 대한 공식 기록으로 작용합니다 (대부분). 귀하의 모델은 귀하의 데이터를 나타냅니다; 재사용 가능한 작업을 수행 할 수있는 서비스 계층이 있습니다. DOM 조작을하고 지시어로 뷰를 확대합니다. 컨트롤러로 모든 것을 함께 붙입니다. 이것은 또한 다른 답변에서도 언급되었으며, 내가 추가 할 수있는 유일한 것은 테스트 가능성과 관련이 있습니다. 아래에서 다른 섹션에서 설명합니다.

의존성 주입

관심을 분리하는 데 도움이되는 것은 의존성 주입 (DI)입니다. 서버 측 언어 ( Java 에서 PHP )에서 온 사람이라면 이미이 개념을 잘 알고있을 것입니다.하지만 jQuery에서 오는 클라이언트 측 사람이라면이 개념은 바보에서 불필요한 것에서 힙 스터에 이르기까지 무엇이든 보일 수 있습니다 . 그러나 그렇지 않습니다. :-)

넓은 의미에서 DI는 구성 요소를 매우 자유롭게 선언 한 다음 다른 구성 요소에서 선언 할 수 있음을 의미합니다. 인스턴스를 요청하면 부여됩니다. 로딩 순서 나 파일 위치 등을 알 필요가 없습니다. 전원이 즉시 표시되지 않을 수도 있지만 단 하나의 일반적인 예 (테스트)를 제공합니다.

우리 애플리케이션에서 REST API를 통해 서버 측 저장소를 구현하는 서비스가 필요하며 애플리케이션 상태에 따라 로컬 저장소도 필요하다고 가정 해 보겠습니다. 컨트롤러에서 테스트를 실행할 때 우리는 서버와 통신하고 싶지 않습니다. 컨트롤러를 테스트하고 있습니다. 원래 구성 요소와 동일한 이름의 모의 서비스를 추가 할 수 있으며 인젝터는 컨트롤러가 자동으로 가짜 컨트롤러를 가져 오도록 보장합니다. 컨트롤러는 차이점을 알 필요가 없으며 알 필요가 없습니다.

테스트 말하면 ...

4. 테스트 주도 개발 - 항상

이 부분은 아키텍처에 대한 섹션 3의 일부입니다.하지만 중요한 부분이므로 필자는 자신의 최상위 섹션으로 삼을 것입니다.

보고, 사용했거나 작성한 많은 jQuery 플러그인 중 몇 명이 동반 테스트 스위트를 가지고 있었습니까? 그다지 많지 않은 이유는 jQuery가 그다지 적합하지 않기 때문입니다. 그러나 AngularJS가 있습니다.

jQuery에서 테스트하는 유일한 방법은 테스트에서 DOM 조작을 수행 할 수있는 샘플 / 데모 페이지를 사용하여 구성 요소를 독립적으로 만드는 것입니다. 그렇다면 우리는 컴포넌트를 개별적으로 개발 한 다음 애플리케이션에 통합해야합니다. 얼마나 불편한가! jQuery로 개발할 때 우리는 테스트 주도 개발 대신에 반복적으로 선택합니다. 그리고 누가 우리를 비난 할 수 있습니까?

그러나 우리는 관심사가 분리되어 있으므로 AngularJS에서 반복적으로 테스트 중심 개발을 할 수 있습니다! 예를 들어, 현재의 경로가 메뉴에 표시되도록하는 아주 간단한 지시문을 원한다고 가정 해 봅시다. 우리는 우리의 적용 관점에서 우리가 원하는 것을 선언 할 수 있습니다 :

<a href="/hello" when-active>Hello</a>

이제는 존재하지 않는 when-active 지시문에 대한 테스트를 작성할 수 있습니다.

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

우리가 시험을 볼 때, 우리는 그것이 실패한 것을 확인할 수 있습니다. 이제는 우리의 지침을 만들어야합니다.

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

이제 테스트가 끝나고 요청에 따라 메뉴가 실행됩니다. 우리의 개발은 반복 적이고 테스트 중심적입니다. 사악 해.

5. 개념적으로 지시문은 패키지화 된 jQuery가 아닙니다.

당신은 종종 "지시어에서 DOM 조작 만"하는 소리를 듣습니다. 이것은 필연적이다. 정중하게 복종하십시오!

하지만 조금 더 깊이 들어가 보자 ...

일부 지시문은 이미보기 ( ngClass 생각)에있는 내용을 ngClass 때문에 DOM 조작을 바로 수행 한 다음 기본적으로 수행됩니다. 그러나 지시어가 "위젯"과 같은 템플릿이고 템플리트가 있다면, 그것은 또한 관심사의 분리를 존중해야합니다. 즉, 템플릿 역시 링크 및 컨트롤러 기능에서의 구현과는 크게 독립적으로 유지되어야합니다.

AngularJS는 이것을 매우 쉽게 만들 수있는 전체 도구 모음을 제공합니다. ngClass 를 사용하면 클래스를 동적으로 업데이트 할 수 있습니다. ngModel 은 양방향 데이터 바인딩을 허용합니다. ngShowngHide 프로그래밍 방식으로 요소를 표시하거나 숨 깁니다. 우리가 스스로 쓰는 것을 포함하여 더 많은 것들이 있습니다. 즉, DOM 조작 없이 모든 종류의 멋진 작업을 수행 할 수 있습니다. DOM 조작이 적을수록 지시문을 테스트하기가 쉬우 며 스타일을 쉽게 적용 할 수 있고 향후 변경이 쉬우 며 재사용 성 및 배포 가능성이 높아집니다.

많은 jQuery를 던지기 위해 AngularJS에 새로운 개발자들이 많이 있습니다. 다른 말로하면, 그들은 "컨트롤러에서 DOM 조작을 할 수 없기 때문에 코드를 지시문에 넣을 것"이라고 생각합니다. 그것이 확실히 더 나은 동안, 그것은 종종 아직도 잘못 입니다.

우리가 3 절에서 프로그램 한 로거를 생각해보십시오. 우리가 지시어에 넣었을지라도, 우리는 여전히 그것을 "각도 방법"으로하고 싶습니다. 여전히 DOM 조작을하지 않습니다! DOM 조작이 필요할 때가 많이 있지만, 생각보다 훨씬 희귀합니다! 애플리케이션에서 DOM 조작을 수행하기 전에 필요한 것이 있는지 물어보십시오. 더 좋은 방법이있을 수 있습니다.

다음은 가장 자주 보는 패턴을 보여주는 간단한 예입니다. 토글 가능한 버튼이 필요합니다. (참고 :이 예제는 약간의 인위적이고 똑같은 방식으로 해결되는 더 복잡한 경우를 나타내는 자세한 설명입니다.)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

다음과 같은 몇 가지 문제가 있습니다.

  1. 첫째, jQuery는 절대로 필요하지 않았습니다. 여기 jQuery가 필요한 모든 것은 없습니다!
  2. 둘째, 이미 페이지에 jQuery가 있어도 여기에서 사용할 이유가 없습니다. 우리는 단순히 angular.element 를 사용할 수 있습니다. jQuery가없는 프로젝트 angular.element 컴포넌트를 angular.element 여전히 작동합니다.
  3. 셋째,이 지시어가 작동하려면 jQuery 필요하다고 가정하더라도 jqLite ( angular.element )는로드 된 경우 항상 jQuery를 사용합니다! 따라서 우리는 $ 사용할 필요가 없습니다 - 우리는 단지 angular.element 사용할 수 있습니다.
  4. 넷째로, 세 번째와 밀접한 관계가 있습니다. jqLite 요소를 $ 로 감쌀 필요가 없습니다. link 함수로 전달되는 element이미 jQuery 요소입니다.
  5. 그리고 이전 섹션에서 언급 한 다섯 번째, 왜 우리는 우리의 논리에 템플릿 요소를 혼합합니까?

이 지시문은 훨씬 더 간단하게 다음과 같이 다시 작성할 수 있습니다 (매우 복잡한 경우에도!).

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

템플리트가 템플리트에 있으므로 사용자 (또는 사용자)는 필요한 모든 스타일을 충족하는 템플리트에 대해 쉽게 스왑 할 수 있으며 논리는 전혀 변경하지 않아도됩니다. 재사용 성 - 붐!

테스트와 같은 그 밖의 모든 이점이 여전히 있습니다. 템플릿의 내용이 무엇이든 관계없이 지시문의 내부 API는 다루지 않으므로 리팩토링이 쉽습니다. 지시어를 건드리지 않고 원하는만큼 템플릿을 변경할 수 있습니다. 그리고 당신이 무엇을 바꿔도 테스트는 여전히 끝납니다.

w00t!

따라서 지시어가 jQuery와 같은 함수의 모음이 아니라면 무엇입니까? 지시문은 실제로 HTML의 확장입니다 . HTML이 당신이 필요로하는 것을하지 않는다면, 지시어를 작성하여 HTML을 사용하는 것처럼 사용할 수 있습니다.

다른 말로하면, AngularJS가 상자에서 무엇인가를하지 않는다면, 팀이 ngClick , ngClass , 등등에 바로 들어갈 수있는 방법을 생각해보십시오.

개요

jQuery도 사용하지 마십시오. 그것을 포함시키지 마십시오. 그것은 당신을 뒤로 잡을 것입니다. 그리고 $ 도달하기 전에 jQuery로 해결하는 방법을 알고 있다고 생각하는 문제에 직면했을 때 AngularJS를 제한하는 방법에 대해 생각해보십시오. 모르는 사람은 물어보십시오! 20 회 중 19 회를 수행하는 가장 좋은 방법은 jQuery를 필요로하지 않고 jQuery 결과로 해결하기 위해 더 많은 작업을 수행하는 것입니다.


Answer #2

jQuery

jQuery는 getElementByHerpDerp짧고 크로스 브라우저와 같이 길게 JavaScript 명령을 만듭니다 .

AngularJS

AngularJS는 동적 웹 응용 프로그램 (HTML은 정적 페이지 용으로 설계되었으므로)에서 잘 작동하는 작업을 수행하는 고유 한 HTML 태그 / 속성을 만들 수 있습니다.

편집하다:

"AngularJS에서 jQuery 백그라운드를 어떻게 생각합니까?" "HTML 배경이있어서 JavaScript로 어떻게 생각하니?" 질문을한다는 사실은이 두 가지 자원의 근본적인 목적을 이해하지 못했을 가능성이 있음을 보여줍니다. 이것은 단순히 "AngularJS가 지시어를 사용하는 반면 jQuery는 CSS 선택기를 사용하여 jQuery 객체를 만드는 것"이라고 말하는 것보다 기본적인 차이점을 지적함으로써 질문에 대답하기로했습니다. . 이 질문에는 오랜 대답이 필요하지 않습니다.

jQuery는 브라우저에서 프로그래밍 JavaScript를보다 쉽게 ​​만들 수있는 방법입니다. 짧은 브라우저 간 명령 등

AngularJS는 HTML을 확장하므로 <div>응용 프로그램을 만들기 위해 모든 곳 을 두지 않아도됩니다 . HTML이 정적, 교육용 웹 페이지를 위해 설계된 것보다는 실제로 응용 프로그램에서 작동하게합니다. 이것은 JavaScript를 사용하여 우회 길에서이를 수행하지만 근본적으로는 JavaScript가 아닌 HTML의 확장입니다.


Answer #3

필수 → 선언적

jQuery에서는 선택기 를 사용하여 DOM 요소를 찾은 다음 이벤트 처리기를 바인딩 / 등록합니다. 이벤트가 트리거되면 DOM을 업데이트 / 변경하기 위해 (필수) 코드가 실행됩니다.

AngularJS에서는 DOM 요소보다는 보기 에 대해 생각하고 싶습니다. 뷰는 AngularJS 지시문 이 포함 된 (선언적) HTML입니다. 지시문은 우리를 위해 장면 뒤에서 이벤트 처리기를 설정하고 동적 데이터 바인딩을 제공합니다. 셀렉터는 거의 사용되지 않으므로 ID (및 일부 클래스 유형)에 대한 필요성이 크게 줄어 듭니다. 뷰는 모델 에 연결됩니다 (범위를 통해). 뷰는 모델의 투영입니다. 이벤트는 모델 (즉, 데이터, 범위 속성)을 변경하며 해당 모델을 투영하는 뷰는 "자동으로"업데이트됩니다.

AngularJS에서는 jQuery에서 선택한 데이터를 보유하는 DOM 요소가 아니라 모델에 대해 생각해보십시오. 사용자가 보는 것을 조작하기 위해 콜백을 등록하는 대신보기를 해당 모델의 투영으로 생각하십시오.

관심사 분리

jQuery는 눈에 잘 띄지 않는 JavaScript (JavaScript) 동작 (JavaScript)을 구조체 (HTML)와 분리하여 사용합니다.

AngularJS는 뷰어 / 구조체 (HTML)에서 비헤이비어를 제거하기 위해 컨트롤러 와 지시문 (각각 자체 컨트롤러가있을 수 있고 컴파일 및 링크 기능을 가질 수 있음)을 사용합니다. Angular에는 응용 프로그램을 분리 / 구성하는 데 도움이되는 서비스필터있습니다 .

https://.com/a/14346528/215945 참조 https://.com/a/14346528/215945

응용 프로그램 설계

AngularJS 애플리케이션을 설계하는 한 가지 접근법 :

  1. 모델에 대해 생각해보십시오. 해당 모델에 대한 서비스 또는 자체 JavaScript 객체를 만듭니다.
  2. 모델을 표현하려는 방식, 즉 의견을 생각하십시오. 필요한 지시문을 사용하여 동적 데이터 바인딩을 가져 오는 각보기에 대해 HTML 템플릿을 만듭니다.
  3. 컨트롤러를 각 뷰에 연결합니다 (ng-view 및 routing 또는 ng-controller 사용). 컨트롤러가 뷰가 작업을 수행하는 데 필요한 모델 데이터 만 찾거나 가져 오도록하십시오. 컨트롤러를 가능한 한 얇게 만드십시오.

프로토 타이프 상속

자바 스크립트 프로토 타입 상속이 어떻게 작동하는지 알지 못해도 jQuery로 많은 것을 할 수있다. AngularJS 응용 프로그램을 개발할 때 JavaScript 상속을 잘 이해하면 일반적인 함정을 피할 수 있습니다. 추천 읽기 : AngularJS의 스코프 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까?


Answer #4

AngularJS 및 jQuery :

AngularJs와 JQuery는 JQLite 기능을 제외한 모든 수준에서 완전히 다르며 AngularJs 핵심 기능을 배우기 시작하면이 기능을 볼 수 있습니다 (아래에서 설명 함).

AngularJs는 독립적 인 클라이언트 측 응용 프로그램을 빌드 할 수있는 클라이언트 측 프레임 워크입니다. JQuery는 DOM을 중심으로하는 클라이언트 측 라이브러리입니다.

AngularJs Cool Principle - UI의 일부 변경 사항을 원한다면 모델 데이터의 관점에서 생각하십시오. 데이터를 변경하면 UI가 다시 렌더링됩니다. DOM이 거의 필요하지 않을 때까지, 그리고 각도 명령을 통해 처리해야 할 때까지 매번 DOM을 사용하지 않아도됩니다.

이 질문에 답하기 위해 AngularJS와의 첫 번째 엔터프라이즈 응용 프로그램에 대한 경험을 공유하고자합니다. 이것들은 Angular가 jQuery 사고 방식을 바꾸기 시작하는 곳에서 제공하는 가장 멋진 기능이며 우리는 Angular를 라이브러리가 아닌 프레임 워크처럼 얻습니다.

양방향 데이터 바인딩은 놀랍습니다 : 모든 기능 UPDATE, DELTE, INSERT가있는 그리드가있었습니다. ng-repeat를 사용하여 그리드의 모델을 바인드하는 데이터 오브젝트가 있습니다. 삭제 및 삽입을위한 간단한 JavaScript 코드 한 줄만 작성하면됩니다. 그리드 모델이 즉시 변경되면 그리드가 자동으로 업데이트됩니다. 업데이트 기능은 실시간이며 코드는 없습니다. 너는 놀랍다.

재사용 가능한 지시문은 매우 좋습니다 : 지시문을 한 곳에서 작성하고 응용 프로그램 전체에서 사용하십시오. OMG !!! 나는이 지시어를 페이징, 정규 표현식, 검증 등에 사용했다. 정말 멋지다!

라우팅은 강력합니다. 구현 방법은 구현 방법에 달렸지 만, HTML 및 컨트롤러 (JavaScript) 지정 요청을 라우트하는 데는 몇 줄의 코드 만 필요합니다.

컨트롤러는 훌륭합니다. 컨트롤러는 자신의 HTML을 처리하지만,이 분리는 일반적인 기능과 마찬가지로 잘 작동합니다. 마스터 HTML에서 버튼을 클릭 할 때 동일한 기능을 호출하려면 각 컨트롤러에 동일한 함수 이름을 쓰고 개별 코드를 작성하십시오.

플러그인 : 앱에 오버레이를 표시하는 것과 같은 여러 가지 유사한 기능이 있습니다. 코드를 작성할 필요가 없으며 wc-overlay로 사용할 수있는 오버레이 플러그인 만 사용하면 모든 XMLHttpRequest (XHR) 요청 이 자동으로 처리됩니다.

RESTful 아키텍처에 이상적 : 완전한 프레임 워크이므로 AngularJS는 RESTful 아키텍처로 잘 작동합니다. REST CRUD API를 호출하는 것은 매우 쉽고

서비스 : 컨트롤러에서 서비스 및 적은 코드를 사용하여 공통 코드를 작성하십시오. Sevices는 컨트롤러간에 공통 기능을 공유하는 데 사용할 수 있습니다.

확장 성 : Angular는 각도 지시어를 사용하여 HTML 지시문을 확장했습니다. html 안에 표현식을 작성하고 런타임에 평가하십시오. 직접 작성한 지시문과 서비스를 만들어 다른 프로젝트에서 사용하십시오.


Answer #5

jQuery는 DOM 조작 라이브러리입니다.

AngularJS는 MV * 프레임 워크입니다.

실제로 AngularJS는 몇 가지 JavaScript MV * 프레임 워크 중 하나입니다. 많은 JavaScript MVC 도구가 여전히 범주 라이브러리에 속합니다.

프레임 워크이므로 코드를 호스팅하고 호출 할 대상과시기에 대한 소유권을가집니다!

AngularJS에는 jQuery-Lite가 포함되어 있습니다. 따라서 기본적인 DOM 선택 / 조작을 위해서는 jQuery 라이브러리를 포함 할 필요가 없습니다. 네트워크에서 실행하기 위해 많은 바이트를 절약 할 수 있습니다.

AngularJS는 DOM 조작 및 재사용 가능한 UI 구성 요소를 디자인하는 "지시문"개념을 가지고 있으므로 DOM 조작 관련 작업이 필요하다고 느낄 때마다 사용해야합니다. 지시문은 AngularJS를 사용하는 동안 jQuery 코드를 작성해야하는 곳입니다.

AngularJS는 약간의 학습 곡선을 포함합니다 (jQuery보다 :-).

-> jQuery 백그라운드에서 오는 모든 개발자에게 내 첫 번째 조언은 "AngularJS와 같은 풍부한 프레임 워크로 이동하기 전에 JavaScript를 최우선 언어로 배우는 것"입니다. 나는 위의 사실을 힘든 방법으로 배웠다.

행운을 빕니다.


Answer #6

jQuery : DOM 요소 에 대한 'QUERYing the DOM '에 대해 많은 것을 생각 하고 무언가를하고 있습니다.

AngularJS : 모델은 진실이고, 당신은 항상 그 각도에서 생각합니다.

예를 들어 DOM에서 특정 형식으로 표시하려는 서버의 데이터를 jQuery에서 가져 오면 '1'을 입력해야합니다. FIND '여기서 DOM에서이 데이터를 배치 할 위치는'2. UPDATE / APPEND '옵션을 사용하여 새 노드를 만들거나 innerHTML 설정하면 됩니다. 그런 다음이보기를 업데이트하려면 '3. 위치를 찾아 '4. 최신 정보'. AngularJS에서는 서버에서 데이터를 가져오고 서식을 지정하는 것과 동일한 컨텍스트 내에서 수행 된 모든 검색 및 업데이트주기가 사라졌습니다.

AngularJS를 사용하면 모델 (이미 익숙한 JavaScript 객체)을 사용할 수 있으며 모델의 값은 모델 (분명히)과 뷰에 대해 알려주고 모델의 작업은 뷰에 자동으로 전파되므로, 그것에 대해 생각할 필요가 없습니다. AngularJS에서 더 이상 DOM에서 물건을 찾을 수 없습니다.

또 다른 방법으로 말하면, jQuery를, 당신은 즉, 어디, CSS 선택기에 대해 생각해야 div하거나 td, 내가 그들의 HTML 또는 색상이나 가치를 얻을 수 있도록 즉, 등의 클래스 또는 속성을 가지고 있지만, AngularJS와에 당신은 자신이 다음과 같이 생각하고 있음을 알게 될 것입니다. 어떤 모델을 다루고 있는지, 모델의 가치를 true로 설정할 것입니다. 이 값을 반영하는 뷰가 체크 박스인지 td요소 에 있는지 (jQuery에서 자주 고려해야 할 세부 정보)에 신경 쓰지는 않습니다.

그리고 AngularJS의 DOM 조작을 사용하면 지시문과 필터를 추가 할 수 있으며 유효한 HTML 확장으로 생각할 수 있습니다.

AngularJS에서 경험하게 될 또 하나의 기능 : jQuery에서 jQuery 함수를 많이 호출합니다. AngularJS에서는 AngularJS가 함수를 호출하므로 AngularJS는 '어떻게 할 것인가'를 알려주지 만 이점은 가치가 있습니다. 따라서 AngularJS 일반적으로 AngularJS가 원하는 것을 배우거나 AngularJS가 사용자의 기능을 제시하는 방식을 알면 그에 따라 적절하게 호출됩니다. 이것은 AngularJS를 라이브러리가 아닌 프레임 워크로 만드는 것 중 하나입니다.


Answer #7

그들은 사과와 오렌지입니다. 당신은 그들을 비교하고 싶지 않습니다. 그들은 서로 다른 두 가지입니다. AngularJs에는 이미 jQuery 라이트가 내장되어있어 완전한 jQuery 버전을 포함하지 않고도 기본 DOM 조작을 수행 할 수 있습니다.

jQuery는 모두 DOM 조작에 관한 것입니다. 그것은 브라우저의 모든 통증을 해결합니다. 그렇지 않으면 처리해야하지만 AngularJS와 같은 구성 요소로 앱을 나눌 수있는 프레임 워크가 아닙니다.

AngularJs에 대한 좋은 점은 지시어에서 DOM 조작을 분리 / 분리 할 수 ​​있다는 것입니다. ng-click과 같이 사용할 준비가 된 내장 명령이 있습니다. 모든 뷰 로직 또는 DOM 조작을 포함하는 사용자 정의 지시문을 작성하여 비즈니스 로직을 처리해야하는 컨트롤러 또는 서비스에서 DOM 조작 코드를 혼합하지 않도록 할 수 있습니다.

Angular는 앱을 컨트롤러 - 서비스 - 뷰 - 등으로 나눕니다.

그리고 한 가지 더, 그것은 지시어입니다. DOM 요소에 첨부 할 수있는 속성이므로 jQuery가 AngularJs 구성 요소와 충돌하거나 아키텍처가 엉망이 될 염려없이 jQuery로 견해를 설명 할 수 있습니다.

제가 참석 한 만남에서 들었습니다. Angular의 창립자 중 한 사람은 DOM 조작을 분리하기 위해 열심히 노력 했으므로 DOM 조작을 다시 포함시키지 말라고했습니다.


Answer #8

이 질문은 JavaScript 프로그래밍에 대한 첫 번째 심각한 노출이 Node.js 와 AngularJS 였기 때문에 흥미 롭습니다 . 나는 jQuery를 배운 적이 없으며, 좋은 점이라고 생각합니다. 아무 것도 읽지 않아도되기 때문입니다. 사실, 저는 제 문제에 대한 jQuery 솔루션을 적극적으로 피하는 대신, 문제를 해결하기위한 "AngularJS 방법"만을 모색합니다. 그래서,이 질문에 대한 나의 대답은 "jQuery를 결코 배워 본 적이없는 사람처럼 생각하십시오."하고 jQuery를 직접적으로 도입하려는 유혹은 피할 수있을 것입니다 (분명히 AngularJS는 어느 정도까지 그것을 사용합니다).


Answer #9

자바 스크립트 MV 초심자이고 순수하게 애플리케이션 아키텍처에 초점을 맞추고 있지만 (서버 / 클라이언트 측 문제가 아니라), 나는 확실히 다음 리소스를 추천 할 것이다. (나는 아직 언급하지 않았지만 놀랍다.) Addy Osmani 저의 JavaScript Design Patterns 다른 JavaScript 디자인 패턴을 소개합니다 . 이 대답에 사용 된 용어는 위의 링크 된 문서에서 가져온 것입니다. 나는 받아 들여진 대답에서 정말로 잘 표현 된 것을 반복하지 않을 것이다. 대신,이 대답은 AngularJS (및 다른 라이브러리)의 힘 이되는 이론적 배경으로 연결됩니다 .

AngularJS (또는 Ember.js , Durandal 및 다른 MV * 프레임 워크)는 다양한 JavaScript 디자인 패턴을 조합하는 하나의 복잡한 프레임 워크 라는 것을 빨리 깨닫게 될 것 입니다.

하나의 전역 프레임 워크로 뛰어 들기 전에 (1) 기본 JavaScript 코드 를 테스트 하고 (2) 이 패턴 중 각각에 대해 더 작은 라이브러리를 별도로 테스트하는 것이 더 쉬웠습니다 . 이를 통해 프레임 워크가 해결해야 할 중요한 문제를 더 잘 이해할 수있었습니다 (개인적으로 문제에 직면했기 때문에).

예 :

주의 :이 목록은 완전하지 않으며 '최고의 도서관'도 아닙니다. 그들은 내가 사용했던 라이브러리 일뿐입니다. 이 라이브러리에는 더 많은 패턴이 포함되어 있으며 언급 된 것은 주요 초점이나 원래 의도입니다. 이 목록에없는 것이 있으면 의견에 언급 해주십시오. 추가하게되어 기쁩니다.





angularjs