توی آموزش های انگولار، دایرکتیو ها رو معمولا به عنوان Attribute تعریف می کنن. مثلا سلکتور مربوط به دایرکتیو tooltip رو به صورت [tooltip] تعریف می کنن. اما این تمام قضیه نیست! خیلی وقت ها شما به دایرکتیوهای خلاقانه تری نیاز دارید! مثلا می خواید که همه لینک های اکسترنال (لینک به خارج وب اپلیکیشن) توی تب جدید باز بشه. راه اول اینه که روی همه تگ های a، عبارت target="_blank" رو اضافه کنیم. توی این روش علاوه بر زحمت زیاد، باید همیشه حواستون باشه که این عبارت رو روی لینک های اکسترنال قرار بدید (و اگه فراموش کنید باگ به وجود اومده). راه حل بهتر اینه که یه دایرکتیو بنویسید که روی همه تگ های a اعمال بشه:
@Directive(
{ selector: 'a:not([routerLink])'}
)
export class ExternalLinkDirective
{
@HostBinding('target')
@Input() target = '_blank';
}
با این روش هم توی کد نویسی صرفه جویی کردید و هم جلوی اشتباه خودتون یا همکارتون رو گرفتید.
شما می تونید سلکتورهای خلاقانه تری بنویسید، فقط کافیه از این به بعد اینو گوشه ذهنتون داشته باشید که دایرکتیوها همیشه به صورت Attribute نیستن.
#Angular #Directive
@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
یکی از چیزهایی که توی 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
توی انگولار ۲ تا ۷، متغیرهایی که با دکوریتور 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 ها و نحوه استفادشون توی انگولار صحبت کنیم. اگه نمی دونید 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
توی قسمت قبل گفتیم که 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
State Manager - Part 3
حالا که فهمیدید State Manager چیه و چه کار می کنه، وقتشه که ازش تو پروژه انگولاریتون استفاده کنید. شما ۳ گزینه مطرح دارید:
۱. پکیج angular-redux: این پکیج یه wrapper برای reduxه که به شما اجازه می ده از redux توی انگولار استفاده کنید. Redux توسط فیسبوک توسعه داده می شه و محبوب ترین State Manager حال حاضره. شاید دلیل اصلی این امر پیشینه قدیمی تر و سازگاری بهتر با react باشه.
۲. پکیج ngrx: این پکیج با استفاده از امکاناتی که rxjs در اختیارمون قرار می ده یه State Manager خوب و کامل و سازگار با انگولار ارائه داده.
۳. نوشتن یک State Manager: برای پروژه های تجاری توصیه نمی شه، ولی میتونه پروژه خوبی برای یادگیری باشه.
انتخاب State Manager مثل انتخاب زبان، فریم ورک و ... تا حد زیادی به اولویت ها و حتی سلیقه ربط داره، اما اگه نظر منو بخواید، اگه پروژتون انگولاریه ngrx خیلی سازگارتر با محیط پروژه های انگولاریه و می تونه مناسب تر باشه. لینک زیر آدرس سایت و به نظر من بهترین منبع یادگیری ngrx ه:
https://ngrx.io
#Angular #StateManager #Redux #NgRx
مطالب بیشتر در @iranangular
حالا که فهمیدید State Manager چیه و چه کار می کنه، وقتشه که ازش تو پروژه انگولاریتون استفاده کنید. شما ۳ گزینه مطرح دارید:
۱. پکیج angular-redux: این پکیج یه wrapper برای reduxه که به شما اجازه می ده از redux توی انگولار استفاده کنید. Redux توسط فیسبوک توسعه داده می شه و محبوب ترین State Manager حال حاضره. شاید دلیل اصلی این امر پیشینه قدیمی تر و سازگاری بهتر با react باشه.
۲. پکیج ngrx: این پکیج با استفاده از امکاناتی که rxjs در اختیارمون قرار می ده یه State Manager خوب و کامل و سازگار با انگولار ارائه داده.
۳. نوشتن یک State Manager: برای پروژه های تجاری توصیه نمی شه، ولی میتونه پروژه خوبی برای یادگیری باشه.
انتخاب State Manager مثل انتخاب زبان، فریم ورک و ... تا حد زیادی به اولویت ها و حتی سلیقه ربط داره، اما اگه نظر منو بخواید، اگه پروژتون انگولاریه ngrx خیلی سازگارتر با محیط پروژه های انگولاریه و می تونه مناسب تر باشه. لینک زیر آدرس سایت و به نظر من بهترین منبع یادگیری ngrx ه:
https://ngrx.io
#Angular #StateManager #Redux #NgRx
مطالب بیشتر در @iranangular
پست جدیدم توی ویرگول در مورد متغیرهای Primitive و Non-Primitive رو می تونید از لینک زیر بخونید:
https://virgool.io/@mostafa.lavaei/hlw430ttcpwb
https://virgool.io/@mostafa.lavaei/hlw430ttcpwb
ویرگول
Primitive vs Non-Primitive
توی جاوااسکریپت متغیرها بر اساس تایپشون به دو دسته تقسیم می شن: Primitive و Non-Primitive. شاید بگید مگه جاوااسکریپت تایپ داره؟ بله متغیرها…
یکی از دوستان سایت خوبی تو زمینه آموزش زده، گفتم با شما به اشتراک بذارم. این لینک مربوط به بخش لاراول سایته:
https://jobteam.ir/category/Laravel
خوشحال می شم ازش بازدید کنید.
https://jobteam.ir/category/Laravel
خوشحال می شم ازش بازدید کنید.
جاب تیم
فریم ورک لاراول (laravel) چیست
فریمورک لاراول (laravel) یا فریم ورک لاراول چیست؟ مهم تر از همه این ها لاراول و آموزش این فریمورک را از کجا شروع کنیم.
ویدیوهای آموزشی رایگان یکی از اعضای کانال رو از لینک زیر می تونید دنبال کنید:
(سطح مقدماتی)
https://www.aparat.com/playlist/296929
(سطح مقدماتی)
https://www.aparat.com/playlist/296929
📢 ویرایش جدید کتاب آموزش جامع انگولار (مطابق با نسخه ۹) به پایان رسید و پس از صفحه آرایی منتشر خواهد شد.
در این ویرایش علاوه بر بروزرسانی به نسخه ۹، بعضی از فصول به منظور افزایش کیفیت بازنویسی شدند.
منتظر خبرهای خوش باشید.
در این ویرایش علاوه بر بروزرسانی به نسخه ۹، بعضی از فصول به منظور افزایش کیفیت بازنویسی شدند.
منتظر خبرهای خوش باشید.
Forwarded from جاب تیم سئو|طراحی سایت|اینستاگرام|مارکتینگ
✴️ آموزش انگولار مقدماتی
🧑🏫 مدرس : مهندس مصطفی لوایی نویسنده کتاب جامع انگولار
⭕️ سرفصل های دوره
⚡️نصب Node
⚡️نصب Angular
⚡️ایجاد پروژه
⚡️ بررسی ساختار فایل angular.json
⚡️بررسی ساختار فایل های browserslist، karma.conf.js, package.json, tsconfig.json, tsconfig.app.json, tsconfig.spec.json, tslint.json
⚡️بررسی ساختار فایل های index.html, main.ts, polyfils.ts, environments.ts, app,module.ts, app.component.ts
⚡️کامپایل و اجرای پروژه
⚡️معرفی کامپوننت ها
⚡️ایجاد کامپوننت جدید
⚡️استفاده از شروط در قالب کامپوننت
⚡️استفاده از حلقه ها در قالب کامپوننت
⚡️ارسال مقادیر برای کامپوننت (Input)
⚡️ایجاد رویداد برای کامپوننت (Output)
⚡️آموزش Dependency Injection
⚡️ارتباط بین کامپوننت ها از طریق سرویس
⚡️ارسال درخواست HTTP
این دوره را رایگان دانلود کنید👇
https://jobteam.ir/Course/184-Free-introductory-Angular-training
#انگولار #آموزش_انگولار #انگولار_مقدماتی
🧑🏫 مدرس : مهندس مصطفی لوایی نویسنده کتاب جامع انگولار
⭕️ سرفصل های دوره
⚡️نصب Node
⚡️نصب Angular
⚡️ایجاد پروژه
⚡️ بررسی ساختار فایل angular.json
⚡️بررسی ساختار فایل های browserslist، karma.conf.js, package.json, tsconfig.json, tsconfig.app.json, tsconfig.spec.json, tslint.json
⚡️بررسی ساختار فایل های index.html, main.ts, polyfils.ts, environments.ts, app,module.ts, app.component.ts
⚡️کامپایل و اجرای پروژه
⚡️معرفی کامپوننت ها
⚡️ایجاد کامپوننت جدید
⚡️استفاده از شروط در قالب کامپوننت
⚡️استفاده از حلقه ها در قالب کامپوننت
⚡️ارسال مقادیر برای کامپوننت (Input)
⚡️ایجاد رویداد برای کامپوننت (Output)
⚡️آموزش Dependency Injection
⚡️ارتباط بین کامپوننت ها از طریق سرویس
⚡️ارسال درخواست HTTP
این دوره را رایگان دانلود کنید👇
https://jobteam.ir/Course/184-Free-introductory-Angular-training
#انگولار #آموزش_انگولار #انگولار_مقدماتی
Forwarded from جاب تیم سئو|طراحی سایت|اینستاگرام|مارکتینگ (βεみζαძ)
✴️ آموزش پروژه محور لاراول
⭕️ وضعیت در حال تکمیل 💪
🧑🏫 مدرس: بهزاد میرزازاده
⭕️ تعداد قسمت های موجود : ۲۸ عدد و احتمالا بیشتر از ۳۰۰ قسمت باشه این دوره 😳
💯 فروش دوره : فروش دوره به صورت پیش فروش می باشد و امروز مبلغ ۱۵۰ هزارتومان می باشد و روند افزایشی خواهد داشت قیمت این دوره حدود ۵۰۰ هزارتومان خواهد بود
✴️ کسانی که در دوره شرکت کنند می تونند سوالاتشون رو بپرسند و در قسمت های متوالی جواب های کامل بهینه دریافت کنند
⭕️ پروژه : فروشگاه
✴️ مطالب این دوره :
⚡️پاسپورت
⚡️بحث acl
⚡️بحث سئو تکنیکال
⚡️دیتابیس
⚡️درگاه پرداخت
⚡️بحث api
⚡️بحث model resource
⚡️بحث سووگر
⚡️و....
برای مشاهده این دوره کلیک کنید 👇
https://jobteam.ir/Course/178-Laravel-course-building-online-store
#لاراول #فروشگاه #آموزش_لاراول
⭕️ وضعیت در حال تکمیل 💪
🧑🏫 مدرس: بهزاد میرزازاده
⭕️ تعداد قسمت های موجود : ۲۸ عدد و احتمالا بیشتر از ۳۰۰ قسمت باشه این دوره 😳
💯 فروش دوره : فروش دوره به صورت پیش فروش می باشد و امروز مبلغ ۱۵۰ هزارتومان می باشد و روند افزایشی خواهد داشت قیمت این دوره حدود ۵۰۰ هزارتومان خواهد بود
✴️ کسانی که در دوره شرکت کنند می تونند سوالاتشون رو بپرسند و در قسمت های متوالی جواب های کامل بهینه دریافت کنند
⭕️ پروژه : فروشگاه
✴️ مطالب این دوره :
⚡️پاسپورت
⚡️بحث acl
⚡️بحث سئو تکنیکال
⚡️دیتابیس
⚡️درگاه پرداخت
⚡️بحث api
⚡️بحث model resource
⚡️بحث سووگر
⚡️و....
برای مشاهده این دوره کلیک کنید 👇
https://jobteam.ir/Course/178-Laravel-course-building-online-store
#لاراول #فروشگاه #آموزش_لاراول
📢 ویرایش جدید کتاب آموزش جامع انگولار، منتشر شد.
✅ دانلود کتاب آموزش جامع انگولار ۹
✅ لینک دانلود: https://www.ketabrah.ir/go/b30479/d1159
✅ دانلود کتاب آموزش جامع انگولار ۹
✅ لینک دانلود: https://www.ketabrah.ir/go/b30479/d1159
کتابراه
دانلود کتاب آموزش جامع انگولار - مصطفی لوائی
کتاب آموزش جامع انگولار نوشتهی مصطفی لوائی ، اولین و تنها کتاب آموزش فریم ورک انگولار 9 به زبان فارسی است. Angular 9 نسخه جدید از فریم ورک مشهور Angular JS است که برای توسعه وب اپلیکیشنهای تک صفحهای مورد استفاده...
یه مطلب جالب در مورد استفاده از مد رنگی HSL به جای RGB در CSS:
https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/
https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/
Sarasoueidan
On Switching from HEX & RGB to HSL
– The personal website of Sara Soueidan, inclusive design engineer
Angular انگولار pinned «📢 ویرایش جدید کتاب آموزش جامع انگولار، منتشر شد. ✅ دانلود کتاب آموزش جامع انگولار ۹ ✅ لینک دانلود: https://www.ketabrah.ir/go/b30479/d1159»
اگه توی پروژه هاتون هنوز به طور سنتی استایل دهی می کنید، این متن رو بخونید!
در گذشته، وقتی می خواستید به یک المان موجود توی صفحه استایل بدید، یک کلاس «مختص» اون المان ایجاد می شد و به اون کلاس استایل مورد نیاز داده می شد. بسیاری از فریمورک ها هم بر همین مبنا ساخته شدند. مثلا کلاس مربوط به button، input و ...
وقتی از این روش برای استایل دهی استفاده بشه با چند مشکل جدی رو به رو می شید:
1. شخصی سازی: برای شخصی سازی یه کلاس مثل foo، باید یک کلاس دیگه تعریف کنید که استایل های تکمیلی رو به تگ مورد نظر بده و این سرعت توسعه رو کاهش می ده.
2. تکرار استایل ها: استایل ها ممکنه با هم هم پوشانی داشته باشن و عملا مقدار زیادی استایل رو تکرار کرده باشید. این اتفاق خیلی حجم استایل ها رو زیاد می کنه.
3. اگر کد HTMLی که توش از کلاس foo استفاده کردید رو حذف کنید، هیچ راه امن و مطمئنی برای پاک کردن کلاس foo از استایل ها نیست. بعد از یه مدت با انبوهی از استایل ها مواجه می شید که هیچ جای وب اپلیکیشن ازشون استفاده نکردید! این اتفاق در گذشته حتی برای فیسبوک هم افتاد و خیلی ربطی به حرفه ای بودن یا نبودن شما نداره، چون با این روش استایل دهی تقریبا غیر قابل اجتنابه.
برای پاسخ به این مشکلات، مدتیه که فریم ورک هایی ظهور کردن که به یه روش دیگه استایل دهی می کنن. استایل دهی مروبط به grid فریمورک bootstrap رو به خاطر بیارید. مثلا col-sm-12 فقط و فقط داره یه کار انجام می ده. برای اسکرین های small، مقدار width رو 100٪ می کنه. چی می شد همه استایل ها همینقدر کوچک تعریف می شدن؟ اینطوری خیلی راحت تر، خواناتر و منعطف تر می شد استایل داد. این دقیقا کاریه که فریم ورک های جدید از جمله tailwindcss.com ازش استفاده می کنن. برای دیدن دمو می تونید به صفحه اول سایت tailwindcss.com مراجعه کنید.
در گذشته، وقتی می خواستید به یک المان موجود توی صفحه استایل بدید، یک کلاس «مختص» اون المان ایجاد می شد و به اون کلاس استایل مورد نیاز داده می شد. بسیاری از فریمورک ها هم بر همین مبنا ساخته شدند. مثلا کلاس مربوط به button، input و ...
وقتی از این روش برای استایل دهی استفاده بشه با چند مشکل جدی رو به رو می شید:
1. شخصی سازی: برای شخصی سازی یه کلاس مثل foo، باید یک کلاس دیگه تعریف کنید که استایل های تکمیلی رو به تگ مورد نظر بده و این سرعت توسعه رو کاهش می ده.
2. تکرار استایل ها: استایل ها ممکنه با هم هم پوشانی داشته باشن و عملا مقدار زیادی استایل رو تکرار کرده باشید. این اتفاق خیلی حجم استایل ها رو زیاد می کنه.
3. اگر کد HTMLی که توش از کلاس foo استفاده کردید رو حذف کنید، هیچ راه امن و مطمئنی برای پاک کردن کلاس foo از استایل ها نیست. بعد از یه مدت با انبوهی از استایل ها مواجه می شید که هیچ جای وب اپلیکیشن ازشون استفاده نکردید! این اتفاق در گذشته حتی برای فیسبوک هم افتاد و خیلی ربطی به حرفه ای بودن یا نبودن شما نداره، چون با این روش استایل دهی تقریبا غیر قابل اجتنابه.
برای پاسخ به این مشکلات، مدتیه که فریم ورک هایی ظهور کردن که به یه روش دیگه استایل دهی می کنن. استایل دهی مروبط به grid فریمورک bootstrap رو به خاطر بیارید. مثلا col-sm-12 فقط و فقط داره یه کار انجام می ده. برای اسکرین های small، مقدار width رو 100٪ می کنه. چی می شد همه استایل ها همینقدر کوچک تعریف می شدن؟ اینطوری خیلی راحت تر، خواناتر و منعطف تر می شد استایل داد. این دقیقا کاریه که فریم ورک های جدید از جمله tailwindcss.com ازش استفاده می کنن. برای دیدن دمو می تونید به صفحه اول سایت tailwindcss.com مراجعه کنید.