مقایسه AngularJS در مقابل jQuery

AngularJS و jQuery تفاوت های زیادی دارند اما شباهت هایی نیز دارند در این مقاله تفاوت و شباهت های AngularJS و 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