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

یکشنبه 31 خرداد 1394

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

قربانی

نویسنده 44 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید