مقایسه AngularJS در مقابل jQuery
یکشنبه 31 خرداد 1394AngularJS و jQuery تفاوت های زیادی دارند اما شباهت هایی نیز دارند در این مقاله تفاوت و شباهت های AngularJS و jQuery را بررسی می کنیم .
کتابخانه (Library)
کتابخانه چیزی جز مجموعه ای از توابع نیست که در نرم افزار وب برای انجام کار ها مفید است مانند دستکاری DOM و درخواست های HTTP برای مثال Jquery و underscore.js. کد هایی که می نویسیم مسئولیت انجام کاری را بر عهده می گیرد و قابل فراخوانی هستند .
Framework
Framework بطور واقع توابع مشترک نرم افزار را نگهداری می کند . به این نوشتن کد توسط توسعه دهنده می گویند و منجر به انجام آن می شود . در این مورد، Framework مسئولیت کامل از کد است برای مثال backbone.js و angularjs .
حالا ویژگی های AngularJS و jQuery را بررسی می نماییم .
ویژگی هایAngularJS
Data Binding
Routing
Unit Testing
Deep linking
Form Validation
Animation support
ویژگی های jQuery
دستکاری DOM
Event Methods
Effects and animations
AJAX calls
مقایسه AngularJS و jQuery
AngularJS و jQuery برخی ویژگی های مشترک مانند Unit test runner و animation support و AJAX/JSONP دارند اما تفاوت هایی نیز دارند .
AngularJS با RESTful API است درحالی که در jQuery آن را نداریم .
AngularJS از MVC پشتیبانی می کند در حالی که jQuery آن را پشتیبانی نمی کند .
AngularJS ویژگی بنام Two Way Data Bindingدارد در حالی که jQuery این ویژگی را ندارد .
Deep Linking Routing توسط AngularJS پشتیبانی میشود در حالیکه jQuery آن را پشتیبانی نمی کند .
اندازه فایل های AngularJS بسیار سنگین تر از فایل های jQuery می باشد .
AngularJS را ترجیح می دهیم اگر یک نرم افزار وب سنگین را گسترش دهیم .
مثال jQuery
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery example</title> <script src="js/jquery-1.11.2.js"></script> </head> <body> <script type="text/javascript"> $(function () { $(document).keyup(function () { var name = $("#txt").val(); $("#lbl").html(name); }); }); </script> <div> Name <input type="text" id="txt" placeholder="please enter name" /> <h1 ><b id="lbl"></b></h1> </div> </body> </html>
مثال AngularJS
<!DOCTYPE html> <html data-ng-app> <head><title>ang example</title> <script src="js/angular.min.js"></script> </head> <body> <div> Name <input type="text" placeholder="please enter name" data-ng-model="name" /> <h1>{{name}}</h1> </div> </body> </html>
آموزش angular
- AngularJs
- 4k بازدید
- 4 تشکر