چاپ دوم کتاب آموزش جامع انگولار، که نسخه به روز شده به آخرین ورژن فریم ورک انگولار می باشد،
با عنوان "آموزش جامع انگولار (نسخه۷)" به چاپ رسیده است،
و به زودی از فروشگاه های معتبر قابل تهیه می باشد

با توجه به افزایش نرخ چاپ، قیمت چاپ جدید کتاب طبق نظر انتشارات، ۳۲۰۰۰ تومان می باشد

جهت خرید چاپ جدید کتاب میتوانید به ادمین کانال انتشارات ناقوس به آدرس

@naghoospress
پیام دهید

همچنین کتابفروشی یکتا به آدرس ذیل کتاب را به صورت اینترنتی عرضه می کند

حتما قبل از خرید در مورد چاپ اول یا دوم بودن کتاب سوال کنید

https://yektabook.com/product/28363/آموزش-جامع-انگولار

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

https://sourcesara.com/angular-tutorial-book/

https://rayabook.net/bookid/31901

https://arvin-bookstore.com/خرید-کتاب-های-کامپیوتر-فناوری-اطلاعات/21032-آموزش-جامع-انگولار.html

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

آگهی های قرارداده شده در کانال جنبه تبلیغاتی ندارند، و صرفا جهت کمک به اشتغال اعضا با نشرشان موافقت به عمل آمده است...
بنابراین کانال انگولار مسئولیتی در رابطه با آگهی هایی از این دست ندارد...

به دلیل سوال مکرر در مورد گروه تلگرامی مرتبط با انگولار، لینک این گروه را به صورت عمومی قرار می دهیم.
این گروه هیچ وابستگی ای به این کانال ندارد.

https://kutt.it/ng-group

استخدام «گرافیست و برنامه نویس فرانت اند» مرد مسلط به:
✅ HTML
✅ CSS
✅ Javanoscript
✅ Angular 2+

ارسال رزومه به @mostafalavaei

#موقعیت_شغلی

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

اگه با مفاهیمی مثل #Symbol، #Reflect و #Proxy توی جاوااسکریپت آشنایی ندارید، سه گانه زیر رو حتما بخونید:

https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols

https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-2-reflect

https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies

#ES6 #Javanoscript

شاید هرکسی که یکم انگولار کار کرده باشه بلد باشه دایرکتیو بنویسه، اما خیلی ها نمی دونن ما ۳ نوع دایرکتیو داریم:

1. Component:
کامپوننت ها دایرکتیوهایی هستن که Template دارن

2. Attribute Directive:
دایرکتیوهایی که تغییراتی روی یه المان می دن (دایرکتیو هایی که نوشتید احتمالا از این نوع بودن)

3. Structural Directive:
دایرکتیوهایی که باعث حذف/اضافه شدن المان از/به DOM می شن. (مثال *ngIf و *ngFor).
اگه می خواید بدونید چطوری می تونید یه Structural Directive بنویسید لینک های زیر رو ببینید:

https://medium.com/@adrianfaciu/creating-structural-directives-in-angular-ff17211c7b28

https://angular.io/guide/structural-directives

#Angular #Directive

وقتی یه وب اپلیکیشن می نویسید، خیلی مهمه که وب اپلیکیشنتون چقدر طول می کشه تا لود بشه. حتما تا حالا توصیه های زیادی شنیدید که همشون به جای خودشون مفیدن. ولی توی این پست روش آسون، پر تاثیر و کمتر توجه شده ای رو می خوام بگم.
بیشتر وب سرورها (Apache ، Nginx و ...) به طور پیش فرض از نسخه قدیمی HTTP استفاده می کنن(نسخه ۱.۱)، اما اخیرا HTTP 2 معرفی شده که پرفورمنس بالاتری نسبت به نسخه قدیمی تر خودش داره. آزمایش ها نشون می ده که HTTP 2 نسبت به HTTP 1.1 بدون هیچ تنظیمات خاصی حدود ۱۴% سریعتره:

https://link.medium.com/ZgfTN6bof0

علاوه بر این، HTTP 2 امکانی به اسم Server Push داره که با استفاده از اون، وقتی مثلا فایل index.html از سرور خواسته می شه، فایل های استایل، جاوااسکریپت و ... ای که index.html نیاز داره رو بدون این که براوزر درخواستی بفرسته، برای کلاینت می فرسته. این امکان اگه درست استفاده بشه به شدت می تونه روی سرعت لود صفحه تاثیر بذاره.
در آخر از اونجا که HTTP 2 فقط با رمزنگاری قوی توسط براوزر ها ساپورت می شه، پیشنهاد می شه که از TLS 1.3 استفاده کنید که سرعت و امنیت بیشتری نسبت به TLS 1.2 داره

#HTTP2 #Performance

شما نمی تونید از یه ابزار به خوبی استفاده کنید وقتی نمی دونید اون ابزار چطوری کار می کنه. خیلی از ما ها با انگولار کار می کنیم ولی از ساختار داخلی انگولار خبر نداریم، این باعث می شه که توی خیلی مسائل گیر بکنیم یا با یه روش غیر حرفه ای و غیر بهینه مساله رو حل کنیم. این پست در مورد قلب انگولار یعنی مکانیزم Change Detectionه.
تا حالا فکر کردید انگولار از کجا می فهمه وقتی یه متغیر مقدارش تغییر می کنه باید یه قسمت از صفحه رو تغییر بده؟ این هوشمندی از کجا میاد؟ آیا دائما DOM داره آپدیت می شه؟ اصلا خطای مشهور Expresion Change واسه چیه و چطوری حل می شه؟ وب اپلیکیشنتون بزرگ شده و به مشکل پرفورمنس بر خوردید؟
لینک زیر و لینک های داخل متن رو مطالعه کنید تا جواب سوالای بالا و کلی اطلاعات مفید دیگه کسب کنید:

#Angular #ChangeDetection

https://link.medium.com/3aUmKZ51g0

توی سایت زیر می تونید کدهای جاوااسکریپت رو از نظر پرفورمنس با هم مقایسه کنید و در صورتی که بخواید نتیجش رو با دیگران به اشتراک بذارید:

https://jsperf.com

این سایت داره از یه پکیج به اسم benchmark.js استفاده می کنه. اگه ترجیح می دید می تونید مستقیما از این پکیج تو پروژتون استفاده کنید.

#Javanoscript #Performance

احتمالا شما هم مثل بیشتر انگولار کار ها از دکوریتور @Input برای تعریف ورودی کامپوننت استفاده می کنید، اما همونطور که توی پست مربوط به مکانیزم Change Detection گفته شد، با این کار توی هر چرخه کاری انگولار، مقدار فعلی ورودی با مقدار قبلی ورودی مقایسه می شه. وقتی حجم پروژه زیاد بشه، تعداد این مقایسه ها زیاد می شه و پرفورمنس افت می کنه.
خیلی وقت ها ورودی یه کامپوننت فقط در زمان لود شدن کامپوننت قراره پر بشه و در طول حیات کامپوننت قرار نیست تغییر کنه، در اینجور مواقع به جای دکوریتور @Input می تونید از دکوریتور @Attribute استفاده کنید که دچار افت پرفورمنس نشید.
توی مقاله زیر می تونید در این باره بیشتر مطالعه کنید:

#Angular #Performance #ChangeDetection

https://link.medium.com/5NCYMMK4j0

امروز می خوام یه پکیج کوچیک ولی خیلی کاربردی معرفی کنم، ولی قبلش نیازه یه مقدمه بگم.
اگه با انگولار کار کرده باشید می دونید که انگولار به شدت به rxjs وابستست، از الگوریتمهای داخلی تا output ها تا ریکوئست های AJAX و ... . پس کار با rxjs جزء جدا نشدنی یه اپلیکیشن انگولاریه. اگه استفادتون از rxjs محدود به output و ریکوئست های AJAX می شه، بدونید که تا حالا از دنیای rxjs غافل بودید و نیاز دارید که قبل از خوندن ادامه این مطلب، در مورد rxjs مطالعه کنید.
همونطور که احتمالا می دونید، بسیاری از Observable ها بر خلاف ریکوئست های AJAX بعد از اولین event به طور خودکار unsubscribe نمی شن و تا وقتی که شما اونها رو unsubscribe نکنید به event های جدید واکنش نشون می دن. نمونه معروف این قضیه output های یه کامپوننته که تا وقتی که کامپوننت در قید حیاته، در صورت emit شدن یه مقدار، کامپوننت والد با خبر می شه. در واقع انگولار هنگام از بین رفتن کامپوننت فرزند، تابع unsubscribe رو صدا می زنه. اما انگولار این کار رو فقط در مورد output ها انجام می ده و در صورتی که شما یک subject داشته باشید و اونو subscribe کنید، حتی بعد از مرگ کامپوننت همچنان نسبت به event های اون subject واکنش نشون داده می شه. این قضیه هم باعث افت پرفورمنس و هم اختلال توی اپلیکیشن می شه. یه نمونه ساده رو می تونید توی این لینک ببینید:
https://link.medium.com/ZJcz4B83l0

روشی که توی لینک بالا برای حل موضوع گفته شد خوبه، ولی اگه توی هر کامپوننت بخواید تکرارش کنید، کدها رو کثیف و نا خوانا می کنه. اگه با من موافقید، می تونید از پکیج زیر استفاده کنید:

https://www.npmjs.com/package/ngx-take-until-destroy


#Performance #rxjs

توی آموزش های انگولار، دایرکتیو ها رو معمولا به عنوان Attribute تعریف می کنن. مثلا سلکتور مربوط به دایرکتیو tooltip رو به صورت [tooltip] تعریف می کنن. اما این تمام قضیه نیست! خیلی وقت ها شما به دایرکتیوهای خلاقانه تری نیاز دارید! مثلا می خواید که همه لینک های اکسترنال (لینک به خارج وب اپلیکیشن) توی تب جدید باز بشه. راه اول اینه که روی همه تگ های a، عبارت target="_blank" رو اضافه کنیم. توی این روش علاوه بر زحمت زیاد، باید همیشه حواستون باشه که این عبارت رو روی لینک های اکسترنال قرار بدید (و اگه فراموش کنید باگ به وجود اومده). راه حل بهتر اینه که یه دایرکتیو بنویسید که روی همه تگ های a اعمال بشه:


@Directive(
{ selector: 'a:not([routerLink])'}
)
export class ExternalLinkDirective
{
@HostBinding('target')
@Input() target = '_blank';
}

با این روش هم توی کد نویسی صرفه جویی کردید و هم جلوی اشتباه خودتون یا همکارتون رو گرفتید.
شما می تونید سلکتورهای خلاقانه تری بنویسید، فقط کافیه از این به بعد اینو گوشه ذهنتون داشته باشید که دایرکتیوها همیشه به صورت Attribute نیستن.

#Angular #Directive

* به دلیل محدودیت تلگرام، در تمامی کدها به جای کاراکتر بک تیک، از تیک استفاده شده است، لذا در هنگام کپی/پیست کردن آن دقت کنید

یکی از چیزهایی که توی ES6 اضافه شد (و احتمالا ازش بارها استفاده کردید) تعریف رشته با کاراکتر بک تیکه. مثلا:

let name = "Mostafa";
let str = ´Hello ${name}´;
console.log(str);

کدهای فوق باعث چاپ عبارت "Hello Mostafa" توی کنسول می شه. اما موضوع این پست یه چیز دیگست!
توی این پست می خوایم در مورد این حرف بزنیم که بک تیک یه کاراکتر ساده مثل دابل کوتیشن نیست. شما می تونید فانکشنی بنویسید که از بک تیک استفاده کنه ولی کارایی دیگه ای داشته باشه. کد زیر رو ببینید:


function tagFunc(strings, ...params){

console.log(strings);
console.log(params);

return "Sample Text";
}

let num1 = 1;
let num2 = 2;

console.log(tagFunc´Hello ${num1} ${num2}´)

شاید سینتکسش براتون عجیب باشه، ولی کدها بدون خطا اجرا می شن و نتیجه لاگ ها به ترتیب به صورت زیره:

[ 'Hello ', ' ', '' ]
[ 1, 2 ]
Sample Text

اگه بخوایم از روی متغیرهای strings و params چیزیو که بک تیک معمولی بهمون می ده رو تولید کنیم باید به صورت زیر عمل کنیم:

strings[0] + params[0] + strings[1] + params[1] + strings[2]

اما ما می خوایم یه کار جالب تر بکنیم، می خوایم اعدادی که به صورت پارامتر داده شده رو ضرب در ۲ بکنیم و بعد نمایش بدیم. کد نهایی اینطوری می شه:


function tagFunc(strings, ...params){

let finalStr = strings[0];

for(let i=0; i<params.length; i++)
{
finalStr += (params[i] * 2) + strings[i+1];
}

return finalStr;
}

let num1 = 1;
let num2 = 2;

console.log(tagFunc´Hello ${num1} ${num2}´);

جالب بود نه؟

#Javanoscript #TaggedTemplateLiterals

@iranangular

حتما با دکوریتور ViewChild کار کردید و حتما می دونید از انگولار ۸ یه فلگ static اضافه شده و باید اونو پر کنید (البته ظاهرا از انگولار ۹ به بعد به طور پیش فرض مقدارش false خواهد بود و فقط اگه بخواید مقدارش رو true کنید باید ازش استفاده کنید). اما شاید ندونید این فلگ دقیقا چه کار می کنه.
توی انگولار ۲ تا ۷، متغیرهایی که با دکوریتور ViewChild تعریف می شدن از ngAfterViewInit به بعد قابل دسترس بودن و اگه توی ngOnInit ازشون استفاده می کردید مقدارشون undefined بود. دلیل این قضیه این بود که انگولار فرض می کرد هر المانی توی template (از جمله المانی که با ViewChild می خواید بهش دسترسی پیدا کنید) ممکنه مثلا به دلیل استفاده از *ngIf در شرایطی توی DOM وجود داشته باشه یا نداشته باشه، برای همین دسترسی به ViewChild رو تا اتمام کار ChangeDetection مجاز نمی دونست. اما از انگولار ۸ شما می تونید با فلگ static به انگولار بگید که آیا مقدار ViewChild به اجرای ChangeDetection وابسته هست یا خیر.
با این توضیحات باید حدس زده باشید که اگه static رو false قرار بدید کارایی مثل سابقه، ولی اگه true بذارید، محدودیت استفاده از *ngIf رو روی اون المان و همه المان های والد پذیرفتید اما در عوض توی ngOnInit بهش دسترسی دارید.

#Angular #ViewChild #ChangeDetection

مطالب بیشتر در @iranangular

State Manager - Part 1

همونطور که از عنوان پیداست قراره در مورد State Manager ها و نحوه استفادشون توی انگولار صحبت کنیم. اگه نمی دونید State Manager چیه این پست برای شماست.
توی وب اپلیکیشن های تک صفحه ای تمام اون چیزی که کاربر بهش نیاز داره یا توی صفحست یا می تونه با یه ریکوئست AJAX فراخونی بشه، اما این که وب اپلیکیشن چه چیزی نشون بده و چه کاری انجام بده به کنش کاربر وابستست. مثلا کاربر اولی که وارد می شه با صفحه لاگین مواجه می شه. در صورتی که اطلاعات کاربری رو درست وارد کنه، به جای فرم لاگین، داشبورد رو می بینه. این که چه داشبوردی رو ببینه به نوع کاربر (عادی یا ادمین) ربط داره. حالا کاربر می تونه توی داشبورد خودش روی منوهای مختلف کلیک کنه و وب اپلیکیشن با توجه به کنش کاربر، واکنش نشون بده.
توی مثالی که زده شد، بعضی از کنش های کاربر باید توی حافظه اپلیکیشن بمونه. مثلا این که کاربر لاگین شده یا نه، اگه شده نوع کاربر چیه (عادی یا ادمین) و ... . برای حل این مشکل راه های متعددی وجود داره. یکی از راه های متداول توی انگولار، تعریف یه سرویس توی بالاترین ماژول (root) و تعریف متغیر توی اون سرویسه. مثلا توی مثال بالا می تونیم توی سرویس متغیر user رو تعریف کنیم که به صورت پیش فرض مقدارش null هست ولی بعد از لاگین، اطلاعات کاربر توش ذخیره می شه. این روش برای اپلیکیشن های کوچیک بهترین روشه. ولی یه اپلیکیشن بزرگ رو تصور کنید که نیاز به نگهداری مقادیر بیشتری داره. هرچی تعداد این مقادیر بیشتر می شه، نگهداریشون (استیبل نگه داشتن، توسعه دادن و ...) سخت تر می شه. اینجاست که State Manager ها به کار میان. این که State Manager ها با چه مکانیزمی هزینه نگهداری اپلیکیشن های بزرگ رو کاهش می دن، کدومشون بهتره و چطوری توی انگولار می شه ازشون استفاده کرد رو ان شاء الله توی پست های بعدی میگم.

#Angular #StateManager #Redux #NgRx

مطالب بیشتر در @iranangular

State Manager - Part 2

توی قسمت قبل گفتیم که State Manager ها چی هستن. توی این قسمت قراره در مورد ساز و کارشون صحبت کنیم.
هسته مرکزی هر State Manager که state ها رو نگه می داره رو معمولا با نام Store می شناسن. به عبارت دیگه توی Store وضعیت فعلی سیستم ذخیره می شه. وضعیت فعلی سیستم چیزی جز یه آبجکت ساده که شما ساختارشو تعریف می کنید نیست. مثلا آبجکت زیر می تونه وضعیت یه اپلیکیشن باشه:

{
user: {id:1, type: "admin", username: foo},
}

قانون اول: شما نمی تونید مستقیما مقدار store رو تغییر بدید!
شاید اولش عجیب باشه ولی این قانون فقط برای اینه که نا خواسته state رو تغییر ندید (چون باعث بروز باگ می شه).
حتما دارید به این فکر می کنید که چجوری باید state رو تغییر داد. اینجاست که ماژول دوم و سوم State Manager یعنی Action و Reducer به کار میان.
اگه نخوایم وارد پیاده سازی های State Manager بشیم و فقط بخوایم اصول و قواعد کلی رو بگیم، باید بگم که Action هم چیزی جز یه آبجکت که خودتون ساختارش رو تعریف می کنید نیست! (توی بعضی از State Manager ها یه ساختار کلی برای Action ها در نظر گرفته شده)
اگه بخوایم یه مثال برای اکشن بزنیم، مثلا آبجکت زیر یه اکشنه:
{
type: "login",
payload: {id:1, type:"admin", username:"foo"}
}

اکشن به تنهایی هیچ تاثیری روی state اپلیکیشن نداره و تغییری ایجاد نمی کنه. برای کامل شدن پازل، نیاز به ماژول سوم یعنی reducer داریم. Reducer تابعیه که state فعلی و action اتفاق افتاده رو به عنوان ورودی می گیره و state جدید رو return می کنه. وقتی که یه اکشن اتفاق میافته، تابع reducer توسط State Manager فراخونی می شه و مقداری که return می شه به عنوان state جدید در نظر گرفته می شه.
قانون دوم: تابع reducer باید pure باشه. تابعی رو pure می گن که خروجیش فقط به ورودی هاش وابسته باشه. به عبارت دیگه فراخونی تابع با ورودی یکسان همیشه خروجی یکسانی داشته باشه. به عنوان مثال توابعی که خروجیشون به متغیرهای تعریف شده در خارج از تابع بستگی داره یا خروجیشون به توابع رندوم، تاریخ و ... بستگی داره pure نیستن.
قانون سوم: حتی تابع reducer هم به طور مستقیم نباید state رو تغییر بده! از اونجا که state فعلی به عنوان آرگومان تابع reducer داده شده، خیلی باید مواظب باشیم که مقدارش رو تغییر ندیم. مثلا تابع زیر نمی تونه reducer باشه:

function reducer(state, action){

if(action.type === "login")
{
state.user = action.payload;
}

return state;

}

ولی تابع زیر می تونه یه reducer باشه:

function reducer(state, action){

if(action.type === "login")
{
return {...state, user: action.payload};
}

return state;

}

توی قسمت بعدی ان شاء الله در مورد مزایا و معایب State Manager های مختلف می نویسم.

#Angular #StateManager #Redux #NgRx

مطالب بیشتر در @iranangular