AngualrJS는 매우 사려 깊은 웹 애플리케이션 프레임워크입니다. 여기에는 매우 훌륭한 공식 문서와 예제가 있습니다. 유명한 TodoMVC 프로젝트를 실제 환경에서 테스트한 후 수많은 프레임워크 중에서 눈에 띄고 인터넷 어디에서나 매우 훌륭한 데모나 디스플레이가 있습니다. 그러나 AngularJS와 유사한 프레임워크에 노출된 적이 없고 거의 항상 jQuery와 같은 JavaScript 라이브러리를 사용하는 개발자의 경우 jQuery 사고에서 AngularJS 사고로 전환하는 것은 약간 어렵습니다. 적어도 저에게는 그렇습니다. 따라서 일부 개발자에게 도움이 되기를 바라는 마음으로 몇 가지 연구 노트를 공유하고 싶습니다.
이 글에서는 jQuery와 Angular를 사용하여 동일한 인스턴스를 구현함으로써 둘의 차이점과 AngularJS의 매력을 경험해 보겠습니다.
물론, jquery.js와 angle.js 파일을 참조해야 합니다.
■ jQuery를 사용하여 간단한 클릭 이벤트 작성
<button id="jquery-button">JQuery Button</button>
<div id="jquery-content">I am jquery content</div>
$(function(){
$("#jquery-button").click(function(){
$('#jquery-content').toggle();
})
}) 동일한 클릭 이벤트를 통해 더 많은 div가 전환되도록 하려면 어떻게 해야 하나요?
--首先要在页面中添加div，然后在js中添加相应的代码
<button id="jquery-button">JQuery Button</button>
<div id="jquery-content">I am jquery content</div>
<div id="jquery-content1">I am jquery content1</div>
$(function(){
$("#jquery-button").click(function(){
$('#jquery-content').toggle();
$('#jquery-content1').toggle();
})
})
AngularJS의 상황은 어떤가요?
■ Angular를 사용하여 간단한 클릭 이벤트 작성
<div ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.toggle()">Angular Button</button>
<div ng-hide="app.isHidden">Angular content</div>
</div>
var app = angular.module("app",[]);
app.controller("AppCtrl", function(){
var app = this;
app.isHidden = false;
app.toggle = function(){
app.isHidden = !app.isHidden;
}
})동일한 클릭 이벤트를 통해 더 많은 div가 전환되도록 하려면 어떻게 해야 하나요?
--我们只要在页面中添加一个div,通过ng-hide属性来声明 <div ng-app="app" ng-controller="AppCtrl as app"> <button ng-click="app.toggle()">Angular Button</button> <div ng-hide="app.isHidden">Angular content</div> <div ng-hide="app.isHidden">Angular content1</div> </div>
위에서 jQuery와 Angular의 차이점을 비교하는 간단한 예를 통해 다음을 확인할 수 있습니다. AngularJS는 선언을 통해 변경 사항에 응답합니다. jQuery에 비해 AngularJS는 더 저렴하고 유연하게 변경 사항에 응답합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
