복붙노트

[JQUERY] 내가 jQuery를 배경이있는 경우 "AngularJS와의 생각"? [닫은]

JQUERY

내가 jQuery를 배경이있는 경우 "AngularJS와의 생각"? [닫은]

해결법

  1. 1.jQuery를, 당신은 페이지를 디자인 한 다음은 동적합니다. jQuery를이 확대 용으로 설계되었으므로 간단한 전제에서 믿을 수 없을 정도로 성장했습니다 때문이다.

    jQuery를, 당신은 페이지를 디자인 한 다음은 동적합니다. jQuery를이 확대 용으로 설계되었으므로 간단한 전제에서 믿을 수 없을 정도로 성장했습니다 때문이다.

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

    난 그냥 모델과 컨트롤러에 대한 그 위에 AngularJS와를 추가 할 것입니다, 그래서 마찬가지로, JQuery와 X, Y 및 Z를 수행한다는 생각으로 시작되지 않습니다. 그냥 나는 항상 사물에게 "각도 방법을"일에 익숙해 적어도까지 새로운 AngularJS와 개발자가 전혀 jQuery를 사용하지 않는 것이 좋습니다 이유입니다, 밖으로 시작하는 때 이건 정말 유혹.

    여기 많은 개발자를 본 및 메일 링리스트에 그들은 다음 콜백의 컬렉션 AngularJS와에 접착제 것을 코드 150 개 또는 200 라인의 jQuery 플러그인 이러한 정교한 솔루션과 혼란과 뒤얽힌하는 $ 시만를 작성했습니다; 하지만 그들은 결국이 작업을 진행! 문제는 대부분의 경우에 그 jQuery 플러그인 갑자기 모든 것을 이해하고 간단하게 코드의 일부에 AngularJS와에 다시 작성할 수 있다는 것입니다.

    결론은 이것이다 : solutioning에 때, 최초의 "AngularJS와 생각"; 당신이 솔루션을 생각할 수없는 경우, 지역 사회를 물어; 이 모든 후 더 쉬운 해결책이없는 경우, 다음 jQuery를 도달 주시기 바랍니다. 그러나 jQuery를이 버팀목이 될 또는 마스터 AngularJS와거야하지 않습니다.

    단일 페이지 응용 프로그램은 응용 프로그램입니다 것을 먼저 알고. 그들은하지 웹 페이지입니다. 우리는 클라이언트 측 개발자와 같은 생각뿐만 아니라 서버 측 개발자처럼 생각해야합니다 그래서. 우리는 개인, 확장, 검증 가능한 구성 요소로 우리의 응용 프로그램을 분할하는 방법에 대해 생각해야합니다.

    그럼 어떻게 그렇게합니까? 당신은 어떻게 "AngularJS와 생각"합니까? 다음은 jQuery를 대조 몇 가지 일반적인 원칙이다.

    jQuery를, 우리는 프로그램보기를 변경합니다. 우리는 그렇게 같은 UL로 정의 된 드롭 다운 메뉴를 가질 수있다 :

    <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 운영라는 지침이 있음을 알 수 있습니다; 그녀는 어떤 코드를 통해 정답이나 SIFT를 직관적으로 할 필요가 없습니다. 뷰는 일이되어 있었는지 우리에게 말했다. 많은 청소기.

    AngularJS와 새로운 개발자들은 종종 같은 질문 : 나는 특정의 종류의 모든 링크를 찾아 그 위에 지시문을 추가 할 방법에 대해 설명합니다. 당신은하지 않습니다 : 우리가 회신 할 때 개발자는 항상 깜짝 놀라게한다. 하지만 그렇게하지 않는 이유는이 반 jQuery를, 반 AngularJS와,없이 좋은 같은 것입니다. 여기서 문제는 개발자가 AngularJS와의 맥락에서 "jQuery를 할"하려고하는 것입니다. 그것은 결코 잘 작동하도록 않을거야. 보기는 공식 기록이다. (더 아래이에) 지시어의 외부, 당신은 결코, 이제까지, DOM을 변경하지 않습니다. 그리고 지시는 뷰에 적용되는, 그래서 의도는 분명하다.

    디자인하지 않는 한 다음 마크 업 : 기억하십시오. 당신은 건축가를해야하고 디자인합니다.

    이것은 내가 이전 섹션에서 언급 한 DOM 조작의 종류를 할 필요성을 많이에서 멀리 한 AngularJS와 베인 상처의 가장 멋진 기능입니다. 당신이하지 않아도 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>

    그리고 지금 대신 정렬되지 않은 목록을 사용하여, 우리는 부트 스트랩 경고 상자를 사용하고 있습니다. 그리고 우리는 컨트롤러 코드를 변경 없었! 하지만 더 중요한 것은, 더 로그가 업데이트되는 방법,보기도 변경 곳이나 상관 없습니다. 자동. 산뜻한!

    내가 여기 표시되지 않았지만, 데이터 바인딩은 두 방법입니다. 그 로그 메시지는 바로이 일을하여보기에서 편집 할 수 있도록 : <입력 NG 모델 = "entry.msg을"/>. 그리고 많은 기쁨이 있었다.

    jQuery를에, DOM 모델 등의 종류이다. 그러나 AngularJS와, 우리는 우리가보기에서 완전히 독립적으로, 우리가 원하는 어떤 방식으로 관리 할 수있는 별도의 모델 층이있다. 이것은 소개합니다에게 훨씬 더 큰 테스트 용이성을 결합 위의 데이터에 대한 도움의 분리를 유지합니다. 난 그냥 그 그것을 떠날거야, 그래서 다른 대답은,이 점을 언급했다.

    그리고이 과도하게 활 모양 테마로 위 타이의 모든 : 귀하의 우려가 별도로 보관. 귀하의 견해는 (대부분의) 일이되어 있는지의 공식 기록으로 작용한다; 모델은 데이터를 나타냅니다; 당신은 재사용 작업을 수행 할 수있는 서비스 계층을 가지고, 당신은 DOM 조작을하고 지침을보기를 증대; 당신은 그것을 컨트롤러 모두 함께 접착제. 이것은 또한 다른 답변에서 언급 된, 유일한 것은 내가 아래 다른 섹션에서 논의 테스트 용이성에 해당을 추가합니다.

    의 분리와 우리를 도와하려면 의존성 주입 (DI)입니다. 당신은 서버 측 언어 (자바에서 PHP에) 이미이 개념에 익숙 아마,하지만 당신이 jQuery를에서 오는 클라이언트 측 사람이 있다면,이 개념은 힙 스터에 불필요한로 바보에서 아무것도 보일 수에서 오는 경우 . 그러나 그것은 아니다. :-)

    넓은 관점에서, DI 수단은 당신은 단지 그것의 인스턴스를 요청, 다른 구성 요소에서 매우 자유롭게하고 구성 요소를 선언 할 수 있고이 부여됩니다. 당신은로드 순서, 또는 파일 위치, 또는 그런 아무것도 알 필요가 없습니다. 전원이 즉시 표시되지 않을 수도 있습니다,하지만 난 그냥 하나 (공통) 예를 제공합니다 : 테스트.

    하자의 말은 우리의 응용 프로그램에서, 우리는 구현의 서버 측 지내는 API를 통해 저장하고,뿐만 아니라 응용 프로그램 상태, 로컬 스토리지에 의존하는 서비스를 필요로한다. 우리의 컨트롤러 테스트를 실행하는 경우, 우리는 서버와 통신을하고 싶지 않아 - 우리 모두 후, 컨트롤러를 테스트하고 있습니다. 우리는 우리의 원래 구성 요소와 동일한 이름의 모의 서비스를 추가 할 수 있으며 인젝터는 우리의 컨트롤러가 자동으로 가짜를 얻을 수 있도록합니다 - 우리의 컨트롤러는하지 않습니다과 필요의 차이를 모른다.

    시험의 말하기 ...

    이건 정말 아키텍처 섹션 3의 일부이지만, 나는 그것의 자신의 최상위 섹션으로두고있어 너무 중요합니다.

    당신이 볼 사용 또는 서면으로 작성했습니다 많은 jQuery를 플러그인의 모든 중, 그들 중 얼마나 많은 사람들이 동반 테스트 스위트를했다? jQuery를 그에게 매우 순종하지 않기 때문에 매우 많은 수 없습니다. 그러나 AngularJS와입니다.

    jQuery를에서 테스트 할 수있는 유일한 방법은 우리의 테스트는 DOM 조작을 수행 할 수있는에 대해 샘플 / 데모 페이지에 독립적으로 구성 요소를 생성하는 것이 있습니다. 그래서 우리는 별도로 구성 요소를 개발하고 우리의 응용 프로그램에 통합해야합니다. 얼마나 불편! jQuery를 함께 개발할 때 너무 많은 시간, 우리는 반복적 대신 테스트 주도 개발의 선택. 누가 우리를 비난 할 수 있을까?

    우리는 우려의 분리를 가지고 있기 때문에, 우리는 AngularJS와에 반복적으로 테스트 주도 개발을 할 수있다! 예를 들어, 우리가 슈퍼 간단한 지시는 우리의 현재 경로가 무엇인지 우리의 메뉴에 표시하고 싶은 말은하자. 우리는 우리가 우리의 응용 프로그램의 관점에서 원하는 것을 선언 할 수 있습니다 :

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

    자, 이제 우리는 존재하지 않는 활성 지침에 대한 테스트를 작성할 수 있습니다 :

    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' );
                }
            });
        }
    };
});

    우리의 테스트는 지금 통과하고 우리의 메뉴 수행은 요청했다. 우리의 개발은 반복과 테스트 주도 모두이다. 사악한 - 멋진.

    당신은 종종 "단지 지시에 DOM 조작을"듣게 될 것입니다. 이것은 필수입니다. 때문에 존중과 치료!

    그러나 좀 더 깊이의 다이빙을하자 ...

    일부 지침은 뷰 (ngClass 생각)에 이미 때문에 때로는 바로 DOM 조작을하고 기본적으로 수행 무엇을 장식합니다. 지시문은 "위젯"같은과 템플릿이있는 경우, 그것은 또한 우려의 분리를 존중해야한다. 즉, 너무 템플릿은 링크 및 컨트롤러 기능의 구현에서 거의 독립적으로 유지해야한다.

    AngularJS와는 매우 쉽게이 할 수있는 도구의 전체 세트와 함께 제공; ngClass로 우리는 동적으로 클래스를 업데이트 할 수 있습니다; ngModel 양방향 데이터 바인딩 허용; ngShow 및 ngHide 프로그래밍 표시하거나 요소를 숨길; 더 많은 - 우리가 우리 자신을 작성하는 것을 포함. 즉, 우리는 DOM 조작없이 awesomeness에 모든 종류의 작업을 수행 할 수 있습니다. 덜 DOM 조작, 쉬운 지침이 시험에, 그들은 스타일에있는 쉽게는 쉽게 그들은 미래의 변화, 그리고 더 재사용 및 배포 그들이 있습니다.

    나는 새로운 jQuery를 잔뜩 던져 장소로 지시어를 사용하여 AngularJS와 개발자를 많이 참조하십시오. 즉, 그들은 "나는 컨트롤러에서 DOM 조작을 할 수 없기 때문에, 내가 그 코드는 지시에 넣어 할게요"생각합니다. 그 확실히 훨씬 더 있지만, 그것은 종종 여전히 잘못입니다.

    우리는 우리가 지시어에 그것을 넣어 경우에도 3 절에 프로그램 된 로거의 생각, 우리는 여전히 그에게 "각도의 방법"을 수행 할. 아직 어떤 DOM 조작을하지 않습니다! 이 DOM 조작이 필요한 때가 많이 있습니다,하지만 당신이 생각하는 것보다 많이 희소입니다! 당신이 정말로 필요한 경우 응용 프로그램에서 DOM 조작 어디를 수행하기 전에 스스로에게 물어. 더 좋은 방법이있을 수 있습니다.

    여기에 간단한 예제가 보여 그 내가 가장 자주 볼 수있는 패턴. 우리는 전환 가능한 버튼을합니다. (참고 :이 예는 인위적인 약간 정확히 같은 방식으로 해결된다 더 복잡한 경우를 나타내는 자세한 skosh입니다.)

    .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);
            });
        }
    };
});

    이 문제 몇 가지가 있습니다 :

    이 지시문은 (심지어 매우 복잡한 경우에!) 다시 작성할 수 있습니다 훨씬 더 간단과 같이 :

    .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를 결과로를 해결하기 위해 시도하는 필요하지 않습니다.

  2. 2.jQuery를에서 선택기는 그들에게 DOM 요소 다음 바인드 / 등록 이벤트 핸들러를 찾기 위해 사용된다. 때 갱신에 이벤트 트리거, 그 (필수) 코드가 실행은 / DOM을 변경합니다.

    jQuery를에서 선택기는 그들에게 DOM 요소 다음 바인드 / 등록 이벤트 핸들러를 찾기 위해 사용된다. 때 갱신에 이벤트 트리거, 그 (필수) 코드가 실행은 / DOM을 변경합니다.

    AngularJS와, 당신은보기보다는 DOM 요소에 대해 생각합니다. 뷰는 AngularJS와 지시어가 (선언) HTML입니다. 지침은 우리를 위해 무대 뒤에서 이벤트 핸들러를 설정하고 우리에게 동적 데이터 바인딩을 제공합니다. 선택기는 거의 사용되지 않는다, 그래서 ID에 대한 필요성 (그리고 클래스의 일부 유형)은 크게 감소된다. 뷰는 (통해 범위) 모델에 묶여있다. 뷰는 모델의 투영이다. 이벤트 모델 (즉, 데이터 범위 속성), 그 모델을 업데이 트를 프로젝트 뷰 변경 "자동으로."

    AngularJS와, 귀하의 데이터를 보유 DOM 요소를 jQuery를가 선택한 것이 아니라, 모델에 대해 생각합니다. 오히려 사용자가 보는 것을 조작하는 콜백을 등록하는 것보다 그 모델의 예측, 같은 전망에 대해 생각합니다.

    구조물로부터 분리되는 동작 (자바 스크립트) (HTML) - jQuery를 방해는 자바 스크립트를 사용한다.

    사용 컨트롤러와 지시어 (그 각각이 자신의 컨트롤러가, 및 / 또는 컴파일 및 링크 기능 수)보기 / 구조 (HTML)에서 동작을 제거 AngularJS와. 각도는 별도의 도움말 서비스와 필터가 / 응용 프로그램을 구성 할 수 있습니다.

    또한 https://stackoverflow.com/a/14346528/215945 참조

    AngularJS와 응용 프로그램을 설계하는 한 가지 방법 :

    당신은 자바 스크립트 프로토 타입 상속이 어떻게 작동하는지에 대해 알지 못하고 jQuery로 많은 작업을 수행 할 수 있습니다. AngularJS와 애플리케이션을 개발할 때 자바 스크립트 상속의 좋은 이해가있는 경우, 당신은 몇 가지 일반적인 함정을 방지 할 수 있습니다. AngularJS와의 프로토 타입 / 프로토 타입 상속 범위의 미묘한 차이는 무엇입니까 : 추천 도서?

  3. 3.AngularJS와와 jQuery를 매우 다른 이데올로기를 채택한다. 당신이 jQuery를에서 오는 경우 당신은 놀라게 몇 가지 차이점을 찾을 수 있습니다. 각도는 화나게 만들 수 있습니다.

    AngularJS와와 jQuery를 매우 다른 이데올로기를 채택한다. 당신이 jQuery를에서 오는 경우 당신은 놀라게 몇 가지 차이점을 찾을 수 있습니다. 각도는 화나게 만들 수 있습니다.

    이것은 정상입니다, 당신은을 통해 추진해야한다. 각도는 가치가있다.

    jQuery를 당신에게 DOM의 임의의 비트를 선택하고 그들에게 임시 변경을위한 툴킷을 제공합니다. 당신은 조각에 의해 조각처럼 거의 아무것도를 할 수 있습니다.

    대신 AngularJS와 당신에게 컴파일러를 제공합니다.

    이것이 의미하는 것은 AngularJS와 그대로 컴파일러에 대한 지침으로, 위에서 아래 코드와 같은 취급을하는 전체 DOM을 읽는 것입니다. 는 DOM을 통과 할 때, 그것은 AngularJS와 행동하는 방법을 컴파일러 무엇을 할 말해 특정 지시어 (컴파일러 지시어)를 찾습니다. 지침은 속성, 태그, 클래스 또는 의견에 일치시킬 수 있습니다 자바 스크립트의 전체 작은 개체입니다.

    각 컴파일러 DOM 조각 특정 지시자와 일치하는 것으로 판정되면, 그것에게 DOM 소자으로 특성을 전달 지시자 함수를 호출 (로컬 변수 스토어 인) 현재 $ 범위 및 다른 유용한 비트. 이러한 속성은 지침에 의해 해석하고, 그 자체를 다시 그려야 할 때 어떤 방법 렌더링하는 방법을 이야기 할 수 있고 표현을 포함 할 수있다.

    지시어 할 수있는 다음과 같은 완전히 형성된 웹 응용 프로그램이 최대 유선 갈 준비가 무엇 컴파일러의 바닥을 나오는 등 컨트롤러, 서비스 등의 추가 각도 요소의 회전 풀이다.

    이 수단이 각도는 템플릿 기반됩니다. 템플릿이 자바 스크립트가 아닌 다른 방법으로 주위를 구동한다. 이 역할의 급진적 인 반전, 우리는 지난 10 년 정도 쓰고 한 눈에 거슬리지 자바 스크립트의 전체 반대입니다. 이것은 일부에 익숙해 걸릴 수 있습니다.

    이 같은이 소리가 오버 규정 및 제한 될 수있는 경우, 아무것도 진실에서 멀리있을 수 있습니다. 웹 응용 프로그램에서 AngularJS와 코드로 HTML을 취급하기 때문에, 당신은 GET HTML 레벨 단위. 모든 것이 가능하며, 몇 개념 도약을하면 대부분의 물건은 의외로 쉽다.

    이제 본격 비교에 내려 보자.

    각도와 jQuery를 다른 일을. AngularJS와는 당신에게 생산 웹 응용 프로그램에 도구 세트를 제공합니다. jQuery를 주로 DOM을 수정 해 도구를 제공합니다. jQuery를이 페이지에있는 경우, AngularJS와 자동으로 사용합니다. 그렇지 않은 경우, 컷 다운,하지만 여전히 jQuery를 완벽하게 사용할 수있는 버전입니다 jQuery를 라이트와 AngularJS와 함께 제공됩니다.

    Misko는 jQuery를 좋아하고 그것을 사용하는 당신에게 반대하지 않습니다. 그러나 더 당신은 거의 모든 범위, 템플릿 및 지침의 조합을 사용하여 수행 할 작업의를 얻을 수 있음을 사전에 당신은 발견 할 것이다, 당신의 코드를 더 구성, 더 분리되기 때문에 당신은 가능한이 워크 플로를 선호해야하고, 모난.

    당신이 jQuery를 사용한다면, 당신은 여기 저기 모두 뿌리되어서는 안된다. AngularJS와의 DOM 조작에 대한 올바른 장소는 지시에있다. 더 많은 이들 나중에.

    jQuery를 눈에 띄지는 일반적으로 적용된다. 자바 스크립트 코드는 헤더 (또는 바닥 글)에 연결되어, 이것은이 언급되는 유일한 장소입니다. 우리는 그 부분을 수정 페이지 및 쓰기 플러그인의 비트를 골라 선택기를 사용합니다.

    자바 스크립트 컨트롤입니다. html로는 완전히 독립적 인 존재가있다. 귀하의 HTML 자바 스크립트없이 의미도 남아있다. 온 클릭 속성은 아주 나쁜 관행이다.

    첫 번째 것들 중 하나는 AngularJS와 대한 의지 통지는 사용자 지정 특성이 사방입니다. 귀하의 HTML은 기본적으로 스테로이드에 온 클릭 속성입니다 겨 속성 뒤덮됩니다. 이 지시문 (컴파일러 지시어), 그리고 템플릿이 모델에 걸려있다있는 주요 방법 중 하나입니다.

    처음이를 볼 때 (내가 처음에했던 것처럼) 당신은 자바 스크립트를 방해 오래된 학교로 떨어져 쓰기 AngularJS와 유혹 될 수 있습니다. 사실, AngularJS와 그 규칙에 의해 재생되지 않습니다. AngularJS와, 귀하의 HTML5 템플릿입니다. 그것은 귀하의 웹 페이지를 생성하는 AngularJS와에 의해 컴파일됩니다.

    이것은 첫 번째 큰 차이입니다. jQuery를 위해, 당신의 웹 페이지가 조작 할 수있는 DOM이다. AngularJS와에, 당신의 HTML 컴파일되는 코드입니다. AngularJS와는 전체 웹 페이지를 읽고 그대로의 컴파일러 내장 사용하여 새 웹 페이지로 컴파일합니다.

    템플릿이 선언되어야한다; 그 의미는 그것을 읽는 것만으로 취소해야합니다. 우리는 의미있는 이름을 가진 사용자 지정 특성을 사용합니다. 우리는 의미있는 이름 다시, 새로운 HTML 요소를 구성합니다. 최소한의 HTML 지식을 가진 디자이너없이 코딩 기술은 AngularJS와 템플릿을 읽고이 무엇을하고 있는지 이해할 수있다. 그 또는 그녀는 수정할 수 있습니다. 이것은 각도 방법입니다.

    AngularJS와를 시작하고 튜토리얼을 통해 실행 때 자신을 묻는 첫 번째 질문 중 하나는 "어디에 내 코드?"입니다. 나는 어떤 자바 스크립트를 기록되지 것, 그럼에도 불구하고 나는이 모든 행동이있다. 대답은 분명하다. AngularJS와는 DOM을 컴파일하기 때문에, AngularJS와 코드와 같은 HTML을 치료한다. 많은 간단한 사례를 들어 그냥 템플릿을 작성하고 AngularJS와 당신을 위해 응용 프로그램에 컴파일하게하는 것이 충분합니다.

    템플릿이 응용 프로그램을 구동한다. 그것은 DSL로 처리됩니다. 당신은 AngularJS와 구성 요소를 작성하고, AngularJS와는 그들을 당겨 템플릿의 구조를 기반으로 적절한시기에이를 사용할 수 있도록 처리됩니다. 이 템플릿은 단지 출력을위한 표준 MVC 패턴에 매우 다르다.

    그것은 예를 들어, Ruby on Rails에 비해 XSLT 더 유사합니다.

    이것은 일부에 익숙해 소요 컨트롤의 급진적 인 반전이다.

    자바 스크립트에서 응용 프로그램을 구동하기 위해 노력하고 중지합니다. 템플릿 응용 프로그램을 구동하자 및 AngularJS와 함께 구성 요소를 배선 처리를 보자. 이것은 또한 각도 방법입니다.

    jQuery를 사용하여 HTML 페이지는 의미 론적 의미있는 내용을 포함해야합니다. 자바 스크립트는 (사용자 또는 검색 엔진에 의해) 꺼져있는 경우 콘텐츠에 액세스 할 남아있다.

    AngularJS와는 템플릿으로 HTML 페이지를 취급하기 때문에. 콘텐츠는 일반적으로 궁극적으로 API에서 제공 모델에 저장 될 때 템플릿은 의미 있어야되지 않습니다. AngularJS와는 시맨틱 웹 페이지를 생성하는 모델로 DOM을 컴파일합니다.

    귀하의 HTML 소스 대신에, 당신의 API 및 컴파일 된 DOM는 의미이며, 더 이상 의미하지 않습니다.

    AngularJS와에서 모델의 삶을 의미하는 HTML 만 표시, 단지 템플릿입니다.

    이 시점에서 당신은 가능성이 바르게 그래서 검색 엔진 최적화 및 접근성,에 대한 질문의 모든 종류가 있습니다. 개방 문제는 여기에있다. 대부분의 화면 판독기는 이제 자바 스크립트 구문 분석됩니다. 검색 엔진은 색인 콘텐츠를 AJAXed 수 있습니다. 그럼에도 불구하고, 당신은 당신이 pushstate URL을 사용하여 확인하는 것이 좋습니다 당신은 괜찮은 사이트 맵을 가지고있다. 이 문제에 대한 설명은 여기를 참조하십시오 : https://stackoverflow.com/a/23245379/687677

    문제 (SOC)의 분리 SEO, 접근성 및 브라우저 호환성을 포함하여 여러 가지 이유로 웹 개발의 많은 년 동안 성장 패턴입니다. 그것은 다음과 같습니다 :

    다시 말하지만, AngularJS와 그들의 규칙에 의해 재생되지 않습니다. 뇌졸중에서 AngularJS와 수신 지혜 10 년 멀리 않는 대신 템플릿을 더 이상하지 조금이라도 의미 론적 인에 MVC 패턴을 구현합니다.

    그것은 다음과 같습니다 :

    MVC와 SOC는 동일한 크기의 대향 단부에없는, 그들은 완전히 다른 축에있다. SOC는 AngularJS와의 맥락에서 이해되지 않는다. 당신은 그것을 잊고 이동해야합니다.

    나처럼, 당신은 브라우저 전쟁을 통해 살았 경우,이 생각은 매우 불쾌 할 수도 있습니다. 그것을 극복, 그것은 가치가있을거야, 약속.

    플러그인은 jQuery를 확장합니다. AngularJS와 지침은 브라우저의 기능을 확장 할 수 있습니다.

    jQuery를 우리는 jQuery.prototype에 기능을 추가하여 플러그인을 정의합니다. 우리는 다음 요소를 선택하고 결과에 플러그인을 호출하여 DOM에이 후크. 아이디어는 jQuery를의 기능을 확장하는 것입니다.

    당신이 당신의 페이지에 회전 목마를 원하는 경우 예를 들어, 당신은 아마도 탐색 요소에 싸여 인물의 정렬되지 않은 목록을 정의 할 수 있습니다. 그런 다음 페이지의 목록을 선택하는 몇 가지 jQuery를 작성하고 슬라이드 애니메이션을 할 수있는 시간 제한이있는 갤러리로 스타일을 변경할 수 있습니다.

    AngularJS와, 우리는 지시를 정의합니다. 지시문은 JSON 객체를 반환하는 함수이다. 이 객체는 DOM 요소를 찾기 위해, 무엇을 변경하는 것은 그들에게 할 것을 AngularJS와 알려줍니다. 지침은 발명 중 하나를 속성이나 요소를 사용하여 템플릿에 걸려 있습니다. 아이디어는 새로운 속성과 요소와 HTML의 기능을 확장하는 것입니다.

    AngularJS와 방법은 기본 찾고 HTML의 기능을 확장하는 것입니다. 당신은 HTML과 같은 외모, 사용자 정의 속성과 요소로 확장하는 것이 HTML을 작성해야합니다.

    당신은 회전 목마를 원하는 경우에, 다만 다음 템플릿에서 풀에 대한 지침을 정의하는 <회전 목마 /> 요소를 사용하고, 그 빠는 일을합니다.

    jQuery로 경향은 우리가 다음 다수의 값과 옵션을 전달하여 구성 라이트 박스와 같은 커다란 플러그인을 작성하는 것입니다.

    이 AngularJS와의 실수입니다.

    드롭 다운의 예를 가져 가라. 당신은 아마도 기능은 아마도 펼쳐진 요소의 클래스, 쇼 숨기기 메뉴, 모든 도움이 물건을 변경하거나 위 또는 아래로 셰브론에 추가하려면 클릭 핸들러에 코드를 유혹 할 수있는 플러그인 드롭 다운을 작성합니다.

    당신은 작은 변화를 만들고 싶어까지.

    당신이 가져가에 전개하려는 당신이 메뉴를 말해봐. 그런데 지금 우리는 문제가 있습니다. 우리의 플러그인이 우리를 위해 우리의 클릭 핸들러에서 유선있다, 우리는이 특정한 경우에 다르게 동작 할 수있는 구성 옵션을 추가해야 할 것입니다.

    AngularJS와 우리는 작은 지시를 작성합니다. 우리의 드롭 다운 지시어는 터무니없이 작은 것이다. 그것은) 펴기 () 또는 전환을 절첩 상태로 유지하고, (배하는 방법을 제공 할 수있다 (). 이 방법은 단순히 상태를 유지하는 부울이다 $ scope.menu.visible를 업데이트 할 것입니다.

    이제 우리의 템플릿에 우리는이를 연결할 수 있습니다 :

    <a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

    마우스 오버에 업데이트해야?

    <a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

    템플릿 드라이브 우리는 HTML 수준의 입도를 얻을 수 있도록 응용 프로그램입니다. 우리의 경우 예외로 케이스를 확인하려면 템플릿이 쉽게한다.

    JQuery와 플러그인은 폐쇄 만들어집니다. 개인 정보 보호는 폐쇄 내에서 유지된다. 그것은 그 폐쇄 내에서 범위 체인을 유지하기 위해 당신에게 달려 있습니다. 당신은 정말 DOM의 jQuery를에 의해 플러그인에 전달 노드, 플러스 폐쇄 및 사용자가 정의한 모든 전역에 정의 된 지역 변수의 설정에 액세스 할 수 있습니다. 플러그인은이 수단은 매우 자체가 포함되어 있습니다. 이것은 좋은 일이지만, 전체 응용 프로그램을 만들 때 제한 얻을 수 있습니다. 동적 페이지의 섹션 사이에서 데이터를 전달하려고하면 잡일된다.

    AngularJS와는 $ 범위 객체가 있습니다. 이들은 당신이 모델을 저장하는 AngularJS와에 의해 만들어지고 유지 특별한 개체입니다. 특정 지침은 포장 $ 범위에서 기본 상속에 의해 자바 스크립트 프로토 타입 상속을 사용하여 새 $ 범위를 산란한다. 은 $ 범위 객체는 컨트롤러와 뷰에 액세스 할 수 있습니다.

    이 영리한 부분입니다. $ 범위 상속의 구조는 대략 DOM의 구조를 다음과 때문에, 요소는 자신의 범위에 대한 액세스 권한을 가지고 있고, 어떤 포함한 모든 원활 (전역 범위와 동일하지 않습니다) 글로벌 $ 범위에 길을 스코프.

    이것은 훨씬 더 쉽게 주위에 데이터를 전달하고, 적절한 수준에서 데이터를 저장 할 수 있습니다. 드롭 다운이 펼쳐 경우 만 드롭 다운 $ 범위의 요구는 설명. 사용자가 자신의 환경 설정을 업데이트하는 경우 전역 $ 범위를 업데이트 할 수 있으며, 사용자 환경 설정을 듣고 중첩 된 범위가 자동으로 경고 할 것입니다.

    이 힘의 소리는 당신이 그것으로 휴식을 취하면, 그것은 비행처럼, 사실, 복잡. 당신은 정확하고 적절하게 템플릿 계층 구조에 따라 $ 범위 개체, AngularJS와의 인스턴스화 당신을 위해를 구성하고 그것을, 만들 필요가 없습니다. 다음 AngularJS와 (이에 대한 자세한 이상) 의존성 주입의 마법을 사용하여 구성 요소로 사용할 수 있습니다.

    jQuery를 당신은 모든 DOM 손으로 변경합니다. 당신은 프로그래밍 방식으로 새로운 DOM 요소를 구성. 당신이 JSON 배열을 가지고 당신이 DOM에 넣어하려는 경우, 당신은 HTML을 생성하고 삽입하는 함수를 작성해야합니다.

    AngularJS와 당신도이 작업을 수행 할 수 있지만 데이터 바인딩을 활용하는 것이 좋습니다. 모델을 변경하고 DOM은 템플릿을 통해 결합되어 있기 때문에 당신의 DOM이 자동으로 업데이트됩니다, 개입 할 필요가 없습니다.

    데이터가 특성 또는 중괄호 구문을 사용하여 템플릿에서 수행 바인딩 때문에 할 매우 쉽습니다. 당신은 자신이 모든 시간을 일을 찾을 수 있도록 그와 관련된 거의인지 오버 헤드가 있습니다.

    <input ng-model="user.name" />

    $ scope.user.name에 입력 요소에 결합한다. 입력을 업데이트하면 현재 범위 값 및 그 반대를 업데이트합니다.

    마찬가지로:

    <p>
  {{user.name}}
</p>

    의지 출력 단락의 사용자 이름을 입력합니다. 그것은 라이브 바인딩은 $ scope.user.name 값이 업데이트 그렇다면, 템플릿도 업데이트 할 것입니다.

    jQuery를에서 Ajax 호출을 만드는 것은 매우 간단하지만, 그것은 여전히 ​​당신에 대해 두 번 생각 뭔가. 거기에 대해 생각하는 추가 복잡성, 그리고 스크립트의 공정한 청크는 유지.

    AngularJS와에서, Ajax는 기본 이동-해결책이며, 그것은 거의 당신이 몰래, 모든 시간을 발생합니다. 당신이 템플릿을 포함 할 수 겨을-있습니다. 당신은 간단한 사용자 지정 지시문 템플릿을 적용 할 수 있습니다. 당신은 서비스에서 Ajax 호출을 래핑하고 자신에게 GitHub의 서비스 또는 당신이 놀라운 쉽게 액세스 할 수있는 플리커 서비스를 만들 수 있습니다.

    우리는 이러한 API에서 피드를 잡아 당겨으로 작은 비 DOM 관련 작업을 수행하려면 jQuery를에, 우리는 우리의 폐쇄에 그렇게 조금 함수를 작성할 수 있습니다. 즉 유효한 해결책이다,하지만 우리는 종종 공급에 액세스하려면? 우리는 다른 응용 프로그램에서 해당 코드를 재사용하려면 어떻게해야할까요?

    AngularJS와 우리에게 서비스 객체를 제공합니다.

    서비스 기능 및 데이터를 포함하는 간단한 개체입니다. 그들은 더 그들 중 하나 이상이 될 수 없다 즉, 항상 싱글이다. 우리가 그렇게하는 방법을 정의하는 StackOverflowService을 작성할 수 있습니다, 우리는 스택 오버플로 API에 액세스하고 싶은 말은.

    하자 우리가 쇼핑 카트를 말한다. 우리는 우리의 카트를 유지하고 추가하고 항목을 제거하는 방법이 포함 된 ShoppingCartService을 정의 할 수 있습니다. 서비스가 싱글이며, 다른 모든 구성 요소에 의해 공유되어 있기 때문에, 모든 객체는 요구가에서 쇼핑 카트와 풀 데이터를 기록 할 수 할 수있다. 그것은 항상 같은 카트입니다.

    서비스 객체는 우리가 맞는 볼로 우리가 사용하고 재사용 할 수있는 독립적 인 AngularJS와 구성 요소입니다. 그들은 기능 및 데이터를 포함하는 간단한 JSON 개체입니다. 그들은 당신이 한 곳에서 서비스에 데이터를 저장하는 경우 그래서, 당신은 단지 동일한 서비스를 요청하여 다른 곳에서 밖으로 데이터를 얻을 수 있습니다, 항상 싱글이다.

    AngularJS와 당신을 위해 당신의 종속성을 관리합니다. 객체를 원하는 경우, 단순히를 참조 AngularJS와 당신을 위해 그것을 얻을 것이다.

    당신이 사용하기 시작 때까지, 그것은 엄청난 시간 보탬이이 단지 무엇을 설명하기 어렵다. AngularJS와 DI처럼 아무것도 내부 jQuery를 존재하지 않습니다.

    대신 응용 프로그램을 작성하고 그것을 함께 배선, 대신 구성 요소 라이브러리를 정의 DI 수단은, 각각의 문자열로 식별.

    내가 플리커에서 JSON 피드를 당기는 방법을 정의하는 'FlickrService'라는 구성 요소를 말한다. 내가 플리커에 액세스 할 수있는 컨트롤러를 작성하려는 경우 지금, 난 그냥 컨트롤러를 선언 할 때 이름으로 'FlickrService'을 참조 할 필요가있다. AngularJS와 구성 요소를 인스턴스화 내 컨트롤러로 사용할 수 있도록 처리됩니다.

    예를 들어, 여기에 내가 서비스를 정의 :

    myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

    지금은 그냥 같은 이름으로 그것을 참조 그 서비스를 사용하고자 할 때 :

    myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

    AngularJS와는 FlickrService 객체가 컨트롤러를 인스턴스화 할 필요가 있음을 인식하고, 우리를 위해 하나를 제공 할 것입니다.

    이것은 매우 쉬운 함께 배선 것들과 거의을 제거해 spagettification 대한 어떤 경향이 있습니다. 우리는 구성 요소의 단순 목록을 가지고 있고, AngularJS와 손 그들을 우리로 하나씩 할 때 우리는 그들을 필요합니다.

    jQuery를 사용하면 코드를 구성하는 방법에 대해 거의 말한다. AngularJS와는 의견이있다.

    AngularJS와는 당신이 당신의 코드를 삽입 할 수있는에 모듈 제공합니다. 당신은 예를 들어, 플리커 (Flickr)에 회담, 당신은 귀하의 모든 플리커 관련 기능을 래핑하는 플리커 (Flickr) 모듈을 만들 수 있습니다하는 스크립트를 작성하는 경우. 모듈은 다른 모듈 (DI)를 포함 할 수 있습니다. 귀하의 주요 응용 프로그램은 일반적으로 모듈이며,이 응용 프로그램에 따라 다릅니다 다른 모든 모듈을 포함해야한다.

    당신이 플리커에 따라 다른 응용 프로그램을 작성하려는 경우, 간단한 코드 재사용을 얻을, 당신은 플리커 모듈을 포함 단지 수 봐라, 당신은 당신의 새로운 응용 프로그램의 모든 플리커 관련 기능에 액세스 할 수 있습니다.

    모듈 AngularJS와 구성 요소가 포함되어 있습니다. 우리가 모듈을 포함하는 경우, 해당 모듈의 모든 구성 요소는 고유의 문자열로 식별 간단한 목록으로 우리에게 사용할 수있게됩니다. 우리는 다음 AngularJS와의 의존성 주입 메커니즘을 사용하여 서로에 이러한 구성 요소를 삽입 할 수 있습니다.

    AngularJS와와 jQuery를 적을 수 없습니다. 그것은 아주 멋지게 AngularJS와 내에서 jQuery를 사용하는 것이 가능하다. 당신이 잘 AngularJS와를 사용하는 경우 당신은 당신이 달리 요구하는 것보다 훨씬 덜 jQuery를 필요로 찾을 수 있습니다 (템플릿, $ 범위, 지침 등을 데이터 바인딩).

    실현하기 위해 중요한 것은 템플릿 응용 프로그램을 구동하는 것입니다. 정지는 모든 것을 큰 플러그인을 작성하려고. 대신에 하나의 일을 조금 지침을 작성하고 함께를 연결하는 간단한 템플릿을 작성합니다.

    눈에 거슬리지 자바 스크립트에 대해 덜 생각하고 대신 HTML 확장의 관점에서 생각.

    내가 그렇게 AngularJS와 대한 흥분, 나는 당신이 매우있어 온라인 http://nicholasjohnson.com/angular-book/를 읽을 환영하는 그것에 짧은 책을 썼다. 나는 그것이 도움이되기를 바랍니다.

  4. 4.선언적 대 필수

    선언적 대 필수

    jQuery를 사용하면 일어날 필요가 무엇 DOM, 단계적으로 알려줍니다. AngularJS와 함께 당신은 당신이 원하는 결과를 설명하지만 그것을하지 않는 방법에 대해 설명합니다. 보기 여기에. 또한, 마크 Rajcok의 답변을 확인하십시오.

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

    jQuery를 도서관입니다

    AngularJS와는 MVC, 의존성 주입, 같은 멋진 물건의 콤바인 톤은 데이터 바인딩 및 더 많은 것을, 높은 검증 아름다운 클라이언트 측 프레임 워크입니다.

    그것은 관심과 테스트 (단위 테스트 및 엔드 - 투 - 엔드 테스트) 테스트 주도 개발을 촉진, 분리에 초점을 맞추고 있습니다.

    시작하는 가장 좋은 방법은 자신의 멋진 튜토리얼을 통해 것입니다. 당신은 몇 시간의 단계를 통해 갈 수있다; 그러나, 경우에 당신이 장면의 개념을 마스터 할, 그들은 더 읽기 참조의 무수를 포함한다.

    이미 순수 jQuery를 사용하는 곳 당신은 기존의 응용 프로그램에서 사용할 수 있습니다. 완전히 AngularJS와 활용하려는 경우, 당신이 편안한 방법을 사용하여 서버 측 코딩 고려할 수 있습니다.

    이렇게하면 서버 측 호출 (등, 삭제, 얻을 저장) 놀라 울 정도로 쉽게 서버 측의 RESTful API의 추상화를 생성하고 만들어 자신의 자원 팩토리를 활용할 수 있습니다.

  5. 5.은 "패러다임 변화"를 설명하기 위해, 나는 짧은 대답이 충분할 수 있다고 생각합니다.

    은 "패러다임 변화"를 설명하기 위해, 나는 짧은 대답이 충분할 수 있다고 생각합니다.

    jQuery를, 당신은 일반적으로 요소를 찾기 위해 선택기를 사용하고 그들을 와이어 : $ ( '# 아이디의 .class')을 클릭 (doStuff).;

    AngularJS와에서 직접 요소를 표시하는 지시어를 사용하여 그들을 연결할 수 있습니다 :

    본격적인 jQuery를 대 AngularJS와의 jqLite 사이의 주요 차이점은 jqLite가 선택기를 지원하지 않는다는 것입니다 - AngularJS와 당신은 선택기를 사용하여 요소를 찾을 필요 (또는 원하는)하지 않습니다.

    사람들이 말할 때 그래서 그들은 당신이 선택기를 사용하지 않기 때문에, 그것은 주로의 "전혀 jQuery를 포함하지 않는"; 그들은 당신이 대신 사용 지침을 배우고 싶다. 직접 선택하지!

  6. 6.jQuery를 짧은 getElementByHerpDerp 및 크로스 브라우저와 같은 터무니없이 긴 자바 스크립트 명령을합니다.

    jQuery를 짧은 getElementByHerpDerp 및 크로스 브라우저와 같은 터무니없이 긴 자바 스크립트 명령을합니다.

    AngularJS와는 (HTML은 정적 페이지를 위해 설계 되었기 때문에) 잘 동적 웹 응용 프로그램과 함께 작동하는 일을 자신의 HTML 태그 / 속성을 만들 수 있습니다.

    "내가 AngularJS와 생각 어떻게 JQuery와 배경이 있습니까?"라는 말처럼 "내가 자바 스크립트에서 생각하십니까 어떻게 HTML의 배경이?" 사실은 당신이 질문 쇼를 요구하고 있음은 대부분이 두 자원의 기본 목적을 이해하지 않습니다. 단순히 근본적인 차이를 지적하기보다는 말하는 목록을 이동하여 질문에 대한 답을 선택한 이유는 "jQuery를이 그 등을하는 jQuery를 객체를 만들기 위해 CSS 선택기를 사용하는 반면 AngularJS와의 차종이 지침의 사용 ...." . 이 질문에 긴 대답을 필요로하지 않습니다.

    jQuery를 쉽게 브라우저에서 자바 스크립트를 프로그래밍 할 수있는 방법이다. 짧은, 크로스 브라우저 명령,

    그냥 응용 프로그램을 만들기 위해 여기 저기

    모두를 넣을 필요가 없습니다 AngularJS와는 HTML을 확장합니다. 그것은 오히려 정적, 교육 웹 페이지 인을 위해 설계된 것보다 애플리케이션을위한 HTML 실제로 일을합니다. 그것은 자바 스크립트를 사용하여 로터리 방식으로이를 수행하지만, 근본적으로는 HTML의 확장이 아닌 자바 스크립트입니다.

  7. 7.jQuery를 : 당신은 DOM 요소에 대한 'DOM을 조회'하고 뭔가를하고에 대해 많이 생각한다.

    jQuery를 : 당신은 DOM 요소에 대한 'DOM을 조회'하고 뭔가를하고에 대해 많이 생각한다.

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

    당신은 당신이 jQuery를에서 DOM의 일부 형식으로 표시하고자하는 서버에서 데이터를 얻을 때 예를 들어, 1 '에 필요합니다. 2 '는 DOM에서이 데이터의를 배치 할'FIND. 그 innerHTML을 설정 단지 새 노드를 만들거나하여 UPDATE / APPEND '이있다. 그럼 당신은 세 '는 다음이보기를 업데이트 할 때. FIND '위치와'4. 최신 정보'. 발견 및 업데이트의이주기는 모든 받고 AngularJS와에서 사라 서버에서 데이터를 포맷 같은 맥락에서 수행.

    당신이 돈 때문에 AngularJS와 사용하면 '뷰에 자동으로 전파 모델에보기 및 작업에 대해, 모델을 가지고 모델의 값이 (명백하게) 모델에 대해 알려줍니다 (자바 스크립트가 이미에 사용되는 객체) 및 t는 그것에 대해 생각해야합니다. 당신은 DOM에서 물건을 찾는 더 이상 AngularJS와 자신을 찾을 수 없습니다.

    또 다른 방법으로 말하면, jQuery를, 당신은 CSS 선택기에 대해 생각해야, 즉, 경우 등 클래스 또는 특성을 가지고 사업부 또는 TD 내가 그들의 HTML 또는 색상이나 가치를 얻을 수 있지만에서 할 수 있도록한다 AngularJS와, 당신은 다음과 같이 생각하고 자신을 발견 할 것이다 : 모델은 내가 처리하고있는 무슨, 내가 참으로 모델의 값을 설정합니다. 이 값을 반영하는 뷰가 TD 요소에 체크 상자 또는 상주 (당신은 종종 jQuery를에 대해 생각하는 데 필요한 것입니다 세부 사항)인지의 자신을 귀찮게하지 않습니다.

    그리고 AngularJS와의 DOM 조작으로, 당신은 자신이 유효한 HTML 확장으로 생각할 수있는 지침과 필터를 추가 찾을 수 있습니다.

    당신이 AngularJS와에 경험하게 될 것입니다 한가지 더 : AngularJS와는 '어떻게 일을하는 방법을 알려주는'것이다 있도록 AngularJS와에, 많은 JQuery와 함수를 호출 jQuery를에는 AngularJS와, 당신의 함수를 호출하지만 장점은, 그래서 학습 AngularJS와 가치가있다 일반적으로 AngularJS와이 원하는 또는 방법 AngularJS와 당신이 당신의 기능을 제시하고 그에 따라 그것을 호출해야 무엇을 배우는 것을 의미한다. 이 AngularJS와 프레임 워크가 아닌 라이브러리를 만드는 것들 중 하나입니다.

  8. 8.사람들은 아주 좋은,하지만 긴 답변입니다.

    사람들은 아주 좋은,하지만 긴 답변입니다.

    내 경험을 요약하면 :

  9. 9.jQuery를은 DOM 조작 라이브러리입니다.

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

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

    사실, AngularJS와는 몇 가지 자바 스크립트 MV * 프레임 워크 (여전히 카테고리 라이브러리에 속하는 많은 자바 스크립트 MVC 도구) 중 하나입니다.

    프레임 워크이기 때문에, 그것은 당신의 코드를 호스팅하고 무엇을 전화 및시기에 대한 결정의 소유권을!

    그 자체가 내에서 jQuery를 라이트 버전을 포함 AngularJS와. 그래서 몇 가지 기본적인 DOM 선택 / 조작을 위해, 당신이 정말로 jQuery 라이브러리를 포함 할 필요가 없습니다 (이 네트워크에서 실행 바이트를 저장합니다.)

    당신이 DOM 조작과 관련된 물건을의 필요성을 느낄 때마다 당신이 그것을 사용해야하므로 AngularJS와는, DOM 조작 및 재사용 가능한 UI 구성 요소를 설계하기위한 "지침"의 개념이 (지시자는 AngularJS와를 사용하는 동안 jQuery 코드를 작성해야 유일한 장소이다).

    AngularJS와 (자세한 :-) jQuery를보다 약간의 학습 곡선을 포함한다.

    -> jQuery를 배경에서 오는 모든 개발자가, 내 첫 번째 조언을하는 것은 "AngularJS와 같은 다양한 프레임 워크 위에 점프하기 전에 최고 수준의 언어로 자바 스크립트를 배울!" 나는 위의 사실 어려운 방법을 배웠습니다.

    행운을 빕니다.

  10. 10.그들은 사과와 오렌지입니다. 당신이 그들을 비교하고 싶지 않아요. 그들은 서로 다른 두 가지입니다. AngularJS와 이미 jQuery를이있는 당신도 전체 날려 jQuery를 버전을 포함하지 않고 기본 DOM 조작을 수행 할 수 있습니다 내장 LITE있다.

    그들은 사과와 오렌지입니다. 당신이 그들을 비교하고 싶지 않아요. 그들은 서로 다른 두 가지입니다. AngularJS와 이미 jQuery를이있는 당신도 전체 날려 jQuery를 버전을 포함하지 않고 기본 DOM 조작을 수행 할 수 있습니다 내장 LITE있다.

    jQuery를 모든 DOM 조작에 관한 것입니다. 그것은 모든 크로스 브라우저 통증이 그렇지 않으면 당신은 처리해야하지만 당신이 AngularJS와 같은 구성 요소로 응용 프로그램을 분할 할 수있는 프레임 워크 아니다 해결합니다.

    AngularJS와에 대한 좋은 것은 그것이 당신이 /이 지침에서 DOM 조작을 분리 분리 할 수 ​​있다는 것입니다. 이 내장되어 준비 지시 당신이 그런 겨 클릭으로 사용할 수 있도록. 당신이 비즈니스 로직을 처리해야 컨트롤러 또는 서비스에 어울려 DOM 조작 코드를 종료하지 않도록 당신은 모든 뷰 로직 또는 DOM 조작을 포함 사용자 정의 지시를 만들 수 있습니다.

    에 앱이 아래로 각도 휴식 - 컨트롤러 - 서비스 - 견해 - 등

    및이 지침의 한 가지 더,있다. 그것은 당신이 어떤 DOM 요소에 첨부 할 수있는 속성 그리고 당신은 당신의 jQuery를 걱정하지 않고 그 안에 jQuery를 함께 이제까지 AngularJS와 구성 요소 또는 아키텍처를 망쳐 놨 최대와 충돌 견과류 갈 수 있습니다.

    내가 참석 만남 소식, 각도의 창시자 중 하나는 그들이 그렇게 다시 그들을 포함하지 않는 DOM 조작을 분리하기 위해 정말 열심히 일했다.

  11. 11.팟 캐스트 자바 스크립트 재버 듣기 : 에피소드 AngularJS와의 원래 제작자 기능 # 32 : Misko Hevery & 이고르 Minar입니다를. 그들은 다른 자바 스크립트 배경, 특히 jQuery를에서 AngularJS와에 와서 어떤 건지에 대해 많은 이야기.

    팟 캐스트 자바 스크립트 재버 듣기 : 에피소드 AngularJS와의 원래 제작자 기능 # 32 : Misko Hevery & 이고르 Minar입니다를. 그들은 다른 자바 스크립트 배경, 특히 jQuery를에서 AngularJS와에 와서 어떤 건지에 대해 많은 이야기.

    팟 캐스트에서 만든 점 중 하나는 귀하의 질문에 대한 존경과 나를 위해 일 클릭을 많이했다 :

    전체 에피소드의 성적표는 위에 제공된 링크에서 확인할 수있다.

    그래서, 바로 당신의 질문에 대답 : AngularJS와 것은 -very- 의견을 고집하고 진정한 MV * 프레임 워크입니다. 그러나 여전히 지시어의 jQuery 내부와 정말 멋진 당신이 알고있는 것들과 사랑의 모든 작업을 수행 할 수 있습니다. 그것은의 문제가 아니다 "어떻게 내가 jQuery를에 사용 무엇을해야합니까?" 많은이의 문제로 "나는 물건을 모두와 함께 AngularJS와 보완하려면 어떻게 내가이 jQuery를에 어떻게 사용?"

    정말 마음이 매우 다른 상태입니다.

  12. 12.자바 스크립트 프로그래밍에 처음으로 심각한 노출 Node.js를하고 AngularJS와 이었기 때문에 나는이 질문의 흥미를 찾을 수 있습니다. 내가 jQuery를 배운 적이, 그리고 내가 잊다 아무것도 할 필요가 없기 때문에 즉, 좋은 것 같아요. 사실, 나는 적극적으로 내 문제에 jQuery를 솔루션을 피하고, 대신, 단독를 해결하기 위해 "AngularJS와 방법"을 찾습니다. 그래서, 본질적으로 졸이다 것이 질문에 대한 내 대답을 추측 "jQuery를 배운 적이있는 사람처럼 생각"을 (배후 어느 정도 분명 AngularJS와 용도에게 그것을) 직접 jQuery를 통합 할 수있는 유혹을 피하십시오.

    자바 스크립트 프로그래밍에 처음으로 심각한 노출 Node.js를하고 AngularJS와 이었기 때문에 나는이 질문의 흥미를 찾을 수 있습니다. 내가 jQuery를 배운 적이, 그리고 내가 잊다 아무것도 할 필요가 없기 때문에 즉, 좋은 것 같아요. 사실, 나는 적극적으로 내 문제에 jQuery를 솔루션을 피하고, 대신, 단독를 해결하기 위해 "AngularJS와 방법"을 찾습니다. 그래서, 본질적으로 졸이다 것이 질문에 대한 내 대답을 추측 "jQuery를 배운 적이있는 사람처럼 생각"을 (배후 어느 정도 분명 AngularJS와 용도에게 그것을) 직접 jQuery를 통합 할 수있는 유혹을 피하십시오.

  13. 13.AngularJS와 및 jQuery를 :

    AngularJS와 및 jQuery를 :

    (나는 아래에 설명) AngularJS와와 JQuery와는 JQLite 기능을 제외하고 모든 수준에서 완전히 다른 당신이 AngularJS와 핵심 기능을 학습하기 시작하면 당신은 그것을 볼 수 있습니다.

    AngularJS와는 이벤트 독립적 인 클라이언트 측 애플리케이션을 구축 할 수있는 클라이언트 측 프레임 워크입니다. JQuery와는 DOM 주위에 클라이언트 측 라이브러리 놀이입니다.

    당신이 당신의 UI에 몇 가지 변화가 모델 데이터 변화의 관점에서 생각합니다 - AngularJS와는 원리 쿨. 데이터를 변경하고 UI 자체를 다시 렌더링됩니다. 각 시간 않는 한이 거의 필요하지 않습니다하고도 각도 지침을 통해 처리되어야 할 때까지 DOM을 주위에 재생하려면 필요는 없다.

    이 질문에 대답하기 위해, 나는 AngularJS와 함께 최초의 엔터프라이즈 응용 프로그램에 대한 내 경험을 공유하고자합니다. 다음은 우리가 변화하기 시작 어디 각도가 제공하는 가장 멋진 기능입니다 우리의 jQuery를 사고 우리는 프레임 워크가 아닌 라이브러리처럼 각도를 얻을.

    데이터 바인딩 양방향 놀랍습니다 : 나는 모든 기능 UPDATE, DELTE, INSERT 그리드를했다. 나는 겨 반복을 사용하여 그리드의 모델을 결합하는 데이터 객체가 있습니다. 당신은 삭제 및 삽입에 대한 간단한 자바 스크립트 한 줄의 코드를 작성해야하고 그게 다에요. 그리드 모델은 즉시 변경으로 그리드는 자동으로 업데이트됩니다. 업데이트 기능은 실시간으로, 그것을 위해 어떤 코드입니다. 당신은 놀라운 느낌!

    재사용 지침 슈퍼있다 : 쓰기 한 곳에서 지침 및 응용 프로그램 전체를 사용합니다. OMG! 나는 정말 멋지다 등 페이징, 정규식, 검증, 이러한 지시어를 사용!

    라우팅 강한 : 그것은 당신이 그것을 사용하는 방법을 구현까지,하지만이 경로에 HTML 및 컨트롤러를 지정하는 요청을 몇 줄의 코드 라인을 필요로 (자바 스크립트)

    컨트롤러는 중대하다 : 컨트롤러는 자신의 HTML 알아서하지만,이 분리뿐만 아니라 일반적인 기능에 적합합니다. 당신이 마스터 HTML에 버튼 클릭에 동일한 기능을 호출 할 경우에, 다만 각 컨트롤러에 동일한 기능의 이름을 작성하고 개별 코드를 작성합니다.

    플러그인 : 앱에서 오버레이를 보여 같은 많은 다른 유사한 기능이 있습니다. 그것은 단지 WC-오버레이로 사용할 수 플러그인 오버레이를 사용하기 위해 당신은 코드를 작성 할 필요가 없습니다, 이것은 자동으로 모든 XMLHttpRequest의 (XHR) 요청 처리됩니다.

    편안하고 아키텍처에 적합합니다 : 완전한 프레임 워크 인 것은 편안하고 아키텍처 작업에 AngularJS와 큰 있습니다. REST CRUD API를 매우 쉽게 전화를하고

    서비스 : 컨트롤러에서 서비스하고 적은 코드를 사용하여 쓰기 공통 코드. 서비스도는 컨트롤러간에 공통 기능을 공유 할 수 있습니다.

    확장 성 : 각도는 각 지시어를 사용하여 HTML의 지시를 확장했다. HTML 내부 표현을 쓰기하고 런타임에 평가합니다. 자신의 지침과 서비스를 만들고 여분의 노력없이 다른 프로젝트에서 사용할.

  14. 14.자바 스크립트 디자인 패턴, 애디 오스 마니에 의해 : 자바 스크립트 MV * 초보자 및 순수 애플리케이션 아키텍처 (안 서버 / 클라이언트 측의 문제)에 초점을 맞추고, 나는 확실히 (나는 아직 언급되지 않았다 놀라게하고) 다음과 같은 리소스를 추천 할 것입니다 다른 자바 스크립트 디자인 패턴을 소개. 이 답변에서 사용하는 용어는 위의 링크 된 문서에서 가져옵니다. 내가 허용 대답에 정말 잘 나가셨 있었는지 반복하지 않을거야. 대신,이 대답 링크가있는 이론적 배경에 백업 전원 AngularJS와 (및 다른 라이브러리).

    자바 스크립트 디자인 패턴, 애디 오스 마니에 의해 : 자바 스크립트 MV * 초보자 및 순수 애플리케이션 아키텍처 (안 서버 / 클라이언트 측의 문제)에 초점을 맞추고, 나는 확실히 (나는 아직 언급되지 않았다 놀라게하고) 다음과 같은 리소스를 추천 할 것입니다 다른 자바 스크립트 디자인 패턴을 소개. 이 답변에서 사용하는 용어는 위의 링크 된 문서에서 가져옵니다. 내가 허용 대답에 정말 잘 나가셨 있었는지 반복하지 않을거야. 대신,이 대답 링크가있는 이론적 배경에 백업 전원 AngularJS와 (및 다른 라이브러리).

    나 같은, 당신은 신속하게 AngularJS와 실현 (또는 Ember.js는 그 문제에 대한 Durandal, 다른 MV * 프레임 워크)는 다른 자바 스크립트 디자인 패턴의 많은 조립 한 복잡한 프레임 워크입니다.

    나는 시험 (1) 기본 자바 스크립트 코드와는 별도로 하나의 글로벌 프레임 워크에 다이빙을하기 전에 이러한 패턴의 각각에 대해 (2) 작은 도서관, 쉽게 또한 그것을 발견했다. 이 날 더 잘 이해 할 수 중요한 어떤 문제 프레임 워크 adresses를 (당신은 개인적 문제에 직면하고 있기 때문에).

    예를 들면 :

    NB :이 목록은 완전하지 않고 '최선의 도서관'; 그들은 단지 내가 사용하는 라이브러리를 될 일이. 이 라이브러리는 더 패턴을 포함, 언급 된 사람들은 그들의 주요 초점을 맞추고 또는 원래의 의도입니다. 당신이 뭔가이 목록에서 누락 느끼는 경우에, 코멘트에 언급 않으며, 나는 그것을 추가 기꺼이하겠습니다.

  15. 15.당신이 AngularJS와를 사용하는 경우 사실, 당신은 더 이상 jQuery를 필요가 없습니다. 자체 AngularJS와 당신이 jQuery를 함께 할 수있는 대부분의 것들에 대한 매우 좋은 "교체"입니다 바인딩 및 지침을 가지고 있습니다.

    당신이 AngularJS와를 사용하는 경우 사실, 당신은 더 이상 jQuery를 필요가 없습니다. 자체 AngularJS와 당신이 jQuery를 함께 할 수있는 대부분의 것들에 대한 매우 좋은 "교체"입니다 바인딩 및 지침을 가지고 있습니다.

    나는 보통 AngularJS와와 코르도바를 사용하여 모바일 응용 프로그램을 개발. 필요 jQuery를 I에서 유일한 것은 선택기입니다.

    인터넷 검색, 나는 독립 jQuery를 선택 모듈이 거기에 있다는 것을 참조하십시오. 그것은 지글 지글입니다.

    그리고 나는 작은 코드 나 빨리 (지글 지글를 사용하여) jQuery를 선택기의 힘으로 AngularJS와를 사용하여 웹 사이트를 시작하는 것이 도움이 니펫을 만들기로 결정했다.

    나는 여기에 내 코드를 공유 : https://github.com/huytd/Sizzular

    16. from https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] .attr VS .prop ()  (0) 2020.09.20
[JQUERY] 어떻게 비동기 적으로 파일을 업로드 할 수 있습니까?  (0) 2020.09.20
[JQUERY] 왜 내 자바 스크립트 코드가 수신 않는 '없음'액세스 제어 - - 원산지를 허용 '헤더가 요청 된 자원에 존재하는 "우체부하지 않는 동안, 오류?  (0) 2020.09.20
[JQUERY] 왜 jQuery를 또는에서 getElementById 같은 DOM 방법은없는 요소를 찾을 수 있습니까?  (0) 2020.09.20
[JQUERY] 동적으로 생성 된 요소에 바인딩 이벤트?  (0) 2020.09.20
,

티스토리툴바