https://virgool.ir/feed/@shayan.davoodiشایان، یک فروند برنامه نویسfa2026-11-12 04:18:28https://virgool.ir/images/default-avatar.jpghttps://virgool.ir/@shayan.davoodihttps://virgool.ir/@shayan.davoodi/معرفی-5-کتابخانه-مفید-انگولار-که-احتمالا-دوست-دارید-در-پروژه-بعدی-استفاده-کنید-znnfonyy1plwDragulaوقتی یک دراکولا بخواد یه چیزی رو Drag کنه احتمالا خیلی راحت این کار رو انجام میده اینجاست که کتابخونه Dragula وارد میشه و به شما کمک میکنه به راحتی عمل Drag Drop را روی پروژه خودتون داشته باشید. این کتابخونه ویژگی های خوبی مثل داشتن ایونت های مناسب قابلیت شخصی سازی رو در اختیارتون میذاره. پیشنهاد میکنم یه سر به صفحه github پروژه بزنید.https://github.com/valor-software/ng2-dragula2. Zorro-antdیک مجموعه خوب از کامپوننت های انگولار شامل دکمه ها فرم ها و خیلی چیزهای دیگه که احتمالا توی ساخت پروژه کلی کمکتون میکنه.https://github.com/NG-ZORRO/ng-zorro-antd3.pdf-viewerشاید تا حالا براتون پیش اومده باشه که خواسته باشید محتوای pdf رو کنار بقیه محتوای صفحه ی وبتون نشون بدید با این کتابخونه به راحتی میتونید یک صفحه pdf مابین صفحه ی خودتون داشته باشید.https://github.com/VadimDez/ng2-pdf-viewer4.Echartsنمایش اطلاعات روی یک نمودار خوب امروزه نیاز هر وبسایتیه یکی از بهترین کتابخون ها برای این کار این کتابخونس. با داکیومنت خوب و ویژگی های مناسب مثل قابلیت real-time data updates میتونه کلی کارتون را راحت بکنه.5.Maskهمین طور که از اسمش پیداش این کتابخونه میتونه یک ماسک روی input های ما ایجاد کنه. اگر میخوای یک ورودی داشته باشید با یک فرمت خاص یا یک اعتبار سنجی خاص میتونید رو این کتابخونه حساب باز کنید.<input mask="000.000.000-00||00.000.000/0000-00" />https://github.com/JsDaddy/ngx-maskخب اینم از این. امیدوارم این کتابخونه ها بتونه تو مسیر ساخت پروژتون بهتون کمک کنه. اگر کتابخونه مفیدی هم شما میشناسید خوشحال میشم باهام به اشتراک بذارید.من رو در ویرگول دنبال کنید هر هفته سعی میکنم یک مطلب در مورد انگولار باهاتون به اشتراک بذارم. shayan davodishayan davodiFri, 03 Feb 2023 10:31:31 +0330https://virgool.ir/@shayan.davoodi/راهنمای-ngif-در-انگولار-hmk6pybtoytcدر این مقاله قصد داریم نکات مربوط به ngIf و ویژگی های آن را بررسی کنیم سرفصل های این مقاله به صورت زیر است:منظور از ngIf چیست؟چگونه ngIf المان ها را مخفی میکند ؟چه عباراتی برای ngIf قابل قبول است؟سینتکس ngIf elseسینتکس ngIf if then elseاستفاده از ngIf برای دیتای observable با استفاده از async pipeمنظور از ngIf چیست؟در اصل ngIf یک Directive است که یک عبارت دریافت میکند و با توجه به درست بودن یا اشتباه بودن آن عبارت، تصمیم میگرد که المان مربوط باید نمایش داده شود یا خیر، به مثال زیر توجه کنید<div class="container" *ngIf="userLoggedIn"> . یک متن که فقط به کاربرانی که وارد سیستم شده است نشان داده میشود <button *ngIf="user.admin">حذف کاربر</button> </div>در این مثال div فقط به کسانی نمایش داده میشود که وارد سایت شده اند و همچنین دکمه حذف کاربر تنها به ادمین نمایش داده میشود.در اینجا میتوان به یک نکته اشاره کرد که اگر بخواهیم ngIf را به قسمتی تخصیص دهیم ولی یک نگه دارنده مختص به آن قسمت وجود نداشته باشد چه کاری میتوان انجام داد؟ برای این کار میتوانیم از ng-container استفاده کرد بدون اینکه هیج المان اضافی در خروجی نهایی ساخته شود.<ng-container *ngIf="userLoggedIn"> . یک متن که فقط به کاربرانی که وارد سیستم شده است نشان داده میشود </ng-container>چگونه ngIf المان ها را مخفی میکند ؟شما میتوانید با استفاده از javascript یک المان را توسط css به وسیله Display مخفی کنید ولی این کاری نیست که ngIf در عمل انجام میدهد. المان های مخفی شده توسط ngIf به هیچ عنوان در خروجی نهایی به کاربر نشان داده نمیشوند یعنی اگر توسط Devtools کدهای صفحه را مشاهده کنید متوجه میشوید المان در آن وجود ندارد. تنها نشانه از آن المان یک کامنت HTML است که متوجه شوید المان در کجای صفحه قرار داشته است:<!--bindings={ "ng-reflect-ng-if": "false" }-->چه عباراتی برای ngIf قابل قبول است؟به عنوان ورودی به ngIf علاوه بر یک مقدار Boolean میتوانیم یک رشته، عدد، آرایه، آبجکت و هر عبارتی که در typescript مورد قبول است را قرار دهیم در زیر چند مثال از این موارد را میبینیم:<div class="container" *ngIf="10"> این عبارت نمایش داده میشود </div> <div class="container" *ngIf="0"> این عبارت نمایش داده نمیشود </div> <div class="container" *ngIf="'hello world'"> این عبارت نمایش داده میشود </div> <div class="container" *ngIf="''"> این عبارت نمایش داده نمیشود </div> <div class="container" *ngIf="{hello: 'world'}"> این عبارت نمایش داده میشود </div> <div class="container" *ngIf="{}"> این عبارت نمایش داده میشود </div> <div class="container" *ngIf="[1, 2 ,3]"> این عبارت نمایش داده میشود </div> <div class="container" *ngIf="[]"> این عبارت نمایش داده میشود </div> سینتکس ngIf elseاگر قرار باشما از یک if در ساختار HTML استفاده کنیم پس منطقا باید توانایی استفاده از else را هم داشته باشیم به مثال زیر توجه کنید:<div class="container" *ngIf="courses.length; else noCourses"> <h1>تمام درس ها</h1> .... </div> <ng-template #noCourses> <h1>هیچ درسی ندارید</h1> </ng-template>اگر مقدار courses.length مقدار بزرگتر از 0 باشد ngIf این مقدار را درست تشخیص داده و container مربوط به آن را نمایش میدهد در غیر این صورت به عبارت else نگاه میکند تا ببیند چه selector ای برای آن انتخاب شده سپس قسمتی که با این selector مشخص شده است را نمایش میدهد.سینتکس ngIf if then elseبه مثال زیر توجه کنید:<ng-container *ngIf="courses.length; then coursesList; else noCourses"> </ng-container> <ng-template #coursesList> <h1>All courses available</h1> .... </ng-template> <ng-template #noCourses> <h1>No courses available.</h1> </ng-template>در این مثال ngIf در بالا تعریف شده و قسمت هایی که با توجه به درست یا غلط بودن آن باید نشان داده میشود در یک بخش جدا است. در این حالت پس از بررسی شرط ngIf در صورت درستی به selector بعد then نگاه میکند و آن را نمایش میدهد در غیر این صورت به selector بعد else نگاه کرده و آن را نمایش میدهد.بر خلاف javascript دستور ngIf از else if پشتیبانی نمیکند اما برای عبارت های چند شرطی میتوان از ngSwitch استفاده کرد.استفاده از ngIf برای دیتای observable با استفاده از async pipeدر یک پروژه انگولار معمولا پیش میایید که شما یک observable دارید که میخواهید اطلاعات را از آن بخوانید.به مثال زیر توجه کنید:<ng-container *ngIf="(courses$ | async) as courses"> <div class="courses"> {{courses.length}} </div> </ng-container>با استفاده از async pipe میتوانید observable خود را subscribe کنید هر وقت که از سمت سورس observable مقداری ارسال شد بخش مربوط به آن نمایش داده میشود و شما با استفاده از کلیدواژه as میتوانید به مقدار آن دسترسی داشته باشید.از اینکه تا اینجا با من همراه بودید از شما ممنونم این مقاله برگردان قسمتی از مقاله Angular ngIf: Complete Guide بود.shayan davodishayan davodiSun, 16 Oct 2022 18:10:57 +0330https://virgool.ir/@shayan.davoodi/ویژگی-های-جدید-انگولار-teaof6sy1y6jاینجا میخوایم یه نگاهی بکنیم به ویژگی های جدید و باحال انگولار که شاید از زیر دستمون در رفته باشه. افزودن Title دلخواه برای صفحهقدیما برای اینکه به هرکدوم از صفحات یک Title بدیم یا باید داخل اون صفحه سرویس Title رو فراخونی میکردیم و بهش مقدار میدادیم یا باید به صورت زیر عمل میکردیم:const routes: Routes = [{ path: '', component: AppComponent, data: { title: 'Title' }}]در ادامه هم باید این مقدار رو هنگام Routing میخوندیم و با مقدار Title جایگزین میکردیم، خلاصه داستانی بود برای خودش ولی از نسخه 14 به بعد Title رو میشه مستقیم مقدار دهی کرد:const appRoutes: Routes = [ { component:AppComponent, path:'', title:'New Title' }]بهینه سازی عکس هایک directive جدید با نام NgOptimizedImage که باعث افزایش سرعت بارگذاری صفحه با بهبود سرعت بارگذاری عکس ها میشه.import { NgOptimizedImage } from '@angular/common'; @NgModule({ ... imports: [NgOptimizedImage] })class AppModule {}و در ادامه کافیه به جای src از ngSrc استفاده کنیم:<img ngSrc="logo.png" width="200" height="100">برای درک بهتر موضوع میتونید مستندات فنی این بخش رو اینجا ببینید.standalone componentاین ویژگی که فعلا به صورت آزمایشی داخل انگولار 14 قرار شده میشه گفت باحالترین ویژگی جدید انگولار هستش. اگه شما یک کامپوننت سبک داشته باشید که وابستگی های زیادی نداره و میخوایید اون رو به صورت مستقل از ماژول تعریف کنید standalone component اینجاست تا به شما کمک کنه. کافیه به صورت زیر عمل کنید:@Component({ standalone: true, selector: 'photo-gallery', imports: [AnotherComponent], template: ` <h1>My first standalone component, yeaaah!</h1> <another-component></another-component> `, }) export class MyComponent { ... }این یک راه حل عالی برای کاهش فایل های برنامه و خوانایی بهتره کد هاتونه.خب از اونجایی که صحبت هایی در مورد انگولار 15 هستش و یک سری ویژگی های باحال براش معرفی شده میخوام به یک مورد اشاره کنم که داخل لینکدین آقای Minko Gechev به اشتراک گذاشته شده.پیغام های کاربر پسند برای رفع خطا مطمئن باشید این ویژگی خیلی باحال تر از این اسمیه که من این بالا نوشتم. با این ویژگی شما میتونید به سرعت مشکل کد خودتونو پیدا کنید. به نظر میرسه این ویژگی برای Chrome devTools قابل دسترس باشه. نحوه نمایش خطاها در نسخه جدید مرسی که تا اینجا با من همراه بودید. این مقاله یک برگردان از مقاله Top New Features in Angular بود.shayan davodishayan davodiMon, 10 Oct 2022 21:59:49 +0330