سرور مجازی NVMe

انتقال از jQuery به AngularJSI اگر یک توسعه دهنده با تجربه جی کوئری هستید، جهش به AngularJS می تواند کمی دلهره آور باشد. اما نگران نباشید – این راهنما برای کمک به اینجا آمده است! ما به دنیای AngularJS می پردازیم، آن را با jQuery مقایسه می کنیم و ابزارهایی را که برای شروع به فکر کردن نیاز دارید در اختیار شما قرار می دهیم…

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۹, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 8 دقیقه

معرفی

اگر شما یک توسعه دهنده با تجربه جی کوئری هستید، جهش به AngularJS می تواند کمی دلهره آور باشد. اما نگران نباشید – این راهنما برای کمک به اینجا آمده است! ما به دنیای AngularJS نگاه می کنیم، آن را با jQuery مقایسه می کنیم و ابزارهایی را که برای شروع به فکر کردن در Angular نیاز دارید در اختیار شما قرار می دهیم.

jQuery و AngularJS چیست؟

جی کوئری یک کتابخانه جاوا اسکریپت سریع، کوچک و محبوب است. با استفاده از یک API آسان که در اکثر مرورگرها کار می کند، مواردی مانند پیمایش و دستکاری اسناد HTML، مدیریت رویداد و انیمیشن را بسیار ساده تر می کند. jQuery با ترکیبی از تطبیق پذیری و توسعه پذیری، شیوه نوشتن جاوا اسکریپت میلیون ها نفر را تغییر داده است.

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

در قطعه کد jQuery بالا، وقتی پاراگراف کلیک می شود، آن را مخفی می کنیم. روی. این یک نمایش ساده از روش دستکاری jQuery در عناصر HTML است.

از سوی دیگر، AngularJS یک چارچوب ساختاری برای برنامه های وب پویا است. این به شما امکان می دهد از HTML به عنوان زبان قالب خود استفاده کنید و به شما امکان می دهد تا نحو HTML را گسترش دهید تا اجزای برنامه خود را به طور واضح و مختصر بیان کنید. اتصال داده و تزریق وابستگی Angular بسیاری از کدهایی را که در غیر این صورت مجبور به نوشتن بودید حذف می کند.

var app = angular.module('myApp', ());
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

در این مثال AngularJS، ما یک ماژول و یک کنترلر ایجاد می کنیم. کنترلر در حال تنظیم خواص (firstName و lastName) روی را $scope هدف – شی. این ویژگی ها می توانند مستقیماً در HTML شما برای نمایش داده ها یا تعیین ساختار استفاده شوند.

توجه داشته باشید: این $scope شی مالک برنامه متغیرها و توابع برنامه در AngularJS است.

چرا از jQuery به Angular انتقال می دهیم؟

در دنیای توسعه وب، جی کوئری همراه وفادار بسیاری از توسعه دهندگان بوده است. استفاده از جاوا اسکریپت را آسان‌تر کرد و به ساده‌سازی کارهایی مانند دستکاری DOM، مدیریت رویداد و تماس‌های AJAX کمک کرد. با این حال، با پیچیده‌تر شدن برنامه‌های کاربردی وب، نیاز به روشی ساختارمندتر برای ساخت برنامه‌ها احساس می‌شود. اینجاست که AngularJS وارد می شود.

AngularJS چارچوبی است که به توسعه دهندگان اجازه می دهد تا پیچیده و تکی ایجاد کنند.page برنامه های کاربردی (SPA) با سهولت. مفاهیمی مانند اتصال دو طرفه داده، تزریق وابستگی و مدولارسازی را معرفی می کند که می تواند توسعه را به شدت ساده کند. process. علاوه بر این، AngularJS توسط گوگل نگهداری می شود، به این معنی که دارای یک انجمن قوی است و دائما در حال بهبود و به روز رسانی است.

در حالی که jQuery برای افزودن تعاملات ساده به یک وب سایت فوق العاده است، AngularJS برای ساخت برنامه های قوی و پیچیده طراحی شده است. اگر متوجه شدید که از jQuery برای ساختن یک برنامه پیچیده استفاده می کنید، ممکن است زمان آن رسیده است که به AngularJS انتقال دهید.

تفاوت های کلیدی

اکنون که در مورد اینکه چرا ممکن است بخواهید از jQuery به AngularJS منتقل شوید، بحث کردیم، اجازه دهید برخی از تفاوت های کلیدی بین این دو را بررسی کنیم.

فلسفه ساختار و طراحی: jQuery یک کتابخانه طراحی شده برای ساده کردن وظایفی مانند دستکاری DOM و مدیریت رویداد است. این برای افزودن تعاملات ساده به وب سایت شما عالی است. از سوی دیگر، AngularJS یک چارچوب MVC تمام عیار است که برای ساخت برنامه های پیچیده وب طراحی شده است. این طراحی ماژولار را تشویق می کند و دارای ویژگی هایی مانند اتصال دو طرفه داده، تزریق وابستگی و دستورالعمل ها است.

توجه داشته باشید: MVC مخفف Model-View-Controller است. این یک الگوی طراحی است که یک برنامه کاربردی را به سه بخش به هم پیوسته جدا می کند. این جداسازی به توسعه دهندگان اجازه می دهد تا کار کنند روی تک تک قطعات بدون تأثیر بر سایرین
اتصال داده ها: در jQuery، شما به صورت دستی DOM را دستکاری می کنید و رویدادها را برای به روز رسانی وضعیت برنامه مدیریت می کنید. با این حال، AngularJS اتصال داده دو طرفه را معرفی می کند که به طور خودکار داده ها را بین مدل و view همگام می کند.

در اینجا یک مثال ساده از اتصال دو طرفه داده در AngularJS آورده شده است:
```
// In your controller
$scope.name = 'John Doe';

// In your HTML
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>
```
در این مثال، وقتی در فیلد ورودی تایپ می کنید، name ویژگی موجود در شی $scope به طور خودکار به روز می شود و بالعکس.
تزریق وابستگی: تزریق وابستگی (DI) یک الگوی طراحی است که در آن یک کلاس وابستگی های خود را از منابع خارجی دریافت می کند نه اینکه خودش آنها را ایجاد کند. AngularJS دارای DI داخلی است که مدیریت و تست کد شما را آسان‌تر می‌کند.

در اینجا روش استفاده از DI در AngularJS آمده است:
```
angular.module('myApp', ())
  .controller('MyController', ('$scope', 'myService', function($scope, myService) {
    // Use myService
  }));
```
در این مثال، myService به داخل تزریق می شود MyController، بنابراین نیازی به ایجاد یک نمونه از myService خودت
دستورالعمل ها: دستورالعمل ها یک ویژگی منحصر به فرد AngularJS است که به شما امکان می دهد اجزای قابل استفاده مجدد ایجاد کنید. شما می توانید تگ ها، ویژگی ها یا کلاس های HTML خود را ایجاد کنید و رفتار آنها را با جاوا اسکریپت تعریف کنید.

در اینجا یک نمونه از یک دستورالعمل در AngularJS آمده است:
```
angular.module('myApp', ())
  .directive('myDirective', function() {
    return {
      template: '<h1>Hello, world!</h1>'
    };
  });
```
در این مثال می توانید استفاده کنید <my-directive></my-directive> در HTML شما، و با آن جایگزین خواهد شد <h1>Hello, world!</h1>.

اینها تنها تعدادی از تفاوت های کلیدی بین jQuery و AngularJS هستند. انتقال از jQuery به AngularJS می تواند گام بزرگی باشد، اما همچنین می تواند دنیای جدیدی از امکانات را برای پروژه های توسعه وب شما باز کند.

چگونه در انگولار فکر کنیم

از jQuery، ممکن است به دستکاری مستقیم DOM عادت داشته باشید. با این حال، Angular شیوه متفاوتی از تفکر را تشویق می کند. در انگولار، شما باید به کامپوننت ها و دستورالعمل ها فکر کنید، که در اصل عناصر HTML سفارشی با رفتارهای خاص هستند.

Angular از معماری MVC (Model-View-Controller) استفاده می کند. مدل منبع یگانه حقیقت است و دیدگاه فرافکنی از مدل است. وقتی مدل تغییر می کند، نمای تغییرات را منعکس می کند و بالعکس. این اتصال دو طرفه داده یکی از ویژگی های کلیدی Angular است.

توجه داشته باشید: در Angular، باید از دستکاری مستقیم DOM خودداری کنید. در عوض، باید مدل را دستکاری کنید و به Angular اجازه دهید نمای را به طور خودکار به روز کند.

یکی از مفاهیم مهم در Angular تزریق وابستگی است. این یک الگوی طراحی است که در آن یک کلاس وابستگی های خود را از منابع خارجی دریافت می کند نه اینکه خودش آنها را ایجاد کند.

// Here is an example of dependency injection in Angular
class MyComponent {
  constructor(private http: HttpClient) { }
}

در این مثال، HttpClient وابستگی است MyComponent. به جای ایجاد یک نمونه از HttpClient داخل MyComponent، Angular یک نمونه از HttpClient به MyComponentسازنده

مقایسه نحوی پایه

اکنون، بیایید برخی از نحوهای اولیه را بین jQuery و Angular مقایسه کنیم.

در jQuery، ممکن است از $ تابعی برای انتخاب یک عنصر و دستکاری آن:

// jQuery
$('p').text('Hello, world!');

در Angular، به جای آن، یک ویژگی از یک جزء را به محتوای متن عنصر متصل می کنید:

<!-- Angular -->
<p>{{ message }}</p>

// In the component
this.message = 'Hello, world!';

در jQuery، ممکن است از .روی روش برای پیوست کردن یک رویداد کنترل کننده به یک عنصر:

// jQuery
$('button').روی('click', function() {
  alert('Button clicked!');
});

در Angular، شما از (event) نحو برای اتصال یک رویداد به متدی از مولفه:

<!-- Angular -->
<button (click)="onClick()">Click me!</button>

// In the component
onClick() {
  alert('Button clicked!');
}

همانطور که می بینید، سینتکس Angular نسبت به jQuery اعلانی تر و ضروری تر است. این باعث می شود کد شما برای استدلال و آزمایش راحت تر باشد.

روش انجام وظایف رایج جی کوئری در Angular

انتقال از jQuery به Angular نیاز به تغییر در روش برخورد شما با وظایف رایج دارد. در اینجا چند نمونه از روش ترجمه وظایف jQuery به Angular آورده شده است:

نمایش و پنهان کردن عناصر

در jQuery، ممکن است از .show() و .hide() روش هایی برای کنترل دید عناصر در Angular می توانید استفاده کنید *ngIf دستورالعمل اضافه کردن یا حذف مشروط عناصر از DOM.

// jQuery
$('#myElement').show();
$('#myElement').hide();

// Angular
<div *ngIf="isVisible">Hello, World!</div>

در این مثال Angular، isVisible خاصیت در جزء تعیین می کند که آیا div به DOM اضافه می شود.

اضافه کردن و حذف کلاس ها

jQuery فراهم می کند .addClass() و .removeClass() روش هایی برای دستکاری کلاس های یک عنصر Angular فراهم می کند ngClass بخشنامه برای همین هدف

// jQuery
$('#myElement').addClass('active');
$('#myElement').removeClass('active');

// Angular
<div (ngClass)="{'active': isActive}">Hello, World!</div>

در مثال Angular، isActive خاصیت در جزء تعیین می کند که آیا active کلاس به div.

نکاتی برای انتقال روان

انتقال از jQuery به Angular می تواند یک چالش باشد، اما در اینجا نکاتی برای ایجاد آن وجود دارد process صاف تر:

1. TypeScript را یاد بگیرید: Angular ساخته شده است با TypeScript، یک ابرمجموعه ایستا تایپ شده از جاوا اسکریپت. درک TypeScript یادگیری Angular را بسیار آسان تر می کند.

2. در مؤلفه ها فکر کنید: Angular یک چارچوب مبتنی بر کامپوننت است. به جای دستکاری مستقیم DOM مانند جی کوئری، به این فکر کنید که چگونه می توانید اجزای قابل استفاده مجدد را برای ساخت برنامه خود ایجاد کنید.

3. دستورالعمل های Angular را بپذیرید: دستورالعمل ها یک ویژگی قدرتمند Angular است که به شما امکان می دهد رفتاری را به عناصر DOM اضافه کنید. آنها می توانند جایگزین بسیاری از وظایف رایج جی کوئری شوند.

4. از Angular CLI استفاده کنید: این CLI زاویه ای هست یک command-line رابط برای ایجاد و مدیریت برنامه های Angular. می تواند به شما کمک کند تا سریع شروع کنید و بهترین شیوه ها را اجرا کنید.

توجه داشته باشید: مهم است که به یاد داشته باشید که Angular فقط یک کتابخانه مانند jQuery نیست، بلکه یک چارچوب کامل است. این به این معنی است که عملکردهای خارج از جعبه بسیار بیشتری را ارائه می دهد، اما به طرز تفکر متفاوتی نیز نیاز دارد. اگر در ابتدا این انتقال دشوار بود، ناامید نشوید. با تمرین، طبیعت دوم خواهد شد.

چالش ها هنگام تعویض

جابجایی از jQuery به AngularJS می تواند یک کار دلهره آور باشد، به خصوص اگر برای مدت طولانی از jQuery استفاده می کنید. یکی از چالش های اصلی تغییر در طرز فکر است. jQuery در درجه اول یک کتابخانه برای دستکاری DOM و مدیریت رویداد است، در حالی که AngularJS یک چارچوب کامل است که روشی متفاوت برای ساختار کد شما را تشویق می کند.

توجه داشته باشید: به یاد داشته باشید، AngularJS چارچوبی است که روشی ساختاریافته برای توسعه برنامه‌ها ارائه می‌کند، در حالی که jQuery کتابخانه‌ای است که پیمایش اسناد HTML، مدیریت رویدادها و انیمیشن‌سازی را ساده می‌کند.

در jQuery، شما مستقیماً DOM را دستکاری می کنید تا به عملکرد مورد نظر برسید. با این حال، در AngularJS، باید به مدل های داده فکر کنید و این داده ها را به دیدگاه خود متصل کنید. این می تواند یک تغییر پارادایم مهم برای توسعه دهندگان جی کوئری باشد.

چالش دیگر درک اصطلاحات و مفاهیم AngularJS مانند دستورالعمل ها، ماژول ها، خدمات، تزریق وابستگی و اتصال دو طرفه داده است. این مفاهیم در jQuery وجود ندارند و درک آن زمان می برد.

در نهایت، جی کوئری به دلیل سادگی و سهولت استفاده شناخته شده است. از سوی دیگر، AngularJS منحنی یادگیری تند دارد. ممکن است کمی طول بکشد تا با AngularJS راحت شوید، به خصوص اگر در چارچوب های جاوا اسکریپت تازه کار هستید.

منابع مفید برای یادگیری Angular

منابع متعددی به صورت آنلاین برای کمک به یادگیری AngularJS وجود دارد. در اینجا چند موردی وجود دارد که به ویژه مفید هستند:

AngularJS Official Documentation: این بهترین مکان برای شروع است. اسناد رسمی جامع است و درک خوبی از مفاهیم اصلی چارچوب ارائه می دهد.
آموزش W3Schools AngularJS: این آموزش برای مبتدیان است و تمام مفاهیم اولیه AngularJS را پوشش می دهد.
TutorialsPoint AngularJS Tutorials: این یک آموزش مفصل است که AngularJS را از موضوعات پایه تا پیشرفته پوشش می دهد.
دوره های Udemy AngularJS: اگر آموزش های ویدیویی را ترجیح می دهید، Udemy چندین دوره ارائه می دهد روی AngularJS. برخی از دوره ها رایگان هستند، در حالی که برخی دیگر نیاز به هزینه دارند.
سرریز پشته: اگر گیر کردید، StackOverflow مکانی عالی برای یافتن پاسخ است. انجمن AngularJS فعال و مفید است.

توجه داشته باشید: به یاد داشته باشید، کلید تسلط بر AngularJS (یا هر فناوری جدید) تمرین است. اگر در ابتدا کار برایتان سخت بود، ناامید نشوید. به کد نویسی ادامه دهید و به نتیجه خواهید رسید.

نتیجه

برای جمع‌بندی، انتقال از jQuery به AngularJS می‌تواند یک تصمیم چالش‌برانگیز اما ارزشمند باشد. ما تفاوت‌های کلیدی بین این دو را بررسی کرده‌ایم، و امیدواریم که مثال‌ها و نکات ارائه‌شده به توضیح چگونگی «فکر کردن در Angular» کمک کند. به یاد داشته باشید که AngularJS فقط یک کتابخانه جاوا اسکریپت نیست، بلکه یک چارچوب بزرگ است که می تواند به ساده سازی توسعه شما کمک کند. process. در حالی که منحنی یادگیری ممکن است شیب دار باشد، مزایای تسلط بر AngularJS بسیار زیاد است. اگر همه چیز فوراً کلیک نکرد، ناامید نشوید. به تمرین ادامه دهید، به یادگیری ادامه دهید و به زودی متوجه خواهید شد که با AngularJS به همان روانی که با jQuery کار کردید، کار می کنید. خوشبختانه تعداد زیادی وجود دارد منابع موجود برای کمک به شما در انتقال

(برچسب ها به ترجمه)# جاوا اسکریپت

منتشر شده در 1402-12-30 17:18:02

امتیاز شما به این مطلب