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

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

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

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

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

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

@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