نوشته های فرید ذوالقدر

جایگزینی Signal با RXJS در انگولار

فرید ذوالقدر — Wed, 07 Jun 2023 14:18:20 +0330

سلام، دلتون شاد و لبتون پرخنده :))از وقتی که سیگنال مطرح شده یه طوفانی توی انگولار واسه طرفدارهای خودش راه انداخته، منم گفتم این وسط بی نصیب نذارم و یه مقاله آموزشی درباره جایگزینیش با rxjs برم.به کمک سیگنال فقط node DOM که نیاز دارن به روز رسانی بشن، تغییر می کنن و این خودش باعث افزایش سرعت انگولار میشه! دیگه نیازی به pipe هم ندارید!هر برنامه انگولار متوسط تا پیچیده، کاربردهای rxjs زیادی دارد. اگرچه rxjs یک کتابخانه بسیار مفید است، اما درک آن برای بسیاری از توسعه دهندگان ممکن آسون نباشه. اما با سیگنال ها می توانیم به طور بالقوه از شر اکثر کدهای rxjs خلاص شیم. این باعث می شود که angular از توسعه دهندگان جدیدی استقبال بیشتری بکنه و خوانایی کلی پایه کد را افزایش بده. خب پرچونگی بسه بریم سراغ جایگزین کردن!//Example behaviourSubject usage const subject = new BehaviourSubject(0); subject.getValue(); subject.next(1); subject.subscribe((data) => { console.log(data) }) //Example signal usage const sig = signal(0); sig() sig.set(1) effect(() => { console.log(sig()) })به همین سادگی اومدیم کدهامون BehaviourSubject با signal عوض کردیم! سیگنال ها همیشه همگام sync هستند. بنابراین شما همیشه می توانید مقدار فعلی یک سیگنال را دریافت کنید.دریافت مقدار فعلی سیگنال بسیار ساده است اما برای Observable نه چندان زیاد. با اطمینان از BehaviourSubject، همیشه می‌توانیم مقدار فعلی را به صورت همگام دریافت کنیم، اما وقتی هر نوع عملیاتی را انجام دادیم، این قابلیت را از دست می‌دهیم.const number = new BehaviourSubject(0); number.getValue(); const isOdd = number.pipe(map((data) => data % 2 ? true : false)); isOdd.getValue() //<--- we can not do this const numberSignal = new BehaviourSubject(0); numberSignal(); const isOddSignal = computed(() => numberSignal() % 2 ? true : false); isOddSignal() //<--- we can do thisبرخلاف Observable سیگنال نیازی به distinctUntilChange یا shareReplay برای چندپخشی نداره.حالا این وسط یه سوالی پیش میاد: ما به rxjs نیاز نداریم؟ خوب، نه دقیقا. زیرا سیگنال همیشه همگام است. آنها کاندیدای بسیار خوبی برای ذخیره وضعیت ها یا مدل view هستند. اما سیگنال‌ها کاندیدای خوبی برای موارد غیرهمگام، مانند رویدادها یا تماس‌های XHR نیستند.توی یه مثال ساده دیگه می خوام یه دستور سرچ ساده به کمک rxjs بسازم:const searchValue$: Observable //lets assume this is comes from input const result$ = searchValue$.pipe( debounceTime(300), distinctUntilChanged(), switchMap((input) => { return this.http.get('/seach?' + input) }) )برای تبدیل این کد به سیگنال میایم اول سیگنال به observable تبدیل می کنیم بعدش دوباره به سیگنال برش می گردونیم:const searchValue: Signal const searchValue$ = fromSignal(searchValue); //convert signal to observable const result$ = searchValue$.pipe( debounceTime(300), distinctUntilChanged(), switchMap((input) => { return this.http.get('/seach?' + input) }) ) const result = fromObservable(result$) //convert observable back to signalدر دنیایی که سیگنال‌ها به طور کامل پذیرفته می‌شوند، ممکن است rxj‌ها را فقط برای چنین مواردی به‌طور کم استفاده کنیم. ادامه دادن پریدن بین سیگنال و روش نوشتن کد rxjs کمی سخت است. اما شاید بتوانیم rxjs را حتی برای چنین مواردی به طور کامل حذف کنیم؟const searchValue: Signal const debouncedSearchValue = signal(searchValue()); const results: WritableSignal = signal([]) /** This effect add debounced search term in a new signal */ effect(() => { const search = searchValue(); const timeout = setTimeout(() => { debouncedSearchValue.set(search) }); return () => { clearTimeout(timeout) } }) /** This effect uses debounceSearchValue instead of searchValue to trigger api call */ effect(() => { const subscription = this.http.get('/seach?' + debouncedSearchValue()) .subscribe((res) => { results.set(res) }) return () => { subscription.unsubscribe() } })حالا بیایم این کد یه مقدار تمیزترش کنیم:const searchValue: Signal const debounceSearchValue = debouncedSignal(searchValue); const results: WritableSignal = signal([]); effect(() => { const subscription = this.http.get('/seach?' + debouncedSearchValue()) .subscribe((res) => { results.set(res) }) return () => { subscription.unsubscribe() } })تابع debouncedSignal استفاده شده در بالا به این شکل است:function debouncedSignal(input: Signal): Signal { const debounceSignal = signal(input()); effect(() => { const value = input(); const timeout = setTimeout(() => { debounceSignal.set(value) }); return () => { clearTimeout(timeout) } }); return debounceSignal }اما جمله آخر : rxjs اختصار را به ارمغان می‌آورد و سیگنال‌ها خواندن را آسان‌تر می‌کنند.در اینجا به آخر مقاله رسیدیم، از اینکه منو توی این مقاله همراهی کردین ممنونم این مقاله یه مختصری از این مقاله بودش.ممنون از توجهتون:))

کامپوننت دینامیک در انگولار

فرید ذوالقدر — Tue, 06 Jun 2023 10:15:16 +0330

سلام. امیدوارم حال دلتون خوب باشه. توی این مقاله قصد دارم مفصل و قدم به قدم از دینامیک کامپوننت براتون بگم. اما قبل از همه اینها اصلا کاربرد دینامیک کامپوننت چی هستش؟ -صفحات داینامیک: مؤلفه‌های پویا به شما امکان می‌دهند تا صفحات داینامیک و پویا را ایجاد کنید، جایی که شما می‌توانید مؤلفه‌ها را براساس داده‌هایی که در زمان اجرا دریافت می‌کنید، بسازید و نمایش دهید. این می‌تواند در سناریوهایی مانند تولید فرم‌های پویا، جدول‌های پویا و کارت‌های پویا مفید باشد.- موارد استفاده چندباره (Reusable components): با استفاده از مؤلفه‌های پویا، می‌توانید مؤلفه‌هایی را با کدهای مشابه ایجاد کنید که تنها در ویژگی‌ها و رفتارها متفاوت هستند. به عنوان مثال، ممکن است یک لیستی از آیتم‌ها داشته باشید که هر آیتم بر اساس نوع آن یک مؤلفه فرزند خاص دارد. با استفاده از مؤلفه‌های پویا، می‌توانید یک مؤلفه لیست را بسازید که مؤلفه فرزند مورد نیاز را براساس نوع آیتم تعریف کنید.- دسترسی به API و خدمات خارجی: در برخی موارد، شما نیاز دارید تا در زمان اجرا به API یا خدمات خارجی دسترسی داشته باشید و نتیجه را نمایش دهید. با استفاده از مؤلفه‌های پویا، می‌توانید نمونه‌هایی از مؤلفه‌ها را در زمان اجرا بسازید و اطلاعات را از API دریافت کرده و درون مؤلفه‌ها نمایش دهید.- پنجره‌ها و مودال‌ها: مؤلفه‌هایحالا بیاین مرحله به مرحله بریم جلو:مرحله اول: مدل و کلاس مربوط به صدا زدن کامپوننت خودتون بسازید.import { Type } from '@angular/core'; export class CommonDynamicModel { constructor(public component?: Type, public data?: any) {} } export interface DataComponent { data: any; }مرحله دوم: ساخت دیرکتیو برای switch کردن بین کامپوننت هابرای اینکه کامپوننت دینامیک ما کامپوننت های فرزند ببینه و اونها توی template که واسش معرفی میکنیم جای گذاری کنه، لازم هستش یه دیرکتیو ساده بسازیم و اون داخل کامپوننت دینامیک هم در ts هم در html فراخوانی کنیم.import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ // اسم سلکتور باید با اسمی که توی کامپوننت دینامیک میدیم یکی باشه selector: '[componentHost]', }) export class DynamicCommonDirective { constructor(public readonly viewContainerRef: ViewContainerRef) {} }مرحله سوم: مرکز فرماندهی کامپوننت دینامیک خودتون بسازید.حالا نوب به ساخت کامپوننت دیرکتیو رسیده که در اینجا ما به کمک دیرکتیو مرحله دوم و همین طور متدی به نام loadComponent این کار انجام میدم:import { Component,Input,ViewChild,OnChanges,SimpleChanges} from '@angular/core'; import { CommonDynamicModel, DataComponent } from '../common'; import { DynamicCommonDirective } from './dynamic-common.directive'; @Component({ selector: 'app-dynamic-common', templateUrl: './dynamic-common.component.html', styleUrls: ['./dynamic-common.component.css'], }) export class DynamicCommonComponent implements OnChanges { @Input() com: CommonDynamicModel = new CommonDynamicModel(); //دقیقا همان نام سلکتور دیرکتیو باید باشد. @ViewChild(DynamicCommonDirective, { static: true }) componentHost!: DynamicCommonDirective; ngOnChanges(changes: SimpleChanges): void { if (changes['com'] && changes['com'].currentValue) { this.com.component && this.loadComponent(); } } loadComponent() { const viewContainerRef = this.componentHost?.viewContainerRef; viewContainerRef.clear(); const componentRef = viewContainerRef.createComponent( this.com.component! ); componentRef.instance.data = this.com.data; } }توی کدهای html هم باید بنویسیم:

dynamic-common works!

مرحله چهارم: تیکه های پازل کنار هم جمع کنحالا نوبت به این می رسه که کامپوننت دینامیک با کامپوننت فرزندان یه جا جمع کنیم. برای این کار من توی app.component.ts می نویسم: import { Component } from '@angular/core'; import { CommonDynamicModel } from './common'; import { ChidOneComponent } from './chid-one/chid-one.component'; import { ChidTwoComponent } from './chid-two/chid-two.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { dataSource: CommonDynamicModel = new CommonDynamicModel(); loadChildrenComponent(componentName: string, data: string) { if (!componentName) return; let component: any; switch (componentName) { case 'child-one': component = ChidOneComponent; break; case 'child-two': component = ChidTwoComponent; break; default: break; } this.dataSource = { component, data }; } }در کد Html هم می نویسیم: مرحله پنجم: حسن ختام ماجرا!توی مرحله آخر می خوام یکی از کامپوننت های فرزند برای اینکه ببنید input بهش چطور ارسال کنیم هم قرار میدم.import { Component, Input } from '@angular/core'; @Component({ selector: 'app-chid-one', templateUrl: './chid-one.component.html', styleUrls: ['./chid-one.component.css'], }) export class ChidOneComponent { @Input('data') data: any; }و این بود ساخت کامپوننت دینامیک در انگولار.به انتهای این مقاله رسیدیم، امیدوارم از این مقاله نهایت استفاده ببرید.ممنون از توجهتون :))

Web Worker در Angular

فرید ذوالقدر — Mon, 29 May 2023 09:17:37 +0330

سلام، امیدوارم دلتون شاد و لبتون پرخنده باشه.امروز می خوام درباره راه اندازی Web Workerتوی پروژه انگولار صحبت کنم، اما قبل از اینکه این آموزش شروع کنیم ببینیم اصلا Web Workerچی هست؟Web Worker یک API مرورگر است که به برنامه‌نویسان اجازه می‌دهد کدهای جاوااسکریپت را در یک نخ جداگانه و پس‌زمینه اجرا کنند. با استفاده از Web Worker، می‌توانید عملیات‌های سنگین و زمان‌بر را در پس‌زمینه انجام داده و رابط کاربری را پاسخگو نگه دارید.وقتی یک Web Worker ایجاد می‌شود، یک نخ جداگانه ایجاد می‌شود که کدهای جاوااسکریپت را اجرا می‌کند. این نخ مستقل از نخ اصلی مرورگر است و به طور موازی با آن اجرا می‌شود. این به معنی این است که عملیاتی که به طور معمول در نخ اصلی مرورگر اجرا می‌شوند و رابط کاربری را مسدود می‌کنند، می‌توانند در Web Worker اجرا شده و بدون تأثیر منفی بر روی رابط کاربری اصلی انجام شوند. Web Worker ها دارای دو جزء اصلی هستند: نخ کارگر (Worker) و ایونت‌ها (Events). نخ کارگر مسئول اجرای کدها در پس‌زمینه است و ایونت‌ها برای تبادل پیام بین نخ اصلی و نخ کارگر استفاده می‌شوند. با استفاده از متدهای postMessage و ، می‌توانید پیام‌ها را بین نخ اصلی و Web Worker ارسال و دریافت کنید.از Web Worker می‌توان در محیط‌های وب متنوعی استفاده کرد، از جمله پروژه‌های Angular. با استفاده از Web Worker، می‌توانید عملیات‌های پردازشی سنگین را به پس‌زمینه منتقل کنید و رابط کاربری را به طور پاسخگو نگه دارید، به خصوص در مواردی که نیاز به محاسبات پیچیده، پردازش تصاویر، پارس کردن داده‌های بزرگ و ... دارید.حالا نوبت به پیاده سازی webworker اونم به صورت قدم به قدم در انگولار رسیده:قدم 1: ng generate web-worker worker-nameبعد از اینکه پروژتون ساختین این دستور توی command Editor خودتون وارد می کنید. حالا این دستور چی کار میکنه: میاد اول از همه یه فایل به نام tsconfig.worker.json توی root اصلی پروژه شما ایجاد می کنه که تنظیمات Web Worker اعلام می کنه. بعد به سراغ فایل angular.json میره و اونجا توی شاخه های build , serve و test یه فیلد با مقدارهای "options": { "webWorkerTsConfig": "tsconfig.worker.json" }قرار میده. تا اینجا که همه چیز با یه خط کد پیش رفت!قدم 2: به سراغ فایل worker-name.worker.ts برید!بعد از اینکه قدم اول طی کردید یه فایل در کنار app.module با نامی که برای web worker لحاظ کردید ایجاد می کنه اینجا اونجایی که شما باید کارهای خودتون برای پردازش پشت زمینه ای بنویسید ( برای آشنایی بهتر من یه طریقه ساخت فاکتوریل براتون مثال می زنم) /// addEventListener('message', ({ data }) => { const number = data; const result = calculateFactorial(number); self.postMessage(result); }); function calculateFactorial(num: number): number { if (num === 0 || num === 1) { return 1; } let factorial = 1; for (let i = 2; i <= num; i++) { factorial *= i; } return factorial; }خب اینجا addEventListener به فراخوانی درخواست شما گوش میده و postMessage جواب پردازش به کد شما اعلام می کنه.قدم 3: web worker صدا بزنید!حالا میریم سراغ اون کامپوننتی که می خوایم web worker صدا بزنیم و این طور می نویسیم:import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { result: number = 0; calculateFactorial(): void { if (typeof Worker !== 'undefined') { // Create a new const worker = new Worker(new URL('./worker-test.worker', import.meta.url)); worker. = ({ data }) => { this.result = data; }; worker.postMessage(5); } else { // Web workers are not supported in this environment. // You should add a fallback so that your program still executes correctly. } } }برای اینکه web worker ما صدا بزنیم متغیر با این مقدار ایجاد کردیم:const worker = new Worker(new URL('./worker-test.worker', import.meta.url));موقعی که جواب برسه :worker. = ({ data }) => { this.result = data; };وقتی هم بخوایم داده ای به web worker ارسال کنیم می نویسیم :worker.postMessage(5);فقط مونده کد HTML ما :

نتیجه: {{ result }}

به همین سادگی!یه web worker توی سه قدم با هم پیاده سازی کردیم. امیدوارم ای مقاله مورد پسندتون بوده باشه و مقالات منو توی ویرگول دنبال کنید.موفق باشید.:))

راه اندازی فروشگاه آنلاین در انگولار

فرید ذوالقدر — Wed, 24 May 2023 08:49:17 +0330

سلامامیدوارم حال دلتون خوب باشه! در این مقاله به راه اندازی یه فروشگاه آنلاین بسیار کوچیک که البته تمرکز اصلیم روی بکارگیری این موضوع به کمک RXJS هستش، می خوام بپردازم. درسته توی عنوان این مقاله کلمه انگولار آوردم اما دوستانی که از فریم ورک ها و کتابخونه های دیگه ای هم که استفاده می کنن این مقاله براشون خارج از لطف نیست و می تونن دنبال کنن.در نظر بگیرید که شما دارید یک برنامه‌ی Angular برای یک فروشگاه آنلاین ایجاد می‌کنید. در این برنامه، سه کامپوننت وجود دارد: کامپوننت "سبد خرید" (CartComponent)، کامپوننت "لیست محصولات" (ProductListComponent) و کامپوننت "پیام‌های سیستم" (SystemMessagesComponent). حالا فرض کنید که شما نیاز دارید وقتی کاربر یک محصول را به سبد خرید اضافه کند، سبد خرید بروزرسانی شده و پیامی در قسمت پیام‌های سیستم نمایش داده شود.ابتدا یک رویداد به نام "محصول اضافه شده به سبد خرید" تعریف می‌کنیم که شامل جزئیات محصول مورد نظر است. سپس در کامپوننت "لیست محصولات"، وقتی کاربر روی دکمه "افزودن به سبد خرید" کلیک می‌کند، این رویداد را ارسال می‌کنیم. در کامپوننت "سبد خرید"، مشترکی برای این رویداد ایجاد می‌کنیم و وقتی رویداد ارسال می‌شود، سبد خرید را بروزرسانی می‌کنیم. همچنین، یک مشترک در کامپوننت "پیام‌های سیستم" ایجاد می‌کنیم تا وقتی رویداد ارسال شود، پیامی را نمایش دهد.// app.component.ts import { Component } from '@angular/core'; import { SignalService } from './signal.service'; @Component({ selector: 'app-root', template: `

فروشگاه آنلاین

`, }) export class AppComponent { constructor(private signalService: SignalService) { } }product-list.component.tsimport { Component } from '@angular/core'; import { SignalService } from '../signal.service'; @Component({ selector: 'app-product-list', template: `

لیست محصولات

{{ product.name }}

`, }) export class ProductListComponent { products = [ { id: 1, name: 'محصول 1', price: 10 }, { id: 2, name: 'محصول 2', price: 20 }, { id: 3, name: 'محصول 3', price: 30 }, ]; constructor(private signalService: SignalService) { } addToCart(product: any) { this.signalService.sendEvent('محصول اضافه شده به سبد خرید', product); } }cart.component.tsimport { Component } from '@angular/core'; import { SignalService } from '../signal.service'; @Component({ selector: 'app-cart', template: `

سبد خرید

{{ item.product.name }} - {{ item.product.price }}

`, }) export class CartComponent { cartItems: any[] = []; constructor(private signalService: SignalService) { this.signalService.subscribeEvent('محصول اضافه شده به سبد خرید', (product: any) => { this.addToCart(product); }); } addToCart(product: any) { this.cartItems.push({ product: product }); } }system-messages.component.tsimport { Component } from '@angular/core'; import { SignalService } from '../signal.service'; @Component({ selector: 'app-system-messages', template: `

پیام‌های سیستم

{{ message }}

`, }) export class SystemMessagesComponent { messages: string[] = []; constructor(private signalService: SignalService) { this.signalService.subscribeEvent('محصول اضافه شده به سبد خرید', (product: any) => { this.showMessage(`محصول ${product.name} به سبد خرید اضافه شد.`); }); } showMessage(message: string) { this.messages.push(message); } }حالا می رسیم به مهمترین قسمت جایی که میایم و این سرویس معرفی میکنیمimport { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' } export class SignalService { private eventSubjects: { [eventName: string]: Subject } = {}; sendEvent(eventName: string, data?: any) { if (!this.eventSubjects[eventName]) { this.eventSubjects[eventName] = new Subject(); } this.eventSubjects[eventName].next(data); } subscribeEvent(eventName: string, callback: (data?: any) => void) { if (!this.eventSubjects[eventName]) { this.eventSubjects[eventName] = new Subject(); } this.eventSubjects[eventName].subscribe(callback); } }در این مثال، هنگامی که کاربر روی دکمه "افزودن به سبد خرید" در کامپوننت "لیست محصولات" کلیک می‌کند، رویداد "محصول اضافه شده به سبد خرید" ارسال می‌شود. سپس کامپوننت "سبد خرید" این رویداد را مشترک شده و سبد خرید را بروزرسانی می‌کند. همچنین، کامپوننت "پیام‌های سیستم" نیز این رویداد را مشترک شده و پیامی درباره اضافه شدن محصول به سبد خرید نمایش می‌دهد.خب به پایان این مقاله رسیدیم. امیدوارم که از این مقاله استفاده کامل داشه باشید.موفق باشید.:))

SSE در Angular

فرید ذوالقدر — Sun, 30 Apr 2023 07:44:51 +0330

سلامدر این مقاله قصد دارم درباره SSE در انگولار صحبت کنم ، اما قبل از همه می خوام درباره منطق SSE بگم، پس امیدوارم تا آخر مقاله همراه من باشید.رویداد های طرف سرویس دهنده که به Server Side Events ترجمه و با SSE هم مخفف میشه کارش اینه که توابعی که در قسمت سرویس دهنده اجرا میشه نتیجش به صورت همزمان یا اصطلاحاً Real time برای سرویس گیرنده (Client) بر گردونه! یعنی به صورت کلی بدون نیاز به ارسال درخواست HTTP چه به صورت Ajax و یا معمولی ، اطلاعات رو از سرویس دهنده (Server) دریافت میکنه ، در SSE مسیر یک طرفه از سرویس دهنده به کاربر هست و نیازی به ایجاد سرور نیست ! این جمله دقیقا تفاوت SSE با وب سوکت می رسونه یعنی ایجاد سرور و ارتباط دو طرفه بودن که در وب سوکت هست کمی زمان بر هستش و بعضی وقتا ما فقط نیاز این رو داریم که اطلاعات فقط از طرف سرویس دهنده به کاربر به صورت Real Time نشون بدیم، مثل نمایش لحظه ای قیمت سکه و ارز یا نمایش نتیجه لحظه ای یه بازی فوتبال و ...حالا با این تفاسیر ما متوجه شدیم SSE چیه! از اینجا به بعد بریم به صورت مرحله ای اونو توی انگولار پیاده کنیم :))مرحله اول ساخت سرویساول از همه یه سرویس درست می کنیم و این کد ها توی سرویس خودمون میاریم.import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class SseService { private eventSource: EventSource; constructor() { } connect(): void { this.eventSource = new EventSource('http://example.com/sse'); this.eventSource.addEventListener('message', (event: MessageEvent) => { console.log('Received SSE event:', event.data); //اینجا داده ها مدیریت میشن }); this.eventSource.addEventListener('error', (event: Event) => { if (event.eventPhase === EventSource.CLOSED) { console.log('SSE connection closed'); // در صورت اتمام و بسته شدن از اینجا اعلام میشه } else { console.log('SSE connection error'); // وقتی خطایی رخ بده } }); } disconnect(): void { this.eventSource.close(); } }مرحله دومدر این مرحله کافی سرویس خودتون توی Component مورد نظرتون که می خواین از SSE دریافت اطلاعات کنید صدا بزنید.import { Component, OnInit } from '@angular/core'; import { SseService } from '../sse.service'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent implements OnInit { constructor(private sseService: SseService) { } ngOnInit(): void { this.sseService.connect(); } ngOnDestroy(): void { this.sseService.disconnect(); } }به همین سادگی :))در اینجا به انتهای این پست آموزشی رسیدیم امیدوارم که از این پست نهایت استفاده ببرید.ممنون از توجه شما:))

ساخت یک Tour Guide در انگولار

فرید ذوالقدر — Thu, 09 Mar 2023 13:10:15 +0330

سلامتوی این مقاله تلاش میکنم به آموزش ساخت یه تور آموزشی یا همون tour guide در انگولار به صورت مرحله به مرحله بپردازم. امیدوارم تا آخر این مقاله همراه من باشید.قبل از اینکه شروع به این کار بکنم لازم می دونم یه توضیحی درباره تور آموزشی بدم بهتون، فرض کنید یه سامانه یا یک پنل یا به طور کل یه پروژه ای راه اندازی کردین و لازم درباره این پروژه به مخاطب ها آموزش بدین. باید بگم روش های زیای وجود داره مثلا یه فایل داکیومنتی حاضر کنید و توی اون از پروژه خودتون بگید یا یه اصلا یه فایل ویدئویی بسازید و توی خود پروژه ، یوتیوب ، آپارات یا هر جای دیگه ای در دسترس کاربرهای خودتون قرار بدید. اما یه راه فرانتی وجود داره و اون اینه که به کمک تور آموزشی دقیقا برای هر بخش خودتون مثل جدول، منو، دکمه و ... یه توضیحی بذارید و اینو مرحله به مرحله یا حتی صفحه به صفحه ببرید جلو. حالا همه این ها گفتم که برم سراغ آموزشی که توی این مقاله دنبالش هستم.روش های مختلفی برای Tour Guide وجود داره اما تلاش کردم یکی از ساده ترین اونها در اختیار شما بزارممرحله اول : نصب npmnpm i ngx-guided-tourبعد از نصب این npm لازم یه تنظیماتی توی angular.json انجام بدید:فایل scss توی استایل از node module اعلام میکنیم.مرحله دوم: معرفی ماژولحالا میریم سراغ معرفی ماژول به app.module... import { GuidedTourModule, GuidedTourService } from 'ngx-guided-tour'; ... @NgModule({ declarations: [AppComponent], imports: [ ... GuidedTourModule, ], providers: [ ... GuidedTourService, ], bootstrap: [AppComponent], }) export class AppModule {}همیجوری که توی کد دیدید سرویس و ماژول داخل App.module آوردیم.مرحله سوم: اعلام توضیحاتبرای تمیز کد زدنمون و همینطور جدا سازی این آموزش ها از سایر بخش ها یه فایل جدا درست کردم به اسم constants.ts اونجا شروع کردم این model معرفی کردن:import { GuidedTour, Orientation } from 'ngx-guided-tour'; export const GravityTour: GuidedTour = { tourId: 'gravity-tour', useOrb: true, steps: [ { title: 'خوش آمدید', selector: '.tour-step-0', // میتونه نقطه برای کلاس باشه یا # برای شناسه یا اسم تگ content: 'به تور آموزشی ما خوش آمدید. برای شروع بر روی دکمه بعدی کلیک کنید و در صورت لغو این تور آموزشی بر روی لغو کلیک کنید.', orientation: Orientation.Top, // جهت نمایش مدال آموزشی در صفحه }, { title: 'کار من', selector: '.tour-step-1', content: 'در بخش کار من وظایفی برای شما تعریف شده است.', orientation: Orientation.Left, }, .... { title: 'پایان تور آموزشی', content:'تور آموزشی ما همین جا اتمام پیدا می کند، ممنون که در این تور همراه ما بودید.', }, ], };مرحله چهارم: اعلام شروع به کار برای اینکه این بخش شروع به حرکت کند و کاربر آن را دنبال کند باید یک دستور در کامپوننت خودتون تحت عنوان رخداد کلیک یا هر چیز دیگه قرار بدید به این شکلgravityTour: GuidedTour = GravityTour; startTourGuide() { this.guidedTourService.startTour(this.gravityTour); }لازم هستش که توی app.component خودتون این تگ هم اضافه کنید. در نهایت خروجی کار شما به این شکل خواهد بود.در اینجا به انتهای آین پست آموزشی رسیدیم امیدوارم که از این پست نهایت استفاده ببرید. ممنون از توجه شما:))

مفهوم Route Resolver در انگولار

فرید ذوالقدر — Mon, 02 Jan 2023 11:15:58 +0330

در این مقاله سعی دارم درباره مفهومی به نام Route Resolver در انگولار برای شما صحبت کنم. امیدوارم تا انتهای این مقاله با من همراه باشید.هنگامی که نیاز باشه داده ای از قبل از اینکه Route شما فعال بشه یا داده از Api گرفته بشه و آماده Navaigate شدن به صفحه مورد نظر بشین بهتر از مفهوم Route Resolver استفاده کنیم. در این آموزش، شما یک Route Resolver را پیاده سازی می کنید که قبل از رفتن به مسیری که داده های جمع آوری شده را نمایش می دهد. برای درک این موضوع با یه مثال کار خودمون شروع میکنیم:در اول کار یه فایل به نام news.resolver.ts توی پروژمون درست می کنیم و این کد ها داخلش می نویسیم : import { Injectable } from '@angular/core'; import { Resolve } from '@angular/router'; import { Observable, of } from 'rxjs'; import { delay } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class NewsResolver implements Resolve> { resolve(): Observable { return of('Route!').pipe(delay(2000)); } }این کد یک قابل observable را که پس از 2 ثانیه تاخیر یک رشته را به عنوان خروجی بر می گرداند.حالا توی قدم بعدی میریم AppModule خودمون یه تغییری میدیم:import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { NewsResolver } from './news.resolver'; import { TopComponent } from './top/top.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: ' ', pathMatch: 'full', component: HomeComponent }, { path: 'top', component: TopComponent, resolve: { message: NewsResolver } } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }توجه کنید که چگونه Resolver درست مانند یک سرویس ارائه می شود و سپس شما آن را با تعریف مسیر اضافه می کنید. حالا نوبت دسترسی به داده توی Component خودمون رسیده، در کامپوننت، می‌توانید با استفاده از ویژگی Data به Object snapshot ActivatedRoute به داده‌های اون دسترسی داشته باشید:import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ ... }) export class TopComponent implements OnInit { data: any; constructor(private route: ActivatedRoute) {} ngOnInit(): void { this.data = this.route.snapshot.data; } }در نهایت توی کد html خودمون می نویسیم :

The message: {{ data.message }}

اینم از خروجی ما :The message: Route!خب حالا از اینجا به بعد می خوایم یه سرویس راه بندازیم و از اینجا یه api صدا بزنیم و داده اون ببریم توی route resolver و از اونجا ببریم توی کامپوننت.برای این کار میایم و ماژول HttpClientModule برای ارتباط با api توی app.module.ts اضافه می کنیم.بعدش یه سرویس مثلا به نام news.service.ts می سازیم و این کدها داخلش قرار می دیم:import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class NewsService { constructor(private http: HttpClient) { } getTopPosts() { const endpoint = 'https://hacker-news.firebaseio.com/v0/topstories.json'; return this.http.get(endpoint); } }حالا لازم یه تغییر توی news.resolver.ts که بالا درستش کردیم باهم بدیم:import { Injectable } from '@angular/core'; import { Resolve } from '@angular/router'; import { Observable } from 'rxjs'; import { NewsService } from './news.service'; export class NewsResolver implements Resolve { constructor(private newsService: NewsService) {} resolve(): Observable { return this.newsService.getTopPosts(); } }می توانید با استفاده از شی ActivatedRouteSnapshot به پارامترهای مسیر فعلی خود دسترسی پیدا کنید. در اینجا مثالی وجود دارد که در آن از یک Resolver برای دسترسی به پارامتر id مسیر فعلی استفاده می کنید.ابتدا از @angular/cli برای ایجاد یک Resolver به نام پست استفاده کنید:داخل فایل post.resolver.ts که ایجاد می کنیم این کد را می نویسیم:import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; import { NewsService } from './news.service'; @Injectable({ providedIn: 'root' }) export class PostResolver implements Resolve { constructor(private newsService: NewsService) {} resolve(route: ActivatedRouteSnapshot): Observable { return this.newsService.getPost(route.paramMap.get('id')); } }حالا لازم هستش متد getPost توی NewsService اضافه کنیم:export class NewsService { constructor(private http: HttpClient) { } // ... getPost(postId: string) { const endpoint = 'https://hacker-news.firebaseio.com/v0/item'; return this.http.get(`${endpoint}/${postId}.json`); } }حالا باید بریم توی app.module.ts بخش routing عوض کنیم:import { PostResolver } from './post.resolver'; // ... const routes: Routes = [ // ... { path: 'post/:id', component: PostComponent, resolve: { newsData: PostResolver } } ]; // ...توی قدم بعدی برای دریافت و نمایش اطلاعات کامپوننت post.component.ts می نویسیم:import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ ... }) export class PostComponent implements OnInit { data: any; constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.data = this.route.snapshot.data; } }توی HTML همین کامپوننت هم میاریم:

بعد از خروجی گرفتن و اجرای پروژه می بینیم که این پروژه مقدار نهایی ما نشون میده.اما در گام آخر در نظر دارم نمایش خطای این مورد هم راه اندازی کنم.برای این کار یه بار دیگه news.resolver.ts تغییر میدم:import { Injectable } from '@angular/core'; import { Resolve } from '@angular/router'; import { Observable, of } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { NewsService } from './news.service'; @Injectable() export class NewsResolver implements Resolve { constructor(private newsService: NewsService) {} resolve(): Observable { return this.newsService.getTopPosts().pipe(catchError(() => { return of('data not available at this time'); })); }}و یا به این صورت بنویسم فایل news.resolver.tsimport { Injectable } from '@angular/core'; import { Router, Resolve } from '@angular/router'; import { Observable, EMPTY } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { NewsService } from './news.service'; @Injectable() export class NewsResolver implements Resolve { constructor(private router: Router, private newsService: NewsService) {} resolve(): Observable { return this.newsService.getTopPosts().pipe(catchError(() => { this.router.navigate(['/']); return EMPTY; })); } }ممنون از توجه خوبتون امیدوارم این مقاله براتون مفید باشه.:))

مفهوم canActivate ، canLoad و canMatch در محافظت از Route در انگولار

فرید ذوالقدر — Sat, 31 Dec 2022 13:06:04 +0330

سلام در این مقاله سعی دارم درباره guards انگولار و انواع گاردها صحبت کنم. ممنون میشم تا آخر مقاله با من همراه باشید:canActivate برای محافظت از Route از canActivate ما استفاده می کنیم ما این ذهنیت که از لود شدن ماژولی که در آن نام برده می شود جلوگیری نمی کنید و آن ماژول را نیز اجرا می کند.canActivate(): Promise { if (localStorage.getItem("token")) { const tree:UrlTree=this.router.parseUrl('/'); return tree; } else { return true; } }canLoadمانند canActivate برای برای محافظت از Route از canLoad استفاده می کنیم با این تفاوت که ماژولی که در آن فراخوانی می شود اجرا نمی کند.canLoad(): Promise { if (localStorage.getItem("token")) { return true; } else { const tree:UrlTree=this.router.parseUrl('/login'); return tree; } }وقتی از canLoad استفاده می کنید.وقتی از canActivate استفاده می کنید.canMatchگارد CanMatch کنترل می‌کند که آیا می‌توانیم از مسیر استفاده کنیم و به عنوان یک اثر جانبی، آیا می‌توانیم کد را دانلود کنیم یا خیر. علاوه بر این، هنگامی که یکی از گاردهای تعریف شده false را برگرداند، مسیر رد می شود و مسیرهای دیگر به جای آن پردازش می شوند.const routes: Routes = [ { path: 'todos', canMatch: [() => inject(FeatureFlagsService).hasPermission('todos-v2')], loadComponent: () => import('./todos-page-v2/todos-page-v2.component') .then(v => v.TodosPageV2Component) }, { path: 'todos', loadComponent: () => import('./todos-page/todos-page.component') .then(v => v.TodosPageComponent) }];در انتها به توجه خوبتون به این مقاله نهابت تشکر دارم.:))

اهمیت استفاده از typescript در فریم ورک های جاوا اسکریپت

فرید ذوالقدر — Wed, 03 Nov 2021 09:53:30 +0330

در این مقاله قصد دارم درباره اهمیت استفاده زبان typescript در فریم ورک هایی مثل انگولار ، react و vuejs بپردازم. یادم هستش که چند سال پیش وقتی برای اولین بار از انگولار 2 استفاده کردم با یه پدیده جالبی به نام typescript آشنا شدم، از جاوا اسکریپت توی کد نویسی خودش استفاده کرده بود اما مرتب تر ، راحت تر و به طور کلی بخوام بگم کمک کرد کدهای تمیز تری بنویسم. بچه هایی که با زبان های backend مثل C# کار کرده باشن بسیاری از مفاهیمی که در typescript ازش صحبت شده به راحتی درک می کنند به سرعت باهاش ارتباط برقرار می کنن ، می بینن که بسیاری از مفاهیم مثل interface ، enum و یا حتی تعریف مقدار دهی اولیه برای متغیر خودشون چقدر از حجم کد نویسی اونها کم کرده و در نهایت بهشون کمک کرده یک برنامه بسیار منسجم و خوانایی طراحی و برنامه نویسی کنن.توی این مقاله اصلا قصد ندارم درباره typescript آموزشی مطرح کنم بلکه قصد دارم از مزایای اون و استفادش در فریم ورکی مثل vuejs یا کتابخونه react حرف بزنم.خیلی عزیزانی که با react و یا vuejs کار می کنن یا حتی شروع به یادگیری این ها می پردازن صرفا به سراغ جاوا اسکریپت میرن و فضای جاوا اسکریپت برای کد نویسی اصلی خودشون در نظر میگیرن، در این صورت میان کامپوننت های خودشون با پسوندهای jsx برای react یا vue برای vuejs می سازن، خب در این صورت شما در جاوا اسکریپت از مفاهیمی مثل interface ، ساخت مدل برای متغیر های خودتون یا ارائه به سرویس، تعریف enum برای بازم متغیر های خودتون، معرفی generic type برای متغیرهایی خودتون و خیلی استفاده مفیدی که می تونید از typescript ببرید اما خودتون بی نصیب میذارید!!!اجازه بدید قضیه با چند تا مثل قدری روشن تر کنم:فرض کنید یه متغیر دارید که قرار این متغیر به شکل یه object با key هایی به نام های titile ، body ، isActive و id باشه قرار هستش که این متغیر به شکل props توی کامپوننت های شما در جریان باشه بنابراین شما هربار باید بیاین یه متغیر به این شکل تعریف کنید: letdata={id:'',title:'',body:'',isActive:false} این یعنی نوشتن یه کد تکراری ، حالا اگه یه جایی یکی از این property املاش اشتباه بنویسی چی میشه؟ میبینی این یعنی اضافه کاری ، در صورتی که ما باید در برنامه نویسی دنبال این باشیم که تا اونجایی که ممکن کدهامون بدون خطا و مرتب شده بنویسیم.حالا این وسط برای این مثال راه حل typescript چیه؟ به شما میگه که یه interface بنویسی و بیای نوع پراپرتی های خودت درونش تعریف کنی و در نهایت متغیر خودت از نوع همین interface معرفی کنیinterface myData{ id:string; title:string; body:string; isActive:boolean; } let data: myData;کافیه شما همین interface از نوع export تعریف کنید تا متغیرهایی که از نوع همین object قرار تعریف بشن مقدار دهی کنید. یا یه مثال دیگه =>فرض کنید یه متغیر دارید که قرار چند تا مقدار ثابت string به این شکل بگیرهlet status = "paid"; // "unpaid" یا "pending" یا "error"این متغیر اگه بخواین جای دیگه تعریف کنید ممکن املاش اشتباه کنید و مجبور شید component به component به دنبال لغات برید تا این متغیر و مقادیرش پیدا کنید. اما پیشنهاد typescript enum statusEnums { Paid = "paid", Unpaid = "unpaid", Pending = "pending", Error = "error", } let data: string = statusEnums.Paid;کافی شما این enum به صورت export در بیارید تا همه جا این مقدار ها دسترسی داشته باشن، حسن استفاده از این قضیه این هستش که اگه املای یکی از اینها بخواد عوض بشه یا مقداری کم یا زیاد بشه میشه از همینجا مدیریتش کرد.مثال هایی از این دست بسیار زیاد هستن که میشه ساعت ها دربارش بحث کرد اما من به همین جا بسنده می کنم و شما در عین حال دعوت به یادگیری از typescript برای فریم ورک های خودتون می کنم.امیدوارم این مقاله براتون مفید بوده باشه و ازش استفاده خوبی ببرید.ممنون از توجهتون :)

مقایسه بین Promise و Observable

فرید ذوالقدر — Mon, 15 Feb 2021 15:34:51 +0330

امروز قصد دارم درباره تفاوت بین Promise و Observable صحبت بکنم. چیزی که بخوبی در باره این دو تا موضوع می دونیم اینه که برای انجام داده های که همزمان نیستن یا بهتر بگم asynchronous data هر دوی اینها استفاده می شن. اما تفاووت در کجاست؟در JavaScript ES6 بحث Promise مطرح شد و ازش به عنوان یه راه حل برای خلاصی از جهنم callback ها یاد کردن. بنابراین Promise مفهومی مدرن و قدرتمند برای نوشتن کد ناهمگام به روشی بهتر ارائه کرد. اما Observable توی انگولار مطرح شدن.از Observable در Angular به عنوان رابطی برای مدیریت انواع عملیات برگشت همزمان غیر همزمان استفاده میشه ، مثل تعریف وقایع سفارشی که داده های خروجی قابل مشاهده را از childبه مولفه parent اصلی می فرسته. ماژول HTTP از قابلیت مشاهده برای رسیدگی به درخواست ها و پاسخ های AJAX استفاده می کنه.حالا وقت این رسیده از تفاوت بین اینها هم بگیم1- وقتی ما در حال انجام یک HTTP request هستیم، promise مدیریت می کنه یک پاسخ تنها (single response) برای همون در خواست (same request) اما وقتی بخوایم چندین پاسخ (multiple responses) برای همون درخواست (same request) مدیریت کنیم میریم سراغ observable.برای درک بهتر این مورد به این مثال توجه کنید://Promise const promise = new Promise((data) =>{ data(1); data(2); data(3); }).then(element => console.log(‘Promise ‘ + element)); //Output: Promise 1 //Observable const observable = new Observable((data) => { data.next(1); data.next(2); data.next(3); }).subscribe(element => console.log(‘Observable ‘ + element)); //Output: Observable 1 , Observable 2 , Observable 32- باید گفت که Observables تنبل هستن، اون ها تا زمانی که subscribe (به کمک متد subscribe()) نشن، اجرا نمی شن، اما در مقابل Promises تنبل نیستن و بلافاصله بعد از ایجاد ساخته میشن.3- مورد سوم این هستش که Observables به کمک متد unsubscribe() قابل توقف و انصراف هستن در صورتی Promises قابل توقف یا انصرافی براشون وجود نداره.4- مورد آخر هم اینه که Observables خطا به subscribers تحویل میده اما Promises اونو push می کنه به child promises.امیدوارم این مقاله براتون مفید بوده باشه و ازش استفاده خوبی ببرید.ممنون از توجهتون :)

10 ترفند کمکی برای کوتاه کردن کدهای جاوا اسکریپتی قسمت سوم

فرید ذوالقدر — Tue, 05 Jan 2021 12:43:08 +0330

توی این مقاله که به نوعی میشه گفت قسمت سوم این مقاله هستش قصد دارم ده ترفند دیگه از ترفندهای جاوا اسکریپت برای کوتاه کردن کدها برای شما بگم.Null, Undefined, Empty Checksوقتی متغیرهای جدیدی ایجاد می کنیم ، گاهی اوقات می خوایم بررسی بکنیم که آیا متغیری که مقداراون ارجاع می دیم خالی یا تعریف نشده است. جاوا اسکریپت برای دستیابی به این توابع کوتاه نویسی واقعا خوبی داره.// Longhand if (test1 !== null || test1 !== undefined || test1 !== '') { var test2 = test1; } // Shorthand var test2 = test1 || '';چک کردن مقدار null و ارجاع دادن یه مقدار پیش فرض بهشvar test1 = null, test2 = test1 || ''; console.log("null check", test2); // output: '' (an empty string)چک کردن مقدار undefined و ارجاع دادن یه مقدار پیش فرض بهشvar test1 = undefined,test2 = test1 || ''; console.log("undefined check", test2); // output: '' (an empty string);عملگرهای محاسباتی // Longhand test1 = test1 + 1; test2 = test2 - 1; test3 = test3 * 10; // Shorthand test1++; test2--; test3 * = 10;Comparison Returns// Longhand if (!(test == undefined)) { return test; } else{ return callMe('test'); } // Shorthand return ret || callMe('test');Arrow Function//Longhand function add(test1, test2) { return test1 + test2; } //Shorthand const add = (test1, test2) => test1 + test2;صدا زدن توابع کوتاه// Longhand function test1() { console.log('test1'); }; function test2() { console.log('test2'); }; var test3 = 1; if (test3 == 1) { test1(); } else { test2(); } // Shorthand (test3 === 1? test1:test2)();Switch Shorthands// Longhand switch (data) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; // And so on... } // Shorthand var data= { 1: test1, 2: test2, 3: test }; data[something] && data[something]();Double Bitwise Shorthand// Longhand Math.floor(1.9) === 1 // true // Shorthand ~~1.9 === 1 // trueObject.values()const data = { test1: 'abc', test2: 'cde' }; const arr = Object.values(data); console.log(arr); /** Output:[ 'abc', 'cde']**/خب به انتهای این مقاله رسیدیم.امیدوارم از این مقاله استفاده کامل برده باشید.ممنون از توجهتون :)

روش های پاک کردن مقدار از آرایه در جاوا اسکریپت

فرید ذوالقدر — Sun, 03 Jan 2021 12:05:21 +0330

سلام :)قصد دارم توی این مقاله درباره حذف کردن یه مقدار در یک آرایه توی جاوا اسکریپت به صورت مفصل و بخش به بخش صحبت کنم.روش اول : استفاده از فیلتر برای حذف یک مقدارlet value = 500 let arr = [100, 200, 30, 40, 500, 3000] arr = arr.filter(item => item !== value) console.log(arr) // [ 100, 200, 30, 40, 3000 ]روش دوم : استفاده از فیلتر برای حذف چند مقدارویژگی بهتر این روش این هستش که ما می تونیم چندین مورد به طور هم زمان حذف بکنیم.let remove = [20, 30] let arr = [10, 20, 30, 40, 50, 30] arr = arr.filter(item => !forDeletion.includes(item)) console.log(arr) // [ 10, 40, 50 ]روش سوم : استفاده از متد Splice در یک آرایهاون چیزی که توی این روش خیلی مفید هستش اینه که با متد indexOf توی آرایه به دنبال مولفه خودتون بگردید بعدش اگر مقداری داشت (منظرم اینه که مقدار برگشتی ازن متد از -1 بیشتر بود) بریم سراغ splice const data = [20, 50, 90]; console.log(data); const index = data.indexOf(50); if (index > -1) { data.splice(index, 1); } console.log(data); // data = [20, 90]روش چهارم : Lodashما می تونیم به کمک این سه متد روی آرایه خودمون دستکاری های حذف انجام بدیم اونم به این صورت : _.pull (برای چند مقدار در آرایه) ، _.pullAt (برای چند مقدار در آرایه) و _.without (برای یک مقدار در آرایه)var data1 = ['aa', 'bb', 'cc', 'dd'] _.pull(array1, 'cc') console.log(data1) // ['aa', 'bb', 'dd'] var data2 = ['a', 'b', 'c', 'd'] _.pullAt(data2, 0) console.log(data2) // ['b', 'c', 'd'] var data3 = ['i', 'j', 'k', 'l'] var data3 = _.without(data3, 'i') // ['j', 'k', 'l'] console.log(data3) // ['i', 'j', 'k', 'l']خب به پایان مقاله امروز رسیدیم، امیدوارم از این مقاله استفاده کامل برده باشید.موفق باشید :))

ساخت Structural directives به همراه مثال در انگولار

فرید ذوالقدر — Tue, 10 Nov 2020 12:55:47 +0330

در این مقاله قصد اموزش ساخت یک directive مثل *ngIf یا ngFor به نام Structural directives دارم. directive ها مسئول ساختار بندی بر روی لایه HTML هستش.اونها ساختار DOM را به طور معمول با اضافه کردن ، حذف یا دستکاری عناصر ، شکل می دن یا بهش تغییر شکل می دن.Structural directives با حرف * شروع میشن. برای اینکه این موضوع برای شما بهتر قابل درک باشه با یه مثال کار خودمون ادامه میدیم.فرض کنید یه آرایه داریم که این آرایه دوتا مقدار عددی توی خودش جا داده.این دو تا عدد تاریخ هستن که باید به date تبدیل بشن.ما می خوایم بررسی کنیم که این دوتا عدد بعد از اینکه تبدیل به تاریخ شدن آیا تاریخ ها با هم یکسان هستن؟ اگه یکسان بودن اون تگ نشون بده در غیر این صورت تگ پنهان کنه.تا اینجا سناریو برای خودمون چیدیم حال برای پیاده سازی می خوایم از شرط توی تگ HTML استفاده کنیم. یه dircetive به اسم allowshow می سازم با این دستورات:import { Directive, Input, ElementRef, ViewContainerRef, TemplateRef } from '@angular/core'; @Directive({ selector: '[allowshow]' }) export class AllowShowDirective { constructor( private element: ElementRef, private templateRef: TemplateRef, private viewContainer: ViewContainerRef, ) { } @Input() set allowshow(data: Array) { if (data && data.length == 2) { var date_one = new Date(1000 * data[0]).toDateString(); var date_two = new Date(1000 * data[1]).toDateString(); if (date_one != date_two) { this.viewContainer.clear(); } else { this.viewContainer.createEmbeddedView(this.templateRef); } } } }بعد از ساخت این directive اون به app.module.ts در declarations تعریف کنید.حالا از این به بعد هر جا خواستید از این directive استفاده کنید باید بنویسید: ....... به انتهای این مقاله رسیدیم و امیدوارم از این مقاله استفاده کامل ببرید.ممنون از توجهتون :)

معرفی ngOnChange در انگولار

فرید ذوالقدر — Mon, 09 Nov 2020 10:15:40 +0330

در این مقاله قصد دارم درباره یکی از lifecycle های مهم و کاربری در انگولار به نام ngOnChange صحبت کنم.توی برنامه های بزرگ توی انگولار عموما از component های کوچیک استفاده می کنیم، این component ها ممکن در لحظه داده ای دریافت کنن و انعطاف پذیر باشن و با هربار دریافت داده یه واکنشی نشون بدن.برای بروز رسانی داده ها که قرار به component در لخظه بفرستیم و این component به این اطلاعات واکنش نشون بده از ngOnChange استفاده می کنیم.توی ngOnChange دوتا متغیر نقش اساسی و مهمی بازی میکنن، اول input که وظیفه آوردن داده به داخل component ایفا میکنه و دوم SimpleChanges که مشخص می کنه این داده جدید هستش یا قدیمی که اگه بر همین اساس کار جدید روی داده شروع کنه به طور کلی SimpleChange کلاسی هستش که مقادیر فعلی و قبلی را پیاده سازی می کنه. با توجه به این حرفا به این مثال توجه کنید:@Input() inputValue: string; ngOnChanges(changes: SimpleChanges) { console.log(changes.inputValue.currentValue); console.log(changes.inputValue.previousValue); }همین طوری که توی این مثال اومده inputValue مقدار ورودی داده شده به component ما هستش و توی ngOnChange به کمک changes که از نوع SimpleChanges هستش ما اومدیم یه لاگ (در این مقاله من قبلا مفصل درباره انواع متدها console صحبت کردم) از روی مقدار قبلی و بعدی گرفتیم.متد ngOnChane توی هر بروزرسانی از ویژگی های input فراخوانی می کنه. مزیت دیگه ngOnChanges این هستش که اگر component شما دارای چندینInput باشه ، همه تغییرات یک باره دریافت میکنه.به پایان این مقاله رسیدیم امیدوارم استفاده کامل ازش برده باشید.ممنون از توجهتون :)

چگونه توییت های رنگارنگ در Angular بسازید.

فرید ذوالقدر — Sun, 08 Nov 2020 10:41:52 +0330

در این مقاله قصد دارم به کمک یک npm ، متنهایی که با کاراکترهایی مثل # یا @ توی رشته شون وجود داره به یه رنگ دیگه نمایش بدیم. مثل این :خیلی وقتا توی متنها می خواین یه موضوع با هشتگ ترند کنید یا آدرس نام کاربری یه شخص اعلام کنید برای این کار در انگولار از یه کتابخونه npm به نام hashtag-mention-colorizer استفاده می کنیم. من سعی میکنم این روش توی چند قدم آموزش بدم.قدم اول _ نصب npmتوی اولین قدم لازم هستش کتابخونه hashtag-mention-colorizer توی ترمینال خودتون نصب کنید:npm i hashtag-mention-colorizerقدم دوم _ به سراغ app.module.ts میریملازم هستش توی app.module.ts یه تغییرات کوچیکی بدیم :import { HashtagMentionColLibModule } from 'dist/hashtag-mention-col-lib'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, HashtagMentionColLibModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}قدم سوم _ به سراغ فایل app.component.ts میریم برای اینکه متن خودمون ببینیم باید دو تا رشته تستی توی app.component.ts ایجاد کنیم:import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { text1 = 'Hello! @AlessiaAmitrano here! Check out my amazing new #angular #library ! '; text2 = '#frontend @devLifeUk #developer '; }قدم چهارم _ اضافه کردن پایپ hmColor برای تغییر رنگبرای تغییر رنگ متن لازم این دوتا رشته توی innerHTML تگ به عنوان یک پایپ به نام hmColor مقدار دهی کنیم:

با مقدار دهی hmColor: '#18BE63' می تونیم رنگ دلخواه خودمون هم به این متن ارائه کنیم.به انتهای این مقاله آموزشی رسیدیم و امیدوارم استفاده کامل ازش ببرید.ممنون از توجهتون :)

چک کردن وضعیت اینترنت کاربر در جاوا اسکریپت

فرید ذوالقدر — Sat, 07 Nov 2020 10:38:23 +0330

توی این مقاله قصد دارم درباره نحوه چک کردن لحظه ای وصل بودن یا نبودن کاربر به اینترنت تو زمانی که وارد سایت ما شده با هم مرور کنیم.خیلی وقتا پیش اومده،کاربر به سایت ما اومده و اینترنتش یه دفعه قطع شده، این وسط کاربر متوجه نشده و request خودش به سایت ما تحویل داده! کاربر از همه جا بی خبر هم فکر میکنه سایت ما مشکل داره :)) این وسط وظیفه برنامه نویس هستش تا با چک کردن وضعیت اینترنت کاربرش بهش پیام بده که " اینترنت شما قطع می باشد ... ". توی این مقاله تلاش میکنم با چند تا کد ساده این قضیه تو جاوا اسکریپت حل کنم.اول از همه سراغ کدهای جاوا اسکریپت میرمwindow.addEventListener('load', () => { if (navigator.onLine) { showOnlineStatus(true); } window.addEventListener('online', () => { showOnlineStatus(true); window.addEventListener('offline', () => { showOnlineStatus(false); }); });همین جوری که توی کد بالا می بینید من اومدم به کمک addEventListener و همینطور دستور navigator وضعیت onLine بودن یا offline سیستم کاربر چک میکنم. بعد در صورت وصل بودن یا نبودنش یه متد که نوشته شده به نام showOnlineStatus با یه مقدار boolean صدا میزنم قرار بیاد یه پیامی به کاربر نشون بده.به همین سادگی با چند خط کد توی جاوا اسکریپت اومدیم و قطع و وصل بدن اینترنت به کاربرمون اطلاع دادیم.اینم نمونه کامل این کد: hi

Oops, the internet went out.

How would you tell your user their internet connection is down but your site is working fine?

Try switching off your wifi or mobile internet to see a No network connection message.

برای برابر بودن دو متغیر در جاوا اسکریپت از چه حالتی استفاده می کنید؟

فرید ذوالقدر — Wed, 04 Nov 2020 15:32:40 +0330

توی این مقاله قصد دارم از مقایسه دو متغیر با هم بگم. همین اولش بزار یه چیزی ازتون بپرسم! شما برای مقایسه برابری دو متغیر از چه عملگری استفاده میکنید؟ از == یا === یا Object.is؟ من می خوام هر سه این مورد یه بار مقایسه کنم تا ببینیم بهتر از کدوم یکی توی شرط هامون استفاده کنیم.توی مقایسه دو متغیر دو موردی که باید بهش دقت کرد اول مقدار دو متغیر هستشدوم نوع متغیربا توجه به این دو نکته باید ببینیم کدوم یکی از این شرط های برابری برای ما بهتر هست تا ازش بیشتر استفاده کنیم.== یا عملگر برابری انتزاعیبررسی میکنه که فقط مقادیر برابر هستند یا خیر! کاری هم به نوع دو متغیر نداره! به این مثال ها دقت کنید :console.log(1 == "1") // prints true console.log(true == "true") // prints true console.log(NaN == "NaN") // prints false console.log(NaN == NaN) // prints false as NaN is can never be equal to NaN console.log(-1 == 1) // prints false But, console.log(-0 == 0) // prints true console.log({"name": "Arwa"} == {"name": "Arwa"}) // prints false as both have different //references in memoryBut, let a = {"name": "Arwa"} let b = a console.log(a == b) // prints true as both have same memory referenceنکات کلی از == :دستور NaN با هر چیزی از جمله خودش برابر نیست-0 برابر با 0مقدار null برابر است با null و undefinedعبارات یا به رشته ، بولین یا عدد تبدیل می شهرشته به حروف کوچک و بزرگ حساسهاگر دو عملوند به یک شی object یکسان مراجعه کنند ، درسته و در غیر این صورت نادرستهمیشه این 6 مقدار نادرست را بخاطر بسپارید (null، undefined، ”، 0، NaN، false)=== یا عملگر برابری دقیقعلاوه بر مقدار دو متغیر نوع اونها هم بررسی میکنه! اگر هر دو مقدار و نوع عبارات سمت چپ و راست برابر باشند ، این عملگر درست برمی گردد.به این مثال ها دقت کنید :console.log(1 === "1") // prints false as both are different types (Number vs String) console.log(true === "true") // prints false as both are of different types (Boolean vs String) console.log(true === true) // prints true as both are of same type (Boolean vs Boolean) and value console.log(NaN === NaN) // prints false as NaN is can never be equal to NaN console.log(null === null) // prints true console.log("Arwa" === "arwa") // prints false as string comparison is case sensitive console.log(-0 === 0) // prints true here as well console.log({"name": "Arwa"} === {"name": "Arwa"}) // prints false as well in this case as both have different references in memory let a = {"name": "Arwa"} let b = a console.log(a === b) // prints true as both have same memory referenceنکات کلی از === :-0 برابر با 0مقدار null فقط برابر با null هستشمقایسه رشته به حروف کوچک و بزرگ حساسهمقدار NaN با هر چیزی از جمله خودش برابر نیستاگر دو عملوند به یک شی واحد مراجعه بکنن، اون درست ارزیابی می کنن در غیر این صورت نادرست برمی گردوننObject.is()Syntax: Object.is(value 1, value 2)جزو تغییرات جدید es5 هستش.با استفاده از قوانین زیر بررسی می کنه که آیا این دو مقدار یکسان هستن یا نه!قانون 1_ هر دو مقدار undefined باشنlet a; let b; Object.is(a,b) // returns trueقانون 2_ هر دو مقدار رشته باشن،طولشون یکی باشه و کاراکتر به کاراکتر یکی باشن(منظورم حروف کوچیک و بزرگ هستش)Object.is("Comparison Operators", "Comparison Operators") // returns true however, Object.is("Comparison Operators","comparison operators") // returns false as it is case sensitiveقانون 3_ هر دو مقدار null باشنObject.is(null, null) // returns trueBut, Object.is(null, "null") // returns false as no type casting is doneقانون 4_ هر دو مقدار از یه Object با مرجع یکسان باشنlet a = {"name": "Arwa"} let b = aObject.is(a, b) // returns true Object.is({"name": "Arwa"}, {"name": "Arwa"}) // returns false Object.is(window, window) // returns true as both refer to the same global variable windowقانون 5_ هر دو مقدار یک عدد غیر صفر و غیر NaN باشنObject.is(1, 1) // returns trueقانون 6_ هر دو مقدار یا 0+ هستند یا 0-Object.is(0, 0) // returns true But, Object.is(0, -0) // returns false unlike == or === operator قانون 7_ هر دو NaN باشنObject.is(NaN, NaN) // returns true unlike == or === operator Object.is(NaN, 0/0) // returns true Think of this as doing isNaN() check for each value.فقط فراموش نکنید Object.is() توسط Internet Explorer پشتیبانی نمیشه!به انتهای مقاله امروز رسیدیم، امیدوارم از این مقاله استفاده کامل ببرید.ممنون از توجهتون :)

ساخت QR Code در انگولار

فرید ذوالقدر — Wed, 04 Nov 2020 10:58:44 +0330

توی این مقاله قصد دارم به کمک انگولار یک QR Code بسازم.اما اول از همه باید بدونیم QR چیه و چه هدفی دنبال می کنه؟ بر طبق اسناد ویکی پدیا QR کد نوعی بارکد ماتریسی (یا بارکد دو بعدی) هستش که اغلب حاوی داده های هستش که به یک وبسایت اشاره میکنه و از چهار حالت رمزگذاری استاندارد (numeric, alphanumeric, byte/binary, and kanji) برای ذخیره سازی کارآمد داده استفاده می کنه.به زبان ساده ، QR کد، یک روش فشرده و کارآمد برای ذخیره اطلاعات هستش. حالا بیاین قدم به قدم بریم جلو تا ببینیم که چطور میشه یه QR کد ساخت :قدم اول _ انگولار CLI نصب کنید$ npm install -g @angular/cliقدم دوم _ یک پروژه جدید بسازید$ ng new angular10qrcodeقدم سوم _ npm ngx-qrcode نصب کنید$ npm install @techiediaries/ngx-qrcodeقدم چهارم _ توی AppModule ماژول بارکد معرفی کنیدimport { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule( { declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, NgxQRCodeModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }قدم پنجم _ app.component.ts خودتون اصلاح کنیدبه سراغ فایل app.component.ts برید و در اونجا این کدهای ts اضافه کنید:import { Component } from '@angular/core'; import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { elementType = NgxQrcodeElementTypes.URL; correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH; value = 'https://www.techiediaries.com/'; }قدم ششم _ app.component.html خودتون تغییر بدیداگه خواستید می تونید از یه تگ textarea هم برای تغییر آدرس سایت و تغییر QR Code استفاده کنید.من سعی کردم css هم برای این تغییرات بنویسم.bshadow { display: flex; align-items: center; justify-content: center; filter: drop-shadow(5px 5px 5px #222222); opacity: .5;} textarea { margin-top: 15px; display: block; margin-left: auto; margin-right: auto; width: 250px; opacity: .5; }خب اینم از نتیجه کار :به انتهای این مقاله رسیدیم ، امیدوارم تونسته باشم مقاله مفیدی توی چند قدم به شما آموزش داده باشم.ممنون از توجهتون :)

10 ترفند کمکی برای کوتاه کردن کدهای جاوا اسکریپتی قسمت دوم

فرید ذوالقدر — Mon, 02 Nov 2020 10:15:03 +0330

توی این مقاله که به نوعی میشه گفت قسمت دوم این مقاله هستش قصد دارم ده ترفند دیگه از ترفندهای جاوا اسکریپت برای کوتاه کردن کدها برای شما بگم.1- اختصاص مقادیر به چند متغیرما می تونیم به چند متغیر در یک خط آرایه مقادیری اختصاص بدیم.//Longhand let a, b, c; a = 5; b = 8; c = 12; //Shorthand let [a, b, c] = [5, 8, 12];2- اختصاص مقدار پیش فرضما می تونیم از OR (||) برای تعیین مقدار پیش فرض به یک متغیر در صورت خالی موندن به عنوان مقدار پیش فرض استفاده بکنیم.//Longhand let imagePath; let path = getImagePath(); if(path !== null && path !== undefined && path !== '') { imagePath = path; } else { imagePath = 'default.jpg'; } //Shorthand let imagePath = getImagePath() || 'default.jpg';3- ارزیابی اتصال کوتاه AND (&&)اگر فقط درصورتی که یک متغیر درست باشه ، تابعی فراخوانی می کنه ، پس با استفاده از اتصال کوتاه AND (&&) می تونید این کار را در یک خط انجام بدید.//Longhand if (isLoggedin) { goToHomepage(); } //Shorthand isLoggedin && goToHomepage();در اینجا ، در تکنیک کوتاه، اگر isLoggedin درست باشه، فقط goToHomepage () اجرا می شه.4- دو متغیر را مبادله کنیدبرای مبادله دو متغیر ، ما اغلب از یک متغیر سوم استفاده می کنیم. ما می تونیم دو متغیر را به راحتی با انتساب ساختار آرایه مبادله کنیم.let x = 'Hello', y = 55; //Longhand const temp = x; x = y; y = temp; //Shorthand [x, y] = [y, x];5- بررسی شرایط چندگانهبرای تطبیق چندگانه ، می توانیم همه مقادیر را در آرایه قرار دهیم و از روش indexOf () استفاده کنیم.//Longhand if (value === 1 || value === 'one' || value === 2 || value === 'two') { // Execute some code } // Shorthand if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { // Execute some code }6- یک رشته را برای چند بار تکرار کنیدبرای تکرار یک رشته برای تعداد مشخصی می تونید از حلقه for استفاده کنید. اما با استفاده از متد repeat() می تونیم اون توی یک خط انجام بدیم.//Longhand let str = ''; for(let i = 0; i < 5; i ++) { str += 'Hello '; } console.log(str); // Hello Hello Hello Hello Hello // Shorthand 'Hello '.repeat(5);7- به توان رسوندنمی توانیم از روش Math.pow () برای به توان رسوندن یه عدد استفاده کنیم. یک نحو کوتاهتر برای انجام این کار هستش که با ستاره دوتایی انجام میشه (**).//Longhand const power = Math.pow(4, 3); // 64 // Shorthand const power = 4**3; // 648- گرد کردن یک عدد اعشار به صحیح//Longhand const floor = Math.floor(6.8); // 6 // Shorthand const floor = ~~6.8; // 69- کاراکتر از رشته پیداlet str = 'jscurious.com'; //Longhand str.charAt(2); // c //Shorthand str[2]; // c10- حداکثر و حداقل عدد در آرایه پیدا کنید.می توانیم از حلقه برای در آرایه استفاده کنیم تا حداکثر یا حداقل عدد پیدا کنیم. همچنین می تونیم از روش Array.reduce () برای پیدا کردن حداکثر و حداقل تعداد در آرایه استفاده کنیم.اما با استفاده از اپراتور spread می توانیم اون توی یک خط انجام بدیم.// Shorthand const arr = [2, 8, 15, 4]; Math.max(...arr); // 15 Math.min(...arr); // 2قبلا توی این مقاله درباره اپراتور spread مفصل صحبت کردم.خب به انتهای این مقاله رسیدیم.امیدوارم از این مقاله استفاده کامل برده باشید.ممنون از توجهتون :)

تبدیل Object به Array و بر عکس در جاوا اسکریپت

فرید ذوالقدر — Sun, 01 Nov 2020 09:42:32 +0330

در این مقاله قصد دارم به آموزش تبدیل object به آرایه بپردازم و بالعکس.تبدیل Object به Array تا قبل از بحث es6 اگه می خواستیم یه object به ارایه تبدیل کنیم باید از حلقه ها استفاده می کردیم.var numbers = { one: 1, two: 2 }; var keys = []; for (var number in numbers) { if(numbers.hasOwnProperty(number)){ keys.push(number) } } keys; // [ 'one', 'two' ]خب همینجوری که میبینید برای همچین تبدیلی تعداد خط های زیادی برای برنامه نویسی باید صرف کنید اما es6 اومد اوضاع یه مقدار بهتر کرد. توی es6 اومد Object.keys به دستورات خودش اضافه کرد و با همین دستور کل دستورات بالا برای ما خلاصه کرد توی خودش:const numbers = { one: 1, two: 2 } Object.keys(numbers); // [ 'one', 'two' ]خب باید بگم روش خوبیه، ولی فقط برای key اگه value خواستیم چی؟ توی es 2017 قضیه بهتر شد اومد دستور Object.values به دستورات خودش اضافه کرد تا اینبار value های object ما بتونیم تبدیل به آرایه کنیم:const numbers = { one: 1, two: 2 } Object.values(numbers);// [ 1, 2 ]اما باید بگم es 2017 کار به همین جا تموم نکرد، Object.entries به کمک این دستور هم key و هم value تبدیل به آرایه کرد یعنی کار هر دو دستور بالایی یکی کرد:const numbers = { one: 1, two: 2 } Object.entries(numbers); // [ ['one', 1], ['two', 2] ]تبدیل Array به Object برای تبدیل آرایه به شی یه دستوری به نام Object.fromEntries وجود داره که کار ما رو به بهترین شکل راحت کرده:const array = [ [ 'one', 1 ], [ 'two', 2 ] ]; Object.fromEntries(array);// { one: 1, two: 2 }خب همین طور که دیدید به کمک همین چند دستور کلی از خطوط برنامه نویسی ما کم شدش و یه جورایی به کارایی برنامه نویسی ما هم اضافه شد.به انتها این مقاله رسیدیم و امیدوارم که نهایت استفاده از این مقاله برده باشید.ممنون از توجهتون :)