به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای)

مقدمه
AngularJS ، یکی از ویژگیهای مفید ارائه اولیه AngularJS ، امکان فیلتر و مرتب سازی داده ها در صفحه تنها با استفاده از متغیرهای قالب و فیلترها بود. اتصال داده دو طرفه از بسیاری از تبدیل گرها به AngularJS پیشی گرفت.
اما امروزه ، بسیاری از توسعه دهندگان اتصال داده های یک طرفه را ترجیح می دهند ، و فیلترهای orderBy و filter با ظهور Angular افول کردند. (توجه: در طول این مقاله از “AngularJS” برای اشاره به 1.x و از “Angular” برای اشاره به 2+ استفاده می کنم.)
اما چگونه قرار است به همان تأثیر برسیم؟ پاسخ در مؤلفه های ما نهفته است ، بنابراین اجازه دهید به یک پروژه ngUpgrade بنگریم و یاد بگیریم که چگونه این کار را انجام دهیم!
مرحله 1 – کد را از Git بیرون بکشید
ما در حال به روز کردن الگوی یک مؤلفه تازه بازنویسی شده هستیم. سپس ، مرتب سازی و فیلترینگ را اضافه خواهیم کرد تا کلیه عملکردهای موجود در AngularJS را بازیابی کنیم. این یک مهارت کلیدی برای توسعه فرآیند ngUpgrade میباشد.
برای شروع ، اندک زمانی برای کلون کردن پروژه نمونه ای که از آن استفاده خواهیم کرد، میگذاریم (فراموش نکنید که npm install را هم در پوشه های public و هم server اجرا کنید). این نکته را برای نقطه شروع خود بررسی میکنیم:
git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3
Copy

این پروژه نمونه یک پروژه ترکیبی ngUpgrade است که هم از AngularJS 1.6 و هم از Angular 4 استفاده می کند. یک API Express کاری و یک Webpack برای توسعه و تولید دارد. به راحتی به جستجو ، گرفتن و استفاده از الگوهای موجود در پروژه های خود بپردازید. اگر می خواهید نسخه ای از این پروژه را که از Angular 5 استفاده می کند ، جستجو کنید ، این مطلب را بررسی کنید. برای اهداف این آموزش ، تفاوت بین دو نسخه اهمیتی نخواهد داشت (من به موارد جزئی اشاره خواهم کرد).
مرحله 2 – دستور AngularJS را جایگزین کنید
در این مرحله از برنامه ، مولفه سفارشات ما در Angular بازنویسی می شود ، و تمام متعلقات آن وارد و حل می شوند. با این حال اگر بخواهیم برنامه خود را اجرا کنیم ، در خط کنسول شاهد خطاهایی هستیم که نشان دهنده مشکلات موجود در الگوی ماست. این همان چیزی است که ما ابتدا باید اصلاح کنیم. در الگوی سفارشات می خواهیم ترکیب AngularJS را جایگزین کنیم تا بتوانیم لود مسیر و سفارشات نمایش داده شده در صفحه را دریافت کنیم. سپس فیلترینگ و مرتب سازی را تنظیم خواهیم کرد.
اولین کاری که باید انجام دهیم خلاص شدن از شر تمام موارد ctrl $ در این الگو است. آنها دیگر در Angular لازم نیستند. ما فقط می توانیم یک find و replace برای پیدا کردن $ ctrl. پیدا کنیم. (نقطه را دقت کنید) و آن را با هیچ جایگزین کنید.
اکنون بگذارید data-ng-click را بر روی دکمه خود در خط 13 جایگزین کنیم. در Angular ، به جای ng-click ، ما فقط از رویداد click با پرانتز استفاده می کنیم تا نشان دهد که این یک رویداد است. براکت ها ورودی را نشان می دهند و پرانتز ها یک خروجی یا یک رویداد را نشان می دهند.
<button type=”button” (click)=”goToCreateOrder()” class=”btn btn-info”>Create Order</button>
Copy

ما فقط در اینجا می گوییم که در رویداد کلیک ، تابع goToCreateOrder را روی مؤلفه سفارشات خود اعمال کنید.
قبل از ادامه کار ، بیایید دقیقه ای را برای اثبات این که مؤلفه ما در حال حاضر در حال لود شدن است، اختصاص دهیم. در مورد کل div که سفارشات ما را لود می کند کامنت بگذارید (از خط 17 به بعد). برای اجرای برنامه ، یک ترمینال را باز کرده و دستورات زیر را اجرا کنید:
cd server
npm start

این سرور مجازی اکسپرس را شروع می کند. برای اجرای سرور مجازی dev Webpack ، یک ترمینال دیگر را باز کرده و اجرا کنید:
cd public
npm run dev

(می توانید این مراحل را برای ادامه این آموزش در حال اجرا نگه دارید).
باید ببینید که برنامه ما مجدد لود شده است. اگر به مسیر سفارشات بروید ، خواهید دید که مولفه سفارشات به درستی نمایش داده می شود.

همچنین می توانیم بر روی دکمه ایجاد سفارش کلیک کنیم و به درستی مسیر و فرم ایجاد سفارش را برای ما ارسال می کند.
اکنون اجازه دهید به HTML برگردیم.
بگذارید همه بقیه موارد data-ng-click را با نگهدارنده رویداد (click) جایگزین کنیم. می توانید از گزینه Find & Replace استفاده کنید یا فقط از میانبر ویرایشگر خود برای انتخاب همه موارد استفاده کنید (در کد VS برای ویندوز ، Ctrl + Shift + L است).
در مرحله بعد ، تمام وقایع data-ng-show را با * ngIf جایگزین کنید. در واقع هیچ معادل مستقیمی برای ng-show در Angular وجود ندارد ، اما این مورد خوبی است. بهتر است از * ngIf استفاده کنید ، زیرا به این ترتیب شما به جای مخفی کردن و نشان دادن آنها ، در واقع عناصر را از DOM اضافه و حذف می کنید. بنابراین ، تمام کاری که ما باید انجام دهیم این است که داده های -ng-show خود را پیدا کرده و با * ngIf جایگزین کنیم.
در آخر ، باید دو کار انجام دهیم تا بدنه جدول خود را درست کنیم. ابتدا data-ng-repeat را با *ngFor=”let order of orders” جایگزین کنید. توجه داشته باشید که ما در حال حذف فیلترهای orderBy و filter در آن خط هستیم تا کل مسیر به صورت زیر باشد:
<tr *ngFor=”let order of orders”>
Copy

دوما ، می توانیم پیشوند data-ng را قبل از لینک href به مسیر جزئیات سفارش حذف کنیم. همچنان AngularJS مسیریابی را در اینجا انجام می دهد ، اما ما دیگر نیازی به استفاده از این پیشوند نداریم زیرا اکنون این یک الگوی زاویه ای است.
اگر دوباره به برنامه نگاه کنیم ، می بینید که سفارشات به طور صحیح در صفحه لود می شوند:

البته چند اشکال وجود دارد. پیوندهای مرتب شده دیگر کار نمی کنند و اکنون currency ما (متغیر 8 بایتی) به نوعی مشکل دار است زیرا لوله currency (ارزی) در Angular کمی متفاوت از مشابه اش یعنی AngularJS میباشد. به آن هم خواهیم رسید. در حال حاضر ، این یک نشانه فوق العاده است ، زیرا بدان معنی است که داده های ما با مؤلفه سازگار شده اند و در صفحه لود می شوند.
بنابراین اصول اولیه این الگو را به Angular تبدیل کرده ایم. اکنون آماده هستیم تا مرتب سازی و فیلتر کردن را انجام دهیم!
مرحله 3 – افزودن مرتب سازی
سفارشات ما در صفحه لود می شوند ، اما هنوز روش سفارش و مرتب سازی آنها را نداریم. در AngularJS ، استفاده از فیلتر داخلی orderBy برای مرتب سازی داده ها در صفحه بسیار معمول بود. Angular دیگر فیلتر OrderBy ندارد. دلیل این امر آن است که اکنون به شدت توصیه میشود که آن نوع منطق کسب و کار را به جای داشتن آن در تمپلیت ، به مؤلفه تغییر دهید. بنابراین ، این کاری است که ما در اینجا می خواهیم انجام دهیم. (توجه: ما در اینجا می خواهیم از توابع و رویدادهای ساده قدیمی استفاده کنیم نه یک رویکرد شکلی واکنشی. این به این دلیل است که ما فقط سعی داریم مراحل اولیه را برای درک این موارد بگذرانیم. هنگامی که این مقدمات را پشت سر گذاشتید، به راحتی میتوانید با مشاهدات دیگر پیش بروید).
مرتب سازی در مولفه
ما در حال حاضر فیلتر orderBy را پس از تغییر آن به * ngFor از ng-repeat حذف کردیم. اکنون می خواهیم یک تابع مرتب سازی بر روی مؤلفه سفارشات ایجاد کنیم. می توانیم از رویدادهای کلیک در هدرهای جدول استفاده کنیم تا آن عملکرد را فراخوانی کنیم و در قسمتی که می خواهیم مرتب سازی کنیم ، اعمال نماییم. همچنین می خواهیم این عملکرد را بین صعود و نزولی در نوسان قرار دهیم.
بیایید مؤلفه سفارشات را باز کنیم (./orders/orders.component.ts) و دو ویژگی عمومی را به آن کلاس اضافه کنیم. اینها با دو ویژگی که الگوی ما از قبل ارجاع داده است مطابقت خواهند داشت. اولین مورد sortType از نوع رشته خواهد بود. مورد دوم sortReverse از نوع boolean خواهد بود و مقدار پیش فرض را false قرار می دهیم. خاصیت sortReverse فقط به این نکته توجه می کند که آیا ترتیب رعایت شده یا نه – روی آن به عنوان معادلی برای صعود یا نزول حساب نکنید.
بنابراین اکنون باید این مورد را بعد از اعلام عنوان در کلاس داشته باشید:
sortType: string;
sortReverse: boolean = false;

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade