jQuery 에서 클라이언트 측 애플리케이션을 개발하는 데 익숙 하지만 이제 AngularJS 사용을 시작하려고 합니다. 필요한 패러다임 전환을 설명 할 수 있습니까? 다음은 답변을 구성하는 데 도움이되는 몇 가지 질문입니다.
나는 사이의 상세한 비교를 찾는 게 아니에요 jQuery와 AngularJS.
답변:
jQuery에서는 페이지를 디자인 한 다음 페이지를 동적으로 만듭니다. 이는 jQuery가 기능 보강을 위해 설계되었으며 단순한 전제에서 크게 성장했기 때문입니다.
그러나 AngularJS에서는 아키텍처를 염두에두고 처음부터 시작해야합니다. "이 DOM을 가지고 X를 만들고 싶다"고 생각하는 것부터 시작하는 대신, 달성하고자하는 것부터 시작한 다음 응용 프로그램 설계를 시작한 다음 최종적으로 뷰 설계를 진행해야합니다.
마찬가지로 jQuery가 X, Y 및 Z를 수행한다는 아이디어로 시작하지 않으므로 모델 및 컨트롤러에 AngularJS를 추가합니다. 이것은 처음 시작할 때 정말 유혹적입니다. 따라서 항상 새로운 AngularJS 개발자는 적어도 "Angular Way"작업에 익숙해 질 때까지 jQuery를 전혀 사용하지 않는 것이 좋습니다.
필자는 여기와 메일 링리스트에서 많은 개발자들이 150 줄 또는 200 줄의 코드로 구성된 jQuery 플러그인을 사용하여 이러한 정교한 솔루션을 만들고 $apply혼란스럽고 복잡한 콜백과 모음을 사용하여 AngularJS에 붙였다 . 그러나 그들은 결국 그것을 작동시킵니다! 문제는 대부분의 경우 jQuery 플러그인을 코드의 일부로 AngularJS에서 다시 작성할 수 있다는 것입니다. 갑자기 모든 것이 이해되고 간단 해집니다.
결론은 다음과 같습니다. 해결시 먼저 "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. 그녀는 정답을 직관하거나 어떤 코드를 거칠 필요가 없습니다. 그 견해는 우리에게 무슨 일이 있었는지 말해주었습니다. 훨씬 더 깨끗합니다.
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를 통해 서버 측 스토리지를 구현 하고 애플리케이션 상태에 따라 로컬 스토리지도 구현하는 서비스가 필요하다고 가정 해 보겠습니다 . 컨트롤러에서 테스트를 실행할 때 서버와 통신하지 않아도 됩니다. 컨트롤러를 테스트하고 있습니다. 우리는 원래 구성 요소와 동일한 이름의 모의 서비스를 추가 할 수 있으며 인젝터는 컨트롤러가 가짜 컨트롤러를 자동으로 얻도록 보장합니다. 컨트롤러는 차이점을 알 필요가 없습니다.
테스트에 대해 ...
이것은 실제로 아키텍처 섹션 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="https://stackoverflow.com/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 조작 없이 모든 종류의 경이로움 을 수행 할 수 있습니다 . DOM 조작이 적을수록 지시문을 쉽게 테스트하고 스타일을 쉽게 지정할 수 있으며 향후 더 쉽게 변경할 수 있으며 재사용 및 배포가 더 쉬워집니다.
많은 jQuery를 던질 장소로 지시문을 사용하는 AngularJS를 처음 접하는 많은 개발자가 있습니다. 다시 말해, 그들은 "컨트롤러에서 DOM 조작을 할 수 없기 때문에 지시어에 코드를 넣을 것"이라고 생각합니다. 확실히 훨씬 낫지 만 여전히 여전히 잘못 입니다.
섹션 3에서 프로그래밍 한 로거를 생각해보십시오. 지시어에 넣었더라도 여전히 "Angular Way"를 원합니다. 그것은 여전히 어떤 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);
});
}
};
});이것에 몇 가지 잘못된 점이 있습니다.
angular.element있으며 jQuery가없는 프로젝트에 드롭 될 때 컴포넌트는 여전히 작동합니다.angular.element) 는로드 된 경우 항상 jQuery를 사용합니다! 따라서 우리는 사용할 필요가 없습니다 . $단지 사용할 수 있습니다 angular.element.$더 - element에 전달하는 link기능을 것입니다 이미 수 JQuery와 요소!이 지시어는 다음과 같이 훨씬 더 간단하게 다시 작성할 수 있습니다 (매우 복잡한 경우에도!).
.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로 해결하려고 시도하는 가장 좋은 방법은 더 많은 작업을 수행하는 것입니다.
jQuery에서 선택기 는 DOM 요소를 찾은 다음 이벤트 핸들러를 바인딩 / 등록 하는 데 사용됩니다 . 이벤트가 트리거되면 DOM을 업데이트 / 변경하기 위해 해당 (제국) 코드가 실행됩니다.
AngularJS에서는 DOM 요소가 아닌 뷰 에 대해 생각하고 싶습니다 . 뷰는 AngularJS 지시문 을 포함하는 (선언적) HTML입니다 . 지시문은 우리를 위해 뒤에서 이벤트 핸들러를 설정하고 동적 데이터 바인딩을 제공합니다. 선택기는 거의 사용되지 않으므로 ID (및 일부 유형의 클래스)에 대한 필요성이 크게 줄어 듭니다. 뷰는 범위를 통해 모델 에 연결됩니다 . 뷰는 모델의 투영입니다. 이벤트는 모델 (즉, 데이터, 범위 속성) 및 해당 모델을 투영하는 뷰가 "자동으로"변경됩니다.
AngularJS에서는 데이터를 보유하는 jQuery가 선택한 DOM 요소보다는 모델을 생각해보십시오. 사용자가 보는 것을 조작하기 위해 콜백을 등록하는 대신 뷰를 해당 모델의 투영으로 생각하십시오.
jQuery는 눈에 거슬리지 않는 JavaScript를 사용합니다. 동작 (JavaScript)은 구조 (HTML)와 분리되어 있습니다.
AngularJS는 컨트롤러 와 지시문 (각각 자체 컨트롤러를 갖고 있거나 컴파일 및 링크 기능을 가질 수 있음)을 사용하여 뷰 / 구조 (HTML)에서 동작을 제거합니다. Angular에는 응용 프로그램을 분리 / 구성하는 데 도움 이되는 서비스 및 필터 도 있습니다 .
참조 https://stackoverflow.com/a/14346528/215945
AngularJS 애플리케이션을 설계하는 한 가지 방법 :
JavaScript 프로토 타입 상속이 어떻게 작동하는지 알지 않고도 jQuery로 많은 작업을 수행 할 수 있습니다. AngularJS 애플리케이션을 개발할 때 JavaScript 상속에 대해 잘 알고 있다면 일반적인 함정을 피할 수 있습니다. 권장 독서 : AngularJS에서 스코프 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까?
on및 whenJQuery와 컬렉션 오브젝트의 부재에서 작동 고차 - 기능이다.
on됩니까? 피할 수 없는.
AngularJS와 jQuery는 매우 다른 이데올로기를 채택합니다. jQuery에서 오는 경우 놀라운 차이점을 발견 할 수 있습니다. 각도가 화나게 만들 수 있습니다.
이것은 정상적인 현상입니다. Angular는 그만한 가치가 있습니다.
jQuery는 DOM의 임의 비트를 선택하고 임시로 변경하기위한 툴킷을 제공합니다. 한 조각 씩 좋아하는 거의 모든 것을 할 수 있습니다.
AngularJS는 대신 컴파일러 를 제공합니다 .
이것이 의미하는 바는 AngularJS가 전체 DOM을 위에서 아래로 읽고이를 코드로, 문자 그대로 컴파일러에 대한 명령으로 취급한다는 것입니다. DOM을 통과 할 때 AngularJS 컴파일러에게 동작 방식과 수행 방식을 알려주는 특정 지시문 (컴파일러 지시문)을 찾습니다 . 지시문은 속성, 태그, 클래스 또는 주석과 일치 할 수있는 JavaScript로 가득 찬 작은 객체입니다.
Angular 컴파일러는 DOM 조각이 특정 지시문과 일치한다고 판단하면 지시문 함수를 호출하여 DOM 요소, 속성, 현재 $ scope (로컬 변수 저장소) 및 기타 유용한 비트를 전달합니다. 이러한 속성에는 지시문에 의해 해석 될 수있는 표현과 렌더링 방법 및 언제 다시 그려야하는 표현이 포함될 수 있습니다.
지시문은 컨트롤러, 서비스 등과 같은 추가 Angular 구성 요소를 차례로 가져올 수 있습니다. 컴파일러의 맨 아래에 나오는 것은 완전히 구성된 웹 응용 프로그램으로, 유선으로 연결되어 바로 사용할 수 있습니다.
이것은 Angular가 Template Driven이라는 것을 의미합니다 . 템플릿은 다른 방식이 아닌 JavaScript를 구동합니다. 이것은 역할의 급진적 인 반전이며 지난 10 년 동안 우리가 작성해 온 명백한 JavaScript와 완전히 반대입니다. 익숙해지는 데 시간이 좀 걸릴 수 있습니다.
이것이 지나치게 규범적이고 제한적인 것처럼 들리면 진실에서 멀어지는 것은 없습니다. AngularJS는 HTML을 코드로 취급하므로 웹 애플리케이션에서 HTML 레벨의 세분성 을 얻습니다 . 모든 것이 가능하며, 개념적으로 도약하면 대부분의 일이 놀라 울 정도로 쉽습니다.
멍청한 녀석에게로 갑시다.
Angular와 jQuery는 다른 작업을 수행합니다. AngularJS는 웹 애플리케이션을 생성하는 도구 세트를 제공합니다. jQuery는 주로 DOM 수정 도구를 제공합니다. 페이지에 jQuery가 있으면 AngularJS가 자동으로 사용합니다. 그렇지 않은 경우 AngularJS는 jQuery Lite를 제공합니다. 이는 jQuery Lite이지만, 여전히 완벽하게 사용 가능한 jQuery 버전입니다.
Misko는 jQuery를 좋아하며이를 사용하는 것에 반대하지 않습니다. 그러나 범위, 템플릿 및 지시문의 조합을 사용하여 거의 모든 작업을 수행 할 수 있다는 것을 알게 될 것이므로 코드가 더 개별적이며 구성 가능하며 더 많기 때문에 가능한 경우이 워크 플로를 선호해야합니다. 모난.
jQuery를 사용한다면 어디서나 jQuery를 뿌려서는 안됩니다. AngularJS에서 DOM 조작의 올바른 위치는 지시문에 있습니다. 이것들에 대해서는 나중에 더 설명하겠습니다.
jQuery는 일반적으로 눈에 잘 띄지 않게 적용됩니다. JavaScript 코드는 머리글 (또는 바닥 글)에 연결되어 있으며 이것이 유일하게 언급 된 곳입니다. 우리는 선택기를 사용하여 페이지의 비트를 선택하고 플러그인을 작성하여 해당 부분을 수정합니다.
JavaScript가 제어됩니다. HTML은 완전히 독립적으로 존재합니다. JavaScript 없이도 HTML은 의미 론적으로 유지됩니다. Onclick 속성은 매우 나쁜 습관입니다.
AngularJS에 대해 가장 먼저 알게 될 것은 사용자 정의 속성이 어디에나 있다는 것 입니다. HTML의 속성은 ng 속성으로 흩어지며 이는 스테로이드의 onClick 속성입니다. 이들은 지시문 (컴파일러 지시문)이며 템플릿이 모델에 연결되는 주요 방법 중 하나입니다.
처음 볼 때 AngularJS를 구식 침입 JavaScript로 작성하고 싶을 수도 있습니다 (처음에했던 것처럼). 실제로 AngularJS는 이러한 규칙을 따르지 않습니다. AngularJS에서 HTML5는 템플릿입니다. 웹 페이지를 생성하기 위해 AngularJS에 의해 컴파일됩니다.
이것이 첫 번째 큰 차이입니다. jQuery에서 웹 페이지는 조작 할 DOM입니다. AngularJS에게 HTML은 컴파일 할 코드입니다. AngularJS는 전체 웹 페이지를 읽고 내장 컴파일러를 사용하여 문자 그대로 새 웹 페이지로 컴파일합니다.
템플릿은 선언적이어야합니다. 그것의 의미는 단순히 그것을 읽음으로써 분명해야합니다. 의미있는 이름을 가진 사용자 정의 속성을 사용합니다. 의미있는 이름으로 새로운 HTML 요소를 다시 구성합니다. HTML 지식이 거의없고 코딩 기술이없는 디자이너는 AngularJS 템플릿을 읽고 그것이 무엇을하고 있는지 이해할 수 있습니다. 그 또는 그녀는 수정할 수 있습니다. 이것은 각도 방식입니다.
AngularJS를 시작하고 튜토리얼을 실행할 때 가장 먼저 제기 한 질문 중 하나는 "내 코드는 어디에 있습니까?"입니다. . JavaScript를 작성하지 않았지만이 모든 동작이 있습니다. 답은 분명하다. AngularJS는 DOM을 컴파일하기 때문에 AngularJS는 HTML을 코드로 취급합니다. 많은 간단한 경우에는 템플릿을 작성하고 AngularJS가 응용 프로그램으로 컴파일하도록하는 것으로 충분합니다.
템플릿이 애플리케이션을 주도합니다. DSL 로 취급됩니다 . AngularJS 구성 요소를 작성하면 AngularJS가 템플릿 구조를 기반으로 올바른 구성 요소를 가져와 적절한 시간에 사용할 수 있도록합니다. 이것은 템플릿이 출력용 인 표준 MVC 패턴과 는 매우 다릅니다 .
예를 들어 Ruby on Rails 보다 XSLT 와 더 비슷합니다 .
이것은 약간의 익숙해지는 제어의 근본적인 반전입니다.
JavaScript에서 애플리케이션을 구동하려고하지 마십시오. 템플릿이 응용 프로그램을 구동하게하고 AngularJS가 구성 요소를 함께 배선하도록합니다. 이것은 또한 각도 방식입니다.
jQuery를 사용하면 HTML 페이지에 의미있는 의미있는 내용이 포함되어야합니다. 사용자 또는 검색 엔진이 JavaScript를 끄면 컨텐츠에 액세스 할 수 있습니다.
AngularJS는 HTML 페이지를 템플릿으로 취급하기 때문입니다. 콘텐츠는 일반적으로 API에서 제공되는 모델에 저장되므로 템플릿은 의미가 없어야합니다. AngularJS는 DOM을 모델로 컴파일하여 시맨틱 웹 페이지를 생성합니다.
HTML 소스는 더 이상 의미가 없으며 대신 API와 컴파일 된 DOM은 의미가 있습니다.
AngularJS에서 모델에 존재 함을 의미하는 HTML은 표시 전용 템플릿 일뿐입니다.
이 시점에서 SEO 및 접근성에 관한 모든 종류의 질문 이있을 것입니다. 여기에 공개 된 문제가 있습니다. 대부분의 스크린 리더는 이제 JavaScript를 구문 분석합니다. 검색 엔진은 AJAXed 컨텐츠를 색인 할 수도 있습니다. 그럼에도 불구하고, 푸시 스테이트 URL을 사용하고 적절한 사이트 맵이 있는지 확인하고 싶을 것입니다. 문제에 대한 토론은 여기를 참조하십시오 : https : //.com/a/23245379/687677
우려 분리 (SOC)는 SEO, 접근성 및 브라우저 비 호환성을 포함하여 다양한 이유로 수년간 웹 개발을 통해 성장한 패턴입니다. 다음과 같이 보입니다 :
다시 한 번 AngularJS는 규칙에 따라 행동하지 않습니다. 뇌졸중에서 AngularJS는 10 년간의 지혜를 버리고 대신 템플릿이 더 이상 의미가없고 조금도 의미가없는 MVC 패턴을 구현합니다.
다음과 같이 보입니다 :
MVC와 SOC는 같은 축척의 반대쪽 끝에 있지 않으며 완전히 다른 축에 있습니다. SOC는 AngularJS 컨텍스트에서 의미가 없습니다. 당신은 그것을 잊고 계속해야합니다.
나처럼, 당신이 브라우저 전쟁을 겪었다면,이 아이디어는 상당히 공격적 일 수 있습니다. 그만해, 그만한 가치가 있다고 약속 해
플러그인은 jQuery를 확장합니다. AngularJS 지시문은 브라우저의 기능을 확장합니다.
jQuery에서는 jQuery.prototype에 함수를 추가하여 플러그인을 정의합니다. 그런 다음 요소를 선택하고 결과에서 플러그인을 호출하여이를 DOM에 연결합니다. 아이디어는 jQuery의 기능을 확장하는 것입니다.
예를 들어, 페이지에 회전식 메뉴를 원하는 경우 정렬되지 않은 그림 목록 (예 : nav 요소로 묶여 있음)을 정의 할 수 있습니다. 그런 다음 페이지에서 목록을 선택하기 위해 jQuery를 작성하고 시간 초과가있는 갤러리로 슬라이딩 애니메이션을 수행하도록 스타일을 다시 지정할 수 있습니다.
AngularJS에서는 지시어를 정의합니다. 지시문은 JSON 객체를 반환하는 함수입니다. 이 객체는 AngularJS에게 어떤 DOM 요소를 찾고 어떤 변경을하는지 알려줍니다. 지시문은 사용자가 발명 한 속성 또는 요소를 사용하여 템플리트에 연결됩니다. 아이디어는 새로운 속성과 요소로 HTML의 기능을 확장하는 것입니다.
AngularJS 방식은 네이티브 HTML의 기능을 확장하는 것입니다. 사용자 정의 속성 및 요소로 확장 된 HTML처럼 보이는 HTML을 작성해야합니다.
회전 목마를 원한다면 <carousel />요소를 사용하고 지시문을 정의하여 템플릿을 가져 와서 빨래를 작동 시키십시오.
jQuery의 경향은 라이트 박스와 같은 큰 플러그인을 작성하여 수많은 값과 옵션을 전달하여 구성하는 것입니다.
이것은 AngularJS의 실수입니다.
드롭 다운의 예를 보자. 드롭 다운 플러그인을 작성할 때 클릭 처리기에서 코드를 작성하려고 할 수 있습니다. 어쩌면 위 또는 아래에있는 갈매기 형에 추가하는 기능, 펼친 요소의 클래스를 변경하거나 메뉴를 숨기거나 모든 유용한 것들을 숨길 수 있습니다.
약간 변경하고 싶을 때까지
호버에서 펼치려는 메뉴가 있다고 가정하십시오. 이제 문제가 생겼습니다. 플러그인은 클릭 핸들러에 연결되어 있으며,이 특정 상황에서 다르게 작동하도록 구성 옵션을 추가해야합니다.
AngularJS에서는 더 작은 지시문을 작성합니다. 드롭 다운 지시문은 엄청나게 작습니다. 접힌 상태를 유지하고 fold (), unfold () 또는 toggle ()에 메소드를 제공 할 수 있습니다. 이 메소드는 상태를 유지하는 부울 인 $ 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 플러그인은 클로저에서 생성됩니다. 프라이버시는 그 폐쇄 내에서 유지됩니다. 해당 폐쇄 내에서 스코프 체인을 유지 관리하는 것은 귀하의 책임입니다. jQuery에 의해 플러그인으로 전달 된 DOM 노드 세트와 클로저에 정의 된 모든 로컬 변수 및 정의한 전역 변수에만 액세스 할 수 있습니다. 이것은 플러그인이 자체 포함되어 있음을 의미합니다. 이것은 좋은 일이지만 전체 응용 프로그램을 만들 때 제한을받을 수 있습니다. 동적 페이지의 섹션간에 데이터를 전달하려고하면 문제가됩니다.
AngularJS에는 $ scope 객체가 있습니다. 이들은 모델을 저장하는 AngularJS에 의해 생성 및 유지 관리되는 특수 객체입니다. 특정 지시문은 기본적으로 JavaScript 프로토 타입 상속을 사용하여 $ scope를 래핑하여 상속하는 새로운 $ scope를 생성합니다. $ scope 객체는 컨트롤러와보기에서 액세스 할 수 있습니다.
이것은 영리한 부분입니다. $ scope 상속의 구조는 대략 DOM의 구조를 따르기 때문에 요소는 전역 $ scope (전역 범위와 동일하지 않음)까지 자체 범위 및 포함 범위에 완벽하게 액세스 할 수 있습니다.
이를 통해 데이터를보다 쉽게 전달하고 적절한 수준으로 데이터를 저장할 수 있습니다. 드롭 다운이 펼쳐지면 $ scope 만 알면됩니다. 사용자가 기본 설정을 업데이트하면 전역 $ scope를 업데이트 할 수 있으며 사용자 기본 설정을 수신하는 중첩 된 범위에 자동으로 경고됩니다.
실제로 복잡한 것처럼 들리면 일단 긴장을 풀면 마치 비행하는 것과 같습니다. $ scope 객체를 만들 필요가 없습니다. 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는 기본 이동 솔루션이며 거의 눈치 채지 않고 항상 발생합니다. ng-include와 함께 템플릿을 포함 할 수 있습니다. 가장 간단한 사용자 지정 지시문을 사용하여 템플릿을 적용 할 수 있습니다. 서비스에서 Ajax 호출을 래핑하고 GitHub 서비스 또는 Flickr 서비스를 직접 만들 수 있습니다.
jQuery에서 API에서 피드를 가져 오는 것과 같은 작은 비 DOM 관련 작업을 수행하려는 경우 클로저에서이를 수행하는 작은 함수를 작성할 수 있습니다. 유효한 솔루션이지만 해당 피드에 자주 액세스하려면 어떻게해야합니까? 다른 응용 프로그램에서 해당 코드를 재사용하려면 어떻게해야합니까?
AngularJS는 서비스 객체를 제공합니다.
서비스는 함수와 데이터를 포함하는 간단한 개체입니다. 그것들은 항상 싱글 톤이므로 둘 이상을 가질 수 없습니다. Stack Overflow API에 액세스하고 싶다고 가정 해 봅시다 StackOverflowService.
장바구니가 있다고 가정 해 봅시다. 장바구니를 유지하고 품목을 추가 및 제거하기위한 메소드를 포함하는 ShoppingCartService를 정의 할 수 있습니다. 서비스는 싱글 톤이며 다른 모든 구성 요소와 공유되므로 쇼핑 카트에 쓰고 데이터를 가져올 수있는 모든 개체입니다. 항상 같은 카트입니다.
서비스 객체는 자체 포함 된 AngularJS 구성 요소로, 적합하다고 생각하면 재사용하고 사용할 수 있습니다. 함수와 데이터를 포함하는 간단한 JSON 객체입니다. 이들은 항상 싱글 톤이므로 서비스에 데이터를 한 곳에 저장하면 동일한 서비스를 요청하여 해당 데이터를 다른 곳으로 가져올 수 있습니다.
AngularJS는 당신을 위해 당신의 의존성을 관리합니다. 객체를 원하면 간단히 참조하면 AngularJS가 객체를 가져옵니다.
이것을 사용하기 시작할 때까지 이것이 얼마나 큰 시간인지 설명하기는 어렵습니다. AngularJS DI와 같은 것은 jQuery 안에 없습니다.
DI는 애플리케이션을 작성하고 함께 배선하는 대신 각각 문자열로 식별되는 구성 요소 라이브러리를 정의 함을 의미합니다.
Flickr에서 JSON 피드를 가져 오는 메소드를 정의하는 'FlickrService'라는 구성 요소가 있다고 가정하겠습니다. 이제 Flickr에 액세스 할 수있는 컨트롤러를 작성하려면 컨트롤러를 선언 할 때 이름으로 'FlickrService'를 참조하면됩니다. AngularJS는 구성 요소를 인스턴스화하고 내 컨트롤러에서 사용할 수 있도록 관리합니다.
예를 들어 여기에 서비스를 정의합니다.
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});이제 해당 서비스를 사용하려면 다음과 같이 이름으로 참조하십시오.
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);AngularJS는 컨트롤러를 인스턴스화하기 위해 FlickrService 객체가 필요하다는 것을 인식하고 우리에게 제공 할 것입니다.
이로 인해 배선이 매우 쉬워지고 파쇄 경향을 거의 제거 할 수 있습니다. 우리는 간단한 컴포넌트 목록을 가지고 있으며, AngularJS는 필요할 때마다 하나씩 우리에게 전달합니다.
jQuery는 코드를 구성하는 방법에 대해 거의 이야기하지 않습니다. AngularJS는 의견이 있습니다.
AngularJS는 코드를 넣을 수있는 모듈을 제공합니다. 예를 들어 Flickr와 대화하는 스크립트를 작성하는 경우 Flickr 모듈을 작성하여 모든 Flickr 관련 기능을 래핑 할 수 있습니다. 모듈에는 다른 모듈 (DI)이 포함될 수 있습니다. 기본 응용 프로그램은 일반적으로 모듈이며 여기에는 응용 프로그램이 의존 할 다른 모든 모듈이 포함되어야합니다.
Flickr 기반의 다른 응용 프로그램을 작성하려면 간단한 코드 재사용이 가능합니다. Flickr 모듈과 voila 만 포함하면 새 응용 프로그램의 모든 Flickr 관련 기능에 액세스 할 수 있습니다.
모듈에는 AngularJS 구성 요소가 포함되어 있습니다. 모듈을 포함 시키면 해당 모듈의 모든 구성 요소가 고유 한 문자열로 식별되는 간단한 목록으로 제공됩니다 . 그런 다음 AngularJS의 의존성 주입 메커니즘을 사용하여 이러한 구성 요소를 서로 주입 할 수 있습니다.
AngularJS와 jQuery는 적이 아닙니다. AngularJS 내에서 jQuery를 매우 잘 사용할 수 있습니다. AngularJS를 잘 사용하고 있다면 (템플릿, 데이터 바인딩, $ scope, 지시문 등) 필요한 경우 보다 훨씬 적은 jQuery가 필요하다는 것을 알 수 있습니다.
가장 중요한 사실은 템플릿이 응용 프로그램을 구동한다는 것입니다. 모든 것을하는 큰 플러그인을 작성하려고하지 마십시오. 대신 한 가지 작업을 수행하는 작은 지시문을 작성한 다음 간단한 템플릿을 작성하여 연결하십시오.
눈에 잘 띄지 않는 JavaScript에 대해서는 생각하지 말고 대신 HTML 확장에 대해 생각하십시오.
나는 AngularJS에 대해 너무 흥분해서, 당신은 온라인 http://nicholasjohnson.com/angular-book/ 을 읽을 수있는 짧은 책을 썼습니다 . 도움이 되길 바랍니다.
필요한 패러다임 전환을 설명 할 수 있습니까?
명령형 대 선언 형
jQuery 를 사용 하면 DOM에 필요한 단계를 단계별로 알려줍니다. AngularJS 를 사용 하면 원하는 결과는 있지만 수행 방법은 설명하지 않습니다. 여기 에 더 많은 것 . 또한 Mark Rajcok의 답변을 확인하십시오.
클라이언트 측 웹 앱을 어떻게 다르게 설계하고 설계합니까?
AngularJS는 MVC 패턴 을 사용하는 전체 클라이언트 측 프레임 워크입니다 ( 그래픽 표현 확인 ). 관심사 분리에 중점을 둡니다.
가장 큰 차이점은 무엇입니까? 무엇을 멈춰야합니까? 대신 무엇을하고 / 사용해야합니까?
jQuery 는 라이브러리입니다
AngularJS 는 MVC, 의존성 주입 , 데이터 바인딩 등과 같은 멋진 것들을 결합한 테스트 가능한 아름다운 클라이언트 측 프레임 워크 입니다.
테스트 중심 개발을 용이하게하는 우려 와 테스트 분리 ( 단위 테스트 및 엔드 투 엔드 테스트) 에 중점을 둡니다 .
시작하는 가장 좋은 방법은 멋진 튜토리얼을 진행하는 것 입니다. 몇 시간 안에 단계를 진행할 수 있습니다. 그러나 배후의 개념을 마스터하려는 경우 추가로 읽을 수있는 수많은 참조가 포함됩니다.
서버 측 고려 사항 / 제한 사항이 있습니까?
이미 순수 jQuery를 사용중인 기존 애플리케이션에서 사용할 수 있습니다. 그러나 AngularJS 기능을 완전히 활용하려면 RESTful 접근 방식을 사용하여 서버 측 코딩을 고려할 수 있습니다 .
그렇게하면 리소스 팩토리 를 활용할 수있게되어 서버 측 RESTful API를 추상화 하고 서버 측 호출 (get, save, delete 등)을 매우 쉽게 만듭니다.
"패러다임 전환"을 설명하기 위해 짧은 대답만으로 충분하다고 생각합니다.
에서 jQuery를 , 당신은 일반적으로 사용하는 선택기를 요소를 찾기 위해, 그리고 그들을 와이어 :
$('#id .class').click(doStuff);
에서 AngularJS와 , 사용 지시를 직접 요소를 표시하기 위해, 그들을 연결할 수 있습니다 :
<a ng-click="doStuff()">
AngularJS와의 사이의 주요 차이점 - AngularJS와 당신은 선택기를 사용하여 요소를 찾을 필요 (또는 원하는)하지 않는 jqLite 본격적인 대 jQuery를가 한다는 것입니다 jqLite가 선택기를 지원하지 않습니다 .
따라서 사람들이 "jQuery를 전혀 포함하지 않는다"고 말하면 주로 선택기를 사용하지 않기 때문입니다. 그들은 대신 지시문을 사용하는 법을 배우기를 원합니다. 직접 선택하지 마십시오!
jQuery는 getElementByHerpDerp더 짧고 브라우저 간과 같은 엄청나게 긴 JavaScript 명령을 만듭니다 .
AngularJS를 사용하면 HTML이 정적 페이지 용으로 설계되었으므로 동적 웹 응용 프로그램과 잘 작동하는 고유 한 HTML 태그 / 속성을 만들 수 있습니다.
"AngularJS에서 어떻게 생각할 수있는 jQuery 배경이 있습니까?" "자바 스크립트에서 HTML을 어떻게 생각합니까?"라고 말하는 것과 같습니다. 질문을하고 있다는 사실은이 두 자원의 기본 목적을 이해하지 못했을 가능성이 높습니다. 이것이 바로 "AngularJS는 지시문을 사용하는 반면 jQuery는 CSS 선택기를 사용하여 이와 같은 작업을 수행하는 jQuery 객체를 만드는 것"이라는 목록을 살펴 보지 않고 근본적인 차이점을 지적함으로써 질문에 대답하기로 선택한 이유입니다. . 이 질문에는 긴 답변이 필요하지 않습니다.
jQuery는 브라우저에서 JavaScript를 쉽게 프로그래밍 할 수있는 방법입니다. 더 짧은 브라우저 간 명령 등
AngularJS는 HTML을 확장하므로 <div>응용 프로그램을 만들기 위해 모든 곳을 다룰 필요가 없습니다 . 정적이며 교육적인 웹 페이지 인 HTML이 실제로 설계된 것이 아니라 응용 프로그램에서 HTML을 실제로 작동시킵니다. JavaScript를 사용하여이 방법을 사용하지만 기본적으로 JavaScript가 아닌 HTML의 확장입니다.
$(".myclass")PO-Javascript보다 jQuery에서 매우 일반적이며 조금 더 쉽습니다.
jQuery : DOM 요소 에 대한 ' DOM 쿼리'에 대해 많이 생각 하고 무언가를합니다.
AngularJS : 모델은 진실이며 항상 그 각도에서 생각합니다.
예를 들어, DOM에서 어떤 형식으로 표시하려는 서버에서 데이터를 가져 오면 jQuery에서 '1이어야합니다. DOM에서이 데이터를 배치하려는 위치를 찾으십시오. '2. 새 노드를 만들거나 innerHTML을 설정하여 업데이트하십시오 . 그런 다음이보기를 업데이트하려면 '3. 위치를 찾아 '4. 최신 정보'. 서버에서 데이터를 가져오고 형식화하는 동일한 컨텍스트 내에서 수행되는 찾기 및 업데이트주기는 AngularJS에서 사라졌습니다.
AngularJS를 사용하면 모델 (이미 익숙한 JavaScript 객체)이 있으며 모델 값은 모델에 대해 (분명히) 뷰에 대해 알려주며 모델의 작업은 자동으로 뷰로 전파되므로 그것에 대해 생각할 필요가 없습니다. AngularJS에서 더 이상 DOM에서 물건을 찾지 못합니다.
다른 방법으로, jQuery에서 CSS 선택자, 즉 클래스 또는 속성 이있는 div또는 어디에 있는지 td등 HTML, 색상 또는 값을 얻을 수 있지만 AngularJS에서는 CSS 선택기에 대해 생각해야합니다 . 내가 생각하는 모델 : 내가 다루고있는 모델은 모델의 값을 true로 설정합니다. 이 값을 반영하는 뷰가 체크 박스인지 또는 td요소 에 있는지 여부를 귀찮게하지 않습니다 (jQuery에서 자주 생각해야 할 세부 사항).
AngularJS에서 DOM 조작을하면 지시문과 필터를 추가 할 수 있습니다. 지시문과 필터는 유효한 HTML 확장으로 생각할 수 있습니다.
AngularJS에서 경험할 수있는 또 하나의 기능 : jQuery에서는 jQuery 함수를 많이 호출합니다. AngularJS에서는 AngularJS가 함수를 호출하므로 AngularJS는 '일을 수행하는 방법을 알려줍니다.'하지만 이점은 가치가 있으므로 AngularJS 학습 일반적으로 AngularJS가 원하는 것을 배우거나 AngularJS가 함수를 제시 해야하는 방식을 배우면 그에 따라 호출합니다. 이것은 AngularJS를 라이브러리가 아닌 프레임 워크로 만드는 것 중 하나입니다.
그것들은 매우 훌륭하지만 긴 대답입니다.
내 경험을 요약하면 다음과 같습니다.
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를 일급 언어로 배우는 것"입니다. 위의 사실을 어려운 방법으로 배웠습니다.
행운을 빕니다.
그들은 사과와 오렌지입니다. 당신은 그들을 비교하고 싶지 않습니다. 그들은 서로 다른 두 가지입니다. AngularJs에는 이미 jQuery 라이트가 내장되어있어 완전한 jQuery 버전을 포함하지 않고도 기본 DOM 조작을 수행 할 수 있습니다.
jQuery는 DOM 조작에 관한 것입니다. 그렇지 않으면 처리해야 할 모든 크로스 브라우저 문제를 해결하지만 AngularJS와 같은 구성 요소로 앱을 나눌 수있는 프레임 워크는 아닙니다.
AngularJ의 좋은 점은 지시문에서 DOM 조작을 분리 / 분리 할 수 있다는 것입니다. ng-click과 같이 사용할 수있는 내장 지시문이 있습니다. 모든 뷰 로직 또는 DOM 조작을 포함하는 사용자 정의 지시문을 작성할 수 있으므로 비즈니스 로직을 처리해야하는 컨트롤러 또는 서비스에서 DOM 조작 코드를 혼동하지 않아도됩니다.
Angular는 앱을 컨트롤러-서비스-뷰 등으로 분류합니다.
지시어가 하나 더 있습니다. 이는 모든 DOM 요소에 첨부 할 수있는 속성이며, jQuery가 AngularJs 구성 요소와 충돌하거나 아키텍처와 엉망이 될 걱정없이 jQuery를 사용하여 견딜 수 있습니다.
내가 참석 한 모임에서 Angular의 창립자 중 한 명이 DOM 조작을 분리하기 위해 열심히 노력했기 때문에 다시 포함시키지 마십시오.
AngularJS : Misko Hevery & Igor Minar의 최초 제작자가 등장 하는 Podcast JavaScript Jabber : Episode # 32 를 들어보십시오 . 그들은 다른 JavaScript 배경, 특히 jQuery에서 AngularJS에 오는 것이 무엇인지에 대해 많이 이야기합니다.
Podcast에서 만든 요점 중 하나는 귀하의 질문과 관련하여 많은 것을 클릭했습니다.
MISKO : [...] 우리가 Angular에서 거의 생각하지 않은 것 중 하나는 탈출구를 많이 제공하여 기본적으로이 문제를 해결할 수있는 방법을 알아내는 것입니다. 우리에게 답은“지시문”이라고하는 것입니다. 지시문을 사용하면 본질적으로 규칙적인 작은 jQuery JavaScript가되어 원하는대로 할 수 있습니다.
IGOR : 지시어는 템플릿 에서이 특정 요소 또는 CSS를 발견 할 때마다 지시하는 컴파일러의 명령으로 생각하십시오. 이러한 종류의 코드를 유지하면 해당 코드는 해당 요소와 해당 요소 아래의 모든 것을 담당합니다 DOM 트리에서.
전체 에피소드의 사본은 위에 제공된 링크에서 제공됩니다.
따라서 귀하의 질문에 직접 대답하기 위해 : AngularJS는 매우 의견이 많으며 진정한 MV * 프레임 워크입니다. 그러나 지시문 내에서 jQuery로 알고 사랑하는 모든 멋진 작업을 계속 수행 할 수 있습니다. "jQuery에서 익숙했던 것을 어떻게해야합니까?"는 중요하지 않습니다. "JQuery에서 사용했던 모든 것들로 AngularJS를 어떻게 보완합니까?"의 문제입니다.
정말 두 가지 다른 상태입니다.
JavaScript 프로그래밍에 대한 첫 번째 심각한 노출은 Node.js 와 AngularJS 이기 때문에이 질문이 흥미 롭습니다 . 나는 jQuery를 배운 적이 없으며 아무것도 배울 필요가 없기 때문에 좋은 일이라고 생각합니다. 사실, 나는 내 문제에 대한 jQuery 솔루션을 적극적으로 피하고 대신 "AngularJS 방식"만 찾으십시오. 따라서이 질문에 대한 나의 대답은 본질적으로 "jQuery를 배운 적이없는 사람처럼 생각하고"jQuery를 직접 통합하려는 유혹을 피할 것입니다 (분명히 AngularJS는 어느 정도 뒤에서 사용합니다).
AngularJS와 jQuery :
AngularJ와 JQuery는 JQLite 기능을 제외한 모든 수준에서 완전히 다르며 AngularJs 핵심 기능을 배우기 시작하면 볼 수 있습니다 (아래 설명 참조).
AngularJ는 독립적 인 클라이언트 측 애플리케이션을 구축 할 수있는 클라이언트 측 프레임 워크입니다. JQuery는 DOM을 다루는 클라이언트 측 라이브러리입니다.
AngularJs Cool Principle-UI의 일부 변경을 원한다면 모델 데이터 변경 관점에서 생각하십시오. 데이터를 변경하면 UI가 다시 렌더링됩니다. 거의 필요하지 않을 때까지 그리고 각도 지시어를 통해 처리해야 할 때까지 DOM을 사용할 필요가 없습니다.
이 질문에 대답하기 위해 AngularJS와 첫 번째 엔터프라이즈 응용 프로그램에 대한 경험을 공유하고 싶습니다. 이것들은 jQuery 마인드 변경을 시작할 때 Angular가 제공하는 가장 멋진 기능이며 라이브러리가 아닌 프레임 워크처럼 Angular를 얻습니다.
양방향 데이터 바인딩은 놀랍습니다. 모든 기능 UPDATE, DELTE, INSERT가있는 그리드가 있습니다. ng-repeat를 사용하여 그리드의 모델을 바인딩하는 데이터 객체가 있습니다. 삭제 및 삽입을 위해 한 줄의 간단한 JavaScript 코드 만 작성하면됩니다. 그리드 모델이 즉시 변경되면 그리드가 자동으로 업데이트됩니다. 업데이트 기능은 실시간이며 코드는 없습니다. 당신은 놀라운 느낌!
재사용 가능한 지시문은 슈퍼입니다. 지시문을 한 곳에 작성하여 응용 프로그램 전체에서 사용하십시오. 세상에! 페이징, 정규식, 유효성 검사 등에 이러한 지시문을 사용했습니다. 정말 멋집니다!
라우팅은 강력합니다. 사용 방법에 따라 구현 방법이 다르지만 HTML 및 컨트롤러 (JavaScript)를 지정하기 위해 요청을 라우팅하는 데 코드 줄이 거의 필요하지 않습니다.
컨트롤러는 훌륭합니다. 컨트롤러는 자체 HTML을 관리하지만 이러한 구분은 일반적인 기능에 효과적입니다. 마스터 HTML에서 버튼을 클릭하여 동일한 함수를 호출하려면 각 컨트롤러에 동일한 함수 이름을 작성하고 개별 코드를 작성하십시오.
플러그인 : 앱에 오버레이 표시와 같은 다른 유사한 기능이 많이 있습니다. 코드를 작성할 필요가 없으며 wc-overlay로 제공되는 오버레이 플러그인 만 사용하면 모든 XHR ( XMLHttpRequest ) 요청 이 자동으로 처리됩니다.
RESTful 아키텍처에 이상적 : AngularJS는 완전한 프레임 워크이기 때문에 RESTful 아키텍처와 함께 사용할 수 있습니다. REST CRUD API를 호출하는 것은 매우 쉽고
서비스 : 컨트롤러에서 서비스와 적은 코드를 사용하여 공통 코드를 작성하십시오. 컨트롤러간에 공통 기능을 공유하기 위해 서비스를 사용할 수 있습니다.
확장 성 : Angular는 각도 지시문을 사용하여 HTML 지시문을 확장했습니다. html 안에 표현식을 작성하고 런타임에 평가하십시오. 직접 지시문과 서비스를 작성하고 별도의 노력없이 다른 프로젝트에서 사용하십시오.
: 자바 스크립트 MV * 초보자 및 순수 애플리케이션 아키텍처 (안 서버 / 클라이언트 측의 문제)에 초점을 맞추고, 나는 확실히 (나는 아직 언급되지 않았다 놀라게하고) 다음과 같은 자원 추천 할 것입니다 자바 스크립트 디자인 패턴 , 애디 오스 마니에 의해를 , 다른 JavaScript 디자인 패턴에 대한 소개 . 이 답변에 사용 된 용어는 위의 링크 된 문서에서 가져옵니다. 나는 받아 들여진 대답에서 실제로 잘 표현 된 것을 반복하지 않을 것입니다. 대신이 답변은 AngularJS (및 기타 라이브러리)를 강화 하는 이론적 배경으로 연결됩니다 .
나처럼 AngularJS (또는 Ember.js) , Durandal 및 기타 MV * 프레임 워크)는 여러 가지 JavaScript 디자인 패턴을 조립하는 복잡한 프레임 워크 있습니다.
나는 시험에 쉽게 또한 그것을 발견 (1) 기본 자바 스크립트 코드와 (2) 이 패턴 각각에 대한 작은 도서관 별도로 하나의 글로벌 프레임 워크에 다이빙을하기 전에. 이것은 개인적으로 문제에 직면했기 때문에 프레임 워크가 해결하는 중요한 문제를 더 잘 이해할 수있게했습니다.
예를 들면 다음과 같습니다.
주의 :이 목록은 완전하지도 않고 '최고의 도서관'도 아닙니다. 그들은 내가 사용한 라이브러리 일뿐입니다. 이 라이브러리에는 더 많은 패턴이 포함되어 있으며 언급 된 패턴은 주요 초점 또는 원래 의도입니다. 이 목록에서 빠진 것이 있다고 생각되면 의견에 언급 해 주시면 기꺼이 추가하겠습니다.
실제로 AngularJS를 사용하는 경우 더 이상 jQuery가 필요하지 않습니다. AngularJS 자체에는 바인딩 및 지시문이 있으며 이는 jQuery로 수행 할 수있는 대부분의 작업에 매우 적합한 "대체"입니다.
보통 AngularJS와 Cordova를 사용하여 모바일 애플리케이션을 개발합니다. 합니다. 내가 필요한 jQuery의 유일한 것은 선택기입니다.
인터넷 검색을 통해 독립형 jQuery 선택기 모듈이 있음을 알 수 있습니다. 지글 지글입니다.
그리고 jQuery Selector (Sizzle 사용)의 힘으로 AngularJS를 사용하여 웹 사이트를 빠르게 시작할 수 있도록 작은 코드 스 니펫을 만들기로 결정했습니다.
내 코드를 여기에서 공유했습니다 : https://github.com/huytd/Sizzular