Micro-frontent Architecture-folder structure.jpeg
1.2 MB
برای ساخت پروژه Micro-Frontend بخوایم یه ساختار خوب و اصولی داشته باشیم این نمونه بسیار خوبی هست که میشه ازش ایده گرفت
#micro_frontend
#angular
@angularcafe
#micro_frontend
#angular
@angularcafe
👍4
برای استفاده اصولی و بهینه از Angular signal بهتره راه اصولی و ابزار های درست رو استفاده کنیم تا performance بهتر و memory leak پایین تری داشته باشم
این اینفوگرافیک بصورت خیلی ساده نشون میده که برای هر بخش از پروژه بهتره از چه ابزاری استفاده کنیم
#angularsignal
#statemanagement
@angularcafe
این اینفوگرافیک بصورت خیلی ساده نشون میده که برای هر بخش از پروژه بهتره از چه ابزاری استفاده کنیم
#angularsignal
#statemanagement
@angularcafe
👍2
تفاوت computed و linkedsignal خیلی ساده است
خیلی خودمونی بخوام بگم مثل این میمونه:
توضیح computed مثل نمایش درصد شارژ باتری موبایل میمونه
توضیح linkedSignal مثل نمایش دمای کولر ماشین که زده ۲۴ بر اساس سنسور های ماشین ولی شما میتونین بذاریدش رو ۲۰
در واقع computed یک محاسبه کننده read-only هست
و linkedSignal یک پیشنهاد کننده ولی قابل دستکاری هست
#angularsignal
#angular
@angularcafe
خیلی خودمونی بخوام بگم مثل این میمونه:
توضیح computed مثل نمایش درصد شارژ باتری موبایل میمونه
توضیح linkedSignal مثل نمایش دمای کولر ماشین که زده ۲۴ بر اساس سنسور های ماشین ولی شما میتونین بذاریدش رو ۲۰
در واقع computed یک محاسبه کننده read-only هست
و linkedSignal یک پیشنهاد کننده ولی قابل دستکاری هست
#angularsignal
#angular
@angularcafe
👍2
Angular-signal-forms.pdf
2.2 MB
کتاب رایگان Angular signal form از مجموعه Angular love رو استفاده کنید برای افزایش دانش تون خیلی بدرد میخوره
#ebook
#angularsignal
#angular
@angularcafe
#ebook
#angularsignal
#angular
@angularcafe
👍2
https://github.com/omidkh68/material-tailwind-range-date-picker
این یه پروژه کوچیک Material range datepicker هست که با signal مزین شده و یه سری offset داره و timepicker
#angularsignal
#angular
@angularcafe
این یه پروژه کوچیک Material range datepicker هست که با signal مزین شده و یه سری offset داره و timepicker
#angularsignal
#angular
@angularcafe
GitHub
GitHub - omidkh68/material-tailwind-range-date-picker: A customizable Date Range Picker built with Angular 20, Angular Material…
A customizable Date Range Picker built with Angular 20, Angular Material, and Tailwind CSS v4, supporting two-way binding, date-time offsets, and a clean Dark/Light modern UI. - omidkh68/material-t...
👍2
یکی از علایق شدیدم تو پنل ها استفاده از Chart های قشنگ و کاربردیه که چشم هر کارفرمایی رو پر میکنه
یه نمونه signal based با plotyjs زدم که نمونه خوبی شده
البته کتابخونه خیلی قوی نیست ولی بازم چارت های به نسبت خوبی داره
https://github.com/omidkh68/angular-21-plotyjs
#angularchart
#angularsignal
#angular
@angularcafe
یه نمونه signal based با plotyjs زدم که نمونه خوبی شده
البته کتابخونه خیلی قوی نیست ولی بازم چارت های به نسبت خوبی داره
https://github.com/omidkh68/angular-21-plotyjs
#angularchart
#angularsignal
#angular
@angularcafe
omidkh68.github.io
Angular 21 - Plotyjs
Angular 21 - PlotyJS example
👍2
https://www.ngdiagram.dev/
یکی از بهترین ابزار های انگولار برای ساخت Diagram همین ngDiagram هست
کاربردی و native و سبک
#angulartools
#angular
@angularcafe
یکی از بهترین ابزار های انگولار برای ساخت Diagram همین ngDiagram هست
کاربردی و native و سبک
#angulartools
#angular
@angularcafe
www.ngdiagram.dev
NgDiagram — Native Diagramming for Angular Apps
NgDiagram lets you build interactive, DOM-based diagrams directly in Angular. Native, flexible, and extensible — with minimal boilerplate.
❤1👍1
https://www.angular.courses/caniuse/features
این سایت کمک میکنه بهمون که هر کدوم از feature هایی که تو نسخه های مختلف Angular میاد چه وضعیتی دارن از لحاظ Stability و مورد استفاده بودنش رو مشخص میکنه
#angularfeatures
#angular
@angularcafe
این سایت کمک میکنه بهمون که هر کدوم از feature هایی که تو نسخه های مختلف Angular میاد چه وضعیتی دارن از لحاظ Stability و مورد استفاده بودنش رو مشخص میکنه
#angularfeatures
#angular
@angularcafe
Angular Courses
Angular Features Compatibility - Can I Use Angular Features
Explore Angular features and their compatibility across versions. Find out which Angular features are available in different versions.
❤1👍1
image_2026-02-15_17-24-58.png
72.6 KB
https://tanstack.com/query/v5
به GPT گفتم در مورد TanStack و کاربرد هاش در Angular و مقایسه feature هاش در برابر feature های native در Angular یه سری جدول بده و امتیاز بندی کنه که نتیجه اش در عکس ها گذاشته شده
چیزی که GPT نتیجه گیری کرد جالب بود که نیازی به استفاده اش نیست بیشتر باید ازش ایده گرفت و براساس سبک و نوع پروژه میشه ازش استفاده کرد یا نکرد
#tanstack
#angulartanstack
#angular
@angularcafe
به GPT گفتم در مورد TanStack و کاربرد هاش در Angular و مقایسه feature هاش در برابر feature های native در Angular یه سری جدول بده و امتیاز بندی کنه که نتیجه اش در عکس ها گذاشته شده
چیزی که GPT نتیجه گیری کرد جالب بود که نیازی به استفاده اش نیست بیشتر باید ازش ایده گرفت و براساس سبک و نوع پروژه میشه ازش استفاده کرد یا نکرد
#tanstack
#angulartanstack
#angular
@angularcafe
❤1👍1
یه بار برای همیشه با کدهای اضافی موقع submit فرم توی Angular Signal Forms خداحافظی کنیم
قابلیت signal form که اضافه شد خیلی خفن و قوی بود مثل مدل قبلی نبود که درگیر ماژول و چیزای دیگه بشیم ولی هنوز خوب پخته نشده بود و یه سری کارا رو باید دستی مدیریت میکردیم مثل novalidate کردن برای غیر فعال کردن validation دستی خود browser ها
یا جلوگیری از reload شدن صفحه با (submit)
حالا تو نسخه بعدی که قراره نسخه 21.2 باشه یه directive اضافه دارن میکنن که به خود form اضافه میشه
این Directive هم خودش از novalidate پشتیبانی میکنه و جلوی اعتبار سنجی پیشفرض مرورگر رو میگیره
هم جلوی reload شدن صفحه رو میگیره
هم submit رو هندل میکنه
البته این قابلیت فعلا بصورت Experimental اضافه میشه تا تثبیت بشه و به برنچ اصلی مرج بشه
لینک commit:
https://github.com/angular/angular/commit/ba009b6031
#signalform
#angularsignal
#angular
@angularcafe
قابلیت signal form که اضافه شد خیلی خفن و قوی بود مثل مدل قبلی نبود که درگیر ماژول و چیزای دیگه بشیم ولی هنوز خوب پخته نشده بود و یه سری کارا رو باید دستی مدیریت میکردیم مثل novalidate کردن برای غیر فعال کردن validation دستی خود browser ها
یا جلوگیری از reload شدن صفحه با (submit)
حالا تو نسخه بعدی که قراره نسخه 21.2 باشه یه directive اضافه دارن میکنن که به خود form اضافه میشه
<form [formRoot]="loginForm">
این Directive هم خودش از novalidate پشتیبانی میکنه و جلوی اعتبار سنجی پیشفرض مرورگر رو میگیره
هم جلوی reload شدن صفحه رو میگیره
هم submit رو هندل میکنه
البته این قابلیت فعلا بصورت Experimental اضافه میشه تا تثبیت بشه و به برنچ اصلی مرج بشه
لینک commit:
https://github.com/angular/angular/commit/ba009b6031
#signalform
#angularsignal
#angular
@angularcafe
GitHub
feat(forms): add form directive · angular/angular@ba009b6
Adds a `formRoot` directive to manage submitting the form in signal
forms.
forms.
❤1
یه اینفوگرافی از Lifecycle های انگولار و ترتیب اجرا شدن هر کدوم شون
hookهای مهمی که هر برنامهنویس Angular باید مسلط باشه
* ngOnChanges() : وقتی مقدارهای @Input عوض میشن، اینجا میتونی واکنش نشون بدی
* ngOnInit() : جای درست برای راهاندازی منطق اولیهی کامپوننت
* ngDoCheck() : برای وقتی که میخوای Change Detection سفارشی/خاص خودت رو پیاده کنی
* ngAfterViewInit() : بهترین و امنترین زمان برای دسترسی به @ViewChild
* ngOnDestroy() : برای جمعکردن همهچی و جلوگیری از memory leak
چرا lifecycle hookها مهمن؟
چون باعث میشن:
* performance بهتر بشه
* معماری تمیزتر و قابلمدیریتتر داشته باشی
* memory leak اتفاق نیفته
#angular
@angularcafe
hookهای مهمی که هر برنامهنویس Angular باید مسلط باشه
* ngOnChanges() : وقتی مقدارهای @Input عوض میشن، اینجا میتونی واکنش نشون بدی
* ngOnInit() : جای درست برای راهاندازی منطق اولیهی کامپوننت
* ngDoCheck() : برای وقتی که میخوای Change Detection سفارشی/خاص خودت رو پیاده کنی
* ngAfterViewInit() : بهترین و امنترین زمان برای دسترسی به @ViewChild
* ngOnDestroy() : برای جمعکردن همهچی و جلوگیری از memory leak
چرا lifecycle hookها مهمن؟
چون باعث میشن:
* performance بهتر بشه
* معماری تمیزتر و قابلمدیریتتر داشته باشی
* memory leak اتفاق نیفته
#angular
@angularcafe
❤1👍1