From efd4a32e8816162ab25593716bc392ae4c410429 Mon Sep 17 00:00:00 2001 From: eisa-rezaei Date: Fri, 13 Oct 2023 16:40:26 +0330 Subject: [PATCH] improvements-2 --- Book.html | 177 ++++++++++++++++++++++----------------------- Book.md | 211 +++++++++++++++++++++++++++--------------------------- 2 files changed, 191 insertions(+), 197 deletions(-) diff --git a/Book.html b/Book.html index fbc4b1c..ab6be68 100644 --- a/Book.html +++ b/Book.html @@ -622,7 +622,7 @@

فهر 25 -template expressions ها چیا هستن? +template expression ها چیا هستن? 26 @@ -2125,9 +2125,9 @@

فهرست

  • -

    template expressions ها چیا هستن?

    -

    یک عبارت الگو مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کنه. Angular عبارت رو اجرا می کنه و اون رو به خاصیت یک هدف الزام آور اختصاص میده. هدف ممکنه یک عنصر HTML، یک جزء یا یک دستورالعمل باشد. در ویژگی binding، یک عبارت الگو در نقل قول در سمت راست نماد = مانند [property]="expression ظاهر می شه.
    -در نحو درون یابی، عبارت الگو با پرانتزهای مجعد دوتایی احاطه شده. برای مثال، در درون یابی زیر، عبارت الگو {{username}} است،

    +

    template expression ها چیا هستن?

    +

    یه template expression مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کنه. Angular عبارت رو اجرا می کنه و اون رو به به دیتای هدف اضافه میکنه. هدف ممکنه یه عنصر HTML، یه کامپوننت یا یه directive باشد. در ویژگی binding، یه template expression تو نقل قول تو سمت راست نماد = مثل [property]="expression ظاهر می شه.
    +در نحو درون یابی، template expression با پرانتزهای مجعد دوتایی احاطه شده. برای مثال، در درون یابی پایین template expression {{username}} هستش

    <h3>{{username}}, welcome to Angular</h3>
     
    @@ -2139,35 +2139,35 @@

    فهرست

    +

    فهرست

  • template statements ها چیا هستن؟

    -

    یه template statements به رویدادی پاسخ میده که توسط یک هدف الزام آور مانند یک عنصر، مؤلفه یا دستورالعمل ساخته شده. عبارات الگو در نقل قول در سمت راست نماد = مانند (رویداد)="statement" ظاهر می شن.

    -

    Let's take an example of button click event's statement

    +

    یه template statements به رویدادی پاسخ میده که توسط یک دیتای هدف مثل یک المنت مؤلفه یا directive ساخته شده. عبارات الگو تو نقل قول تو سمت راست نماد = مانند (رویداد)="statement" ظاهر می شن.

    +

    بیاین برای گذاشتن ایونت روی دکمه یه مثال بزنیم

    <button (click)="editProfile()">Edit Profile</button>
     
    -

    در عبارت بالا، editProfile یک عبارت الگو است. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند.

    +

    تو عبارت بالا، editProfile یه template expration هستش. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند.

      -
    1. جدید

    2. +
    3. new

    4. عملگرهای افزایش و کاهش، ++ و --

    5. انتساب عملگر، مانند += و -=

    6. عملگرهای بیتی | و &

    7. -
    8. عملگرهای عبارت الگو

    9. +
    10. عملگرهای template expression


    فهرست

  • چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟

    -

    انواع اتصال رو میشه به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شن. اونا به صورت زیر فهرست شدن

    +

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

      -
    1. از منبع به مشاهده

    2. -
    3. از دیدگاه به منبع

    4. +
    5. source-to-view

    6. +
    7. view-to-source

    8. View-to-source-to-view

    -

    نحو ممکن الزام آور رو می توان به صورت جدولی در زیر ارائه کرد:

    +

    دیتا هدف خروجی رو می توان به صورت جدولی در زیر ارائه کرد:

    @@ -2198,7 +2198,7 @@

    pipe ها چیا هستن؟

    -

    یک pipe داده ها رو به عنوان ورودی می گیرد و اون رو به خروجی دلخواه تبدیل می کنه. برای مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی تولد یک جزء به تاریخ دوست‌داشتنی با استفاده از pipe date در نظر بگیریم.

    +

    یک pipe داده ها رو به عنوان ورودی می گیره و اون رو به خروجی دلخواه تبدیل می کنه. برای مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی birthday کامپوننت به تاریخ قابل استفاده با استفاده از pipe date در نظر بگیریم.

    import { Component } from '@angular/core';
     
    @@ -2214,7 +2214,7 @@ 

    یه منظور از pipe پارامتردار شده چیه؟

    -

    یک pipe می تونه هر تعداد پارامتر اختیاری رو برای تنظیم دقیق خروجی خود بپذیرد. pipe پارامتر شده رو می توان با اعلام نام pipe با علامت دو نقطه ( : ) و سپس مقدار پارامتر ایجاد کرد. اگر pipe چندین پارامتر رو می پذیرد، مقادیر رو با دو نقطه جدا کنید. بیایید یک مثال تولد با یک قالب خاص (dd/MM/yyyy) در نظر بگیریم:

    +

    یه pipe می تونه هر تعداد پارامتر اختیاری رو برای تنظیم دقیق خروجیش قبول کنه. pipe پارامتر شده رو می شه با اعلام نام pipe با علامت دو نقطه ( : ) و بعد مقدار پارامتر ایجاد کرد. اگه pipe چن تا پارامتر رو میگیرع مقادیر رو با دو نقطه جدا کنین. بیاین یک مثال تولد با یک قالب خاص (dd/MM/yyyy) در نظر بگیریم:

    import { Component } from '@angular/core';
     
    @@ -2226,12 +2226,12 @@ 

    = new Date(1987, 6, 18); }

    -

    Note: مقدار پارامتر می تونه هر عبارت الگوی معتبری باشد، مثل یه رشته لفظی یا یه ویژگی جزء.

    +

    Note: مقدار پارامتر می تونه هر عبارت الگوی معتبری باشه مثل یه رشته لفظی یا یه ویژگی جزء.

    فهرست

  • چطوری زنجیره ای از pipe ها میسازی؟

    -

    میتونین pipe رو در ترکیب‌های بالقوه مفید بر حسب نیاز به هم زنجیر کنین. بیایید یه ویژگی تولد رو در نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و pipe های بزرگ مثل زیر استفاده می کنه

    +

    میتونین pipe رو تو ترکیب‌های بالقوه مفید بر حسب نیاز به هم زنجیر کنین. بیایید یه ویژگی تولد رو تو نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و pipe های بزرگ مثل زیر استفاده می کنه

    import { Component } from '@angular/core';
     
    @@ -2250,15 +2250,15 @@ 

    منظور از pipe سفارشی شده چیه؟

    جدا از pipe های داخلی، می تونین pipe سفارشی خود رو با ویژگی های کلیدی زیر بنویسید:

      -
    1. پیپ کلاسی است که با metadata pipe @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید.
      +
    2. پیپ کلاسی است که با metadata pipe @Pipe تزئین شده که از کتابخونه هسته انگولار import می‌کنید.
      مثلا،
    @Pipe({name: 'myCustomPipe'})
     
      -
    1. کلاس pipe روش تبدیل رابط PipeTransform رو پیاده سازی میکنه که یه مقدار ورودی و به دنبال آن پارامترهای optional رو قبول میکنه و مقدار تبدیل شده رو برمی گرداند.
      -ساختار pipeTransform به صورت زیر خواهد بود.
    2. +
    3. کلاس pipe روش تبدیل رابط PipeTransform رو پیاده سازی میکنه که یه مقدار ورودی و به دنبال اون پارامترهای optional رو قبول میکنه و مقدار تبدیل شده رو برمیگردونه'.
      +ساختار pipeTransform رو اینطوری انجام میدیم.
    interface PipeTransform {
    @@ -2266,7 +2266,7 @@ 

    -
  • دکوراتور @Pipe به شما امکان می دهد نام pipe ای رو که در عبارات قالب استفاده می کنید، تعریف کنید. باید یه شناسه جاوا اسکریپت معتبر باشه.

  • +
  • دکوراتور @Pipe به شما امکان می ده نام pipe تو عبارات قالب استفاده می کنید، تعریف کنید. باید یه شناسه جاوا اسکریپت معتبر باشه.

  • template: `{{someInputValue | myCustomPipe: someOtherValue}}`
    @@ -2275,7 +2275,7 @@ 

    یه مثال از pipe سفارشی شده بزن؟

    -

    شما می تونین pipe های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنید. برای مثال، اجازه بدین یه pipe سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم،

    +

    ما می تونیم pipe های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنیم. برای مثال، اجازه بدین یه pipe سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم،

    import { Pipe, PipeTransform } from '@angular/core';
     
    @@ -2286,7 +2286,7 @@ 

    } }

    -

    اکنون می تونین از pipe بالا در قالب عبارت زیر استفاده کنید.

    +

    حالا می تونیم از pipe بالا تو قالب عبارت پایین استفاده کنیم.

        template: `
            <h2>Find the size of a file</h2>
    @@ -2297,12 +2297,12 @@ 

    فرق بین pure pipe و impure pipe چیه؟

    -

    یه pipe خالص تنها زمانی فراخوانی میشه که Angular تغییر در مقدار یا پارامترهای ارسال شده به یه pipe را تشخیص بده. برای مثال، هرگونه تغییر در یه مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یه مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یه pipe ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی میشه. برای مثال، یه pipe ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده میشه.

    +

    یه pipe خالص تنها زمانی فراخوانی میشه که Angular تغییر تو مقدار یا پارامترهای ارسال شده به یه pipe رو تشخیص بده. برای مثال، هرگونه تغییر تو یه مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یه مرجع شی تغییر یافته (تاریخ، آرایه، تابع، object). یه pipe ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی میشه. برای مثال، یه pipe ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده میشه.

    فهرست

  • منظور از botstrapping module چیه؟

    -

    هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده میشه. معمولاً به عنوان AppModule شناخته میشه. ساختار پیش فرض AppModule تولید شده توسط AngularCLI به شرح زیر است:

    +

    هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده میشه. معمولاً به عنوان AppModule شناخته میشه. ساختار پیش فرض AppModule تولید شده توسط AngularCLI رو اینطوری انجام میدیم:

    /* JavaScript imports */
     import { BrowserModule } from '@angular/platform-browser';
    @@ -2331,20 +2331,20 @@ 

    observable ها چیا هستن؟

    -

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

    +

    مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین تو برنامه شما پشتیبانی می کنن. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده میشن. تو اون مورد، شما تابعی رو برای انتشار مقادیر تعریف می کنین اما تا زمانی که یک مصرف کننده تو اون مشترک نشه اجرا نمیشه. بعد مصرف کننده مشترک تا زمانی که عملکرد کامل شه یا تا زمانی که اشتراکشون رو لغو نکنن اعلان ها رو دریافت کنن.

    فهرست

  • HttpClient چیه و مزیت های اون چیا هستن؟

    -

    اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنند. Angular یک API HTTP کلاینت ساده شده به نام HttpClient را ارائه می دهد که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است.
    -می تونین در ماژول ریشه خود به صورت زیر وارد کنید،

    +

    اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنن. Angular یک API HTTP کلاینت ساده شده به نام HttpClient رو ارائه می دن که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است.
    +می تونین در ماژول ریشه خود به صورت زیر import کنین

    import { HttpClientModule } from '@angular/common/http';
     
    -

    مزایای اصلی HttpClient را می توان به شرح زیر ذکر کرد:

    +

    مزایای اصلی HttpClient رو می شه به شرح زیر ذکر کرد:

      -
    1. دارای ویژگی های تست پذیری است

    2. -
    3. اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد

    4. +
    5. دارای ویژگی های تست پذیریه

    6. +
    7. اشیاء درخواست و پاسخ تایپ شده رو ارائه می ده

    8. رهگیری درخواست و پاسخ

    9. از API های Observalbe پشتیبانی میکنه

    10. از مدیریت خطای ساده پشتیبانی میکنه

    11. @@ -2402,7 +2402,7 @@

      }); }

  • -

    از آنجایی که روش سرویس فوق یک Observable را برمی گرداند که باید در کامپوننت ثبت شود.

    +

    از اونجایی که روش سرویس بالا یه Observable را برمی گردونه که باید تو کامپوننت ثبت شه.

    فهرست

  • @@ -2430,12 +2430,12 @@

    ); } -

    It is always a good idea to give the user some meaningful feedback instead of displaying the raw error object returned from HttpClient.

    +

    همیشه خوبه که به کاربر فیدبک معنی داری رو به جای ارورهای http برگردونیم

    فهرست

  • RxJS چیه؟

    -

    RxJS کتابخانه ای برای نوشتن کدهای ناهمزمان و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند.

    +

    RxJS کتابخونه ای برای نوشتن کدهای async و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند.

    برای مثال، می تونین مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.

    import { Observable, throwError } from 'rxjs';
    @@ -2445,8 +2445,8 @@ 

    subscribing چیه؟

    -

    یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر میکنه که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد subscribe() از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلان‌ها ارسال کنید.

    -

    بیایید نمونه‌ای از ایجاد و اشتراک در یک مشاهده‌پذیر ساده، با مشاهده‌گری که پیام دریافت‌شده را در کنسول ثبت می‌کند، در نظر بگیریم.

    +

    یه instance Observable تنها زمانی شروع به انتشار مقادیر میکنه که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد subscribe() از نمونه، مشترک شوید و یه شی ناظر را برای دریافت اعلان‌ها ارسال کنید.

    +

    بریم نمونه‌ای از ساخت و subscribe در یه observable ساده، با observer ای که پیامی رو تو کنسول برمیگردونه در نظر بگیریم.

    Creates an observable sequence of 5 integers, starting from 1
     const source = range(1, 5);
    @@ -2471,9 +2471,9 @@ 

    منطور از observable یه چیه؟

    -

    Observable یک شی منحصر به فرد شبیه به Promise است که می تونه به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم.
    -مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد میشن.

    -

    مثال ساده قابل مشاهده را ببینید،

    +

    Observable یک شی منحصر به فرد شبیه به Promise است که می تونه به مدیریت کدهای همگام کمک کنه. Observable ها بخشی از زبان جاوا اسکریپت نیستن بنابراین باید به یک کتابخونه معروف Observable به نام RxJS تکیه کنیم.
    +Observable ها با استفاده از کلمه کلیدی جدید ایجاد میشن.

    +

    مثال ساده Observable برای رو ببینیم

    import { Observable } from 'rxjs';
     
    @@ -2487,7 +2487,7 @@ 

    observer جیه؟

    -

    Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه میشه. دارای ساختار زیر است،

    +

    Observer یک رابط برای مصرف کننده اعلان های push-based است که توسط Observable ارائه میشه. ساختاری مثل مثال زیر داره

    interface Observer<T> {
          closed?: boolean;
    @@ -2496,21 +2496,20 @@ 

    myObservable.subscribe(myObserver);
     
    -

    Note: اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر اعلان های آن نوع را نادیده می گیرد.

    +

    Note: اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنین ناظر اعلان های اون نوع رو نادیده می گیره.

    فهرست

  • تفاوت بین pronise و یه oberservable چیه؟

    -

    در زیر لیستی از تفاوت های بین وعده و قابل مشاهده است،

  • - - + + @@ -2524,7 +2523,7 @@

    multicasting چیه؟

    -

    پخش چندگانه، عمل پخش به فهرستی از چند مشترک در یک اجرا است.

    +

    multicasting عمل پخش به فهرستی از چند مشترک در یک اجرا هستش.

    بیایید ویژگی چند ریختگی را نشان دهیم،

    var source = Rx.Observable.from([1, 2, 3]);
    @@ -2557,8 +2556,8 @@ 

    جطوری روی observevable ها error handling انجام میدی؟

    -

    شما می‌توانید با تعیین یک بازخوانی خطا روی ناظر به جای تکیه بر try/catch که در محیط ناهمزمان بی‌اثر هستند، خطاها را مدیریت کنید.

    -

    برای مثال، می تونین خطا را به صورت زیر تعریف کنید.

    +

    شما می‌توانید با تعیین یک بازخوانی خطا روی ناظر به جای تکیه بر try/catch که در محیط async بی‌اثر هستن خطاها را مدیریت کنین.

    +

    برای مثال، می تونین خطا رو اینطوری تعریف کنید.

    myObservable.subscribe({
          next(num) { console.log('Next num: ' + num)},
    @@ -2569,8 +2568,8 @@ 

    مختصر شده متصد subscribe چیه؟

    -

    متد subscribe () می‌تونه تعاریف تابع برگشتی را به‌صورت خطی بپذیرد، برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته می‌شود.

    -

    برای مثال، می تونین متد subscribe را به صورت زیر تعریف کنید.

    +

    متد subscribe () می‌تونه تعاریف تابع برگشتی را به‌صورت خطی قبول کنه برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته میشه.

    +

    برای مثال، می تونین متد subscribe رو به این صورت تعریف کنین.

    myObservable.subscribe(
          x => console.log('Observer got a next value: ' + x),
    @@ -2582,7 +2581,7 @@ 

    توابع مفیدی روی RxJS وجود دارن چیا هستن؟

    -

    کتابخانه RxJS همچنین توابع کاربردی زیر را برای ایجاد و کار با مشاهده پذیرها ارائه می دهد.

    +

    کتابخونه RxJS همچنین توابع کاربردی زیر را برای ایجاد و کار با مشاهده پذیرها ارائه می دهد.

    1. تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده

    2. تکرار از طریق مقادیر در یک جریان

    3. @@ -2594,9 +2593,9 @@

      توابع سازنده observable چیا هستن؟

      -

      RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم میکنه. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،

      +

      RxJS توابع ایجاد را برای فرآیند ایجاد observable از چیزهایی مانند promise ها، رویدادها، تایمرها و درخواست های Ajax فراهم میکنه. بیاین هر کدومشون رو با یک مثال توضیح بدیم

        -
      1. از قول یک قابل مشاهده ایجاد کنید

      2. +
      3. از promise یک observable ایجاد کنید

      import { from } from 'rxjs'; // from function
      @@ -2641,7 +2640,7 @@ 

      چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟

      -

      به طور معمول یک شی ناظر می تونه هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کند. اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر فقط اعلان های آن نوع را نادیده می گیرد.

      +

      به طور معمول یک شی ناظر می تونه هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کنه. اگر یک کنترل کننده برای یک نوع اعلان تعریف نکنین ناظر فقط اعلان های آن نوع را نادیده می گیره.

      فهرست

    4. @@ -2712,7 +2711,7 @@

      چطوری کامپوننت عا رو به custom element تبدیل کنیم؟

      تبدیل اجزا به عناصر سفارشی شامل دو مرحله اصلی است،

        -
      1. کلاس عنصر سفارشی بسازید: Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیاده‌سازی می‌کند و یک کلاس سازنده ایجاد می‌کند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده می‌شود.

      2. +
      3. کلاس عنصر سفارشی بسازید: Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می ده. فرآیند تبدیل رابط «NgElementConstructor» را پیاده‌سازی می‌کند و یک کلاس سازنده ایجاد می‌کند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده می‌شود.

      4. ثبت کلاس عنصر با مرورگر: از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده میکنه. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو میشه، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده میکنه.

      The detailed structure would be as follows,
      @@ -2759,7 +2758,6 @@

      انواع مختلف directive ها کدوما هستن؟

      -

      عمدتاً سه نوع دستورالعمل وجود دارد:

      1. مؤلفه ها - این دستورالعمل ها دارای یک الگو هستند.

      2. دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.

      3. @@ -2776,7 +2774,7 @@

        یه مثال از استفاده directive با اتریبیوت بزن؟

        بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می تونین دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:

          -
        1. کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.

        2. +
        3. کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخونه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.

        import { Directive, ElementRef } from '@angular/core';
        @@ -2819,7 +2817,7 @@ 

        import های مربوط به router چیه؟

        -

        Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخانه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. برای مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم.

        +

        Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخونه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. برای مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم.

        import { RouterModule, Routes } from '@angular/router';
         
        @@ -2827,7 +2825,7 @@

        router outlet چیه؟

        -

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

        +

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

        <router-outlet></router-outlet>
         <!-- Routed components go here -->
        @@ -3314,7 +3312,7 @@ 

        فهرست

        @@ -4049,7 +4047,7 @@

        NgUpgrade چیه؟

        -

        NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می تونین از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.

        +

        NgUpgrade یک کتابخونه است که توسط تیم Angular گردآوری شده است که می تونین از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.

        فهرست

      4. @@ -4275,7 +4273,7 @@

        schematic چیه؟

        -

        این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف میکنه. قوانینی را تعریف میکنه که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.

        +

        این یک کتابخونه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف میکنه. قوانینی را تعریف میکنه که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.

        فهرست

      5. @@ -4295,7 +4293,7 @@

        بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟

        در زیر بهترین شیوه های امنیتی در انگولاری آورده شده است.

          -
        1. از آخرین نسخه های کتابخانه Angular استفاده کنید

        2. +
        3. از آخرین نسخه های کتابخونه Angular استفاده کنید

        4. کپی Angular خود را تغییر ندهید

        5. از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید.

        @@ -4406,7 +4404,7 @@

        فهرست

      6. @@ -4727,8 +4725,8 @@

        منظور از کتابخونه انگولار چیه؟

        -

        کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد چون نمی تونه به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخانه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنین که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند.

        -

        Note: شما می تونین کتابخانه شخص ثالث خود را ایجاد کنین و آن را به عنوان بسته npm منتشر کنین تا در یک برنامه استفاده شود.

        +

        کتابخونه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد چون نمی تونه به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخونه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنین که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند.

        +

        Note: شما می تونین کتابخونه شخص ثالث خود را ایجاد کنین و آن را به عنوان بسته npm منتشر کنین تا در یک برنامه استفاده شود.

        فهرست

      7. @@ -4748,7 +4746,7 @@

        TestBed چیه؟

        -

        TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخانه های آن است. حتی با وجود اینکه ما هنوز تست‌های خود را در Jasmine می‌نویسیم و با استفاده از Karma اجرا می‌کنیم، این API راه آسان‌تری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه می‌کند.

        +

        TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخونه های آن است. حتی با وجود اینکه ما هنوز تست‌های خود را در Jasmine می‌نویسیم و با استفاده از Karma اجرا می‌کنیم، این API راه آسان‌تری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه می‌کند.

        فهرست

      8. @@ -4766,13 +4764,13 @@

        How do you create schematics for libraries?

        -

        شما می تونین مجموعه های شماتیک خود را برای ادغام کتابخانه خود با Angular CLI ایجاد کنین. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی میشن.

        +

        شما می تونین مجموعه های شماتیک خود را برای ادغام کتابخونه خود با Angular CLI ایجاد کنین. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی میشن.

          -
        1. Add schematics: این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده میشه.
          +
        2. Add schematics: این شماتیک ها برای نصب کتابخونه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده میشه.
          برای مثال، @angular/material schematic به دستور add دستور نصب و راه اندازی Angular Material و theming را می دهد.
        3. -
        4. Generate schematics: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخانه با استفاده از دستور "ng generate" استفاده میشن.
          +
        5. Generate schematics: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخونه با استفاده از دستور "ng generate" استفاده میشن.
          برای مثال، @angular/material schematic شماتیک های تولید را برای اجزای UI فراهم میکنه. فرض کنین مولفه جدول با استفاده از "ng generate @angular/material:table" تولید شده است.
        6. -
        7. Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده میشه.
          +
        8. Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخونه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخونه با استفاده از دستور "ng update" استفاده میشه.
          برای مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز میکنه.

        فهرست

        @@ -5220,7 +5218,7 @@

        فهرست

      9. @@ -5382,7 +5380,6 @@

        کدوم class ها نباید به declaration ها اضافه بشن؟

        -

        انواع کلاس زیر نباید به اعلامیه ها اضافه شود

        1. کلاس که قبلاً در هر ماژول دیگری اعلام شده است.

        2. دستورالعمل های وارد شده از یک ماژول دیگر.

        3. @@ -5927,7 +5924,7 @@

          روش هایی که برای group کردن فرم کنترل ها وجود داره چیا هستن؟

          اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد.

            -
          1. FormGroup: یک فرم را با مجموعه ای از کنترل های ثابت تعریف میکنه که می تونن در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.

          2. +
          3. FormGroup: یک فرم را با مجموعه ای از کنترل های ثابت تعریف میکنه که می تونن تو یک شیء با هم مدیریت شن. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.

          این فرم گروه می تونه برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.

          @@ -6063,7 +6060,7 @@

          چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟>

          -

          برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می تونین از روش `patchValue () استفاده کنید. برای مثال ، می تونین نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.

          +

          برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می تونیم از روش `patchValue () استفاده کنید. برای مثال ، می تونیم نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنیم.

          updateProfile() {
             this.userProfile.patchValue({
          @@ -6104,7 +6101,7 @@ 

          چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟

          -

          شما می تونین یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.

          +

          شما می تونین یک ویژگی دریافت کننده (تشخیصی) رو تو داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل رو تو طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارن و برعکس یا نه ، مفید است.

          export class UserProfileComponent {
           
          @@ -6125,7 +6122,7 @@ 

          کلاس هایی که با ngModel تامین شدن چیا هستن؟

          -

          دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS انگولاری به روز میکنه تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،

          +

          دستورالعمل ngModel کنترل فرم را با کلاسهای ویژه CSS انگولاری به روز میکنه تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،

    قابل مشاهدهقولoberservablepronise
    @@ -6158,8 +6155,8 @@

    چطوری یه فرم رو ریست میکنی؟

    -
    در یک فرم مدل محور ، می تونین فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. 
    -  برای مثال ، می تونین مدل فرم را در ارسال به شرح زیر تنظیم کنید ،
    +
    در یک فرم مدل محور ، می تونین فرم را فقط با فراخوانی تابع "reset()" در مدل فرم ما تنظیم کنید. 
    + برای مثال ، می تونین مدل فرم را در ارسال به شرح زیر تنظیم کنید ،
      <span dir="ltr" align="left">
     
      ```js
    @@ -6181,7 +6178,7 @@ 

  • تایپ های مربوط به validator فانکشن چیا هستن؟

    -

    در اشکال واکنشی ، اعتبار سنج ها می تونن توابع همزمان یا ناهمزمان باشند ،

    +

    در اشکال واکنشی ، اعتبار سنج ها می تونن توابع sync یا async باشن ،

    1. اعتبار سنجی همگام سازی: این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.

    2. اعتبار سنج های Async: این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر میکنه. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.

    3. @@ -6212,7 +6209,7 @@

      چطوری پرفورمنس validator های async رو بیتشر میکنی؟

      -

      از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا میشن ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد میکنه. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
      +

      همه validator ها پس از هر تغییر ارزش فرم اجرا میشن ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد میکنه. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
      استفاده بر اساس انواع فرم متفاوت خواهد بود.

      1. Template-driven forms: Set the property on ngModelOptions directive

      2. @@ -6230,12 +6227,12 @@

        چطوری ngfor و ngIf برای یه المان همزمان تنظیم کنیم؟

        -

        بعضی اوقات ممکنه شما نیاز به NGFOR و NGIF در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید.

        +

        بعضی اوقات ممکنه شما نیاز به ngfor و ngIf در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید.

         Template parse errors: Can't have multiple template bindings on one element.
         

        در این حالت ، شما باید از ng-container یا ng-template استفاده کنید.
        -بیایید بگوییم اگر سعی می کنید موارد را فقط در صورت موجود بودن موارد حلقه کنید ، کد زیر خطایی را در مرورگر پرتاب میکنه

        +اگر سعی می کنید موارد را فقط در صورت موجود بودن موارد حلقه کنید ، کد زیر خطایی رو به مرورگر ارسال میکنه

        <ul *ngIf="items" *ngFor="let item of items">
              <li></li>
        @@ -6253,8 +6250,8 @@ 

        منظور از پراپرتی host توی css چیه؟

        -

        از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده میشه. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی تونین از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
        -برای مثال ، شما می تونین یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،

        +

        از انتخاب کننده شبه کلاس "host" برای هدف قرار دادن سبک های موجود در عنصری که host مؤلفه است استفاده میشه. از آنجا که عنصر host در الگوی مؤلفه والدین قرار داره ، شما نمی تونین از طریق سایر مؤلفه ها به وسیله دیگر به عنصر host برسید.
        +برای مثال ، شما می تونین یک مرز برای عنصر والدین ایجاد کنین ، همانطور که در زیر وجود داره ،

        //Other styles for app.component.css
         //...
        @@ -6298,17 +6295,17 @@ 

        مزایای inlining اتوماتیک چیه؟

        -

        در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده میکنه ، بارگیری و درون خطی میکنه. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال میشه.

        +

        در طول زمان کامپایل ، Angular CLI فونت هایی ر. که برنامه ما از اون استفاده میکنه ، بارگیری و درون خطی میکنه. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) رو سرعت می ده و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال میشه.

        فهرست

      3. content projection چیه؟

        -

        طرح ریزی محتوا الگویی است که در آن شما محتوای مورد نظر خود را در داخل یک مؤلفه دیگر وارد می کنید یا پروژه می کنید.

        +

        الگوییه که تو اون ما محتوا رو برای استفاده مجدد داخل یک کامپوننت دیگه وارد می کنیم.

        فهرست

      4. ng-به چی میگن و هدف از اون چیه؟content

        -

        از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده میشه که به افزایش قابلیت استفاده مجدد مؤلفه کمک میکنه.

        +

        از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده میشه که به افزایش قابلیت استفاده مجدد کامپوننت کمک میکنه.

        فهرست

      diff --git a/Book.md b/Book.md index ad275fb..c43ce94 100644 --- a/Book.md +++ b/Book.md @@ -69,7 +69,7 @@ puppeteer: |22| [هدف از directive ngIf چیه؟](#هدف-از-directive-ngIf-چیه؟)| |23| [اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟](#اگه-از-تگ-script-توی-یه-templete-استفاده-کنیم-چه-اتفاقی-میوفته؟)| |24| [منظور از interpolation چیه؟](#منظور-از-interpolation-چیه؟)| -|25| [template expressions ها چیا هستن?](#template-expressions-ها-چیا-هستن?)| +|25| [template expression ها چیا هستن?](#template-expressions-ها-چیا-هستن?)| |26| [template statements ها چیا هستن؟](#template-statements-ها-چیا-هستن؟)| |27| [چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟](#چطوری-دیتاهایی-که-bind-شدن-رو-طبقه-بندی-میکنی؟)| |28| [pipe ها چیا هستن؟](#pipe-ها-چیا-هستن؟)| @@ -933,10 +933,10 @@ puppeteer: **[فهرست](#فهرست)** -25. ### template expressions ها چیا هستن? +25. ### template expression ها چیا هستن? - یک عبارت الگو مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کنه. Angular عبارت رو اجرا می کنه و اون رو به خاصیت یک هدف الزام آور اختصاص میده. هدف ممکنه یک عنصر HTML، یک جزء یا یک دستورالعمل باشد. در ویژگی binding، یک عبارت الگو در نقل قول در سمت راست نماد = مانند [property]="expression ظاهر می شه. - در نحو درون یابی، عبارت الگو با پرانتزهای مجعد دوتایی احاطه شده. برای مثال، در درون یابی زیر، عبارت الگو {{username}} است، + یه template expression مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کنه. Angular عبارت رو اجرا می کنه و اون رو به به دیتای هدف اضافه میکنه. هدف ممکنه یه عنصر HTML، یه کامپوننت یا یه directive باشد. در ویژگی binding، یه template expression تو نقل قول تو سمت راست نماد = مثل [property]="expression ظاهر می شه. + در نحو درون یابی، template expression با پرانتزهای مجعد دوتایی احاطه شده. برای مثال، در درون یابی پایین template expression {{username}} هستش @@ -947,19 +947,19 @@ puppeteer: عبارات جاوا اسکریپت زیر در عبارت قالب ممنوع هستن - 1. assignments (=، +=، -=، ...) - 2. new - 3. زنجیره عبارات با ; یا ، - 4. عملگرهای افزایش و کاهش (++ و --) + 1. assignments (=، +=، -=، ...) + 2. new + 3. زنجیره عبارات با ; یا ، + 4. عملگرهای افزایش و کاهش (++ و --) ---------------------------------- **[فهرست](#فهرست)** 26. ### template statements ها چیا هستن؟ - یه template statements به رویدادی پاسخ میده که توسط یک هدف الزام آور مانند یک عنصر، مؤلفه یا دستورالعمل ساخته شده. عبارات الگو در نقل قول در سمت راست نماد = مانند **(رویداد)="statement"** ظاهر می شن. + یه template statements به رویدادی پاسخ میده که توسط یک دیتای هدف مثل یک المنت مؤلفه یا directive ساخته شده. عبارات الگو تو نقل قول تو سمت راست نماد = مانند **(رویداد)="statement"** ظاهر می شن. - Let's take an example of button click event's statement + بیاین برای گذاشتن ایونت روی دکمه یه مثال بزنیم @@ -969,25 +969,25 @@ puppeteer: - در عبارت بالا، editProfile یک عبارت الگو است. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند. - 1. جدید + تو عبارت بالا، editProfile یه template expration هستش. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند. + 1. new 2. عملگرهای افزایش و کاهش، ++ و -- 3. انتساب عملگر، مانند += و -= 4. عملگرهای بیتی | و & - 5. عملگرهای عبارت الگو + 5. عملگرهای template expression -------------------------------------- **[فهرست](#فهرست)** 27. ### چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟ - انواع اتصال رو میشه به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شن. اونا به صورت زیر فهرست شدن + انواع اتصال رو میشه به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شن: - 1. از منبع به مشاهده - 2. از دیدگاه به منبع - 3. View-to-source-to-view + 1. source-to-view + 2. view-to-source + 3. View-to-source-to-view - نحو ممکن الزام آور رو می توان به صورت جدولی در زیر ارائه کرد: + دیتا هدف خروجی رو می توان به صورت جدولی در زیر ارائه کرد: | جهت داده | نحو | نوع | |---- | --------- | ---- | @@ -999,7 +999,7 @@ puppeteer: 28. ### pipe ها چیا هستن؟ - یک pipe داده ها رو به عنوان ورودی می گیرد و اون رو به خروجی دلخواه تبدیل می کنه. برای مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی تولد یک جزء به تاریخ دوست‌داشتنی با استفاده از pipe **date** در نظر بگیریم. + یک pipe داده ها رو به عنوان ورودی می گیره و اون رو به خروجی دلخواه تبدیل می کنه. برای مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی birthday کامپوننت به تاریخ قابل استفاده با استفاده از pipe **date** در نظر بگیریم. @@ -1021,7 +1021,7 @@ puppeteer: 29. ### یه منظور از pipe پارامتردار شده چیه؟ - یک pipe می تونه هر تعداد پارامتر اختیاری رو برای تنظیم دقیق خروجی خود بپذیرد. pipe پارامتر شده رو می توان با اعلام نام pipe با علامت دو نقطه ( : ) و سپس مقدار پارامتر ایجاد کرد. اگر pipe چندین پارامتر رو می پذیرد، مقادیر رو با دو نقطه جدا کنید. بیایید یک مثال تولد با یک قالب خاص (dd/MM/yyyy) در نظر بگیریم: + یه pipe می تونه هر تعداد پارامتر اختیاری رو برای تنظیم دقیق خروجیش قبول کنه. pipe پارامتر شده رو می شه با اعلام نام pipe با علامت دو نقطه ( : ) و بعد مقدار پارامتر ایجاد کرد. اگه pipe چن تا پارامتر رو میگیرع مقادیر رو با دو نقطه جدا کنین. بیاین یک مثال تولد با یک قالب خاص (dd/MM/yyyy) در نظر بگیریم: @@ -1039,13 +1039,13 @@ puppeteer: - **Note:** مقدار پارامتر می تونه هر عبارت الگوی معتبری باشد، مثل یه رشته لفظی یا یه ویژگی جزء. + **Note:** مقدار پارامتر می تونه هر عبارت الگوی معتبری باشه مثل یه رشته لفظی یا یه ویژگی جزء. **[فهرست](#فهرست)** 30. ### چطوری زنجیره ای از pipe ها میسازی؟ - میتونین pipe رو در ترکیب‌های بالقوه مفید بر حسب نیاز به هم زنجیر کنین. بیایید یه ویژگی تولد رو در نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و pipe های بزرگ مثل زیر استفاده می کنه + میتونین pipe رو تو ترکیب‌های بالقوه مفید بر حسب نیاز به هم زنجیر کنین. بیایید یه ویژگی تولد رو تو نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و pipe های بزرگ مثل زیر استفاده می کنه @@ -1069,7 +1069,7 @@ puppeteer: 31. ### منظور از pipe سفارشی شده چیه؟ جدا از pipe های داخلی، می تونین pipe سفارشی خود رو با ویژگی های کلیدی زیر بنویسید: - 1. پیپ کلاسی است که با metadata pipe **@Pipe** تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید. + 1. پیپ کلاسی است که با metadata pipe **@Pipe** تزئین شده که از کتابخونه هسته انگولار import می‌کنید. مثلا، @@ -1080,8 +1080,8 @@ puppeteer: - 2. کلاس pipe روش تبدیل رابط **PipeTransform** رو پیاده سازی میکنه که یه مقدار ورودی و به دنبال آن پارامترهای optional رو قبول میکنه و مقدار تبدیل شده رو برمی گرداند. - ساختار pipeTransform به صورت زیر خواهد بود. + 2. کلاس pipe روش تبدیل رابط **PipeTransform** رو پیاده سازی میکنه که یه مقدار ورودی و به دنبال اون پارامترهای optional رو قبول میکنه و مقدار تبدیل شده رو برمیگردونه'. + ساختار pipeTransform رو اینطوری انجام میدیم. @@ -1094,7 +1094,7 @@ puppeteer: - 3. دکوراتور @Pipe به شما امکان می دهد نام pipe ای رو که در عبارات قالب استفاده می کنید، تعریف کنید. باید یه شناسه جاوا اسکریپت معتبر باشه. + 3. دکوراتور @Pipe به شما امکان می ده نام pipe تو عبارات قالب استفاده می کنید، تعریف کنید. باید یه شناسه جاوا اسکریپت معتبر باشه. @@ -1108,7 +1108,7 @@ puppeteer: 32. ### یه مثال از pipe سفارشی شده بزن؟ - شما می تونین pipe های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنید. برای مثال، اجازه بدین یه pipe سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم، + ما می تونیم pipe های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنیم. برای مثال، اجازه بدین یه pipe سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم، @@ -1125,7 +1125,7 @@ puppeteer: - اکنون می تونین از pipe بالا در قالب عبارت زیر استفاده کنید. + حالا می تونیم از pipe بالا تو قالب عبارت پایین استفاده کنیم. @@ -1143,13 +1143,13 @@ puppeteer: 33. ### فرق بین pure pipe و impure pipe چیه؟ - یه pipe خالص تنها زمانی فراخوانی میشه که Angular تغییر در مقدار یا پارامترهای ارسال شده به یه pipe را تشخیص بده. برای مثال، هرگونه تغییر در یه مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یه مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یه pipe ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی میشه. برای مثال، یه pipe ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده میشه. + یه pipe خالص تنها زمانی فراخوانی میشه که Angular تغییر تو مقدار یا پارامترهای ارسال شده به یه pipe رو تشخیص بده. برای مثال، هرگونه تغییر تو یه مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یه مرجع شی تغییر یافته (تاریخ، آرایه، تابع، object). یه pipe ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی میشه. برای مثال، یه pipe ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده میشه. **[فهرست](#فهرست)** 34. ### منظور از botstrapping module چیه؟ - هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده میشه. معمولاً به عنوان AppModule شناخته میشه. ساختار پیش فرض AppModule تولید شده توسط AngularCLI به شرح زیر است: + هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده میشه. معمولاً به عنوان AppModule شناخته میشه. ساختار پیش فرض AppModule تولید شده توسط AngularCLI رو اینطوری انجام میدیم: @@ -1184,14 +1184,14 @@ puppeteer: 35. ### observable ها چیا هستن؟ - مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین در برنامه شما پشتیبانی می کنند. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده میشن. در این مورد، شما تابعی را برای انتشار مقادیر تعریف می کنید، اما تا زمانی که یک مصرف کننده در آن مشترک نشود، اجرا نمیشه. سپس مصرف کننده مشترک تا زمانی که عملکرد کامل شود یا تا زمانی که اشتراک خود را لغو نکند، اعلان ها را دریافت میکنه. + مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین تو برنامه شما پشتیبانی می کنن. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده میشن. تو اون مورد، شما تابعی رو برای انتشار مقادیر تعریف می کنین اما تا زمانی که یک مصرف کننده تو اون مشترک نشه اجرا نمیشه. بعد مصرف کننده مشترک تا زمانی که عملکرد کامل شه یا تا زمانی که اشتراکشون رو لغو نکنن اعلان ها رو دریافت کنن. **[فهرست](#فهرست)** 36. ### HttpClient چیه و مزیت های اون چیا هستن؟ - اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنند. Angular یک API HTTP کلاینت ساده شده به نام **HttpClient** را ارائه می دهد که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است. - می تونین در ماژول ریشه خود به صورت زیر وارد کنید، + اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنن. Angular یک API HTTP کلاینت ساده شده به نام **HttpClient** رو ارائه می دن که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است. + می تونین در ماژول ریشه خود به صورت زیر import کنین @@ -1201,9 +1201,9 @@ puppeteer: - مزایای اصلی HttpClient را می توان به شرح زیر ذکر کرد: - 1. دارای ویژگی های تست پذیری است - 2. اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد + مزایای اصلی HttpClient رو می شه به شرح زیر ذکر کرد: + 1. دارای ویژگی های تست پذیریه + 2. اشیاء درخواست و پاسخ تایپ شده رو ارائه می ده 3. رهگیری درخواست و پاسخ 4. از API های Observalbe پشتیبانی میکنه 5. از مدیریت خطای ساده پشتیبانی میکنه @@ -1213,7 +1213,7 @@ puppeteer: 37. ### چطوری از HttpClient استفاده کنیم؟ در زیر مراحلی که برای استفاده از HttpClient باید طی شود آورده شده است. - 1. HttpClient را به ماژول root وارد کنید: + 1. HttpClient را به ماژول root وارد کنید: @@ -1273,7 +1273,7 @@ puppeteer: - از آنجایی که روش سرویس فوق یک Observable را برمی گرداند که باید در کامپوننت ثبت شود. + از اونجایی که روش سرویس بالا یه Observable را برمی گردونه که باید تو کامپوننت ثبت شه. **[فهرست](#فهرست)** @@ -1317,15 +1317,15 @@ puppeteer: - It is always a good idea to give the user some meaningful feedback instead of displaying the raw error object returned from HttpClient. + همیشه خوبه که به کاربر فیدبک معنی داری رو به جای ارورهای http برگردونیم **[فهرست](#فهرست)** 40. ### RxJS چیه؟ - RxJS کتابخانه ای برای نوشتن کدهای ناهمزمان و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند. + RxJS کتابخونه ای برای نوشتن کدهای async و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند. - برای مثال، می تونین مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید. + برای مثال، می تونین مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید. @@ -1341,9 +1341,9 @@ puppeteer: 41. ### subscribing چیه؟ - یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر میکنه که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد **subscribe()** از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلان‌ها ارسال کنید. + یه instance Observable تنها زمانی شروع به انتشار مقادیر میکنه که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد **subscribe()** از نمونه، مشترک شوید و یه شی ناظر را برای دریافت اعلان‌ها ارسال کنید. - بیایید نمونه‌ای از ایجاد و اشتراک در یک مشاهده‌پذیر ساده، با مشاهده‌گری که پیام دریافت‌شده را در کنسول ثبت می‌کند، در نظر بگیریم. + بریم نمونه‌ای از ساخت و subscribe در یه observable ساده، با observer ای که پیامی رو تو کنسول برمیگردونه در نظر بگیریم. @@ -1374,10 +1374,10 @@ puppeteer: 42. ### منطور از observable یه چیه؟ - Observable یک شی منحصر به فرد شبیه به Promise است که می تونه به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم. - مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد میشن. + Observable یک شی منحصر به فرد شبیه به Promise است که می تونه به مدیریت کدهای همگام کمک کنه. Observable ها بخشی از زبان جاوا اسکریپت نیستن بنابراین باید به یک کتابخونه معروف Observable به نام RxJS تکیه کنیم. + Observable ها با استفاده از کلمه کلیدی جدید ایجاد میشن. - مثال ساده قابل مشاهده را ببینید، + مثال ساده Observable برای رو ببینیم @@ -1398,7 +1398,7 @@ puppeteer: 43. ### observer جیه؟ - Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه میشه. دارای ساختار زیر است، + Observer یک رابط برای مصرف کننده اعلان های push-based است که توسط Observable ارائه میشه. ساختاری مثل مثال زیر داره @@ -1413,7 +1413,7 @@ puppeteer: - کنترل‌کننده‌ای که رابط Observer را برای دریافت اعلان‌های قابل مشاهده پیاده‌سازی می‌کند، به‌عنوان پارامتری برای مشاهده پذیر به شرح زیر ارسال می‌شود. + کنترل‌کننده‌ای که رابط Observer را برای دریافت اعلان‌های قابل مشاهده پیاده‌سازی میکنه به‌عنوان پارامتری برای مشاهده پذیر ارسال شه. @@ -1423,28 +1423,27 @@ puppeteer: - **Note:** اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر اعلان های آن نوع را نادیده می گیرد. + **Note:** اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنین ناظر اعلان های اون نوع رو نادیده می گیره. **[فهرست](#فهرست)** 44. ### تفاوت بین pronise و یه oberservable چیه؟ - در زیر لیستی از تفاوت های بین وعده و قابل مشاهده است، - | قابل مشاهده | قول | + | oberservable | pronise | |---- | --------- | | اعلامی: محاسبات تا زمان اشتراک شروع نمیشه تا هر زمان که به نتیجه نیاز داشتید، قابل اجرا باشند | اجرا بلافاصله پس از ایجاد| | ارائه مقادیر متعدد در طول زمان | فقط یک | - | روش Subscribe برای مدیریت خطا استفاده میشه که مدیریت خطا را متمرکز و قابل پیش بینی میکنه| خطاهای فشاری به کودک وعده می دهد | + | روش Subscribe برای مدیریت خطا استفاده میشه که مدیریت خطا را متمرکز و قابل پیش بینی میکنه| خطاها رو به فرزند promise ارسال میکنه | | ارائه زنجیره و اشتراک برای رسیدگی به برنامه های پیچیده | فقط از .then() بند | استفاده میکنه **[فهرست](#فهرست)** 45. ### multicasting چیه؟ - پخش چندگانه، عمل پخش به فهرستی از چند مشترک در یک اجرا است. + multicasting عمل پخش به فهرستی از چند مشترک در یک اجرا هستش. - بیایید ویژگی چند ریختگی را نشان دهیم، + بیایید ویژگی چند ریختگی را نشان دهیم، @@ -1471,9 +1470,9 @@ puppeteer: 46. ### جطوری روی observevable ها error handling انجام میدی؟ - شما می‌توانید با تعیین یک **بازخوانی خطا** روی ناظر به جای تکیه بر try/catch که در محیط ناهمزمان بی‌اثر هستند، خطاها را مدیریت کنید. + شما می‌توانید با تعیین یک **بازخوانی خطا** روی ناظر به جای تکیه بر try/catch که در محیط async بی‌اثر هستن خطاها را مدیریت کنین. - برای مثال، می تونین خطا را به صورت زیر تعریف کنید. + برای مثال، می تونین خطا رو اینطوری تعریف کنید. @@ -1491,9 +1490,9 @@ puppeteer: 47. ### مختصر شده متصد subscribe چیه؟ - متد subscribe () می‌تونه تعاریف تابع برگشتی را به‌صورت خطی بپذیرد، برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته می‌شود. + متد subscribe () می‌تونه تعاریف تابع برگشتی را به‌صورت خطی قبول کنه برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته میشه. - برای مثال، می تونین متد subscribe را به صورت زیر تعریف کنید. + برای مثال، می تونین متد subscribe رو به این صورت تعریف کنین. @@ -1512,7 +1511,7 @@ puppeteer: 48. ### توابع مفیدی روی RxJS وجود دارن چیا هستن؟ - کتابخانه RxJS همچنین توابع کاربردی زیر را برای ایجاد و کار با مشاهده پذیرها ارائه می دهد. + کتابخونه RxJS همچنین توابع کاربردی زیر را برای ایجاد و کار با مشاهده پذیرها ارائه می دهد. 1. تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده 2. تکرار از طریق مقادیر در یک جریان @@ -1524,9 +1523,9 @@ puppeteer: 49. ### توابع سازنده observable چیا هستن؟ - RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم میکنه. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم، + RxJS توابع ایجاد را برای فرآیند ایجاد observable از چیزهایی مانند promise ها، رویدادها، تایمرها و درخواست های Ajax فراهم میکنه. بیاین هر کدومشون رو با یک مثال توضیح بدیم - 1. از قول یک قابل مشاهده ایجاد کنید + 1. از promise یک observable ایجاد کنید @@ -1588,7 +1587,7 @@ puppeteer: 50. ### چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟ - به طور معمول یک شی ناظر می تونه هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کند. اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر فقط اعلان های آن نوع را نادیده می گیرد. + به طور معمول یک شی ناظر می تونه هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کنه. اگر یک کنترل کننده برای یک نوع اعلان تعریف نکنین ناظر فقط اعلان های آن نوع را نادیده می گیره. **[فهرست](#فهرست)** @@ -1602,7 +1601,7 @@ puppeteer: از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی میشن، پشتیبانی مرورگر از عناصر انگولاری مانند پشتیبانی از عناصر سفارشی است. - این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی می‌شود و برای مرورگرهای دیگر در انتظار است. + این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی می‌شود و برای مرورگرهای دیگر در انتظار است. | مرورگر | پشتیبانی از المان انگولاری | |---- | --------- | @@ -1641,8 +1640,8 @@ puppeteer: 56. ### چطوری کامپوننت عا رو به custom element تبدیل کنیم؟ تبدیل اجزا به عناصر سفارشی شامل **دو** مرحله اصلی است، - 1. **کلاس عنصر سفارشی بسازید:** Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیاده‌سازی می‌کند و یک کلاس سازنده ایجاد می‌کند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده می‌شود. - 2. **ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده میکنه. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو میشه، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده میکنه. + 1. **کلاس عنصر سفارشی بسازید:** Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می ده. فرآیند تبدیل رابط «NgElementConstructor» را پیاده‌سازی می‌کند و یک کلاس سازنده ایجاد می‌کند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده می‌شود. + 2. **ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده میکنه. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو میشه، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده میکنه. The detailed structure would be as follows, ![CreateElement](images/createElement.png) @@ -1652,8 +1651,8 @@ puppeteer: 57. ### قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟ ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت میشن. اجازه دهید آنها را در دو مرحله توصیف کنیم، - 1. CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه میکنه. برای مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد. - 2. خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال میشن که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است. + 1. CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه میکنه. برای مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد. + 2. خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال میشن که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است. **[فهرست](#فهرست)** @@ -1662,7 +1661,7 @@ puppeteer: می‌توانید از انواع «NgElement» و «WithProperties» که از @angular/elements صادر شده‌اند استفاده کنید. بیایید ببینیم که چگونه می توان آن را با مقایسه با کامپوننت Angular اعمال کرد. - 1. ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود. + 1. ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود. @@ -1699,10 +1698,9 @@ puppeteer: 60. ### انواع مختلف directive ها کدوما هستن؟ - عمدتاً سه نوع دستورالعمل وجود دارد: - 1. **مؤلفه ها** - این دستورالعمل ها دارای یک الگو هستند. - 2. **دستورالعمل های ساختاری** — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند. - 3. **دستورالعمل های ویژگی** - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند. + 1. **مؤلفه ها** - این دستورالعمل ها دارای یک الگو هستند. + 2. **دستورالعمل های ساختاری** — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند. + 3. **دستورالعمل های ویژگی** - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند. **[فهرست](#فهرست)** @@ -1716,7 +1714,7 @@ puppeteer: بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می تونین دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید: - 1. کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید **Directive** را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و **ElementRef** را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم. + 1. کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید **Directive** را از کتابخونه هسته وارد کنیم تا متادیتا را اعمال کنیم و **ElementRef** را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم. @@ -1780,7 +1778,7 @@ puppeteer: 65. ### import های مربوط به router چیه؟ - Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخانه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. برای مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم. + Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخونه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. برای مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم. @@ -1794,7 +1792,7 @@ puppeteer: 66. ### router outlet چیه؟ - RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل میکنه که نقطه ای را در قالب مشخص میکنه که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده میشه، + RouterOutlet یک دستورالعمل از کتابخونه روتر است و به عنوان یک مکان نگهدار عمل میکنه که نقطه ای را در قالب مشخص میکنه که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده میشه، @@ -1957,7 +1955,7 @@ puppeteer: اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث میشه روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می تونین از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است. - برای مثال، شما می تونین PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید + برای مثال، شما می تونین PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید @@ -2475,7 +2473,7 @@ puppeteer: بخش وابستگی های package.json با در یک برنامه انگولاری را می توان به صورت زیر تقسیم کرد: 1. **بسته های انگولاری:** هسته انگولاری و ماژول های اختیاری. نام بسته آنها @angular/ شروع میشه. - 2. **بسته های پشتیبانی:** کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند. + 2. **بسته های پشتیبانی:** کتابخونه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند. 3. **بسته های Polyfill:** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل میکنه. **[فهرست](#فهرست)** @@ -3423,7 +3421,7 @@ puppeteer: 148. ### NgUpgrade چیه؟ - NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می تونین از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید. + NgUpgrade یک کتابخونه است که توسط تیم Angular گردآوری شده است که می تونین از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید. **[فهرست](#فهرست)** @@ -3623,7 +3621,7 @@ puppeteer: 158. ### schematic چیه؟ - این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف میکنه. قوانینی را تعریف میکنه که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند. + این یک کتابخونه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف میکنه. قوانینی را تعریف میکنه که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند. **[فهرست](#فهرست)** @@ -3651,7 +3649,7 @@ puppeteer: در زیر بهترین شیوه های امنیتی در انگولاری آورده شده است. - 1. از آخرین نسخه های کتابخانه Angular استفاده کنید + 1. از آخرین نسخه های کتابخونه Angular استفاده کنید 2. کپی Angular خود را تغییر ندهید 3. از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید. @@ -3795,7 +3793,7 @@ puppeteer: Angular دارای پشتیبانی داخلی برای جلوگیری از آسیب‌پذیری‌های سطح http مانند جعل درخواست بین سایتی (CSRF یا XSRF) و گنجاندن اسکریپت بین سایتی (XSSI) است. حتی اگر این آسیب‌پذیری‌ها باید در سمت سرور کاهش یابند، Angular کمک‌هایی را برای آسان‌تر کردن ادغام در سمت کلاینت ارائه می‌کند. 1. HttpClient از مکانیزم نشانه ای پشتیبانی میکنه که برای جلوگیری از حملات XSRF استفاده میشه - 2. کتابخانه HttpClient قرارداد پاسخ‌های JSON پیشوندی را تشخیص می‌دهد (که js غیرقابل اجرا با نویسه‌های ")]}'،\\n" کد می‌کند) و به طور خودکار رشته ")]}'،\\n" را از همه پاسخ‌های قبل حذف می‌کند. تجزیه بیشتر + 2. کتابخونه HttpClient قرارداد پاسخ‌های JSON پیشوندی را تشخیص می‌دهد (که js غیرقابل اجرا با نویسه‌های ")]}'،\\n" کد می‌کند) و به طور خودکار رشته ")]}'،\\n" را از همه پاسخ‌های قبل حذف می‌کند. تجزیه بیشتر **[فهرست](#فهرست)** @@ -4232,9 +4230,9 @@ puppeteer: 189. ### منظور از کتابخونه انگولار چیه؟ - کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد چون نمی تونه به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخانه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنین که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند. + کتابخونه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد چون نمی تونه به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخونه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنین که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند. - **Note:** شما می تونین کتابخانه شخص ثالث خود را ایجاد کنین و آن را به عنوان بسته npm منتشر کنین تا در یک برنامه استفاده شود. + **Note:** شما می تونین کتابخونه شخص ثالث خود را ایجاد کنین و آن را به عنوان بسته npm منتشر کنین تا در یک برنامه استفاده شود. **[فهرست](#فهرست)** @@ -4262,7 +4260,7 @@ puppeteer: 192. ### TestBed چیه؟ - TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخانه های آن است. حتی با وجود اینکه ما هنوز تست‌های خود را در Jasmine می‌نویسیم و با استفاده از Karma اجرا می‌کنیم، این API راه آسان‌تری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه می‌کند. + TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخونه های آن است. حتی با وجود اینکه ما هنوز تست‌های خود را در Jasmine می‌نویسیم و با استفاده از Karma اجرا می‌کنیم، این API راه آسان‌تری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه می‌کند. **[فهرست](#فهرست)** @@ -4288,12 +4286,12 @@ puppeteer: 195. ### How do you create schematics for libraries? - شما می تونین مجموعه های شماتیک خود را برای ادغام کتابخانه خود با Angular CLI ایجاد کنین. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی میشن. - 1. **Add schematics:** این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده میشه. + شما می تونین مجموعه های شماتیک خود را برای ادغام کتابخونه خود با Angular CLI ایجاد کنین. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی میشن. + 1. **Add schematics:** این شماتیک ها برای نصب کتابخونه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده میشه. برای مثال، @angular/material schematic به دستور add دستور نصب و راه اندازی Angular Material و theming را می دهد. - 2. **Generate schematics**: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخانه با استفاده از دستور "ng generate" استفاده میشن. + 2. **Generate schematics**: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخونه با استفاده از دستور "ng generate" استفاده میشن. برای مثال، @angular/material schematic شماتیک های تولید را برای اجزای UI فراهم میکنه. فرض کنین مولفه جدول با استفاده از "ng generate @angular/material:table" تولید شده است. - 3. **Update schematics:** این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده میشه. + 3. **Update schematics:** این شماتیک ها برای به روز رسانی وابستگی های کتابخونه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخونه با استفاده از دستور "ng update" استفاده میشه. برای مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز میکنه. **[فهرست](#فهرست)** @@ -4882,7 +4880,7 @@ puppeteer: 2. **مسیریابی:** اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند. 3. **مسیریابی:** پیکربندی مسیریابی را برای ماژول دیگر فراهم میکنه. 4. **سرویس:** این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (برای مثال ، httpclientmodule) - 5. **ویجت:** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (برای مثال ، کتابخانه های شخص ثالث مانند UI مواد) + 5. **ویجت:** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (برای مثال ، کتابخونه های شخص ثالث مانند UI مواد) **[فهرست](#فهرست)** @@ -5097,7 +5095,6 @@ puppeteer: 242. ### کدوم class ها نباید به declaration ها اضافه بشن؟ - انواع کلاس زیر نباید به اعلامیه ها اضافه شود 1. کلاس که قبلاً در هر ماژول دیگری اعلام شده است. 2. دستورالعمل های وارد شده از یک ماژول دیگر. 3. کلاس های ماژول. @@ -5786,9 +5783,9 @@ puppeteer: اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد. - 1. **FormGroup**: یک فرم را با مجموعه ای از کنترل های ثابت تعریف میکنه که می تونن در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است. + 1. **FormGroup**: یک فرم را با مجموعه ای از کنترل های ثابت تعریف میکنه که می تونن تو یک شیء با هم مدیریت شن. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است. - این فرم گروه می تونه برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود. + این فرم گروه می تونه برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود. @@ -5946,7 +5943,7 @@ puppeteer: 261. ### چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟> - برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می تونین از روش `patchValue () استفاده کنید. برای مثال ، می تونین نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید. + برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می تونیم از روش `patchValue () استفاده کنید. برای مثال ، می تونیم نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنیم. @@ -6010,7 +6007,7 @@ puppeteer: 263. ### چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟ - شما می تونین یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است. + شما می تونین یک ویژگی دریافت کننده (تشخیصی) رو تو داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل رو تو طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارن و برعکس یا نه ، مفید است. @@ -6044,7 +6041,7 @@ puppeteer: 264. ### کلاس هایی که با ngModel تامین شدن چیا هستن؟ - دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS انگولاری به روز میکنه تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ، + دستورالعمل ngModel کنترل فرم را با کلاسهای ویژه CSS انگولاری به روز میکنه تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ، | حالت کنترل فرم | اگر درست | اگر نادرست | | ---- | --------- | --- | @@ -6056,8 +6053,8 @@ puppeteer: 265. ### چطوری یه فرم رو ریست میکنی؟ - در یک فرم مدل محور ، می تونین فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. - برای مثال ، می تونین مدل فرم را در ارسال به شرح زیر تنظیم کنید ، + در یک فرم مدل محور ، می تونین فرم را فقط با فراخوانی تابع "reset()" در مدل فرم ما تنظیم کنید. + برای مثال ، می تونین مدل فرم را در ارسال به شرح زیر تنظیم کنید ، ```js @@ -6078,7 +6075,7 @@ puppeteer: 266. ### تایپ های مربوط به validator فانکشن چیا هستن؟ - در اشکال واکنشی ، اعتبار سنج ها می تونن توابع همزمان یا ناهمزمان باشند ، + در اشکال واکنشی ، اعتبار سنج ها می تونن توابع sync یا async باشن ، 1. **اعتبار سنجی همگام سازی:** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد. 2. **اعتبار سنج های Async:** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر میکنه. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است. @@ -6124,8 +6121,8 @@ puppeteer: 268. ### چطوری پرفورمنس validator های async رو بیتشر میکنی؟ - از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا میشن ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد میکنه. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد. - استفاده بر اساس انواع فرم متفاوت خواهد بود. + همه validator ها پس از هر تغییر ارزش فرم اجرا میشن ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد میکنه. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد. + استفاده بر اساس انواع فرم متفاوت خواهد بود. 1. **Template-driven forms:** Set the property on `ngModelOptions` directive @@ -6153,7 +6150,7 @@ puppeteer: 269. ### چطوری ngfor و ngIf برای یه المان همزمان تنظیم کنیم؟ - بعضی اوقات ممکنه شما نیاز به NGFOR و NGIF در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید. + بعضی اوقات ممکنه شما نیاز به ngfor و ngIf در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید. @@ -6165,7 +6162,7 @@ puppeteer: در این حالت ، شما باید از ng-container یا ng-template استفاده کنید. - بیایید بگوییم اگر سعی می کنید موارد را فقط در صورت موجود بودن موارد حلقه کنید ، کد زیر خطایی را در مرورگر پرتاب میکنه + اگر سعی می کنید موارد را فقط در صورت موجود بودن موارد حلقه کنید ، کد زیر خطایی رو به مرورگر ارسال میکنه @@ -6196,8 +6193,8 @@ puppeteer: 270. ### منظور از پراپرتی host توی css چیه؟ - از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده میشه. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی تونین از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید. - برای مثال ، شما می تونین یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ، + از انتخاب کننده شبه کلاس "host" برای هدف قرار دادن سبک های موجود در عنصری که host مؤلفه است استفاده میشه. از آنجا که عنصر host در الگوی مؤلفه والدین قرار داره ، شما نمی تونین از طریق سایر مؤلفه ها به وسیله دیگر به عنصر host برسید. + برای مثال ، شما می تونین یک مرز برای عنصر والدین ایجاد کنین ، همانطور که در زیر وجود داره ، @@ -6263,18 +6260,18 @@ puppeteer: 273. ### مزایای inlining اتوماتیک چیه؟ - در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده میکنه ، بارگیری و درون خطی میکنه. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال میشه. + در طول زمان کامپایل ، Angular CLI فونت هایی ر. که برنامه ما از اون استفاده میکنه ، بارگیری و درون خطی میکنه. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) رو سرعت می ده و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال میشه. **[فهرست](#فهرست)** 274. ### content projection چیه؟ - طرح ریزی محتوا الگویی است که در آن شما محتوای مورد نظر خود را در داخل یک مؤلفه دیگر وارد می کنید یا پروژه می کنید. + الگوییه که تو اون ما محتوا رو برای استفاده مجدد داخل یک کامپوننت دیگه وارد می کنیم. **[فهرست](#فهرست)** 275. ### ng-به چی میگن و هدف از اون چیه؟content - از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده میشه که به افزایش قابلیت استفاده مجدد مؤلفه کمک میکنه. + از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده میشه که به افزایش قابلیت استفاده مجدد کامپوننت کمک میکنه. **[فهرست](#فهرست)**