From 2a4e52a1400ef1bd5832295ec821ba8069c749ad Mon Sep 17 00:00:00 2001 From: jesus re Date: Sat, 16 Sep 2023 22:18:26 +0330 Subject: [PATCH] some edits and improvements --- Book.html | 1023 ++++++++++++++++++++++++++--------------------------- Book.md | 768 ++++++++++++++++++++-------------------- 2 files changed, 894 insertions(+), 897 deletions(-) diff --git a/Book.html b/Book.html index 08fdb9b..fbc4b1c 100644 --- a/Book.html +++ b/Book.html @@ -546,7 +546,7 @@

فهر 6 -directives ها چیا هستن؟ +directive ها چیا هستن؟ 7 @@ -1086,95 +1086,95 @@

فهر 141 -هدف از defferentail loading توی CLI چیه؟ +هدف از defferentail loading توی CLI چیه؟ 142 -انگولار از dynamic import پشتیبانی میگنه؟ +انگولار از dynamic import پشتیبانی میگنه؟ 143 -منظور از lazy loading چیه؟ +منظور از lazy loading چیه؟ 144 -منظور از workspace API چیه؟ +منظور از workspace API چیه؟ 145 -چطوری ورژن انگولار رو بروزرسانی میکنی؟ +چطوری ورژن انگولار رو بروزرسانی میکنی؟ 146 -Angular Material چیه؟ +Angular Material چیه؟ 147 -چطوری location service رو توی انگولار اپدیت میکنی؟ +چطوری location service رو توی انگولار اپدیت میکنی؟ 148 -NgUpgrade چیه؟ +NgUpgrade چیه؟ 149 -چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟ +چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟ 150 -چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟ +چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟ 151 -روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟ +[روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟](#روش های-گه-برای-فعال-سازی-change-detection-استفاده-میشن-چیا-هستن؟) 152 -ورژن های مختلف انگولار چیا هستن و تفاوتشون چیه؟ +ورژن های مختلف انگولار چیا هستن و تفاوتشون چیه؟ 153 -قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟ +قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟ 154 -چرا دیگه از فریم ورک های web tracking استفاده نمیشه؟ +چرا دیگه از فریم ورک های web tracking استفاده نمیشه؟ 155 -چرا دیگه از پکیج های web worker استفاده نمیشه؟ +چرا دیگه از پکیج های web worker استفاده نمیشه؟ 156 -چطوری ورژن CLI انگولار رو پیدا میکنی؟ +چطوری ورژن CLI انگولار رو پیدا میکنی؟ 157 -ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟ +ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟ 158 -schematic چیه؟ +schematic چیه؟ 159 -قوانینی که توی Schematices چیا هستن؟ +قوانینی که توی Schematices چیا هستن؟ 160 -Schematics CLI چیه؟ +Schematics CLI چیه؟ 161 -بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟ +بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟ 162 -توی انگولار چطوری از XSS Atack جلوگیری میکنی؟ +توی انگولار چطوری از XSS Atack جلوگیری میکنی؟ 163 -قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟ +قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟ 164 @@ -1186,91 +1186,91 @@

فهر 166 -هدف از innerHTML چیه؟ +هدف از innerHTML چیه؟ 167 -تفاوت بین interpolated content و innerHTML چیه؟ +تفاوت بین interpolated content و innerHTML چیه؟ 168 -چطوری از sanitizaltion خودکار جلوگیری میکنی؟ +چطوری از sanitizaltion خودکار جلوگیری میکنی؟ 169 -استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟ +استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟ 170 -DOM sanitizer چیه؟ +DOM sanitizer چیه؟ 171 -چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟ +چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟ 172 -انگولار از حمله های سطح http جلوگیری میکنه؟ +انگولار از حمله های سطح http جلوگیری میکنه؟ 173 -Http Interceptors ها چیا هستن؟ +Http Interceptors ها چیا هستن؟ 174 -کاربرد های مربوط به HTTP interceptor ها چیا هستن؟ +کاربرد های مربوط به HTTP interceptor ها چیا هستن؟ 175 -داشتن interceptor های چن تایی توی انگولار پشتیبانی میشه؟ +داشتن interceptor های چن تایی توی انگولار پشتیبانی میشه؟ 176 -چطوری میتونم از interceptor برای کل پروژه استفاده کنم؟ +چطوری میتونم از interceptor برای کل پروژه استفاده کنم؟ 177 -چطوری انگولار internationalization رو انجام میده؟ +چطوری انگولار internationalization رو انجام میده؟ 178 -چطوری به صورت دستی دیتای لوکال رو ذخیره میکنی؟ +چطوری به صورت دستی دیتای لوکال رو ذخیره میکنی؟ 179 -چهار فازی که برای ترجمه انجام میشه چیا هستن؟ +چهار فازی که برای ترجمه انجام میشه چیا هستن؟ 180 -هدف از اتربیوت i18n چیه ؟ +هدف از اتربیوت i18n چیه ؟ 181 -هدف از custom id چیه؟ +هدف از custom id چیه؟ 182 -اگه یه custom id, unique نباشه چه اتفاقی میوفته؟ +اگه یه custom id, unique نباشه چه اتفاقی میوفته؟ 183 -میتونم یه متن رو بدون ساخت المنت ترجمه کنم؟ +میتونم یه متن رو بدون ساخت المنت ترجمه کنم؟ 184 -چطوری میتونم اتربیوت ها رو ترجمه کنم؟ +چطوری میتونم اتربیوت ها رو ترجمه کنم؟ 185 -دسته بندی های pluralization رو لیست کن؟ +دسته بندی های pluralization رو لیست کن؟ 186 -عبارت برای انتخاب ICU چیه؟ +عبارت برای انتخاب ICU چیه؟ 187 -چطوری ترجمه های ناقص رو گزارش میکنی؟ +چطوری ترجمه های ناقص رو گزارش میکنی؟ 188 @@ -1334,7 +1334,7 @@

فهر 203 -برای دابرکتیو ngFor پراپرتی index چیه؟ +برای دابرکتیو ngFor پراپرتی index چیه؟ 204 @@ -1669,7 +1669,7 @@

تایپ اسکریپت چیه؟

-

TypeScript یک ابر مجموعه تایپ های جاوا اسکریپت هستش که توسط مایکروسافت ساخته شده که انواع تایپ های optional، class ها، async/wait و خیلی ویژگی های دیگه رو اضافه می کنه و به جاوا اسکریپت ساده کامپایل می کنه. Angular به طور کامل در TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شه.
+

TypeScript یک ابر مجموعه تایپ های جاوا اسکریپت هستش که توسط مایکروسافت ساخته شده که انواع تایپ های optional، class ها، async/wait و خیلی ویژگی های دیگه رو اضافه می کنه و به جاوا اسکریپت ساده کامپایل می کنه. Angular به طور کامل تو TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شه.
ما می تونیم اونو به صورت گلوبال نصب کنیم

npm install -g typescript
@@ -1684,7 +1684,7 @@ 
.body.innerHTML = greeter(user);
-

متد greeter فقط تایپ string را به عنوان آرگومان اجازه میده.

+

متد greeter فقط تایپ string رو به عنوان آرگومان اجازه میده.

فهرست

  • @@ -1698,15 +1698,15 @@

    فهرست

  • -

    directives ها چیا هستن؟

    -

    directive ها رفتاری رو به یه کامپوننت DOM موجود یا یک نمونه جزء موجود اضافه می کنن.

    +

    directive ها چیا هستن؟

    +

    directive ها رفتاری رو به یه کامپوننت DOM موجود یا یه المنت موجود Dom اضافه می کنن.

    import { Directive, ElementRef, Input } from '@angular/core';
 
@@ -1717,15 +1717,15 @@ 
    }
 }
    -

    این directive رفتار عنصر HTML را با پس‌زمینه زرد رو اینطوری پیاده سازی میکنه

    +

    این directive رفتار عنصر HTML رو با پس‌زمینه زرد رو اینطوری پیاده سازی میکنه

    <p myHighlight>Highlight me!</p>
    -

    فهرست

    +

    فهرست

  • کامپوننت ها چیا هستن؟

    -

    کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستن که درختی از اجزای Angular را تشکیل هستن. این مؤلفه ها زیر مجموعه دستورالعمل ها هستت. برخلاف دستورات، کامپوننت‌ها همیشه دارای یک الگون و تنها یک جزء رو میشه به ازای هر عنصر در قالب نمونه‌سازی کرد.
    +

    کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستن که درختی از اجزای Angular رو تشکیل هستن. این مؤلفه ها زیر مجموعه directive ها هست. برخلاف دستورات، کامپوننت‌ها همیشه دارای یک الگون و تنها یک جزء رو میشه به ازای هر عنصر تو قالب نمونه‌سازی کرد.
    یک مثال ساده از کامپوننت Angular رو ببینیم

    import { Component } from '@angular/core';
@@ -1756,7 +1756,7 @@ 
    template چیه؟
    
-
    یک template یک نمای HTML هس که در آن می تونیم داده ها را با اتصال کنترل ها به ویژگی های یک جزء Angular نشون بدیم. می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنیم. می تونیم با استفاده از ویژگی template آن را به صورت درون خطی تعریف کینم یا می تونیم قالب را در یک فایل HTML جداگانه تعریف کنیم و با استفاده از ویژگی templateUrl@Component decorator به آن در ابرداده کامپوننت پیوند بدیم.
    
+
    یک template یک نمای HTML هس که توی اون می تونیم داده ها رو با اتصال کنترل ها به ویژگی های یک جزء Angular نشون بدیم. می تونیم الگوی جزء خودمون رو تو یکی از دو مکان ذخیره کنیم. می تونیم با استفاده از ویژگی template اون رو به صورت درون خطی تعریف کینم یا می تونیم قالب رو توی یک فایل HTML جداگانه تعریف کنیم و با استفاده از ویژگی templateUrl@Component decorator به اون تو ابرداده کامپوننت پیوند بدیم.
    
 
    Using inline template with template syntax,
    
   
 
    import { Component } from '@angular/core';
@@ -1817,7 +1817,7 @@ 
    ماژول چیه؟
    
 
    ماژول ها مرزهای منطقی تو برنامه هستن و برنامه به ماژول های جداگانه تقسیم می شن که عملکرد برنامه رو از هم جدا کنن.
    
-بیاین مثالی از app.module.ts ماژول core را که با دکوراتور @NgModule بزنیم.
    
+بیاین مثالی از app.module.ts ماژول core رو که با دکوراتور @NgModule بزنیم.
    
  
 
    import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -1835,54 +1835,54 @@ 
    فهرست

  • lifecycle های مربوط به انگولار چیا هستن؟

    -

    Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک lifecycle دارد.
    +

    Angular مجموعه کاملی از فرآیندها رو طی می کنه یا از زمان شروع تا پایان برنامه یک lifecycle دارد.
    نمایش lifecycle رو متونیم تو شکل زیر ببینیم:

    ScreenShot

      -

    1. ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.

      2. -

    2. ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.

      3. +

    3. ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کنه این روش فراخوانی می شه.

      4. +

    4. ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شه.

    5. ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.

      6. -

    6. ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.

      7. -

    7. ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.

      8. -

    8. ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.

      9. -

    9. ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.

      10. +

    10. ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه میده، در پاسخ به این امر فراخوانی می شه.

      11. +

    11. ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شه.

      12. +

    12. ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شه.

      13. +

    13. ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شه.

    14. ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.

    فهرست

  • data binding چیه؟

    -

    Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM را فراهم می کند و تعریف برنامه های تعاملی را بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان می کند. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شود) که در نحوه جریان داده ها متفاوت است.

    +

    Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM رو فراهم میکنه و تعریف برنامه های تعاملی رو بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان میکنه. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شه) که در نحوه جریان داده ها متفاوت است.

    1. From the Component to the DOM:

    -

    Interpolation: {{ value }}: مقدار یک ویژگی را از جزء اضافه می کند

    +

    Interpolation: {{ value }}: مقدار یک ویژگی رو از جزء اضافه می کنه

    <li>Name: {{ user.name }}</li>
 <li>Address: {{ user.address }}</li>
    -

    Property binding: [property]=”value”: مقدار از کامپوننت به ویژگی مشخص شده یا ویژگی ساده HTML منتقل می شود.

    +

    Property binding: [property]=”value”: مقدار از کامپوننت به ویژگی مشخص شده یا ویژگی ساده HTML منتقل می شه.

    <input type="email" [value]="user.email">
    1. From the DOM to the Component:
      -**Event binding: (event)=”function”😗*هنگامی که یک رویداد DOM خاص اتفاق می افتد (مثلاً: کلیک، تغییر، کلید آپلود)، متد مشخص شده در مؤلفه را فراخوانی کنید.
      2. +**Event binding: (event)=”function”😗*هنگامی که یک رویداد DOM خاص اتفاق می افتد (مثلاً: کلیک، تغییر، کلید آپلود)، متد مشخص شده در مؤلفه رو فراخوانی میکنه. 
    <button (click)="logout()"></button>
    1. Two-way binding:
      -Two-way data binding: [(ngModel)]=”value”: اتصال دو طرفه داده اجازه می دهد تا جریان داده ها از هر دو طرف انجام شود. برای مثال، در قطعه کد زیر، هر دو ورودی DOM ایمیل و ویژگی ایمیل جزء همگام هستند.
      2. +Two-way data binding: [(ngModel)]=”value”: اتصال دو طرفه داده اجازه می دهد تا جریان داده ها از هر دو طرف انجام شه. برای مثال، در قطعه کد زیر، هر دو ورودی DOM ایمیل و ویژگی ایمیل جزء همگام هستن. 
    <input type="email" [(ngModel)]="user.email">
@@ -1890,10 +1890,10 @@ 
    فهرست
  • -

    What is metadata?

    -

    متادیتا برای تزئین یک کلاس استفاده می شود تا بتواند رفتار مورد انتظار کلاس را پیکربندی کند. ابرداده توسط دکوراتورها نمایش داده می شود

    +

    metadata چیه؟

    +

    metadata برای تزئین یک کلاس استفاده میشه تا بتونه رفتار مورد انتظار کلاس را پیکربندی کنه. metadata توسط دکوراتورها نمایش داده می شه

      -

    1. Class decorators, به عنوان مثال، @Component و @NgModule

      2. +

    2. Class decorators, برای مثال، @Component و @NgModule

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

    1. Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export

      2. +

    2. Property decorators برای ویژگی های داخل کلاس ها استفاده می شه برای مثال. @import و export

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

    1. Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener

      2. +

    2. Method decorators برای متدهای داخل کلاس ها استفاده می شه برای مثال. @HostListener

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

    1. Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری

      2. +

    2. Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شه برای مثال. @Inject، اختیاری

    import { Component, Inject } from '@angular/core';
@@ -1969,43 +1969,43 @@ 
    }
 }
    -

    فهرست

    +

    فهرست

  • Angular CLI چی هست؟

    -

    Angular CLI (** Command Line Interface**) یک رابط خط فرمان برای ساخت داربست و ساخت برنامه های زاویه ای با استفاده از ماژول های سبک nodejs (commonJs) است.
    +

    Angular CLI (Command Line Interface) یک رابط خط فرمان برای ساخت چارچوب مشخص و ساخت برنامه های انگولار با استفاده از ماژول های استایل nodejs (commonJs) است.
    شما باید با استفاده از دستور زیر npm نصب کنید،

    npm install @angular/cli@latest
    -

    در زیر لیستی از چند دستور وجود دارد که هنگام ایجاد پروژه های زاویه ای به کار می آیند

    +

    لیست زیر لیستی از چند دستور که هنگام ایجاد پروژه های انگولار ای به کار میان آورده شده

    1. -

      Creating New Project: ng new

      +

      ساخت یه پروژه: ng new

    2. -

      Generating Components, Directives & Services: ng generate/g
      -انواع مختلف دستورات عبارتند از

      +

      ساخت Component ها, Directive ها و Service ها: ng generate/g
      +انواع مختلف دستورات

        -

      • ng generate class my-new-class: یک کلاس به برنامه خود اضافه کنید

        • -

      • ng تولید کامپوننت my-new-component: یک جزء به برنامه خود اضافه کنید

        • -

      • ng generate directive my-new-directive: یک دستورالعمل به برنامه خود اضافه کنید

        • -

      • ng generate enum my-new-enum: یک enum به برنامه خود اضافه کنید

        • -

      • ng generate module my-new-module: یک ماژول به برنامه خود اضافه کنید

        • -

      • تولید لوله my-new-pipe: یک لوله به برنامه خود اضافه کنید

        • -

      • ng generate service my-new-service: یک سرویس به برنامه خود اضافه کنید

        • +

      • ng generate class my-new-class: یک کلاس به برنامه خودتون اضافه کنین

        • +

      • ng تولید کامپوننت my-new-component: یک کامپوننت به برنامه خودتون اضافه کنین

        • +

      • ng generate directive my-new-directive: یک directive به برنامه خودتون اضافه کنین

        • +

      • ng generate enum my-new-enum: یک enum به برنامه خودتون اضافه کنین

        • +

      • ng generate module my-new-module: یک ماژول به برنامه خودتون اضافه کنین

        • +

      • تولید لوله my-new-pipe: یک pipe به برنامه خودتون اضافه کنین

        • +

      • ng generate service my-new-service: یک service به برنامه خودتون اضافه کنین

    3. -

      Running the Project: ng serve

      +

      برای اجرای پروژه: ng serve

    فهرست

  • فرق بین constructor و ngOnInit چیه؟

    -

    کلاس های TypeScript دارای یک روش پیش فرض به نام سازنده است که معمولاً برای هدف اولیه استفاده می شود. در حالی که روش ngOnInit مختص Angular است، به ویژه برای تعریف اتصالات Angular استفاده می شود. حتی اگر سازنده ابتدا فراخوانی می‌شود، ترجیح داده می‌شود همه اتصالات Angular خود را به متد ngOnInit منتقل کنید.
    -برای استفاده از ngOnInit، باید رابط OnInit را به صورت زیر پیاده سازی کنید.

    +

    کلاس های TypeScript دارای یک روش پیش فرض به نام constructor هستش که معمولاً برای هدف اولیه استفاده می شه. در حالی که روش ngOnInit مختص Angular است، به ویژه برای تعریف اتصالات Angular استفاده می شه. حتی اگه constructor ابتدا فراخوانی می‌شه، ترجیح داده می‌شه همه اتصالات Angular خود را به متد ngOnInit منتقل کنین.
    +برای استفاده از ngOnInit، باید رابط OnInit را به صورت زیر پیاده سازی میشه.

    export class App implements OnInit{
      constructor(){
@@ -2021,8 +2021,8 @@ 
    service چیه؟
    
-
    یک سرویس زمانی استفاده می شود که یک عملکرد مشترک باید به ماژول های مختلف ارائه شود. سرویس‌ها به شما اجازه می‌دهند تا نگرانی‌های مربوط به برنامه شما را بیشتر از هم جدا کرده و ماژولاریت بهتری داشته باشید، زیرا به شما امکان می‌دهد عملکردهای مشترک را از اجزا استخراج کنید.
    
-
    بیایید یک repoService ایجاد کنیم که می تواند در بین اجزاء مورد استفاده قرار گیرد،
    
+
    یه service زمانی استفاده می شه که یک عملکرد مشترک باید به ماژول های مختلف انجام شه. سرویس‌ها به شما اجازه میده تا نگرانی‌های مربوط به برنامه شما را بیشتر از هم جدا و ساختار ماژولاریت بهتری داشته باشین، چون به شما امکان میده عملکردهای مشترک رو از اجزا خارج کنین.
    
+
    بیاین یه repoService ایجاد کنیم که می تونه بین کامپوننت ها استفاده شه
    
  
 
    import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
@@ -2040,12 +2040,12 @@ 
    }
 }
 
         
-
    سرویس فوق از سرویس Http به عنوان یک وابستگی استفاده می کند.
    
+
    سرویس بالا از سرویس Http به عنوان یک وابستگی استفاده می کنه.
    
 
    فهرست

  • dependency injection توی انگولار یعنی چی؟

    -

    تزریق وابستگی (DI)، یک الگوی طراحی برنامه مهم است که در آن یک کلاس به جای ایجاد وابستگی از منابع خارجی درخواست می‌کند. Angular با چارچوب تزریق وابستگی خود برای حل وابستگی ها (سرویس ها یا اشیایی که یک کلاس برای انجام عملکرد خود به آن نیاز دارد) ارائه می شود. بنابراین می توانید خدمات خود را در سراسر برنامه به سرویس های دیگر وابسته کنید.

    +

    dependency injection(DI)، یک الگوی طراحی برنامه مهمیه که تو اون یه کلاس به جای ایجاد dependency از منابع خارجی درخواست کنه. Angular با چارچوب dependency injection خود برای حل dependency ها (سرویس ها یا اشیایی که یک کلاس برای انجام عملکرد خود به آن نیاز داره) ارائه می شه. بنابراین می تونین service هاتون رو تو کل برنامه به سرویس های دیگر وابسته کنین.

    فهرست

  • @@ -2054,8 +2054,8 @@

    هدف از AsyncPipe چیه؟

    -

    AsyncPipe مشترک یک قابل مشاهده یا قول می شود و آخرین مقداری را که منتشر کرده است برمی گرداند. هنگامی که یک مقدار جدید منتشر می شود، لوله مؤلفه ای را که باید بررسی شود برای تغییرات علامت گذاری می کند.

    -

    بیایید یک زمان قابل مشاهده را در نظر بگیریم که به طور مداوم نما را برای هر 2 ثانیه با زمان فعلی به روز می کند.

    +

    AsyncPipe مشترک یک قابل مشاهده یا قول می شه و آخرین مقداری رو که منتشر کرده برمی گردونه. هنگامی که یه مقدار جدید منتشر می شه، pipe مؤلفه ای رو که باید بررسی شه برای تغییرات علامت گذاری می کنه.

    +

    بیاین یک زمان قابل مشاهده را در نظر بگیریم که به طور مداوم نما را برای هر 2 ثانیه با زمان فعلی به روز می کنه.

    @Component({
      selector: 'async-observable-pipe',
@@ -2072,8 +2072,8 @@ 
    بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
    
-
    می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید آن را به صورت درون خطی با استفاده از ویژگی template تعریف کنید، یا می توانید الگو را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl در decorator @Component به آن در ابرداده کامپوننت پیوند دهید.
    
-
    انتخاب بین HTML درون خطی و مجزا یک موضوع سلیقه، شرایط و خط مشی سازمان است. اما معمولاً از قالب درون خطی برای بخش کوچکی از کد و از فایل قالب خارجی برای نمایش های بزرگتر استفاده می کنیم. به طور پیش فرض، Angular CLI کامپوننت ها را با یک فایل الگو تولید می کند. اما می توانید با دستور زیر آن را لغو کنید
    
+
    می تونین الگوی کامپوننت خودتون رو تو یکی از دو مکان ذخیره کنین. می تونین اون رو به صورت درون خطی با استفاده از ویژگی template تعریف کنین، یا می تونین الگو رو در یک فایل HTML جداگانه تعریف کنین و با استفاده از ویژگی templateUrl در decorator @Component به اون در ابرداده کامپوننت پیوند بدین.
    
+
    انتخاب بین HTML درون خطی و مجزا یک موضوع سلیقه، شرایط و خط مشی سازمان است. اما معمولاً از قالب درون خطی برای بخش کوچکی از کد و از فایل قالب خارجی برای نمایش های بزرگتر استفاده می کنیم. به طور پیش فرض، Angular CLI کامپوننت ها رو با یک فایل الگو تولید می کنه. اما می تونین با دستور زیر اون رو لغو کنین
    
  
 
    ng generate component hero -it
 
         
@@ -2081,7 +2081,7 @@ 
    هدف از directive ngFor چی هستش؟
    
-
    ما از دستورالعمل Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. به عنوان مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،
    
+
    ما از directive Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. برای مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،
    
  
 
    <li *ngFor="let user of users">
      {{ user }}
@@ -2092,17 +2092,17 @@ 
    هدف از directive ngIf چیه؟
    
-
    گاهی اوقات یک برنامه فقط در شرایط خاص نیاز به نمایش یک نما یا بخشی از یک نما دارد. دستورالعمل Angular ngIf یک عنصر را بر اساس شرایط درستی/نادرستی درج یا حذف می کند. اگر سن کاربر بیش از 18 سال باشد، برای نمایش پیام مثالی می زنیم.
    
+
    گاهی اوقات یه برنامه فقط در شرایط خاص نیاز به نمایش یه view یا بخشی از یه view داره. دستورالعمل Angular ngIf یک عنصر را بر اساس شرایط درستی/نادرستی درج یا حذف می کنه. اگر سن کاربر بیش از 18 سال باشد، برای نمایش پیام مثالی می زنیم.
    
  
 
    <p *ngIf="user.age > 18">You are not eligible for student pass!</p>
 
         
-
    Note: Angular پیام را نشان نمی دهد و پنهان نمی کند. در حال افزودن و حذف عنصر پاراگراف از DOM است. که عملکرد را بهبود می بخشد، به خصوص در پروژه های بزرگتر با اتصال داده های زیادی.
    
+
    Note: Angular پیام را نشان نمی دهد و پنهان نمی کنه. در حال افزودن و حذف عنصر پاراگراف از DOM است. که عملکرد را بهبود میده به خصوص در پروژه های بزرگتر با اتصال داده های زیادی.
    
 
    فهرست

  • اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟

    -

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

    -

    بیایید مثالی از اتصال ویژگی innerHtml که باعث آسیب‌پذیری XSS می‌شود، بیاوریم.

    +

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

    +

    بیایید مثالی از اتصال ویژگی innerHtml که باعث آسیب‌پذیری XSS میشه بیاوریم.

    export class InnerHtmlBindingComponent {
      // For example, a user/attacker-controlled value from a URL.
@@ -2113,25 +2113,25 @@ 
    منظور از interpolation چیه؟
    
-
    درون یابی یک نحو خاص است که Angular آن را به ویژگی binding تبدیل می کند. این یک جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده می شود. متن بین پرانتزها اغلب نام یک ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کند.
    
-
    بیایید یک مثال بزنیم،
    
+
    interpolation یه نحو خاصیه که Angular آن رو به ویژگی binding تبدیل می کنه. این یه جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده میشه. متن بین پرانتزها اغلب نام یه ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کنه.
    
+
    بیاین یه مثال بزنیم،
    
  
 
    <h3>
      {{title}}
      <img src="{{url}}" style="height:30px">
 </h3>
 
         
-
    در مثال بالا، Angular خصوصیات عنوان و url را ارزیابی می کند و جاهای خالی را پر می کند، ابتدا عنوان برنامه پررنگ و سپس URL نمایش داده می شود.
    
+
    در مثال بالا، Angular خصوصیات عنوان و url رو ارزیابی می کنه و جاهای خالی رو پر می کنه، ابتدا عنوان برنامه پررنگ و سپس URL نمایش داده می شه.
    
 
    فهرست

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

    -

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

    +

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

    <h3>{{username}}, welcome to Angular</h3>
    -

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

    +

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

    1. assignments (=، +=، -=، ...)

    2. new

      3. @@ -2143,7 +2143,7 @@

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

      -

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

      +

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

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

      <button (click)="editProfile()">Edit Profile</button>
@@ -2161,13 +2161,13 @@ 
      چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟
      
-
      انواع اتصال را می توان به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شوند. آنها به صورت زیر فهرست شده اند،
      
+
      انواع اتصال رو میشه به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شن. اونا به صورت زیر فهرست شدن
      
 
        
 
      1. از منبع به مشاهده
        2. 
 
      2. از دیدگاه به منبع
        3. 
 
      3. View-to-source-to-view
        4. 
 
      
-
      نحو ممکن الزام آور را می توان به صورت جدولی در زیر ارائه کرد:
      
+
      نحو ممکن الزام آور رو می توان به صورت جدولی در زیر ارائه کرد:
      
 
@@ -2198,7 +2198,7 @@ 
      pipe ها چیا هستن؟
      
-
      یک لوله داده ها را به عنوان ورودی می گیرد و آن را به خروجی دلخواه تبدیل می کند. به عنوان مثال، اجازه دهید یک لوله را برای تبدیل ویژگی تولد یک جزء به تاریخ دوست‌داشتنی با استفاده از لوله date در نظر بگیریم.
      
+
      یک pipe داده ها رو به عنوان ورودی می گیرد و اون رو به خروجی دلخواه تبدیل می کنه. برای مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی تولد یک جزء به تاریخ دوست‌داشتنی با استفاده از pipe date در نظر بگیریم.
      
 
      import { Component } from '@angular/core';
 
@@ -2214,7 +2214,7 @@ 
      یه منظور از 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: مقدار پارامتر می تونه هر عبارت الگوی معتبری باشد، مثل یه رشته لفظی یا یه ویژگی جزء.
      
 
      فهرست
      
 
 
    3. 
 
      چطوری زنجیره ای از pipe ها میسازی؟
      
-
      می‌توانید لوله‌ها را در ترکیب‌های بالقوه مفید بر حسب نیاز به هم زنجیر کنید. بیایید یک ویژگی تولد را در نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و لوله های بزرگ مانند زیر استفاده می کند
      
+
      میتونین pipe رو در ترکیب‌های بالقوه مفید بر حسب نیاز به هم زنجیر کنین. بیایید یه ویژگی تولد رو در نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و pipe های بزرگ مثل زیر استفاده می کنه
      
  
 
      import { Component } from '@angular/core';
 
@@ -2248,16 +2248,16 @@ 
      منظور از pipe سفارشی شده چیه؟
      
-
      جدا از لوله های داخلی، می توانید لوله سفارشی خود را با ویژگی های کلیدی زیر بنویسید:
      
+
      جدا از pipe های داخلی، می تونین pipe سفارشی خود رو با ویژگی های کلیدی زیر بنویسید:
      
 
        
-
      1. پیپ کلاسی است که با متادیتای لوله @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید.
        
+
      2. پیپ کلاسی است که با metadata pipe @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید.
        
 مثلا،
        3. 
 
      
  
 
      @Pipe({name: 'myCustomPipe'})
 
             
 
        
-
      1. کلاس pipe روش تبدیل رابط PipeTransform را پیاده سازی می کند که یک مقدار ورودی و به دنبال آن پارامترهای اختیاری را می پذیرد و مقدار تبدیل شده را برمی گرداند.
        
+
      2. کلاس pipe روش تبدیل رابط PipeTransform رو پیاده سازی میکنه که یه مقدار ورودی و به دنبال آن پارامترهای optional رو قبول میکنه و مقدار تبدیل شده رو برمی گرداند.
        
 ساختار pipeTransform به صورت زیر خواهد بود.
        3. 
 
      
  
@@ -2266,7 +2266,7 @@ 
      
-
    4. دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد.
      5. 
+
    5. دکوراتور @Pipe به شما امکان می دهد نام pipe ای رو که در عبارات قالب استفاده می کنید، تعریف کنید. باید یه شناسه جاوا اسکریپت معتبر باشه.
      6. 
 
  
 
      template: `{{someInputValue | myCustomPipe: someOtherValue}}`
@@ -2275,7 +2275,7 @@ 
      یه مثال از pipe سفارشی شده بزن؟
      
-
      شما می توانید لوله های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنید. به عنوان مثال، اجازه دهید یک لوله سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم،
      
+
      شما می تونین pipe های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنید. برای مثال، اجازه بدین یه pipe سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم،
      
  
 
      import { Pipe, PipeTransform } from '@angular/core';
 
@@ -2286,7 +2286,7 @@ 
      }
 }
 
             
-
      اکنون می توانید از لوله بالا در قالب عبارت زیر استفاده کنید.
      
+
      اکنون می تونین از pipe بالا در قالب عبارت زیر استفاده کنید.
      
  
 
          template: `
        <h2>Find the size of a file</h2>
@@ -2297,12 +2297,12 @@ 
      فرق بین pure pipe و impure pipe چیه؟
      
-
      یک لوله خالص تنها زمانی فراخوانی می شود که Angular تغییر در مقدار یا پارامترهای ارسال شده به یک لوله را تشخیص دهد. به عنوان مثال، هرگونه تغییر در یک مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یک مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یک لوله ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی می شود. به عنوان مثال، یک لوله ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده می شود.
      
+
      یه pipe خالص تنها زمانی فراخوانی میشه که Angular تغییر در مقدار یا پارامترهای ارسال شده به یه pipe را تشخیص بده. برای مثال، هرگونه تغییر در یه مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یه مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یه pipe ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی میشه. برای مثال، یه pipe ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده میشه.
      
 
      فهرست
      
 
      6. 
 
    6. 
 
      منظور از botstrapping module چیه؟
      
-
      هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده می شود. معمولاً به عنوان AppModule شناخته می شود. ساختار پیش فرض AppModule تولید شده توسط AngularCLI به شرح زیر است:
      
+
      هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده میشه. معمولاً به عنوان AppModule شناخته میشه. ساختار پیش فرض AppModule تولید شده توسط AngularCLI به شرح زیر است:
      
  
 
      /* JavaScript imports */
 import { BrowserModule } from '@angular/platform-browser';
@@ -2331,13 +2331,13 @@ 
      observable ها چیا هستن؟
      
-
      مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین در برنامه شما پشتیبانی می کنند. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده می شوند. در این مورد، شما تابعی را برای انتشار مقادیر تعریف می کنید، اما تا زمانی که یک مصرف کننده در آن مشترک نشود، اجرا نمی شود. سپس مصرف کننده مشترک تا زمانی که عملکرد کامل شود یا تا زمانی که اشتراک خود را لغو نکند، اعلان ها را دریافت می کند.
      
+
      مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین در برنامه شما پشتیبانی می کنند. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده میشن. در این مورد، شما تابعی را برای انتشار مقادیر تعریف می کنید، اما تا زمانی که یک مصرف کننده در آن مشترک نشود، اجرا نمیشه. سپس مصرف کننده مشترک تا زمانی که عملکرد کامل شود یا تا زمانی که اشتراک خود را لغو نکند، اعلان ها را دریافت میکنه.
      
 
      فهرست
      
 
      7. 
 
    7. 
 
      HttpClient چیه و مزیت های اون چیا هستن؟
      
 
      اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنند. Angular یک API HTTP کلاینت ساده شده به نام HttpClient را ارائه می دهد که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است.
      
-می توانید در ماژول ریشه خود به صورت زیر وارد کنید،
      
+می تونین در ماژول ریشه خود به صورت زیر وارد کنید،
      
  
 
      import { HttpClientModule } from '@angular/common/http';
 
             
@@ -2346,8 +2346,8 @@ 
      فهرست
      
 
      8. 
@@ -2371,7 +2371,7 @@ 
      
 
    8. HttpClient را به برنامه تزریق کنید:
      
-بیایید یک userProfileService (userprofile.service.ts) به عنوان مثال ایجاد کنیم. همچنین روش get از HttpClient را تعریف می کند
      9. 
+بیایید یک userProfileService (userprofile.service.ts) برای مثال ایجاد کنیم. همچنین روش get از HttpClient را تعریف میکنه
 
  
 
      import { Injectable } from '@angular/core';
@@ -2390,7 +2390,7 @@ 
      
 
    9. یک مؤلفه برای اشتراک سرویس ایجاد کنید:
      
-بیایید کامپوننتی به نام UserProfileComponent(userprofile.component.ts) ایجاد کنیم که UserProfileService را تزریق کرده و متد سرویس را فراخوانی می کند.
      10. 
+بیایید کامپوننتی به نام UserProfileComponent(userprofile.component.ts) ایجاد کنیم که UserProfileService را تزریق کرده و متد سرویس را فراخوانی میکنه.
 
  
 
      fetchUserProfile() {
@@ -2407,7 +2407,7 @@ 
      چطوری response ها رو به صورت کامل بخونیم؟
      
-
      ممکن است بدنه پاسخ داده‌های پاسخ کامل را برنگرداند زیرا گاهی اوقات سرورها سرصفحه‌ها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمی‌گردانند. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنید.
      
+
      ممکنه بدنه پاسخ داده‌های پاسخ کامل را برنگردونه چون گاهی اوقات سرورها سرصفحه‌ها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمیگردونه. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنیم.
      
  
 
      getUserResponse(): Observable<HttpResponse<User>> {
      return this.http.get<User>(
@@ -2436,7 +2436,7 @@ 
      RxJS چیه؟
      
 
      RxJS کتابخانه ای برای نوشتن کدهای ناهمزمان و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند.
      
-
      به عنوان مثال، می توانید مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.
      
+
      برای مثال، می تونین مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.
      
  
 
      import { Observable, throwError } from 'rxjs';
 import { catchError, retry } from 'rxjs/operators';
@@ -2445,7 +2445,7 @@ 
      subscribing چیه؟
      
-
      یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر می کند که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد subscribe() از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلان‌ها ارسال کنید.
      
+
      یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر میکنه که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد subscribe() از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلان‌ها ارسال کنید.
      
 
      بیایید نمونه‌ای از ایجاد و اشتراک در یک مشاهده‌پذیر ساده، با مشاهده‌گری که پیام دریافت‌شده را در کنسول ثبت می‌کند، در نظر بگیریم.
      
  
 
      Creates an observable sequence of 5 integers, starting from 1
@@ -2471,8 +2471,8 @@ 
      منطور از observable یه چیه؟
      
-
      Observable یک شی منحصر به فرد شبیه به Promise است که می تواند به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم.
      
-مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد می شوند.
      
+
      Observable یک شی منحصر به فرد شبیه به Promise است که می تونه به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم.
      
+مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد میشن.
      
 
      مثال ساده قابل مشاهده را ببینید،
      
  
 
      import { Observable } from 'rxjs';
@@ -2487,7 +2487,7 @@ 
      observer جیه؟
      
-
      Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه می شود. دارای ساختار زیر است،
      
+
      Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه میشه. دارای ساختار زیر است،
      
  
 
      interface Observer<T> {
      closed?: boolean;
@@ -2515,7 +2515,7 @@ 
      جطوری روی observevable ها error handling انجام میدی؟
      
 
      شما می‌توانید با تعیین یک بازخوانی خطا روی ناظر به جای تکیه بر try/catch که در محیط ناهمزمان بی‌اثر هستند، خطاها را مدیریت کنید.
      
-
      به عنوان مثال، می توانید خطا را به صورت زیر تعریف کنید.
      
+
      برای مثال، می تونین خطا را به صورت زیر تعریف کنید.
      
  
 
      myObservable.subscribe({
      next(num) { console.log('Next num: ' + num)},
@@ -2569,8 +2569,8 @@ 
      مختصر شده متصد subscribe چیه؟
      
-
      متد subscribe () می‌تواند تعاریف تابع برگشتی را به‌صورت خطی بپذیرد، برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته می‌شود.
      
-
      به عنوان مثال، می توانید متد subscribe را به صورت زیر تعریف کنید.
      
+
      متد subscribe () می‌تونه تعاریف تابع برگشتی را به‌صورت خطی بپذیرد، برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته می‌شود.
      
+
      برای مثال، می تونین متد subscribe را به صورت زیر تعریف کنید.
      
  
 
      myObservable.subscribe(
      x => console.log('Observer got a next value: ' + x),
@@ -2594,7 +2594,7 @@ 
      توابع سازنده observable چیا هستن؟
      
-
      RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم می کند. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،
      
+
      RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم میکنه. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،
      
 
        
 
      1. از قول یک قابل مشاهده ایجاد کنید
        2. 
 
      
@@ -2641,23 +2641,23 @@ 
      چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟
      
-
      به طور معمول یک شی ناظر می تواند هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کند. اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر فقط اعلان های آن نوع را نادیده می گیرد.
      
+
      به طور معمول یک شی ناظر می تونه هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کند. اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر فقط اعلان های آن نوع را نادیده می گیرد.
      
 
      فهرست
      
 
 
    10. 
 
      element های انگولار چیا هستن؟
      
-
      عناصر زاویه‌ای، اجزای زاویه‌ای هستند که به‌عنوان عناصر سفارشی (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بسته‌بندی شده‌اند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد می کند، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر زاویه ای" ارائه می دهد.
      
+
      عناصر انگولار، اجزای انگولار هستند که به‌عنوان عناصر سفارشی (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بسته‌بندی شده‌اند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد میکنه، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر انگولاری" ارائه می دهد.
      
 
      فهرست
      
 
      11. 
 
    11. 
 
      پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
      
-
      از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی می شوند، پشتیبانی مرورگر از عناصر زاویه ای مانند پشتیبانی از عناصر سفارشی است.
      
+
      از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی میشن، پشتیبانی مرورگر از عناصر انگولاری مانند پشتیبانی از عناصر سفارشی است.
      
 
      این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی می‌شود و برای مرورگرهای دیگر در انتظار است.
      
 
      12. 
 
 
      
  
      
-
+
@@ -2675,7 +2675,7 @@ 
      element های کاستوم شده چیا هستن؟
      
-
      عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل می شود، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ می کند، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت می کند. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی می‌شود و در مرورگرهای دیگر از طریق polyfills در دسترس است.
      
+
      عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل میشه، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ میکنه، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت میکنه. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی می‌شود و در مرورگرهای دیگر از طریق polyfills در دسترس است.
      
 
      فهرست
      
 
 
    12. 
 
      bootstrap کردن element های کاستوم شده لازمه؟
      
-
      خیر، عناصر سفارشی هنگامی که به DOM اضافه می شوند به طور خودکار راه اندازی می شوند (یا شروع می شوند) و وقتی از DOM حذف می شوند به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه می شود، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار می کند و به دانش خاصی از Angular نیاز ندارد.
      
+
      خیر، عناصر سفارشی هنگامی که به DOM اضافه میشن به طور خودکار راه اندازی میشن (یا شروع میشن) و وقتی از DOM حذف میشن به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه میشه، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار میکنه و به دانش خاصی از Angular نیاز ندارد.
      
 
      فهرست
      
 
      13. 
 
    13. 
 
      ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟
      
 
      در زیر مراحل به ترتیب در مورد عملکرد عناصر سفارشی آمده است،
      
 
        
-
      1. App registers custom element with browser: از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که می‌تواند در مرورگر به عنوان یک عنصر سفارشی ثبت شود.
        2. 
+
      2. App registers custom element with browser: از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که می‌تونه در مرورگر به عنوان یک عنصر سفارشی ثبت شود.
        3. 
 
      3. App adds custom element to DOM: عنصر سفارشی را درست مانند یک عنصر HTML داخلی مستقیماً به DOM اضافه کنید.
        4. 
-
      4. Browser instantiate component based class: مرورگر یک نمونه از کلاس ثبت شده ایجاد می کند و آن را به DOM اضافه می کند.
        5. 
-
      5. Instance provides content with data binding and change detection: محتوای با در قالب با استفاده از کامپوننت و داده های DOM ارائه می شود.
        
+
      6. Browser instantiate component based class: مرورگر یک نمونه از کلاس ثبت شده ایجاد میکنه و آن را به DOM اضافه میکنه.
        7. 
+
      7. Instance provides content with data binding and change detection: محتوای با در قالب با استفاده از کامپوننت و داده های DOM ارائه میشه.
        
 نمودار جریان عملکرد عناصر سفارشی به شرح زیر است:
        8. 
 
      
 
      CustomElement
      
@@ -2713,7 +2713,7 @@ 
      
@@ -2721,10 +2721,10 @@ 
      قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
      
-
      ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت می شوند. اجازه دهید آنها را در دو مرحله توصیف کنیم،
      
+
      ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت میشن. اجازه دهید آنها را در دو مرحله توصیف کنیم،
      
 
        
-
      1. CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه می کند. به عنوان مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
        2. 
-
      2. خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال می شوند که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
        3. 
+
      3. CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه میکنه. برای مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
        4. 
+
      4. خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال میشن که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
        5. 
 
      
 
      فهرست
      
 
      14. 
@@ -2742,7 +2742,7 @@ 
      
-
    14. پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
      15. 
+
    15. پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید میکنه.
      16. 
 
  
 
      const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>;
@@ -2754,14 +2754,14 @@ 
      کامپوننت های داینامیک چیا هستن؟
      
-
      مؤلفه‌های پویا مؤلفه‌هایی هستند که مکان مؤلفه‌ها در برنامه در زمان ساخت تعریف نشده است، یعنی در هیچ قالب زاویه‌ای استفاده نمی‌شوند. اما کامپوننت نمونه سازی می شود و در زمان اجرا در برنامه قرار می گیرد.
      
+
      مؤلفه‌های پویا مؤلفه‌هایی هستند که مکان مؤلفه‌ها در برنامه در زمان ساخت تعریف نشده است، یعنی در هیچ قالب انگولار استفاده نمی‌شوند. اما کامپوننت نمونه سازی میشه و در زمان اجرا در برنامه قرار می گیرد.
      
 
      فهرست
      
 
 
    16. 
 
      انواع مختلف directive ها کدوما هستن؟
      
 
      عمدتاً سه نوع دستورالعمل وجود دارد:
      
 
        
-
      1. ** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند.
        2. 
+
      2. مؤلفه ها - این دستورالعمل ها دارای یک الگو هستند.
        3. 
 
      3. دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.
        4. 
 
      4. دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.
        5. 
 
      
@@ -2769,12 +2769,12 @@ 
      چطوری با استفاده از CLI یه directive درست میکنی؟
      
-
      می‌توانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (src/app/components/directivename.directive.ts)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد می کند و فایل کلاس دستورالعمل را در ماژول ریشه اعلام می کند.
      
+
      می‌توانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (src/app/components/directivename.directive.ts)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد میکنه و فایل کلاس دستورالعمل را در ماژول ریشه اعلام میکنه.
      
 
      فهرست
      
 
      17. 
 
    17. 
 
      یه مثال از استفاده directive با اتریبیوت بزن؟
      
-
      بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می توانید دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:
      
+
      بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می تونین دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:
      
 
        
 
      1. کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.
        2. 
 
      
@@ -2791,7 +2791,7 @@ 
      }
 
      18.  
 
        
-
      1. دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال، 
        )
        2. 
+
      2. دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (برای مثال، 
        )
        3. 
 
      
  
 
      <p appHighlight>Highlight me!</p>
@@ -2806,12 +2806,12 @@ 
      Angular Router چیه؟
      
-
      روتر زاویه ای مکانیزمی است که در آن هنگام انجام وظایف برنامه توسط کاربران، ناوبری از یک نمای به نمای بعدی انجام می شود. مفاهیم یا مدل ناوبری برنامه مرورگر را به عاریت گرفته است.
      
+
      Angular Router مکانیزمی است که در آن هنگام انجام وظایف برنامه توسط کاربران، ناوبری از یک نمای به نمای بعدی انجام میشه. مفاهیم یا مدل ناوبری برنامه مرورگر را به عاریت گرفته است.
      
 
      فهرست
      
 
 
    18. 
 
      هدف از base href tag چیه؟
      
-
      برنامه مسیریابی باید عنصر  را به عنوان اولین فرزند در تگ  به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می توانید مقدار href را به صورت زیر تنظیم کنید
      
+
      برنامه مسیریابی باید عنصر  را به عنوان اولین فرزند در تگ  به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می تونین مقدار href را به صورت زیر تنظیم کنید
      
  
 
      <base href="/">
 
             
@@ -2819,7 +2819,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 +2827,7 @@ 
      router outlet چیه؟
      
-
      RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل می کند که نقطه ای را در قالب مشخص می کند که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده می شود،
      
+
      RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل میکنه که نقطه ای را در قالب مشخص میکنه که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده میشه،
      
  
 
      <router-outlet></router-outlet>
 <!-- Routed components go here -->
@@ -2836,7 +2836,7 @@ 
      router link ها چیا هستن؟
      
-
      RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می توانید مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.
      
+
      RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می تونین مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.
      
  
 
      <h1>Angular Router</h1>
 <nav>
@@ -2849,7 +2849,7 @@ 
      منظور از منظور از router state چیه؟
      
-
      RouterLinkActive دستورالعملی است که کلاس‌های css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر می‌دهد. به عنوان مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه می کند و زمانی که پیوند غیر فعال است حذف می کند. به عنوان مثال، می توانید آنها را مانند زیر به RouterLinks اضافه کنید.
      
+
      RouterLinkActive دستورالعملی است که کلاس‌های css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر می‌دهد. برای مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه میکنه و زمانی که پیوند غیر فعال است حذف میکنه. برای مثال، می تونین آنها را مانند زیر به RouterLinks اضافه کنید.
      
  
 
      <h1>Angular Router</h1>
 <nav>
@@ -2879,7 +2879,7 @@ 
      event های مربوط به router چیا هستن؟
      
-
      در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر می کند که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.
      
+
      در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر میکنه که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.
      
 
      توالی رویدادهای روتر به شرح زیر است:
      
 
        
 
      1. NavigationStart,
        2. 
@@ -2903,7 +2903,7 @@ 
        منظور از activated route چیه؟
        
-
        ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق می شود. در مثال زیر می توانید به مسیر و پارامترهای مسیر دسترسی داشته باشید.
        
+
        ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق میشه. در مثال زیر می تونین به مسیر و پارامترهای مسیر دسترسی داشته باشید.
        
  
 
        @Component({...})
 class MyComponent {
@@ -2952,8 +2952,8 @@ 
        هدف از Wildcard route چیه؟
        
-
        اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث می شود روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می توانید از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.
        
-
        به عنوان مثال، شما می توانید PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید
        
+
        اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث میشه روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می تونین از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.
        
+
        برای مثال، شما می تونین PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید
        
  
 
        { path: '**', component: PageNotFoundComponent }
 
                 
@@ -2961,7 +2961,7 @@ 
        ما همیشه به routing module نیاز داریم؟
        
-
        نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، می‌توانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه می شود که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.
        
+
        نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، می‌توانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه میشه که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.
        
 
        فهرست
        
 
 
      2. 
@@ -2979,43 +2979,43 @@ 
        فهرست
        
 
        3. 
 
      3. 
-
        What is JIT?
        
-
        Just-in-Time (JIT) نوعی کامپایل است که برنامه شما را در زمان اجرا در مرورگر کامپایل می کند. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت محلی) را اجرا می کنید، کامپایل JIT پیش فرض است. به عنوان مثال، دستورات زیر برای کامپایل JIT استفاده می شود،
        
+
        JIT چیه؟
        
+
        Just-in-Time (JIT) نوعی کامپایله که برنامه رو موقع اجرا تو مرورگر کامپایل میکنه. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت لوکال) رو اجرا می کنین کامپایل JIT پیش فرض هستش. برای مثال، دستورات زیر برای کامپایل JIT استفاده میشه،
        
  
 
        ng build
 ng serve
 
                 
-
        فهرست
        
+
        فهرست
        
 
        4. 
 
      4. 
-
        What is AOT?
        
-
        Ahead-of-Time (AOT) نوعی کامپایل است که برنامه شما را در زمان ساخت کامپایل می کند. برای کامپایل AOT، گزینه «--aot» را با دستور ng build یا ng serve به شرح زیر اضافه کنید.
        
+
        AOT چیه؟
        
+
        Ahead-of-Time (AOT) نوعی کامپایله که برنامه رو تو زمان ساخت کامپایل میکنه. برای کامپایل AOT، گزینه «--aot» رو با دستور ng build یا ng serve مثل کد زیر اضافه کنید.
        
  
 
        ng build --aot
 ng serve --aot
 
                 
-
        نکته: دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل می شود.
        
-
        فهرست
        
+
        نکته: دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل میشه.
        
+
        فهرست
        
 
        5. 
 
      5. 
 
        چرا ما به پروسه کامپایل نیاز داریم؟
        
-
        کامپوننت ها و قالب های Angular را نمی توان مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتوانند در مرورگر اجرا شوند نیاز به یک فرآیند کامپایل دارند. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت کارآمد تبدیل می‌شوند.
        
+
        کامپوننت ها و قالب های Angular رو نمی شه مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتونن تو مرورگر اجرا شن نیاز به یک فرآیند کامپایل دارن. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت قابل اجرا تبدیل مشن.
        
 
        فهرست
        
 
        6. 
 
      6. 
 
        مزایای استفاده از AOT چیه؟
        
 
          
-
        1. ** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.
          2. 
-
        2. ** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.
          3. 
-
        3. اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.
          4. 
-
        4. تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.
          5. 
-
        5. امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.
          6. 
+
        6. رندر سریعتر: مرورگر یک نسخه از پیش کامپایل شده برنامه رو دانلود میکنه. بنابراین می تونه برنامه رو بلافاصله بدون کامپایل کردن برنامه رندر کنه.
          7. 
+
        7. درخواست های async کمتر: قالب های HTML خارجی و برگه های سبک CSS رو تو برنامه جاوا اسکریپت قرار می ده که درخواست های جداگانه ajax رو حذف می کنه.
          8. 
+
        8. اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو حجم برنامه رو کمترش میکنه.
          9. 
+
        9. تشخیص زودتر خطاهای template: خطاهای اتصال template رو در مرحله ساخت شناسایی و گزارش می کنه.
          10. 
+
        10. امنیت بهتر: قالب ها و اجزای HTML رو در جاوا اسکریپت کامپایل می کنه. بنابراین هیچ حمله injection اتفاق نمیوفته.
          11. 
 
        
 
        فهرست
        
 
        7. 
 
      7. 
 
        روش های کنترل کامپایل شدن با AOT چیا هستن؟
        
-
        شما می توانید کامپایل برنامه خود را به دو روش کنترل کنید،
        
+
        می تونیم کامپایل برنامه رو به دو روش کنترل کنیم
        
 
          
 
        1. با ارائه گزینه های کامپایلر قالب در فایل tsconfig.json
          2. 
 
        2. با پیکربندی فراداده Angular با دکوراتورها
          3. 
@@ -3024,28 +3024,28 @@ 
          محدودیت هایی که روی metadata وجود داره چیا هستن؟
          
-
          در Angular، شما باید ابرداده را با محدودیت های کلی زیر بنویسید:
          
+
          در Angular، باید metadata رو با محدودیت های کلی زیر نوشت:
          
 
            
-
          1. نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید
            2. 
-
          2. کامپایلر فقط می تواند به نمادهایی که صادر شده اند ارجاع دهد
            3. 
-
          3. فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید
            4. 
-
          4. اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.
            5. 
+
          5. نحو عبارت رو با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسیم
            6. 
+
          6. کامپایلر فقط می تونه به نمادهایی که صادر شده ان ارجاع بده
            7. 
+
          7. فقط توابع پشتیبانی شده توسط کامپایلر رو فراخوانی کنیم
            8. 
+
          8. اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشن.
            9. 
 
          
 
          فهرست
          
 
 
        3. 
 
          فاز های کامپایل با استفاده از AOT چیا هستن؟
          
-
          کامپایلر AOT در سه فاز کار می کند،
          
+
          کامپایلر AOT تو سه فاز کار می کنه
          
 
            
-
          1. تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند
            2. 
-
          2. تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.
            3. 
-
          3. ** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.
            4. 
+
          4. تحلیل کد: کامپایلر نمایشی از منبع رو ثبت می کنه
            5. 
+
          5. تولید کد: تفسیر رو کنترل می کنه و همچنین محدودیت هایی رو در مورد آنچه تفسیر می کنه ایجاد می کنه.
            6. 
+
          6. اعتبار سنجی: در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کنه.
            7. 
 
          
 
          فهرست
          
 
          4. 
 
        4. 
 
          ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
          
-
          خیر، توابع پیکان یا توابع لامبدا را نمی توان برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. به عنوان مثال، قطعه زیر نامعتبر است:
          
+
          نه arrow function یا توابع لامبدا رو نمیشه برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. برای مثال، کد زیر اعتباری نداره:
          
  
 
          @Component({
      providers: [{
@@ -3053,7 +3053,7 @@ 
          
 
          function getService(){
      return new MyService();
@@ -3065,56 +3065,56 @@ 
          فهرست
          
 
          5. 
 
        5. 
 
          هدف از استفاده از فایل های metadata json چیه؟
          
-
          فایل metadata.json را می‌توان به‌عنوان نموداری از ساختار کلی فراداده‌های تزئینگر، که به‌عنوان یک درخت نحو انتزاعی (AST) نشان داده می‌شود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمع‌آورنده AOT ابرداده‌های ثبت‌شده در تزئینات Angular را اسکن می‌کند و اطلاعات فراداده را در فایل‌های .metadata.json، یک عدد برای هر فایل .d.ts، خروجی می‌دهد.
          
+
          فایل metadata.json رو میشه به‌عنوان نموداری از ساختار کلی metadata های تزئینگر، که به‌عنوان یک درخت نحو انتزاعی (AST) نشان داده می‌شود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمع‌آورنده AOT ابرداده‌های ثبت‌شده در تزئینات Angular رو اسکن می‌کنه و اطلاعات metadata رو در فایل‌های .metadata.json، یک عدد برای هر فایل .d.ts، خروجی می‌ده.
          
 
          فهرست
          
 
          6. 
 
        6. 
 
          توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
          
-
          خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کند. اگر عبارتی از نحو پشتیبانی نشده استفاده کند، گردآورنده یک گره خطا در فایل .metadata.json می نویسد. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به آن تکه متادیتا نیاز داشته باشد، خطایی را گزارش می‌کند.
          
+
          خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کنه. اگر عبارتی از نحو پشتیبانی نشده استفاده کنه گردآورنده یک گره خطا در فایل .metadata.json می نویسه. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به اون تکه metadata ها نیاز داشته باشه خطایی رو گزارش می‌کنه.
          
 
          فهرست
          
 
          7. 
 
        7. 
 
          folding چیه؟
          
-
          کامپایلر فقط می تواند ارجاعات به نمادهای صادر شده در ابرداده را حل کند. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا می شوند. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت را در حین جمع آوری ارزیابی می کند و نتیجه را به جای عبارت اصلی در .metadata.json ثبت می کند.
          
-به عنوان مثال، کامپایلر نمی تواند مرجع انتخابگر را ارجاع دهد زیرا صادر نشده است
          
+
          کامپایلر فقط میتونه ارجاعات به نمادهای export شده در metadata رو حل کنه. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا میشن. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت رو در حین جمع آوری ارزیابی می کنه و نتیجه رو به جای عبارت اصلی در .metadata.json ثبت می کنه.
          
+برای مثال، کامپایلر نمی تونه مرجع انتخابگر رو ارجاع بده چون export نشده
          
  
 
          let selector = 'app-root';
 @Component({
      selector: selector
 })
 
                     
-
          در انتخابگر درون خطی تا می شود
          
+
          در انتخابگر درون خطی تا میشه
          
  
 
          @Component({
      selector: 'app-root'
      })
 
                     
-
          به یاد داشته باشید که کامپایلر نمی تواند همه چیز را تا کند. به عنوان مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
          
+
          به یاد داشته باشین که کامپایلر نمی تونه همه چیز رو fold کنه. برای مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
          
 
          فهرست
          
 
          8. 
 
        8. 
 
          macros چیه؟
          
-
          کامپایلر AOT از ماکروها به شکل توابع یا متدهای ایستا پشتیبانی می کند که عبارتی را در یک عبارت بازگشتی واحد برمی گرداند.
          
-به عنوان مثال، یک تابع ماکرو زیر را در نظر بگیرید،
          
+
          کامپایلر AOT از macro ها به شکل توابع یا متدهای ایستا پشتیبانی می کنه که عبارتی رو در یک عبارت بازگشتی واحد برمی گرداند.
          
+برای مثال، یک تابع macro زیر رو در نظر بگیرین
          
  
 
          export function wrapInArray<T>(value: T): T[] {
      return [value];
 }
 
                     
-
          می توانید از آن در داخل ابرداده به عنوان یک عبارت استفاده کنید،
          
+
          می تونین از اون توی داخل metadata به عنوان یک عبارت استفاده کنین
          
  
 
          @NgModule({
      declarations: wrapInArray(TypicalComponent)
 })
 export class TypicalModule {}
 
                     
-
          The compiler treats the macro expression as it written directly
          
+
          کامپایلر با عبارات macro مثل نوشته شدن مستقیم رفتار میکنه
          
  
 
          @NgModule({
      declarations: [TypicalComponent]
@@ -3126,8 +3126,8 @@ 
          چن تا مثال از ارور های مربوط به metatdata بزن؟
          
 
            
-
          1. فرم عبارت پشتیبانی نمی شود: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های زاویه ای استفاده می شود می توانند این خطا را ایجاد کنند.
            
-بیایید برخی از این نمونه ها را ببینیم،
            2. 
+
          2. فرم عبارت پشتیبانی نمیشه: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که تو فراداده های انگولاری استفاده میشه می تونن این خطا رو ایجاد کنن.
            
+بعضی از این نمونه ها رو ببینیم،
            3. 
 
          
  
 
          1. export class User { ... }
@@ -3136,7 +3136,7 @@ 
          
 
        9. ارجاع به یک نماد محلی (غیرصادراتی): کامپایلر با نماد ارجاعی به یک نماد تعریف شده محلی مواجه شد که یا صادر نشده یا مقداردهی اولیه نشده است.
          
-بیایید این خطا را مثال بزنیم،
          10. 
+برای مثال
          10. 
 
        
  
 
        // ERROR
@@ -3151,14 +3151,15 @@ 
        })
 export class MyComponent {}
 
         
-
        You can fix this by either exporting or initializing the value,
        
+
        You can fix this by either exporting or initializing the value,
        
+برای حل این مشکل یا میتونیم مقدار رو export بگیریم یا مقدار رو تعریف کنیم
        
  
 
        export let username: string; // exported
 (or)
 let username = 'John'; // initialized
 
                 
 
          
-
        1. ** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمی‌توانید useFactory ارائه‌دهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
          2. 
+
        2. فراخوانی تابع پشتیبانی نمیشه: کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کنه. برای مثال، نمی‌توانید useFactory ارائه‌دهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
          3. 
 
        
  
 
        providers: [
@@ -3166,7 +3167,7 @@ 
        { provide: OtherStrategy, useFactory: () => { ... } }
 ]
 
         
-
        You can fix this with exported function
        
+
        میتونیم این مشکل رو با تابع export شده حل کنیم
        
  
 
           export function myStrategy() { ... }
    export function otherStrategy() { ... }
@@ -3177,7 +3178,7 @@ 
        ]
 
         
 
          
-
        1. متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
          2. 
+
        2. متغیر تخریب شده یا ثابت پشتیبانی نمیشه: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی رو پشتیبانی نمی کنه. برای مثال، ما نمی تونیم چیزی شبیه به این بتویسیم:
          3. 
 
        
  
 
        import { user } from './user';
@@ -3190,7 +3191,7 @@ 
        {provide: Age, useValue: age},
 ]
 
         
-
        شما می توانید این مشکل را با مقادیر غیر تخریب شده برطرف کنید
        
+
        ما می تونیم این مشکل رو با مقادیر غیر تخریب شده برطرف کنیم
        
  
 
           import { user } from './user';
    ... //metadata
@@ -3203,12 +3204,12 @@ 
        منظور از metadata rewriting چیه؟
        
-
        بازنویسی متادیتا فرآیندی است که در آن کامپایلر عبارتی را که فیلدهایی مانند useClass، useValue، useFactory و داده را مقداردهی اولیه می کند، به یک متغیر صادر شده تبدیل می کند که جایگزین عبارت می شود. به یاد داشته باشید که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می دهد اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی دهد.
        
+
        metadata rewriting فرآینده که تو اون کامپایلر عبارتی رو که فیلدهایی مانند useClass، useValue، useFactory و داده رو مقداردهی اولیه می کنه، به یک متغیر صادر شده تبدیل می کنه که جایگزین عبارت میشه. به یاد داشته باشیم که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می ده اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی ده.
        
 
        فهرست
        
 
        8. 
 
      8. 
 
        توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
        
-
        Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.
        
+
        Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی میکنه. برای مثال، پیکربندی از فایل پایه (برای مثال، tsconfig.base.json) ابتدا بارگیری میشه، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو میشن.
        
  
 
        {
      "extends": "../tsconfig.base.json",
@@ -3227,7 +3228,7 @@ 
        چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
        
-
        گزینه های کامپایلر قالب زاویه ای به عنوان اعضای شی angularCompilerOptions در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.
        
+
        گزینه های کامپایلر قالب انگولاری به عنوان اعضای شی angularCompilerOptions در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص میشن.
        
  
 
        {
      "compilerOptions": {
@@ -3245,7 +3246,7 @@ 
        چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
        
-
        شما می توانید صریحاً با افزودن گزینه کامپایلر fullTemplateTypeCheck در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.
        
+
        شما می تونین صریحاً با افزودن گزینه کامپایلر fullTemplateTypeCheck در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده میشه، پیام های خطا تولید میکنه.
        
 
        برای مثال، جزء زیر را در نظر بگیرید:
        
  
 
        @Component({
@@ -3256,7 +3257,7 @@ 
        ?: User;
 }
 
                 
-
        این باعث ایجاد خطای زیر می شود:
        
+
        این باعث ایجاد خطای زیر میشه:
        
  
 
        my.component.ts.MyComponent.html(1,1): : Property 'contacts' does not exist on type 'User'. Did you mean 'contact'?
 
                 
@@ -3264,11 +3265,11 @@ 
        هدف از any type توی cast function چیه؟
        
-
        می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
        
+
        می تونین بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
        
  
 
        template: '{{ $any(user).contacts.email }}'
 
                 
-
        تابع $any() cast نیز با این کار می کند تا امکان دسترسی به اعضای اعلام نشده کامپوننت را فراهم کند.
        
+
        تابع $any() cast نیز با این کار میکنه تا امکان دسترسی به اعضای اعلام نشده کامپوننت را فراهم کنه.
        
  
 
        template: '{{ $any(this).contacts.email }}'
 
                 
@@ -3276,7 +3277,7 @@ 
        اپراتور non null assertion چیه؟
        
-
        برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
        
+
        برای سرکوب خطای Object is assibly 'undefined' می تونین از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم میشن، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
        
  
 
        @Component({
      selector: 'my-component',
@@ -3296,7 +3297,7 @@ 
        منظور از type narrowing چیه؟
        
-
        عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
        
+
        عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده میشه. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کنه که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
        
  
 
        @Component({
      selector: 'my-component',
@@ -3310,11 +3311,11 @@ 
        چطوری dependency های مختلف توی انگولار تعریف میکنی؟
        
-
        بخش وابستگی های package.json با در یک برنامه زاویه ای را می توان به صورت زیر تقسیم کرد:
        
+
        بخش وابستگی های package.json با در یک برنامه انگولاری را می توان به صورت زیر تقسیم کرد:
        
 
          
-
        1. ** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.
          2. 
+
        2. بسته های انگولاری: هسته انگولاری و ماژول های اختیاری. نام بسته آنها @angular/ شروع میشه.
          3. 
 
        3. بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.
          4. 
-
        4. ** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.
          5. 
+
        5. بسته های Polyfill: Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل میکنه.
          6. 
 
        
 
        فهرست
        
 
        9. 
@@ -3325,12 +3326,12 @@ 
        هدف از ماژول مشترک توی انگولار چیه؟
        
-
        خدمات، لوله‌ها و دستورالعمل‌های مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.
        
+
        خدمات، pipe ها و دستورالعمل‌های مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.
        
 
        فهرست
        
 
 
      9. 
 
        codelyzer چیه؟
        
-
        Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.
        
+
        Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می تونین تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی میکنه و می توان از آن به صورت زیر استفاده کرد.
        
 
 
        ng new codelyzer
 ng lint
@@ -3339,14 +3340,14 @@ 
        angular animation چیه؟
        
-
        سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگی‌ها شامل موقعیت‌ها، اندازه‌ها، تبدیل‌ها، رنگ‌ها، حاشیه‌ها و غیره است. ماژول‌های Angular برای انیمیشن‌ها @angular/animations و @angular/platform-browser هستند و این وابستگی‌ها به طور خودکار به پروژه شما اضافه می‌شوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
        
+
        سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کنه. این ویژگی‌ها شامل موقعیت‌ها، اندازه‌ها، تبدیل‌ها، رنگ‌ها، حاشیه‌ها و غیره است. ماژول‌های Angular برای انیمیشن‌ها @angular/animations و @angular/platform-browser هستند و این وابستگی‌ها به طور خودکار به پروژه شما اضافه می‌شوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
        
 
        فهرست
        
 
        10. 
 
      10. 
 
        مراحل استفاده از ماژول های animation چیه؟
        
-
        برای پیاده سازی انیمیشن در پروژه زاویه ای خود باید مراحل زیر را دنبال کنید.
        
+
        برای پیاده سازی انیمیشن در پروژه انگولاری خود باید مراحل زیر را دنبال کنید.
        
 
          
-
        1. **Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیت‌های انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).
          2. 
+
        2. Enabling the animations module: BrowserAnimationsModule رو import کنین تا قابلیت‌های انیمیشن را به ماژول برنامه Angular root خود اضافه کنین (برای مثال، src/app/app.module.ts).
          3. 
 
        
 
 
        import { NgModule } from '@angular/core';
@@ -3364,7 +3365,7 @@ 
        export class AppModule { }
 
        
 
          
-
        1. Importing animation functions into component files: توابع انیمیشن مورد نیاز را از @angular/animations در فایل‌های مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts).
          2. 
+
        2. Importing animation functions into component files: توابع انیمیشن مورد نیازتون رو از @angular/animations در فایل‌های مؤلفه import کنین (برای مثال، src/app/app.component.ts).
          3. 
 
        
 
 
            import {
@@ -3377,7 +3378,7 @@ 
        } from '@angular/animations';
 
        
 
          
-
        1. Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
          2. 
+
        2. Adding the animation metadata property: یک ویژگی metadata به نام animations اضافه کنین: در دکوراتور @Component() در فایل های کامپوننت (برای مثال src/app/app.component.ts)
          3. 
 
        
 
 
            @Component({
@@ -3393,8 +3394,8 @@ 
        تابع state چیه؟
        
-
        تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
        
-
        به عنوان مثال، می توانید یک تابع حالت باز بنویسید
        
+
        تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده میشه. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
        
+
        برای مثال، می تونین یک تابع حالت باز بنویسین
        
 
 
        state('open', style({
   height: '300px',
@@ -3406,7 +3407,7 @@ 
        هدف از تابع style چیه؟
        
-
        تابع style برای تعریف مجموعه‌ای از سبک‌ها برای مرتبط کردن با یک نام وضعیت استفاده می‌شود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
        
+
        تابع style برای تعریف مجموعه‌ای از سبک‌ها برای مرتبط کردن با یک نام وضعیت استفاده می‌شود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. برای مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
        
 
 
        state('close', style({
   height: '100px',
@@ -3463,7 +3464,7 @@ 
        تابع transition چیه؟
        
-
        تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.
        
+
        تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده میشه. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص میکنه و آرگومان دوم تابع animate() را می پذیرد.
        
 
        بیایید یک مثال انتقال حالت از باز به بسته با انتقال نیم ثانیه بین حالت ها را در نظر بگیریم.
        
 
 
        transition('open => closed', [
@@ -3493,17 +3494,17 @@ 
        service worker چیه و نقشش توی انگولار چیه؟
        
-
        Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
        
+
        Service Worker یک اسکریپت است که در مرورگر وب اجرا میشه و حافظه پنهان یک برنامه را مدیریت میکنه. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه میشه. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کنه یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
        
 
        فهرست
        
 
        11. 
 
      11. 
 
        اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
        
 
          
-
        1. یک برنامه را مانند نصب یک برنامه بومی کش می کند
          2. 
+
        2. یک برنامه را مانند نصب یک برنامه بومی کش میکنه
          3. 
 
        3. یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
          4. 
-
        4. هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند
          5. 
-
        5. هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود
          6. 
-
        6. Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.
          7. 
+
        7. هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری میکنه
          8. 
+
        8. هنگامی که تغییرات منتشر میشه، بلافاصله در پس زمینه به روز میشه
          9. 
+
        9. Service Workers پهنای باند را با بارگیری منابع صرفه جویی میکنه که فقط زمانی که آنها تغییر کرده اند.
          10. 
 
        
 
        فهرست
        
 
        12. 
@@ -3520,7 +3521,7 @@ 
        Angular Ivy چیه؟
        
 
        Angular Ivy یک موتور رندر جدید برای Angular است. می‌توانید نسخه پیش‌نمایش Ivy را از نسخه 8 Angular انتخاب کنید.
        
 
          
-
        1. با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید
          2. 
+
        2. با استفاده از پرچم --enable-ivy با دستور ng new می تونین ivy را در یک پروژه جدید فعال کنید
          3. 
 
        
 
 
        ng new ivy-demo-app --enable-ivy
@@ -3554,7 +3555,7 @@ 
        قابلیت هایی که توی حالت ivy وجود دارن چیا هستن؟
        
-
        می توانید با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.
        
+
        می تونین با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.
        
 
          
 
        1. کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است
          2. 
 
        2. زمان بازسازی سریعتر
          3. 
@@ -3565,7 +3566,7 @@ 
          میتونیم از مدل کامپایل AOT توی حالت Ivy استفاده کنیم؟
          
-
          بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کند.
          
+
          بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کنه.
          
 
 
           {
    "projects": {
@@ -3586,12 +3587,12 @@ 
          سرویس زبان انگولار چیه؟
          
-
          سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالب‌های Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیه‌نویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا می کند و سپس تمام خدمات زبان را ارائه می دهد.
          
+
          سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالب‌های Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیه‌نویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا میکنه و سپس تمام خدمات زبان را ارائه می دهد.
          
 
          فهرست
          
 
 
        3. 
 
          چطوری از سرویس زبان انگولار توی پروژمون استفاده کنیم؟
          
-
          با دستور npm زیر می توانید Angular Language Service را در پروژه خود نصب کنید.
          
+
          با دستور npm زیر می تونین Angular Language Service را در پروژه خود نصب کنید.
          
 
 
           npm install --save-dev @angular/language-service
 
          
@@ -3601,12 +3602,12 @@ 
          فهرست
          
 
          4. 
 
        4. 
 
          ادیتوری که سرویس زبان انگولار رو ساپورت گنن وجود داره؟
          
-
          بله، سرویس زبان Angular در حال حاضر برای Visual Studio Code و WebStorm IDE در دسترس است. شما باید سرویس زبان زاویه ای را با استفاده از افزونه و devDependency نصب کنید. در ویرایشگر sublime، باید تایپ اسکریپتی را نصب کنید که دارای مدل پلاگین سرویس زبان است.
          
+
          بله، سرویس زبان Angular در حال حاضر برای Visual Studio Code و WebStorm IDE در دسترس است. شما باید سرویس زبان انگولاری را با استفاده از افزونه و devDependency نصب کنید. در ویرایشگر sublime، باید تایپ اسکریپتی را نصب کنید که دارای مدل پلاگین سرویس زبان است.
          
 
          فهرست
          
 
          5. 
 
        5. 
@@ -3614,11 +3615,11 @@ 
          
 
          6. 
 
        6. 
-
          Error checking: همچنین می تواند به شما در مورد اشتباهات کدتان هشدار دهد.
          
+
          Error checking: همچنین می تونه به شما در مورد اشتباهات کدتان هشدار دهد.
          
 
          ScreenShot
          
 
          7. 
 
        7. 
@@ -3630,10 +3631,10 @@ 
          چطوری web worker توی پروژه ات اضافه می کنی؟
          
-
          شما می توانید وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، می‌توانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد می‌کند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد
          
+
          شما می تونین وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، می‌توانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد می‌کند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد
          
 
            
 
          1. پروژه خود را برای استفاده از Web Workers پیکربندی کنید
            2. 
-
          2. app.worker.ts را برای دریافت پیام اضافه می کند
            3. 
+
          3. app.worker.ts را برای دریافت پیام اضافه میکنه
            4. 
 
          
 
 
          addEventListener('message', ({ data }) => {
@@ -3656,7 +3657,7 @@ 
          // Web Workers are not supported in this environment.
 }
 
          
-
          نکته: ممکن است نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
          
+
          نکته: ممکنه نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
          
 
          فهرست
          
 
          8. 
 
        8. 
@@ -3668,22 +3669,22 @@ 
          Angular CLI Builder چیه؟
          
-
          در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، می‌توانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدام ابزار شخص ثالث توسط یک دستور موجود استفاده می‌شود، فراهم کنید.
          
+
          در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، می‌توانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدوم ابزار شخص ثالث توسط یک دستور موجود استفاده می‌شود، فراهم کنید.
          
 
          فهرست
          
 
          9. 
 
        9. 
 
          منظور از Builder چیه؟
          
-
          یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده می کند. کد سازنده در یک بسته npm تعریف شده است. به عنوان مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا می کند و KarmaBuilder سرور Karma را راه اندازی می کند و یک بسته وب را برای آزمایش های واحد اجرا می کند.
          
+
          یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده میکنه. کد سازنده در یک بسته npm تعریف شده است. برای مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا میکنه و KarmaBuilder سرور Karma را راه اندازی میکنه و یک بسته وب را برای آزمایش های واحد اجرا میکنه.
          
 
          فهرست
          
 
          10. 
 
        10. 
 
          چطوری یه builder رواجرا میکنی؟
          
-
          دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده می شود. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیش‌فرض برای سازنده‌های داخلی است.
          
+
          دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده میشه. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیش‌فرض برای سازنده‌های داخلی است.
          
 
          فهرست
          
 
          11. 
 
        11. 
 
          چطوری توی انگولار یه app shell ایجاد میکنی؟
          
-
          پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر می شود مفید است زیرا مرورگر می تواند HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می توانید با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد می کند، به این هدف برسید.
          
+
          پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر میشه مفید است چون مرورگر می تونه HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می تونین با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد میکنه، به این هدف برسید.
          
 
 
          ng generate appShell [options] (or)
 ng g appShell [options]
@@ -3692,18 +3693,18 @@ 
          استانداردcase type ها برای استفاده توی انگولار چیا هستن؟
          
-
          Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده می کند. Angular لیستی از انواع موارد زیر را دنبال می کند.
          
+
          Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده میکنه. Angular لیستی از انواع موارد زیر را دنبال میکنه.
          
 
            
-
          1. camelCase : نمادها، ویژگی‌ها، روش‌ها، نام لوله‌ها، انتخاب‌کننده‌های دستورالعمل غیرمولفه، ثابت‌ها از حروف کوچک در حرف اول آیتم استفاده می‌کنند. به عنوان مثال، "selectedUser"
            2. 
-
          2. UpperCamelCase (or PascalCase): نام کلاس‌ها، از جمله کلاس‌هایی که اجزا، رابط‌ها، NgModules، دستورالعمل‌ها و لوله‌ها را تعریف می‌کنند، از حروف بزرگ در حرف اول آیتم استفاده می‌کنند.
            3. 
-
          3. dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list".
            4. 
-
          4. UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS".
            5. 
+
          5. camelCase : نمادها، ویژگی‌ها، روش‌ها، نام pipe ها، انتخاب‌کننده‌های دستورالعمل غیرمولفه، ثابت‌ها از حروف کوچک در حرف اول آیتم استفاده می‌کنند. برای مثال، "selectedUser"
            6. 
+
          6. UpperCamelCase (or PascalCase): نام کلاس‌ها، از جمله کلاس‌هایی که اجزا، رابط‌ها، NgModules، دستورالعمل‌ها و pipe ها را تعریف می‌کنند، از حروف بزرگ در حرف اول آیتم استفاده می‌کنند.
            7. 
+
          7. dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده میشه. برای مثال، "app-user-list".
            8. 
+
          8. UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. برای مثال، "NUMBER_OF_USERS".
            9. 
 
          
 
          فهرست
          
 
          12. 
 
        12. 
 
          class decorator ها توی انگولار چیا هستن؟
          
-
          دکوراتور کلاس، دکوراتوری است که بلافاصله قبل از تعریف کلاس ظاهر می شود، که کلاس را از نوع معین اعلام می کند و ابرداده مناسب برای نوع را فراهم می کند.
          
+
          دکوراتور کلاس، دکوراتوری است که بلافاصله قبل از تعریف کلاس ظاهر میشه، که کلاس را از نوع معین اعلام میکنه و ابرداده مناسب برای نوع را فراهم میکنه.
          
 
          لیست زیر از دکوراتورها در زیر کلاس دکوراتورها آمده است:
          
 
            
 
          1. @Component()
            2. 
@@ -3716,7 +3717,7 @@ 
            class field decorator چیه؟
            
-
            دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام می شوند که نوع آن فیلد را مشخص می کند. برخی از نمونه ها عبارتند از: @input و @output،
            
+
            دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام میشن که نوع آن فیلد را مشخص میکنه. برخی از نمونه ها عبارتند از: @input و @output،
            
 
 
             @Input() myProperty;
  @Output() myEvent = new EventEmitter();
@@ -3725,7 +3726,7 @@ 
            declarable توی انگولار چیه ؟
            
-
            Declarable یک نوع کلاس است که می توانید آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود
            
+
            Declarable یک نوع کلاس است که می تونین آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود
            
 
 
             declarations: [
    YourComponent,
@@ -3759,11 +3760,11 @@ 
            Angular DSL چیه؟
            
-
            یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه می‌دهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل می کند که مرورگر بتواند آن را درک کند. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.
            
+
            یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه می‌دهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل میکنه که مرورگر بتونه آن را درک کنه. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.
            
 
            اساساً شما 3 نحو اصلی را در Angular DSL خواهید دید.
            
 
              
-
            1. (): برای رویدادهای خروجی و DOM استفاده می شود.
              2. 
-
            2. []: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.
              3. 
+
            3. (): برای رویدادهای خروجی و DOM استفاده میشه.
              4. 
+
            4. []: برای ورودی و ویژگی های خاص عنصر DOM استفاده میشه.
              5. 
 
            5. *: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.
              6. 
 
            
 
            فهرست
            
@@ -3771,7 +3772,7 @@ 
            rxjs Subject چیه؟
            
 
            یک موضوع RxJS نوع خاصی از Observable است که اجازه می‌دهد مقادیر برای بسیاری از Observerها چندپخشی شوند. در حالی که مشاهده پذیرهای ساده یکپارچه هستند (هر مشاهده کننده مشترک دارای اجرای مستقل از Observable است)، سوژه ها چندپخشی هستند.
            
-
            یک موضوع مانند یک مشاهده پذیر است، اما می تواند برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.
            
+
            یک موضوع مانند یک مشاهده پذیر است، اما می تونه برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.
            
 
 
             import { Subject } from 'rxjs';
 
@@ -3793,7 +3794,7 @@ 
            Bazel tool چیه؟
            
 
 
          
-
           Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تواند وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید.
+
           Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تونه وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کنه. در Angular8 می تونین برنامه CLI خود را با Bazel بسازید.
  **نکته:** خود فریم ورک Angular با Bazel ساخته شده است.
 
  **[فهرست](#فهرست)**
@@ -3803,13 +3804,13 @@ 
          مزایای استفاده از ابزار Bazel چیه؟
          
 
          13. 
 
        13. 
-
          این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
          
+
          این امکان را ایجاد میکنه که با همان ابزار بک اند و جلویی شما را بسازید
          
 
          14. 
 
        14. 
 
          ساخت افزایشی و تست
          
 
          15. 
 
        15. 
-
          این امکان را ایجاد می کند که از راه دور ساخت و حافظه پنهان در یک مزرعه ساخت.
          
+
          این امکان را ایجاد میکنه که از راه دور ساخت و حافظه پنهان در یک مزرعه ساخت.
          
 
          16. 
 
        
 
         **[فهرست](#فهرست)**
@@ -3817,7 +3818,7 @@ 
        
 
      12. 
 
        چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟
        
-
        بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
        
+
        بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کنه.
        
 
          
 
        1. Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید
          2. 
 
        
@@ -3831,12 +3832,12 @@ 
        npm install -g @angular/bazel
 ng new --collection=@angular/bazel
 
        13. 
-وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده می شود و نتایج را در پوشه dist/bin خروجی می دهد.
+وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده میشه و نتایج را در پوشه dist/bin خروجی می دهد.
 
        فهرست
        
 
 
      13. 
 
        چطوری ابزار Bazel رو مستقیما اجرا میکنی؟
        
-
        گاهی اوقات ممکن است بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می توانید با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
        
+
        گاهی اوقات ممکنه بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می تونین با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
        
 
 
        bazel build [targets] // Compile the default output artifacts of the given targets.
 bazel test [targets] // Run the tests with *_test targets found in the pattern.
@@ -3846,22 +3847,22 @@ 
        platform توی انگولار چیه؟
        
-
        پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تواند یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بسته‌های angular/platform-*@ ارائه می‌شود و این بسته‌ها به برنامه‌هایی که از «@angular/core» و «@angular/common» استفاده می‌کنند اجازه می‌دهند در محیط‌های مختلف اجرا شوند.
        
-به عنوان مثال، Angular می تواند به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،
        
+
        پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا میشه. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تونه یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بسته‌های angular/platform-*@ ارائه می‌شود و این بسته‌ها به برنامه‌هایی که از «@angular/core» و «@angular/common» استفاده می‌کنند اجازه می‌دهند در محیط‌های مختلف اجرا شوند.
        
+برای مثال، Angular می تونه به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، برای مثال،
        
 
          
-
        1. در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
          2. 
-
        2. هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
          3. 
+
        3. در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده میکنه.
          4. 
+
        4. هنگامی که SSR (رندر سمت سرور) استفاده میشه، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده میکنه.
          5. 
 
        
 
        فهرست
        
 
        14. 
 
      14. 
 
        اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟
        
-
        اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
        
+
        اگر چندین ماژول یک ماژول را وارد کنه، angular آن را فقط یک بار ارزیابی میکنه (وقتی اولین بار با ماژول روبرو میشه). از این شرط پیروی میکنه حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر میشه.
        
 
        فهرست
        
 
        15. 
 
      15. 
 
        چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟
        
-
        برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل @ViewChild استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
        
+
        برای دسترسی مستقیم به عناصر موجود در نما می تونین از دستورالعمل @ViewChild استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
        
 
 
        <input #uname>
 
        
@@ -3877,7 +3878,7 @@ 
        چطوری توی انگولار route رو تغییر میدی؟
        
-
        در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
        
+
        در Angular7 می تونین برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
        
 
 
        this.router.events.subscribe((event: Event) => {})
 
        
@@ -3937,22 +3938,22 @@ 
        هدف از defferentail loading توی CLI چیه؟
        
-
        از انتشار Angular8 به بعد، برنامه‌ها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته می‌شوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
        
+
        از انتشار Angular8 به بعد، برنامه‌ها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته میشن تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازنس.
        
 
          
-
        1. اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره می‌برد، پلی‌فیل‌های کمتری ارسال می‌کند و منجر به اندازه بسته‌ای کوچک‌تر می‌شود.
          2. 
-
        2. ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلی‌فیل‌های لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
          3. 
+
        3. اولین ساخت شامل نحو ES2015 هس که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره می‌برد، plyfill ها کمتری ارسال می‌کند و منجر به اندازه بسته‌ای کوچک‌تر میشه.
          4. 
+
        4. ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام plyfill های لازمه. اما این باعث میشه اندازه بسته بزرگتر شه.
          5. 
 
        
-
        نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
        
+
        نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده میشه، اما فقط کد مورد نیاز مرورگر را بارگیری میکنه.
        
 
        فهرست
        
 
        16. 
 
      16. 
 
        انگولار از dynamic import پشتیبانی میگنه؟
        
-
        بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، می‌توانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
        
-قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را می‌پذیرد و در طول زمان ساخت، خطا می‌دهد.
        
+
        بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی میکنه. برای مثال، میتونین از دستور import برای lazy loading ماژول با استفاده از روش «loadChildren» استفاده کنین و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
        
+قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی رو با lazy loading کنین. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته رو می‌پذیرد و موقع build خطا میده.
        
 
 
        {path: ‘user’, loadChildren: ‘./users/user.module#UserModulee’},
 
        
-
        این مشکل با استفاده از واردات پویا حل می شود و IDE ها می توانند آن را در طول زمان کامپایل پیدا کنند.
        
+
        این مشکل با استفاده از واردات پویا حل میشه و IDE ها می تونن اون رو در طول زمان کامپایل پیدا کنن.
        
 
 
        {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};
 
        
@@ -3960,7 +3961,7 @@ 
        منظور از lazy loading چیه؟
        
-
        Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
        
+
        Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing هس. این به ما کمک میکنه تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب رو به صورت تکه ای دانلود کنیم. برای Lazy loading با بارگیری async ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده میشه. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» رو مثل زیر بارگیری کنیم.
        
 
 
        const routes: Routes = [
   {
@@ -3982,7 +3983,7 @@ 
        workspace API چیه؟
        
-
        نسخه Angular 8.0 API های Workspace را معرفی می کند تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کند. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده می‌شود. می‌توانید گزینه بهینه‌سازی را برای build target به صورت زیر فعال یا اضافه کنید.
        
+
        نسخه Angular 8.0 API های Workspace را معرفی میکنه تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کنه. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده می‌شود. می‌توانید گزینه بهینه‌سازی را برای build target به صورت زیر فعال یا اضافه کنید.
        
 
 
        import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import { workspaces } from '@angular-devkit/core';
@@ -4012,7 +4013,7 @@ 
        چطوری ورژن انگولار رو آپدیت میکنی؟
        
-
        ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
        
+
        ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. برای مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده lazy شما به صورت خودکار به نحو واردات جدید منتقل میشه.
        
 
 
        $ ng update @angular/cli @angular/core
 
        
@@ -4020,13 +4021,13 @@ 
        Angular Material چیست؟
        
-
        Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
        
+
        Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی میکنه. با استفاده از Angular Material می تونین Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
        
 
 
        npm install --save @angular/material @angular/cdk @angular/animations
 (OR)
 yarn add @angular/material @angular/cdk @angular/animations
 
        
-
        از دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی می کند. آخرین نسخه متریال Angular 8.1.1 است
        
+
        از دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی میکنه. آخرین نسخه متریال Angular 8.1.1 است
        
 
        فهرست
        
 
        17. 
 
      17. 
@@ -4048,12 +4049,12 @@ 
        NgUpgrade چیه؟
        
-
        NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
        
+
        NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می تونین از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
        
 
        فهرست
        
 
        18. 
 
      18. 
 
        چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟
        
-
        Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. به‌طور پیش‌فرض، این دستور برنامه را در حالت تماشا می‌سازد و «Karma test runner» را راه‌اندازی می‌کند. خروجی نتایج آزمون به صورت زیر خواهد بود:
        
+
        Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب میکنه. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. به‌طور پیش‌فرض، این دستور برنامه را در حالت تماشا می‌سازد و «Karma test runner» را راه‌اندازی می‌کند. خروجی نتایج آزمون به صورت زیر خواهد بود:
        
 
 
        10% building modules 1/1 modules 0 active
 ...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
@@ -4062,16 +4063,16 @@ 
        ...INFO [Chrome ...]: Connected on socket ...
 Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)
 
        
-
        نکته: یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
        
+
        نکته: یک مرورگر کروم نیز باز میشه و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
        
 
        فهرست
        
 
        19. 
 
      19. 
 
        چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟
        
-
        Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی src/polyfills.ts به عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
        
+
        Angular CLI به طور رسمی از polyfills پشتیبانی میکنه. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی src/polyfills.ts به عنوان بخشی از پوشه پروژه شما ایجاد میشه. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
        
 
          
-
        1. Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
          2. 
+
        2. Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب میشن.
          3. 
 
        3. Optional polyfills: شما باید بسته npm آن را نصب کنید و سپس دستور import را در فایل 'src/polyfills.ts' ایجاد کنید.
          
-به عنوان مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
          4. 
+برای مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
 
        
 
 
        npm install --save web-animations-js
@@ -4086,8 +4087,8 @@ 
        روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟
        
 
        می‌توانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روش‌های خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
        
 
          
-
        1. ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
          2. 
-
        2. NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
          3. 
+
        3. ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی میکنه.
          4. 
+
        4. NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی میکنه.
          5. 
 
        5. ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
          6. 
 
        
 
        فهرست
        
@@ -4125,16 +4126,16 @@ 
        قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟
        
-
        در زیر لیستی از اصول امنیتی در زاویه ای آورده شده است.
        
+
        در زیر لیستی از اصول امنیتی در انگولاری آورده شده است.
        
 
          
 
        1. باید از استفاده مستقیم از APIهای DOM اجتناب کنید.
          2. 
 
        2. شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید.
          3. 
@@ -4198,7 +4199,7 @@ 
          چرا فریم ورک های web tracking
          
-
          Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمی شود و در اکثر برنامه ها شکسته می شود، در آخرین نسخه منسوخ شده است.
          
+
          Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمیشه و در اکثر برنامه ها شکسته میشه، در آخرین نسخه منسوخ شده است.
          
 
          فهرست
          
 
 
        3. 
@@ -4227,7 +4228,7 @@ 
          ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟
          
-
          Angular از جدیدترین مرورگرها پشتیبانی می کند که شامل مرورگرهای دسکتاپ و موبایل می شود.
          
+
          Angular از جدیدترین مرورگرها پشتیبانی میکنه که شامل مرورگرهای دسکتاپ و موبایل میشه.
          
 
      19. 
 
 
      
 مرورگرپشتیبانی از المان زاویه ایپشتیبانی از المان انگولاری
 
      
       
 
      
@@ -4250,7 +4251,7 @@ 
      schematic چیه؟
      
-
      این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف می کند. قوانینی را تعریف می کند که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
      
+
      این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف میکنه. قوانینی را تعریف میکنه که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
      
 
      فهرست
      
 
 
    19. 
@@ -4284,7 +4285,7 @@ 
      Schematics CLI چیه؟
      
-
      طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه می شوند. برای نصب شماتیک های اجرایی استفاده می شود که می توانید از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می توانید از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می توانید Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
      
+
      طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه میشن. برای نصب شماتیک های اجرایی استفاده میشه که می تونین از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می تونین از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می تونین Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
      
 
 
      npm install -g @angular-devkit/schematics-cli
 
      
@@ -4292,7 +4293,7 @@ 
      بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟
      
-
      در زیر بهترین شیوه های امنیتی در زاویه ای آورده شده است.
      
+
      در زیر بهترین شیوه های امنیتی در انگولاری آورده شده است.
      
 
        
 
      1. از آخرین نسخه های کتابخانه Angular استفاده کنید
        2. 
 
      2. کپی Angular خود را تغییر ندهید
        3. 
@@ -4302,28 +4303,28 @@ 
        توی انگولار چطوری از XSS Atack جلوگیری میکنی؟
        
-
        Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. به عنوان مثال، Angular پاکسازی می‌کند و از مقادیر نامعتبر فرار می‌کند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درون‌یابی در DOM درج می‌شود.
        
+
        Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. برای مثال، Angular پاکسازی می‌کند و از مقادیر نامعتبر فرار می‌کند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درون‌یابی در DOM درج می‌شود.
        
 
        فهرست
        
 
 
      3. 
 
        قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟
        
-
        کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری می کند و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه می شود از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
        
+
        کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری میکنه و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه میشه از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
        
 
        فهرست
        
 
        4. 
 
      4. 
 
        موضوع های امنیتی توی انگولار چیا هستن؟
        
-
        Angular زمینه های امنیتی زیر را برای پاکسازی تعریف می کند:
        
+
        Angular زمینه های امنیتی زیر را برای پاکسازی تعریف میکنه:
        
 
          
-
        1. HTML: هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده می شود.
          2. 
-
        2. Style: هنگام اتصال CSS به ویژگی style استفاده می شود.
          3. 
-
        3. URL: برای ویژگی های URL مانند <a href> استفاده می شود.
          4. 
-
        4. Resource URL: این یک URL است که به عنوان کدی مانند <script src> بارگیری و اجرا می شود.
          5. 
+
        5. HTML: هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده میشه.
          6. 
+
        6. Style: هنگام اتصال CSS به ویژگی style استفاده میشه.
          7. 
+
        7. URL: برای ویژگی های URL مانند <a href> استفاده میشه.
          8. 
+
        8. Resource URL: این یک URL است که به عنوان کدی مانند <script src> بارگیری و اجرا میشه.
          9. 
 
        
 
        فهرست
        
 
        5. 
 
      5. 
 
        Sanitization چیه و انگولار ازش پشتیبانی میکنه؟
        
-
        Sanitization بازرسی یک مقدار نامعتبر است که آن را به مقداری تبدیل می کند که برای درج آن در DOM ایمن است. بله، Angular از ضد عفونی کردن پشتیبانی می کند. مقادیر نامعتبر را برای HTML، سبک‌ها و URLها پاکسازی می‌کند، اما پاکسازی URLهای منبع ممکن نیست زیرا حاوی کد دلخواه هستند.
        
+
        Sanitization بازرسی یک مقدار نامعتبر است که آن را به مقداری تبدیل میکنه که برای درج آن در DOM ایمن است. بله، Angular از ضد عفونی کردن پشتیبانی میکنه. مقادیر نامعتبر را برای HTML، سبک‌ها و URLها پاکسازی می‌کند، اما پاکسازی URLهای منبع ممکن نیست چون حاوی کد دلخواه هستند.
        
 
        فهرست
        
 
        6. 
 
      6. 
@@ -4338,12 +4339,12 @@ 
        : string = '<b>Hello World</b>, Angular';
 }
 
-
        متأسفانه این ویژگی می تواند باعث ایجاد اشکالات امنیتی Cross Site Scripting (XSS) در صورت مدیریت نادرست شود.
        
+
        متأسفانه این ویژگی می تونه باعث ایجاد اشکالات امنیتی Cross Site Scripting (XSS) در صورت مدیریت نادرست شود.
        
 
        فهرست
        
 
        7. 
 
      7. 
 
        تفاوت بین interpolated content و innerHTML چیه؟
        
-
        تفاوت اصلی بین کد درون یابی شده و کد داخلی در رفتار کد تفسیر شده است. محتوای درون‌یابی همیشه حذف می‌شود، یعنی HTML تفسیر نمی‌شود و مرورگر براکت‌های زاویه‌ای را در محتوای متن عنصر نمایش می‌دهد. در جایی که در innerHTML binding، محتوا تفسیر می شود، یعنی مرورگر کاراکترهای < و > را به عنوان HTMLEntities تبدیل می کند. به عنوان مثال، استفاده در قالب به صورت زیر خواهد بود.
        
+
        تفاوت اصلی بین کد درون یابی شده و کد داخلی در رفتار کد تفسیر شده است. محتوای درون‌یابی همیشه حذف می‌شود، یعنی HTML تفسیر نمی‌شود و مرورگر براکت‌های انگولار را در محتوای متن عنصر نمایش می‌دهد. در جایی که در innerHTML binding، محتوا تفسیر میشه، یعنی مرورگر کاراکترهای < و > را به عنوان HTMLEntities تبدیل میکنه. برای مثال، استفاده در قالب به صورت زیر خواهد بود.
        
 
 
        <p>Interpolated value:</p>
 <div >{{htmlSnippet}}</div>
@@ -4356,7 +4357,7 @@ 
        = 'Template <script>alert("XSS Attack")</script> <b>Code attached</b>';
 }
 
        
-
        حتی با وجود اینکه innerHTML binding شانس حمله XSS را ایجاد می کند، Angular این مقدار را ناامن تشخیص می دهد و به طور خودکار آن را پاکسازی می کند.
        
+
        حتی با وجود اینکه innerHTML binding شانس حمله XSS را ایجاد میکنه، Angular این مقدار را ناامن تشخیص می دهد و به طور خودکار آن را پاکسازی میکنه.
        
 
        فهرست
        
 
        8. 
 
      8. 
@@ -4364,7 +4365,7 @@ 
        
 
        constructor(private sanitizer: DomSanitizer) {
   this.dangerousUrl = 'javascript:alert("XSS attack")';
@@ -4387,7 +4388,7 @@ 
        استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟
        
-
        خیر، APIها یا روش‌های داخلی مرورگر DOM به‌طور خودکار از شما در برابر آسیب‌پذیری‌های امنیتی محافظت نمی‌کنند. در این مورد توصیه می شود به جای تعامل مستقیم با DOM از قالب های Angular استفاده کنید. اگر اجتناب ناپذیر است، از عملکردهای ضدعفونی داخلی Angular استفاده کنید.
        
+
        خیر، APIها یا روش‌های داخلی مرورگر DOM به‌طور خودکار از شما در برابر آسیب‌پذیری‌های امنیتی محافظت نمی‌کنند. در این مورد توصیه میشه به جای تعامل مستقیم با DOM از قالب های Angular استفاده کنید. اگر اجتناب ناپذیر است، از عملکردهای ضدعفونی داخلی Angular استفاده کنید.
        
 
        فهرست
        
 
        9. 
 
      9. 
@@ -4397,28 +4398,28 @@ 
        چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟
        
-
        حفاظت XSS سمت سرور در یک برنامه زاویه ای با استفاده از زبان قالبی که به طور خودکار از مقادیر برای جلوگیری از آسیب پذیری های XSS در سرور فرار می کند، پشتیبانی می شود. اما از زبان قالب برای تولید الگوهای Angular در سمت سرور استفاده نکنید که خطر زیادی برای معرفی آسیب‌پذیری‌های تزریق قالب ایجاد می‌کند.
        
+
        حفاظت XSS سمت سرور در یک برنامه انگولاری با استفاده از زبان قالبی که به طور خودکار از مقادیر برای جلوگیری از آسیب پذیری های XSS در سرور فرار میکنه، پشتیبانی میشه. اما از زبان قالب برای تولید الگوهای Angular در سمت سرور استفاده نکنید که خطر زیادی برای معرفی آسیب‌پذیری‌های تزریق قالب ایجاد می‌کند.
        
 
        فهرست
        
 
        10. 
 
      10. 
 
        انگولار حمله های سطح http رو جلوگیری میکنه؟
        
 
        Angular دارای پشتیبانی داخلی برای جلوگیری از آسیب‌پذیری‌های سطح http مانند جعل درخواست بین سایتی (CSRF یا XSRF) و گنجاندن اسکریپت بین سایتی (XSSI) است. حتی اگر این آسیب‌پذیری‌ها باید در سمت سرور کاهش یابند، Angular کمک‌هایی را برای آسان‌تر کردن ادغام در سمت کلاینت ارائه می‌کند.
        
 
          
-
        1. HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود
          2. 
+
        2. HttpClient از مکانیزم نشانه ای پشتیبانی میکنه که برای جلوگیری از حملات XSRF استفاده میشه
          3. 
 
        3. کتابخانه HttpClient قرارداد پاسخ‌های JSON پیشوندی را تشخیص می‌دهد (که js غیرقابل اجرا با نویسه‌های ")]}'،\n" کد می‌کند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخ‌های قبل حذف می‌کند. تجزیه بیشتر
          4. 
 
        
 
        فهرست
        
 
        11. 
 
      11. 
 
        Http  ها چیا هستن؟Interceptors
        
-
        رهگیرهای Http بخشی از @angular/common/http هستند که درخواست‌های HTTP را از برنامه شما به سرور و برعکس در پاسخ‌های HTTP بررسی و تبدیل می‌کنند. این رهگیرها می توانند انواع مختلفی از وظایف ضمنی، از احراز هویت گرفته تا ثبت را انجام دهند.
        
+
        رهگیرهای Http بخشی از @angular/common/http هستند که درخواست‌های HTTP را از برنامه شما به سرور و برعکس در پاسخ‌های HTTP بررسی و تبدیل می‌کنند. این رهگیرها می تونن انواع مختلفی از وظایف ضمنی، از احراز هویت گرفته تا ثبت را انجام دهند.
        
 
        نحو رابط HttpInterceptor مانند زیر است.
        
 
 
        interface HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
 }
 
        
-
        شما می توانید با اعلان یک کلاس سرویس که متد intercept() رابط HttpInterceptor را پیاده سازی می کند، از interceptors استفاده کنید.
        
+
        شما می تونین با اعلان یک کلاس سرویس که متد intercept() رابط HttpInterceptor را پیاده سازی میکنه، از interceptors استفاده کنید.
        
 
 
        @Injectable()
 export class MyInterceptor implements HttpInterceptor {
@@ -4428,7 +4429,7 @@ 
        }
 }
 
        
-
        پس از آن می توانید از آن در ماژول خود استفاده کنید،
        
+
        پس از آن می تونین از آن در ماژول خود استفاده کنید،
        
 
 
        @NgModule({
     ...
@@ -4460,14 +4461,14 @@ 
        داشتن interceptor های چن تایی توی انگولار پشتیبانی میشه؟
        
-
        بله، Angular از چندین رهگیر در یک زمان پشتیبانی می کند. می توانید چندین رهگیر را در ویژگی ارائه دهندگان تعریف کنید:
        
+
        بله، Angular از چندین رهگیر در یک زمان پشتیبانی میکنه. می تونین چندین رهگیر را در ویژگی ارائه دهندگان تعریف کنید:
        
 
 
        providers: [
      { provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
 ],
 
        
-
        رهگیرها به ترتیبی که ارائه شده اند فراخوانی می شوند. i.n، MyFirst Interceptor ابتدا در پیکربندی رهگیرهای بالا فراخوانی می شود.
        
+
        رهگیرها به ترتیبی که ارائه شده اند فراخوانی میشن. i.n، MyFirst Interceptor ابتدا در پیکربندی رهگیرهای بالا فراخوانی میشه.
        
 
        فهرست
        
 
        12. 
 
      12. 
@@ -4514,7 +4515,7 @@ 
        
 
      13. 
 
        چطوری انگولار internationalization رو انجام میده؟
        
-
        Angular زمینه های بین المللی سازی زیر را ساده می کند:
        
+
        Angular زمینه های بین المللی سازی زیر را ساده میکنه:
        
 
          
 
        1. نمایش تاریخ، عدد، درصد و ارز در قالب محلی.
          2. 
 
        2. آماده سازی متن در قالب های مؤلفه برای ترجمه.
          3. 
@@ -4525,11 +4526,11 @@ 
          چطوری به صورت دستی دیتای لوکال رو ذخیره میکنی؟
          
-
          به‌طور پیش‌فرض، Angular فقط حاوی داده‌های محلی برای en-US است که انگلیسی است که در ایالات متحده آمریکا صحبت می‌شود. اما اگر می‌خواهید روی محلی دیگر تنظیم کنید، باید داده‌های محلی را برای آن محلی جدید وارد کنید. پس از آن می توانید با استفاده از روش «registerLocaleData» ثبت نام کنید و نحو این روش به شکل زیر است.
          
+
          به‌طور پیش‌فرض، Angular فقط حاوی داده‌های محلی برای en-US است که انگلیسی است که در ایالات متحده آمریکا صحبت می‌شود. اما اگر می‌خواهید روی محلی دیگر تنظیم کنید، باید داده‌های محلی را برای آن محلی جدید وارد کنین. پس از آن می تونین با استفاده از روش «registerLocaleData» ثبت نام کنین و نحو این روش به شکل زیر است.
          
 
 
          registerLocaleData(data: any, localeId?: any, extraData?: any): void
 
          
-
          به عنوان مثال، اجازه دهید ما زبان آلمانی را وارد کنیم و آن را در برنامه ثبت کنیم
          
+
          برای مثال، اجازه دهید ما زبان آلمانی را وارد کنیم و آن را در برنامه ثبت کنیم
          
 
 
          import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
@@ -4542,13 +4543,13 @@ 
          چهار فازی که برای ترجمه انجام میشه چیا هستن؟
          
 
          فرآیند ترجمه قالب i18n دارای چهار مرحله است:
          
 
            
-
          1. Mark static text messages in your component templates for translation: می توانید i18n را روی هر تگ عنصری که متن ثابت آن باید ترجمه شود قرار دهید. به عنوان مثال، برای عنوان زیر به ویژگی i18n نیاز دارید.
            2. 
+
          2. Mark static text messages in your component templates for translation: می تونین i18n را روی هر تگ عنصری که متن ثابت آن باید ترجمه شود قرار دهید. برای مثال، برای عنوان زیر به ویژگی i18n نیاز دارید.
            3. 
 
          
 
 
          <h1 i18n>Hello i18n!</h1>
 
          
 
            
-
          1. Create a translation file: از دستور Angular CLI xi18n برای استخراج متن علامت گذاری شده در یک فایل منبع ترجمه استاندارد صنعتی استفاده کنید. به عنوان مثال، پنجره ترمینال را در ریشه پروژه برنامه باز کنید و دستور CLI xi18n را اجرا کنید.
            2. 
+
          2. Create a translation file: از دستور Angular CLI xi18n برای استخراج متن علامت گذاری شده در یک فایل منبع ترجمه استاندارد صنعتی استفاده کنین. برای مثال، پنجره ترمینال را در ریشه پروژه برنامه باز کنین و دستور CLI xi18n را اجرا کنین.
            3. 
 
          
 
 
           ```bash
@@ -4556,11 +4557,11 @@ 
          
-
        3. Edit the generated translation file: متن استخراج شده را به زبان مقصد ترجمه کنید. در این مرحله، یک پوشه محلی سازی (مانند «locale») در زیر پوشه ریشه (src) ایجاد کنید و سپس با کپی کردن و تغییر نام فایل پیش فرض messages.xlf، فایل ترجمه زبان مقصد را ایجاد کنید. شما باید گره متن منبع را کپی کنید و ترجمه را تحت تگ هدف ارائه دهید.
          
-به عنوان مثال، فایل ترجمه (messages.de.xlf) را برای زبان آلمانی ایجاد کنید
          4. 
+
        4. Edit the generated translation file: متن استخراج شده را به زبان مقصد ترجمه کنین. در این مرحله، یک پوشه محلی سازی (مانند «locale») در زیر پوشه ریشه (src) ایجاد کنین و سپس با کپی کردن و تغییر نام فایل پیش فرض messages.xlf، فایل ترجمه زبان مقصد را ایجاد کنین. شما باید گره متن منبع را کپی کنین و ترجمه را تحت تگ هدف ارائه دهید.
          
+برای مثال، فایل ترجمه (messages.de.xlf) را برای زبان آلمانی ایجاد کنین
          5. 
 
        
 
 
        <trans-unit id="greetingHeader" datatype="html">
@@ -4572,7 +4573,7 @@ 
        
 
      14. 
-
        Merge the completed translation file into the app: شما باید از دستور ساخت Angular CLI برای کامپایل برنامه، انتخاب یک پیکربندی خاص محلی، یا مشخص کردن گزینه های دستور زیر استفاده کنید.
        
+
        Merge the completed translation file into the app: شما باید از دستور ساخت Angular CLI برای کامپایل برنامه، انتخاب یک پیکربندی خاص محلی، یا مشخص کردن گزینه های دستور زیر استفاده کنین.
        
 
        15. 
 
      15. 
 
        --i18nFile=path to the translation file
        
@@ -4588,7 +4589,7 @@ 
        هدف از اتربیوت i18n چیه ؟
        
-
        ویژگی Angular i18n محتوای قابل ترجمه را علامت گذاری می کند. این یک ویژگی سفارشی است که توسط ابزارها و کامپایلرهای Angular شناسایی می شود. کامپایلر پس از ترجمه آن را حذف می کند.
        
+
        ویژگی Angular i18n محتوای قابل ترجمه را علامت گذاری میکنه. این یک ویژگی سفارشی است که توسط ابزارها و کامپایلرهای Angular شناسایی میشه. کامپایلر پس از ترجمه آن را حذف میکنه.
        
 
        Note: به یاد داشته باشید که i18n یک دستورالعمل Angular نیست.
        
 
        فهرست
        
 
        16. 
@@ -4607,7 +4608,7 @@ 
        اگه یه custom id, unique نباشه چه اتفاقی میوفته؟
        
-
        شما باید شناسه های سفارشی را منحصر به فرد تعریف کنید. اگر از یک شناسه برای دو پیام متنی مختلف استفاده می کنید، فقط اولین مورد استخراج می شود. اما ترجمه آن به جای هر دو پیامک اصلی استفاده می شود.
        
+
        شما باید شناسه های سفارشی را منحصر به فرد تعریف کنید. اگر از یک شناسه برای دو پیام متنی مختلف استفاده می کنید، فقط اولین مورد استخراج میشه. اما ترجمه آن به جای هر دو پیامک اصلی استفاده میشه.
        
 
        برای مثال، بیایید همان شناسه سفارشی myCustomId را برای دو پیام تعریف کنیم:
        
 
 
        <h2 i18n="@@myCustomId">Good morning</h3>
@@ -4630,22 +4631,22 @@ 
        میتونم یه متن رو بدون ساخت المنت ترجمه کنم؟
        
-
        بله، می‌توانید با استفاده از ویژگی «» به آن دست پیدا کنید. معمولاً برای ترجمه باید محتوای متنی را با ویژگی i18n بپیچید. اما اگر نمی‌خواهید یک عنصر DOM جدید فقط به خاطر ترجمه ایجاد کنید، می‌توانید متن را در یک عنصر  بپیچید.
        
+
        بله، می‌توانید با استفاده از ویژگی «» به آن دست پیدا کنین. معمولاً برای ترجمه باید محتوای متنی را با ویژگی i18n بپیچید. اما اگر نمی‌خواهید یک عنصر DOM جدید فقط به خاطر ترجمه ایجاد کنین، می‌توانید متن را در یک عنصر  بپیچید.
        
 
 
        <ng-container i18n>I'm not using any DOM element for translation</ng-container>
 
        
-
        به یاد داشته باشید که «» به یک نظر html تبدیل می شود
        
+
        به یاد داشته باشید که «» به یک نظر html تبدیل میشه
        
 
        فهرست
        
 
        16. 
 
      16. 
 
        چطوری میتونم اتربیوت ها رو ترجمه کنم؟
        
-
        می‌توانید ویژگی‌ها را با پیوست کردن ویژگی «i18n-x» ترجمه کنید، جایی که x نام ویژگی برای ترجمه است. به عنوان مثال، می توانید ویژگی عنوان تصویر را به صورت زیر ترجمه کنید.
        
+
        می‌توانید ویژگی‌ها را با پیوست کردن ویژگی «i18n-x» ترجمه کنین، جایی که x نام ویژگی برای ترجمه است. برای مثال، می تونین ویژگی عنوان تصویر را به صورت زیر ترجمه کنین.
        
 
 
        <img [src]="example" i18n-title title="Internationlization" />
 
        
 
        17. 
 
      
-
      به هر حال، شما همچنین می توانید معنی، توضیحات و شناسه را با نحو i18n-x="<meaning>|<description>@@<id>" اختصاص دهید.
+
      به هر حال، شما همچنین می تونین معنی، توضیحات و شناسه را با نحو i18n-x="<meaning>|<description>@@<id>" اختصاص دهید.
 
  **[فهرست](#فهرست)**
 
      
@@ -4666,7 +4667,7 @@ 
      عبارت برای انتخاب ICU چیه؟
      
-
      عبارت ICU شبیه عبارات جمع است با این تفاوت که شما از بین ترجمه های جایگزین بر اساس مقدار رشته به جای عدد انتخاب می کنید. در اینجا شما آن مقادیر رشته را تعریف می کنید.
      
+
      عبارت ICU شبیه عبارات جمع است با این تفاوت که شما از بین ترجمه های جایگزین بر اساس مقدار رشته به جای عدد انتخاب می کنین. در اینجا شما آن مقادیر رشته را تعریف می کنین.
      
 
      بیایید مؤلفه را با ویژگی «residenceStatus» که دارای مقادیر ممکن «شهروند»، «مقیم دائم» و «خارجی» است، در نظر بگیریم و پیام آن مقادیر را به ترجمه‌های مناسب نگاشت می‌کند.
      
 
 
      <span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>
@@ -4675,13 +4676,13 @@ 
      چطوری ترجمه های ناقص رو گزارش میکنی؟
      
-
      به‌طور پیش‌فرض، هنگامی که ترجمه وجود ندارد، پیام هشداری مانند «ترجمه از دست رفته برای پیام «somekey» ایجاد می‌کند. اما می توانید با سطح متفاوتی از پیام در کامپایلر Angular به صورت زیر پیکربندی کنید.
      
+
      به‌طور پیش‌فرض، هنگامی که ترجمه وجود ندارد، پیام هشداری مانند «ترجمه از دست رفته برای پیام «somekey» ایجاد می‌کند. اما می تونین با سطح متفاوتی از پیام در کامپایلر Angular به صورت زیر پیکربندی کنین.
      
 
        
-
      1. Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود.
        2. 
+
      2. Error: خطا میده اگر از کامپایل AOT استفاده می کنین، بیلد با شکست مواجه میشه. اما اگر از کامپایل JIT استفاده می کنین، برنامه بارگذاری نمیشه.
        3. 
 
      3. Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان می‌دهد.
        4. 
-
      4. Ignore: هیچ کاری نمی کند.
        5. 
+
      5. Ignore: هیچ کاری نمیکنه.
        6. 
 
      
-
      اگر از کامپایلر AOT استفاده می کنید، باید تغییراتی را در بخش پیکربندی فایل پیکربندی Angular CLI خود، angular.json انجام دهید.
      
+
      اگر از کامپایلر AOT استفاده می کنین، باید تغییراتی را در بخش پیکربندی فایل پیکربندی Angular CLI خود، angular.json انجام دهید.
      
 
 
      "configurations": {
   ...
@@ -4691,7 +4692,7 @@ 
      }
 }
 
      
-
      اگر از کامپایلر JIT استفاده می کنید، سطح هشدار را در پیکربندی کامپایلر در بوت استرپ با افزودن ویژگی MissingTranslationStrategy به صورت زیر مشخص کنید:
      
+
      اگر از کامپایلر JIT استفاده می کنین، سطح هشدار را در پیکربندی کامپایلر در بوت استرپ با افزودن ویژگی MissingTranslationStrategy به صورت زیر مشخص کنین:
      
 
 
      import { MissingTranslationStrategy } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -4708,7 +4709,7 @@ 
      چطوری برای مناطق مختلف build رو کانفیگ میکنی؟
      
-
      می‌توانید پیکربندی ساخت مانند مسیر فایل ترجمه، نام، قالب و آدرس برنامه را در تنظیمات «پیکربندی» فایل Angular.json ارائه کنید. به عنوان مثال، نسخه آلمانی برنامه شما بیلد را به صورت زیر پیکربندی کرده است:
      
+
      می‌توانید پیکربندی ساخت مانند مسیر فایل ترجمه، نام، قالب و آدرس برنامه را در تنظیمات «پیکربندی» فایل Angular.json ارائه کنین. برای مثال، نسخه آلمانی برنامه شما بیلد را به صورت زیر پیکربندی کرده است:
      
 
 
      "configurations": {
      "de": {
@@ -4726,18 +4727,18 @@ 
      منظور از کتابخونه انگولار چیه؟
      
-
      کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد زیرا نمی تواند به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخانه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنید که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند.
      
-
      Note: شما می توانید کتابخانه شخص ثالث خود را ایجاد کنید و آن را به عنوان بسته npm منتشر کنید تا در یک برنامه استفاده شود.
      
+
      کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد چون نمی تونه به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخانه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنین که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند.
      
+
      Note: شما می تونین کتابخانه شخص ثالث خود را ایجاد کنین و آن را به عنوان بسته npm منتشر کنین تا در یک برنامه استفاده شود.
      
 
      فهرست
      
 
      20. 
 
    20. 
 
      کامپایلر AOT چیه؟
      
-
      کامپایلر AOT بخشی از یک فرآیند ساخت است که یک بسته برنامه کوچک، سریع و آماده برای اجرا تولید می‌کند، معمولاً برای تولید. این کد Angular HTML و TypeScript شما را در مرحله ساخت قبل از دانلود و اجرای آن کد به کد جاوا اسکریپت کارآمد تبدیل می کند.
      
+
      کامپایلر AOT بخشی از یک فرآیند ساخت است که یک بسته برنامه کوچک، سریع و آماده برای اجرا تولید می‌کند، معمولاً برای تولید. این کد Angular HTML و TypeScript شما را در مرحله ساخت قبل از دانلود و اجرای آن کد به کد جاوا اسکریپت کارآمد تبدیل میکنه.
      
 
      فهرست
      
 
      21. 
 
    21. 
 
      چطوری یه المنت رو از توی ساختار کامپوننت انتخاب میکنی؟
      
-
      شما می توانید هر عنصر DOM را از طریق ElementRef با تزریق آن به سازنده کامپوننت خود کنترل کنید. یعنی کامپوننت باید سازنده ای با پارامتر ElementRef داشته باشد،
      
+
      شما می تونین هر عنصر DOM را از طریق ElementRef با تزریق آن به سازنده کامپوننت خود کنترل کنین. یعنی کامپوننت باید سازنده ای با پارامتر ElementRef داشته باشد،
      
 
 
      constructor(myElement: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
@@ -4752,7 +4753,7 @@ 
      protractor چیه؟
      
-
      نقاله یک چارچوب تست سرتاسر برای برنامه های Angular و AngularJS است. این برنامه آزمایش هایی را بر روی برنامه شما که در یک مرورگر واقعی اجرا می شود، اجرا می کند و مانند یک کاربر با آن تعامل دارد.
      
+
      نقاله یک چارچوب تست سرتاسر برای برنامه های Angular و AngularJS است. این برنامه آزمایش هایی را بر روی برنامه شما که در یک مرورگر واقعی اجرا میشه، اجرا میکنه و مانند یک کاربر با آن تعامل دارد.
      
 
 
      npm install -g protractor
 
      
@@ -4760,33 +4761,33 @@ 
      منظور زا  collection چیه؟
      
-
      مجموعه مجموعه ای از شماتیک های مرتبط است که در یک بسته npm جمع آوری شده است. به عنوان مثال، مجموعه @schematics/angular در Angular CLI برای اعمال تبدیل به یک پروژه برنامه وب استفاده می شود. شما می توانید مجموعه شماتیک خود را برای سفارشی سازی پروژه های زاویه ای ایجاد کنید.
      
+
      مجموعه مجموعه ای از شماتیک های مرتبط است که در یک بسته npm جمع آوری شده است. برای مثال، مجموعه @schematics/angular در Angular CLI برای اعمال تبدیل به یک پروژه برنامه وب استفاده میشه. شما می تونین مجموعه شماتیک خود را برای سفارشی سازی پروژه های انگولاری ایجاد کنین.
      
 
      فهرست
      
 
      22. 
 
    22. 
 
      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. 
-
      3. Generate schematics: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخانه با استفاده از دستور "ng generate" استفاده می شوند.
        
-برای مثال، @angular/material schematic شماتیک های تولید را برای اجزای UI فراهم می کند. فرض کنید مولفه جدول با استفاده از "ng generate @angular/material:table" تولید شده است.
        4. 
-
      4. Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده می شود.
        
-به عنوان مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز می کند.
        5. 
+
      5. Generate schematics: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخانه با استفاده از دستور "ng generate" استفاده میشن.
        
+برای مثال، @angular/material schematic شماتیک های تولید را برای اجزای UI فراهم میکنه. فرض کنین مولفه جدول با استفاده از "ng generate @angular/material:table" تولید شده است.
        6. 
+
      6. Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده میشه.
        
+برای مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز میکنه.
        7. 
 
      
 
      فهرست
      
 
      23. 
 
    23. 
 
      چطوری از Jquery توی انگولار استفاده میکنی؟
      
-
      می توانید با استفاده از 3 مرحله ساده از jquery در Angular استفاده کنید.
      
+
      می تونین با استفاده از 3 مرحله ساده از jquery در Angular استفاده کنین.
      
 
        
-
      1. Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید
        2. 
+
      2. Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنین
        3. 
 
      
 
 
           npm install --save jquery
 
      
 
        
-
      1. Add the jquery script: در پروژه Angular-CLI، مسیر نسبی را به jquery در فایل angular.json اضافه کنید.
        2. 
+
      2. Add the jquery script: در پروژه Angular-CLI، مسیر نسبی را به jquery در فایل angular.json اضافه کنین.
        3. 
 
      
 
 
      "scripts": [
@@ -4794,7 +4795,7 @@ 
      
-
    24. Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید.
      25. 
+
    25. Start using jquery: عنصر را در قالب تعریف کنین. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنین.
      26. 
 
 
 
      <div id="elementId">
@@ -4823,7 +4824,7 @@ 
      What is the reason for No provider for HTTP exception?
      
-
      این استثنا به دلیل عدم وجود HttpClientModule در ماژول شما است. شما فقط باید در ماژول به صورت زیر وارد کنید:
      
+
      این استثنا به دلیل عدم وجود HttpClientModule در ماژول شما است. شما فقط باید در ماژول به صورت زیر وارد کنین:
      
 
 
      import { HttpClientModule } from '@angular/common/http';
 
@@ -4848,16 +4849,16 @@ 
      فهرست
      
 
      26. 
 
    26. 
 
      چطوری میتونم از SASS توی پروژه انگولار استفاده کنم؟
      
-
      هنگامی که پروژه خود را با cli زاویه ای ایجاد می کنید، می توانید از دستور "ng new" استفاده کنید. تمام اجزای شما را با فایل های sass از پیش تعریف شده تولید می کند.
      
+
      هنگامی که پروژه خود را با cli انگولاری ایجاد می کنین، می تونین از دستور "ng new" استفاده کنین. تمام اجزای شما را با فایل های sass از پیش تعریف شده تولید میکنه.
      
 
 
      ng new My_New_Project --style=sass
 
      
-
      اما اگر سبک موجود خود را در پروژه خود تغییر می دهید، از دستور ng set استفاده کنید.
      
+
      اما اگر سبک موجود خود را در پروژه خود تغییر می دهید، از دستور ng set استفاده کنین.
      
 
 
      ng set defaults.styleExt scss
 
      
@@ -4865,7 +4866,7 @@ 
      هدف از hidden property چیه؟
      
-
      ویژگی hidden برای نشان دادن یا پنهان کردن عنصر DOM مرتبط بر اساس یک عبارت استفاده می شود. می توان آن را نزدیک به دستورالعمل «ng-show» در AngularJS مقایسه کرد. فرض کنید می خواهید نام کاربری را بر اساس در دسترس بودن کاربر با استفاده از ویژگی "مخفی" نشان دهید.
      
+
      ویژگی hidden برای نشان دادن یا پنهان کردن عنصر DOM مرتبط بر اساس یک عبارت استفاده میشه. می توان آن را نزدیک به دستورالعمل «ng-show» در AngularJS مقایسه کرد. فرض کنین می خواهید نام کاربری را بر اساس در دسترس بودن کاربر با استفاده از ویژگی "مخفی" نشان دهید.
      
 
 
      <div [hidden]="!user.name">
   My name is: {{user.name}}
@@ -4875,16 +4876,16 @@ 
      فرق بین ngIf و hidden property چیه؟
      
-
      تفاوت اصلی این است که *ngIf عنصر را از DOM حذف می کند، در حالی که [hidden] در واقع با تنظیم «display:none» با سبک CSS بازی می کند. به طور کلی اضافه کردن و حذف موارد از DOM برای اقدامات مکرر گران است.
      
+
      تفاوت اصلی این است که *ngIf عنصر را از DOM حذف میکنه، در حالی که [hidden] در واقع با تنظیم «display:none» با سبک CSS بازی میکنه. به طور کلی اضافه کردن و حذف موارد از DOM برای اقدامات مکرر گران است.
      
 
      فهرست
      
 
      27. 
 
    27. 
 
      slice pipe چیه؟
      
-
      لوله slice برای ایجاد یک آرایه یا رشته جدید حاوی زیرمجموعه (برش) از عناصر استفاده می شود. سینتکس به شکل زیر است:
      
+
      لوله slice برای ایجاد یک آرایه یا رشته جدید حاوی زیرمجموعه (برش) از عناصر استفاده میشه. سینتکس به شکل زیر است:
      
 
 
      {{ value_expression | slice : start [ : end ] }}
 
      
-
      به عنوان مثال، شما می توانید لیست "hello" را بر اساس یک آرایه تبریک ارائه کنید،
      
+
      برای مثال، شما می تونین لیست "hello" را بر اساس یک آرایه تبریک ارائه کنین،
      
 
 
      @Component({
   selector: 'list-pipe',
@@ -4899,12 +4900,12 @@ 
      فهرست
      
 
      28. 
 
    28. 
-
      What is index property in ngFor directive?
      
+
      برای دابرکتیو ngFor پراپرتی index چیه؟
      
 
      29. 
 
-
      ویژگی index دستورالعمل NgFor برای برگرداندن شاخص مبتنی بر صفر مورد در هر تکرار استفاده می شود. شما می توانید شاخص را در یک متغیر ورودی الگو گرفته و از آن در قالب استفاده کنید.
+
      ویژگی index دستورالعمل NgFor برای برگرداندن شاخص مبتنی بر صفر مورد در هر تکرار استفاده میشه. شما می تونین شاخص را در یک متغیر ورودی الگو گرفته و از آن در قالب استفاده کنین.
 
- به عنوان مثال، می‌توانید ایندکس را در متغیری به نام indexVar بگیرید و با استفاده از دستور ngFor به صورت زیر آن را با نام todo نمایش دهید.
+ برای مثال، می‌توانید ایندکس را در متغیری به نام indexVar بگیرید و با استفاده از دستور ngFor به صورت زیر آن را با نام todo نمایش دهید.
 
  
  <span dir="ltr" align="left">
@@ -4920,7 +4921,7 @@ 
      
 
    29. 
 
      هدف از ngFor trackBy چیه؟
      
-
      هدف اصلی استفاده از *ngFor with trackBy بهینه سازی عملکرد است. معمولاً اگر از NgFor با مجموعه داده‌های بزرگ استفاده می‌کنید، یک تغییر کوچک به یک آیتم با حذف یا اضافه کردن یک مورد، می‌تواند باعث ایجاد آبشاری از دستکاری‌های DOM شود. در این مورد، Angular فقط یک لیست تازه از ارجاعات اشیاء جدید و جایگزینی عناصر DOM قدیمی با تمام عناصر DOM جدید را می بیند. می‌توانید با ارائه یک تابع «trackBy» که فهرست و مورد فعلی را به‌عنوان آرگومان می‌گیرد و باید شناسه منحصربه‌فرد این مورد را برگرداند، به Angular کمک کنید تا موارد اضافه یا حذف شده را ردیابی کند.
      
+
      هدف اصلی استفاده از *ngFor with trackBy بهینه سازی عملکرد است. معمولاً اگر از NgFor با مجموعه داده‌های بزرگ استفاده می‌کنین، یک تغییر کوچک به یک آیتم با حذف یا اضافه کردن یک مورد، می‌تونه باعث ایجاد آبشاری از دستکاری‌های DOM شود. در این مورد، Angular فقط یک لیست تازه از ارجاعات اشیاء جدید و جایگزینی عناصر DOM قدیمی با تمام عناصر DOM جدید را می بیند. می‌توانید با ارائه یک تابع «trackBy» که فهرست و مورد فعلی را به‌عنوان آرگومان می‌گیرد و باید شناسه منحصربه‌فرد این مورد را برگرداند، به Angular کمک کنین تا موارد اضافه یا حذف شده را ردیابی کنه.
      
 
      For example, lets set trackBy to the trackByTodos() method
      
 
 
      <div *ngFor="let todo of todos; trackBy: trackByTodos">
@@ -4931,12 +4932,12 @@ 
      
 
      trackByTodos(index: number, item: Todo): number { return todo.id; }
 
      
-
      فهرست
      
+
      فهرست
      
 
      30. 
 
    30. 
 
      هدف از دایرکتیو ngSwitch  چیه؟
      
 
      دستورالعمل NgSwitch شبیه دستور سوئیچ جاوا اسکریپت است که یک عنصر را از بین چندین عنصر ممکن بر اساس یک شرط سوئیچ نمایش می دهد. در این حالت فقط عنصر انتخاب شده در DOM قرار می گیرد. همراه با دستورات «NgSwitch»، «NgSwitchCase» و «NgSwitchDefault» استفاده شده است.
      
-
      به عنوان مثال، اجازه دهید جزئیات مرورگر را بر اساس مرورگر انتخابی با استفاده از دستورالعمل ngSwitch نمایش دهیم.
      
+
      برای مثال، اجازه دهید جزئیات مرورگر را بر اساس مرورگر انتخابی با استفاده از دستورالعمل ngSwitch نمایش دهیم.
      
 
 
      <div [ngSwitch]="currentBrowser.name">
      <chrome-browser    *ngSwitchCase="'chrome'"    [item]="currentBrowser"></chrome-browser>
@@ -4952,7 +4953,7 @@ 
      Is it possible to do aliasing for inputs and outputs?
      
 
      بله، به دو صورت می توان برای ورودی ها و خروجی ها نام مستعار انجام داد.
      
 
        
-
      1. نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود.
        2. 
+
      2. نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار میشن. یعنی در قالب ویژگی Name:alias خواهد بود.
        3. 
 
      
 
 
      inputs: ['input1: buyItem'],
@@ -4969,7 +4970,7 @@ 
      منظور از اپراتور امن safe navigation چیه؟
      
-
      اپراتور navigation  ایمن (؟) (یا به عنوان اپراتور الویس شناخته می شود) برای محافظت در برابر مقادیر null و undefined در مسیرهای ویژگی استفاده می شود، زمانی که شما از وجود یا عدم وجود یک مسیر اطلاع ندارید. یعنی مقدار مسیر شی را در صورت وجود برمی گرداند، در غیر این صورت مقدار null را برمی گرداند.
      
+
      اپراتور navigation  ایمن (؟) (یا به عنوان اپراتور الویس شناخته میشه) برای محافظت در برابر مقادیر null و undefined در مسیرهای ویژگی استفاده میشه، زمانی که شما از وجود یا عدم وجود یک مسیر اطلاع ندارید. یعنی مقدار مسیر شی را در صورت وجود برمی گرداند، در غیر این صورت مقدار null را برمی گرداند.
      
 
      For example, you can access nested properties of a user profile easily without null reference errors as below,
      
 
 
      <p>The user firstName is: {{user?.fullName.firstName}}</p>
@@ -4979,7 +4980,7 @@ 
      تنظیمات خاصی برای انگولار 9 نیازه؟
      
-
      شما به پیکربندی خاصی نیاز ندارید. در Angular9، رندر Ivy کامپایلر پیش فرض Angular است. اگرچه Ivy خود Angular8 در دسترس است، باید آن را در فایل tsconfig.json به صورت زیر پیکربندی کنید:
      
+
      شما به پیکربندی خاصی نیاز ندارید. در Angular9، رندر Ivy کامپایلر پیش فرض Angular است. اگرچه Ivy خود Angular8 در دسترس است، باید آن را در فایل tsconfig.json به صورت زیر پیکربندی کنین:
      
 
 
      "angularCompilerOptions": {    "enableIvy": true  }
 
      
@@ -4987,7 +4988,7 @@ 
      تغییرات تایپ های امن TestBed API توی انگولار 9 چیا بودن؟
      
-
      Angular 9 با جایگزینی تابع get قدیمی با روش inject جدید، تغییرات ایمن نوع را در تغییرات TestBed API ارائه می‌کند. زیرا روش TestBed.get از نظر نوع ایمن نیست. استفاده به شرح زیر خواهد بود،
      
+
      Angular 9 با جایگزینی تابع get قدیمی با روش inject جدید، تغییرات ایمن نوع را در تغییرات TestBed API ارائه می‌کند. چون روش TestBed.get از نظر نوع ایمن نیست. استفاده به شرح زیر خواهد بود،
      
 
 
      TestBed.get(ChangeDetectorRef) // returns any. It is deprecated now.
 
@@ -5006,7 +5007,7 @@ 
      لیست مربوط به اپراتور های template expression چیا هستن؟
      
-
      زبان عبارت الگوی Angular از سه عملگر خاص قالب پشتیبانی می کند.
      
+
      زبان عبارت الگوی Angular از سه عملگر خاص قالب پشتیبانی میکنه.
      
 
        
 
      1. اپراتور لوله
        2. 
 
      2. اپراتور ناوبری ایمن
        3. 
@@ -5016,22 +5017,22 @@ 
        فرق بین pipe و ternary operator ها چیه؟
        
-
        اپراتور لوله نسبت به اپراتور سه تایی (?😃 اولویت بیشتری دارد. به عنوان مثال، عبارت «اول؟ دوم : سوم | چهارم به عنوان «اول؟ دوم : (سوم | چهارم)`.
        
+
        اپراتور لوله نسبت به اپراتور سه تایی (?😃 اولویت بیشتری دارد. برای مثال، عبارت «اول؟ دوم : سوم | چهارم به عنوان «اول؟ دوم : (سوم | چهارم)`.
        
 
        فهرست
        
 
 
      3. 
 
        منظور از entry component چیه؟
        
-
        مؤلفه ورودی هر مؤلفه ای است که Angular به طور ضروری بارگذاری می کند (یعنی عدم ارجاع آن در قالب) بر اساس نوع. به دلیل این رفتار، کامپایلر Angular در طول کامپایل نمی تواند آنها را پیدا کند. این مؤلفه ها به صورت پویا با «ComponentFactoryResolver» ایجاد می شوند.
        
+
        مؤلفه ورودی هر مؤلفه ای است که Angular به طور ضروری بارگذاری میکنه (یعنی عدم ارجاع آن در قالب) بر اساس نوع. به دلیل این رفتار، کامپایلر Angular در طول کامپایل نمی تونه آنها را پیدا کنه. این مؤلفه ها به صورت پویا با «ComponentFactoryResolver» ایجاد میشن.
        
 
        اساساً دو نوع اصلی از مؤلفه های ورودی وجود دارد که به شرح زیر است:
        
 
          
 
        1. مؤلفه ریشه بوت استرپ
          2. 
-
        2. مؤلفه ای که در مسیر مشخص می کنید
          3. 
+
        3. مؤلفه ای که در مسیر مشخص می کنین
          4. 
 
        
 
        فهرست
        
 
        4. 
 
      4. 
 
        منظور از bootstraped component چیه؟
        
-
        کامپوننت بوت استرپ یک جزء ورودی است که Angular در طول فرآیند بوت استرپ یا زمان راه اندازی برنامه در DOM بارگذاری می کند. به طور کلی، این مؤلفه بوت استرپ یا ریشه به عنوان «AppComponent» در ماژول ریشه شما با استفاده از ویژگی «bootstrap» به شرح زیر نامگذاری می شود.
        
+
        کامپوننت بوت استرپ یک جزء ورودی است که Angular در طول فرآیند بوت استرپ یا زمان راه اندازی برنامه در DOM بارگذاری میکنه. به طور کلی، این مؤلفه بوت استرپ یا ریشه به عنوان «AppComponent» در ماژول ریشه شما با استفاده از ویژگی «bootstrap» به شرح زیر نامگذاری میشه.
        
 
 
        @NgModule({
      declarations: [
@@ -5051,13 +5052,13 @@ 
        چطوری به صورت دستی یه app رو bootstrap میکنی؟
        
-
        می‌توانید به جای استفاده از آرایه بوت استرپ در حاشیه‌نویسی «@NgModule» از هوک «ngDoBootstrap» برای راه‌اندازی دستی برنامه استفاده کنید. این قلاب بخشی از رابط «DoBootstap» است.
        
+
        می‌توانید به جای استفاده از آرایه بوت استرپ در حاشیه‌نویسی «@NgModule» از هوک «ngDoBootstrap» برای راه‌اندازی دستی برنامه استفاده کنین. این قلاب بخشی از رابط «DoBootstap» است.
        
 
 
        interface DoBootstrap {
   ngDoBootstrap(appRef: ApplicationRef): void
 }
 
        
-
        ماژول باید رابط فوق را پیاده سازی کند تا از هوک برای بوت استرپینگ استفاده کند.
        
+
        ماژول باید رابط فوق را پیاده سازی کنه تا از هوک برای بوت استرپینگ استفاده کنه.
        
 
 
        class AppModule implements DoBootstrap {
   ngDoBootstrap(appRef: ApplicationRef) {
@@ -5074,7 +5075,7 @@ 
        منظور از routed entry component چیه؟
        
-
        اجزای مورد اشاره در پیکربندی روتر به عنوان اجزای ورودی مسیریابی نامیده می شوند. این جزء ورودی مسیریابی شده در تعریف مسیر به صورت زیر تعریف شده است:
        
+
        اجزای مورد اشاره در پیکربندی روتر به عنوان اجزای ورودی مسیریابی نامیده میشن. این جزء ورودی مسیریابی شده در تعریف مسیر به صورت زیر تعریف شده است:
        
 
 
        const routes: Routes = [
   {
@@ -5083,28 +5084,28 @@ 
        }
 ];
 
        
-
        از آنجایی که تعریف روتر شما را ملزم می کند که کامپوننت را در دو مکان (روتر و ورودی کامپوننت) اضافه کنید، این اجزا همیشه جزء ورودی هستند.
        
+
        از آنجایی که تعریف روتر شما را ملزم میکنه که کامپوننت را در دو مکان (روتر و ورودی کامپوننت) اضافه کنین، این اجزا همیشه جزء ورودی هستند.
        
 
        توجه: کامپایلرها به اندازه کافی هوشمند هستند که تعریف روتر را تشخیص دهند و به طور خودکار جزء روتر را به "entryComponents" اضافه کنند.
        
 
        فهرست
        
 
        5. 
 
      5. 
 
        چرا استفاده از آزایه entry coponenet همیشه اجباری نیست؟
        
-
        اغلب اوقات، برای تنظیم اجزای ورودی در آرایه ورودیComponents ngModule decorator نیازی به صراحت ندارید. زیرا angular کامپوننت‌ها را هم از تعاریف @NgModule.bootstrap و هم مسیر را به‌طور خودکار به اجزای ورودی اضافه می‌کند.
        
+
        اغلب اوقات، برای تنظیم اجزای ورودی در آرایه ورودیComponents ngModule decorator نیازی به صراحت ندارین. چون angular کامپوننت‌ها را هم از تعاریف @NgModule.bootstrap و هم مسیر را به‌طور خودکار به اجزای ورودی اضافه میکنه.
        
 
        فهرست
        
 
        6. 
 
      6. 
 
        ما توی انگولار 9 به آرایه entry component نیاز داریم؟
        
-
        خیر. در نسخه‌های زاویه‌ای قبلی، آرایه ورودی Components از ngModule decorator استفاده می‌شود تا به کامپایلر بگوید کدام مؤلفه‌ها ایجاد شده و به‌صورت پویا در view درج می‌شوند. در Angular9، این دیگر با Ivy مورد نیاز نیست.
        
+
        نه. در نسخه‌های انگولار قبلی، آرایه ورودی Components از ngModule decorator استفاده می شه تا به کامپایلر بگه کدوم مؤلفه‌ها ایجاد شده و به‌صورت پویا در view درج میشن. در Angular9، این دیگر با Ivy مورد نیاز نیست.
        
 
        فهرست
        
 
        7. 
 
      7. 
 
        همه ی کامپوننت ها موقع build گرفتن ایحاد میشن؟
        
-
        خیر، فقط اجزای ورودی و اجزای قالب در بیلدهای تولید ظاهر می شوند. اگر یک جزء جزء ورودی نباشد و در یک الگو یافت نشود، تکان دهنده درخت آن را دور می اندازد. به همین دلیل، مطمئن شوید که فقط اجزای ورودی واقعی را برای کاهش اندازه بسته اضافه کنید.
        
+
        نه فقط اجزای ورودی و اجزای قالب در بیلدهای تولید ظاهر میشن. اگر یک جزء جزء ورودی نباشه و تو یه الگو پیدا نشه tree shaking اونو دور می اندازه. به همین دلیل، مطمئن شین که فقط اجزای ورودی واقعی را برای کاهش اندازه بسته اضافه کنین.
        
 
        فهرست
        
 
        8. 
 
      8. 
 
        منظور از کامپایلر انگولار چیه؟
        
-
        کامپایلر Angular برای تبدیل کد برنامه به کد جاوا اسکریپت استفاده می شود. نشان‌گذاری الگو را می‌خواند، آن را با کد کلاس مؤلفه مربوطه ترکیب می‌کند و کارخانه‌های مؤلفه را منتشر می‌کند که نمایش جاوا اسکریپت مؤلفه را همراه با عناصر فراداده @Component ایجاد می‌کند.
        
+
        کامپایلر Angular برای تبدیل کد برنامه به کد جاوا اسکریپت استفاده میشه. نشان‌گذاری الگو را می‌خواند، اون رو با کد کلاس مؤلفه مربوطه ترکیب می کنه و کارخانه‌های مؤلفه را منتشر می کنه که نمایش جاوا اسکریپت مؤلفه را همراه با عناصر فراداده @Component ایجاد می کنه.
        
 
        فهرست
        
 
        9. 
 
      9. 
@@ -5114,25 +5115,25 @@ 
        انگولار چطوری کامپوننت ها رو تشخیص میده؟ با directive ها یا pipe ها؟
        
-
        کامپایلر Angular زمانی یک کامپوننت یا دستورالعمل را در قالب پیدا می کند که بتواند با انتخابگر آن کامپوننت یا دستورالعمل در آن الگو مطابقت داشته باشد. در حالی که اگر نام لوله در سینتکس لوله قالب HTML ظاهر شود، یک لوله پیدا می کند.
        
+
        کامپایلر Angular وقتی یه کامپوننت یا directive رو تو قالب پیدا میکنه که بتونه با انتخابگر اون کامپوننت یا directive تو اون الگو مطابقت داشته باشه. ولی اگه نام pipe در سینتکس pipe قالب HTML ظاهر شه یه pipe پیدا میکنه.
        
 
        فهرست
        
 
        10. 
 
      10. 
 
        یه مثال برای  بزن؟NgModules
        
-
        کتابخانه های اصلی زاویه ای و کتابخانه های شخص ثالث به عنوان ngmodules در دسترس هستند.
        
+
        کتابخونه های اصلی انگولاری و کتابخونه های شخص ثالث به عنوان ngmodules در دسترس هستن.
        
 
          
-
        1. کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند.
          2. 
-
        2. بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند.
          3. 
+
        3. کتابخونه های انگولاری مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستن.
          4. 
+
        4. خیلی از کتابخونه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستن.
          5. 
 
        
 
        فهرست
        
 
        11. 
 
      11. 
 
        feature modul ها چیا هستن؟?
        
-
        ماژول های ویژگی Ngmodules هستند که به منظور سازماندهی کد استفاده می شوند. ماژول ویژگی را می توان با استفاده از دستور زیر در فهرست root با Angular CLI ایجاد کرد ،
        
+
        ماژول های ویژگی Ngmodules هستن که به منظور سازماندهی کد استفاده میشن. ماژول ویژگی را می توان با استفاده از دستور زیر در فهرست root با Angular CLI ایجاد کرد ،
        
 
 
        ng generate module MyCustomFeature //
 
        
-
        Angular CLI پوشه ای به نام "My-Custom-Feature" با پرونده ای در داخل "My-Custom-Feature.module.ts" با محتویات زیر ایجاد می کند
        
+
        Angular CLI پوشه ای به نام "My-Custom-Feature" با پرونده ای در داخل "My-Custom-Feature.module.ts" با محتویات زیر ایجاد میکنه
        
 
 
        import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -5145,7 +5146,7 @@ 
        فهرست
        
 
        12. 
 
      12. 
@@ -5153,13 +5154,13 @@ 
        فهرست
        
 
        13. 
 
      13. 
 
        تفاوت های بین ngmodule و javascript module چیا هستن؟
        
-
        در زیر تفاوت های اصلی بین Ngmodule زاویه ای و ماژول JavaScript وجود دارد:
        
+
        در زیر تفاوت های اصلی بین Ngmodule انگولاری و ماژول JavaScript وجود دارد:
        
 
      31. 
 
 
      
@@ -5173,12 +5174,12 @@ 
      ارور هایی که میتونه با declaration ایجاد بشه چیا هستن؟
      
-
      دو خطای احتمالی متداول با آرایه اعلامیه وجود دارد:
      
 
        
-
      1. اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند.
        2. 
-
      2. اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند.
        3. 
+
      3. اگر از یک مؤلفه بدون declaration اون استفاده می کنین ، Angular یک پیام خطا برمی گردونه.
        4. 
+
      4. اگر سعی می کنین در بیش از یک ماژول همون کلاس رو اعلام کنین ، کامپایلر خطایی رو ارسال میکنه.
        5. 
 
      
 
      فهرست
      
 
 
    31. 
 
      مراحلی که باید طی بشه  برای اینکه declaration element استفاده کنیم چیا هستن؟
      
-
      در زیر مراحل لازم برای استفاده از عناصر اعلامیه وجود دارد.
      
 
        
-
      1. عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید
        2. 
-
      2. آن را به ماژول مناسب وارد کنید.
        3. 
-
      3. آن را در آرایه اعلامیه ngmodule اعلام کنید.
        4. 
+
      4. عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و اون رو از پرونده ای که در اون نوشتید صادر کنید
        5. 
+
      5. اون را به ماژول مناسب وارد کنید.
        6. 
+
      6. اون را در آرایه اعلامیه ngmodule اعلام کنید.
        7. 
 
      
 
      فهرست
      
 
      32. 
 
    32. 
 
      چه اتفاقی میوفته اگه ما از browserModule داخل feature module استفاده کنیم؟
      
-
      اگر "BrowserModule" را به یک ماژول ویژگی بارگذاری شده تنبل وارد می کنید ، Angular خطایی را برمی گرداند که به شما می گوید در عوض از "CommonModule" استفاده کنید. از آنجا که ارائه دهندگان BrowserModule برای کل برنامه هستند ، بنابراین فقط باید در ماژول ریشه باشد ، نه در ماژول ویژگی. در حالی که ماژول های ویژگی فقط به دستورالعمل های مشترک در Commodule نیاز دارند.
      
+
      اگر "BrowserModule" را به یک ماژول ویژگی lazy loading وارد می کنین ، Angular خطایی را برمی گرداند که به شما می گوید در عوض از "CommonModule" استفاده کنید. از آنجا که ارائه دهندگان BrowserModule برای کل برنامه هستند ، بنابراین فقط باید در ماژول ریشه باشد ، نه در ماژول ویژگی. در حالی که ماژول های ویژگی فقط به دستورالعمل های مشترک در Commodule نیاز دارند.
      
 
      ScreenShot
      
 
      فهرست
      
 
      33. 
@@ -5217,11 +5216,11 @@ 
      تایپ های مربوط به feature module ها چیا هستن؟
      
 
      در زیر پنج دسته ماژول های ویژگی ،
      
 
        
-
      1. ** دامنه: ** یک تجربه کاربر اختصاص داده شده به یک دامنه برنامه خاص (به عنوان مثال ، سفارش ، ثبت نام و غیره را قرار دهید)
        2. 
-
      2. ** مسیریابی: ** اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند.
        3. 
-
      3. ** مسیریابی: ** پیکربندی مسیریابی را برای ماژول دیگر فراهم می کند.
        4. 
-
      4. ** سرویس: ** این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (به عنوان مثال ، httpclientmodule)
        5. 
-
      5. ** ویجت: ** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (به عنوان مثال ، کتابخانه های شخص ثالث مانند UI مواد)
        6. 
+
      6. دامنه: یک تجربه کاربر اختصاص داده شده به یک دامنه برنامه خاص (برای مثال ، سفارش ، ثبت نام و غیره را قرار دهید)
        7. 
+
      7. مسیریابی: اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند.
        8. 
+
      8. مسیریابی: پیکربندی مسیریابی را برای ماژول دیگر فراهم میکنه.
        9. 
+
      9. سرویس: این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (برای مثال ، httpclientmodule)
        10. 
+
      10. ویجت: این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (برای مثال ، کتابخانه های شخص ثالث مانند UI مواد)
        11. 
 
      
 
      فهرست
      
 
@@ -5285,7 +5284,7 @@ 
      چطوری یه سرویس singleton رو ایجاد میکنی؟
      
 
      دو روش ممکن برای ارائه یک سرویس مجرد وجود دارد.
      
 
        
-
      1. ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند.
        2. 
+
      2. ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است چون خدمات شما را لرزان میکنه.
        3. 
 
      
 
 
      import { Injectable } from '@angular/core';
@@ -5297,7 +5296,7 @@ 
      }
 
      
 
        
-
      1. سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
        2. 
+
      2. سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد میشه ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
        3. 
 
      
 
 
      @NgModule({
@@ -5310,7 +5309,7 @@ 
      روش های مختلف حذف سرویس های تکراری register شده چیه؟
      
-
      اگر یک ماژول تعریف و اعلامیه ها را تعریف کند ، بارگیری ماژول در ماژول های چند ویژگی ، ثبت نام سرویس را کپی می کند. در زیر روشهای مختلفی برای جلوگیری از این رفتار تکراری آورده شده است.
      
+
      اگر یک ماژول تعریف و اعلامیه ها را تعریف کند ، بارگیری ماژول در ماژول های چند ویژگی ، ثبت نام سرویس را کپی میکنه. در زیر روشهای مختلفی برای جلوگیری از این رفتار تکراری آورده شده است.
      
 
        
 
      1. به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید.
        2. 
 
      2. خدمات خود را در ماژول خود جدا کنید.
        3. 
@@ -5320,13 +5319,13 @@ 
        چطوری متد forRoot برای جلوگیری از duplicate شدن router instance مناسبه؟
        
-
        اگر ماژول «Routermodule» روش استاتیک Forroot () ندارد ، هر ماژول ویژگی یک نمونه روتر جدید را فوری می کند ، که به دلیل موارد تکراری منجر به کاربرد شکسته می شود. پس از استفاده از روش forroot () ، ماژول برنامه root routermodule.forroot (...) را وارد می کند و روتر می شود و همه ماژول های ویژگی واردات routermodule.forchild (...) که روتر دیگری را فوری نمی کند.
        
+
        اگر ماژول «Routermodule» روش استاتیک Forroot () ندارد ، هر ماژول ویژگی یک نمونه روتر جدید را فوری میکنه ، که به دلیل موارد تکراری منجر به کاربرد شکسته میشه. پس از استفاده از روش forroot () ، ماژول برنامه root routermodule.forroot (...) را وارد میکنه و روتر میشه و همه ماژول های ویژگی واردات routermodule.forchild (...) که روتر دیگری را فوری نمیکنه.
        
 
        فهرست
        
 
 
      3. 
 
        منظور از shared module چیه؟
        
 
        ماژول مشترک ماژولی است که در آن دستورالعمل ها ، لوله ها و اجزای متداول را در یک ماژول که به اشتراک گذاشته شده است (وارد می کنید) در طول برنامه قرار دهید.
        
-
        به عنوان مثال ، ماژول مشترک زیر واردات متداول ، formsmodule برای دستورالعمل های مشترک و مؤلفه ها ، لوله ها و دستورالعمل ها بر اساس نیاز ،
        
+
        برای مثال ، ماژول مشترک زیر واردات متداول ، formsmodule برای دستورالعمل های مشترک و مؤلفه ها ، لوله ها و دستورالعمل ها بر اساس نیاز ،
        
 
 
        import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -5347,7 +5346,7 @@ 
        میتونیم سرویس هایی رو بر اساس ماژول به اشتراک بذاریم؟
        
-
        نه ، توصیه نمی شود با وارد کردن ماژول خدمات را به اشتراک بگذارید. یعنی ماژول ها را وارد کنید وقتی می خواهید فقط از دستورالعمل ها ، لوله ها و مؤلفه ها استفاده کنید. بهترین روش برای به دست آوردن خدمات مشترک از طریق "تزریق وابستگی زاویه ای" است زیرا وارد کردن یک ماژول منجر به یک نمونه خدمات جدید خواهد شد.
        
+
        نه ، توصیه نمیشه با وارد کردن ماژول خدمات را به اشتراک بگذارید. یعنی ماژول ها را وارد کنید وقتی می خواهید فقط از دستورالعمل ها ، لوله ها و مؤلفه ها استفاده کنید. بهترین روش برای به دست آوردن خدمات مشترک از طریق "تزریق وابستگی انگولاری" است چون وارد کردن یک ماژول منجر به یک نمونه خدمات جدید خواهد شد.
        
 
        فهرست
        
 
        4. 
 
      4. 
@@ -5372,7 +5371,7 @@ 
        ngcc چیه؟
        
-
        NGCC (کامپایلر سازگاری زاویه ای) ابزاری است که Node_Module را با NDEDULE با NDIV NGC به قالب سازگار با پیچک ساخته می کند. اسکریپت postinstall از pack.json مطمئن خواهد شد که node_modules شما با رندر پیچک سازگار خواهد بود.
        
+
        NGCC (کامپایلر سازگاری انگولاری) ابزاری است که Node_Module را با NDEDULE با NDIV NGC به قالب سازگار با پیچک ساخته میکنه. اسکریپت postinstall از pack.json مطمئن خواهد شد که node_modules شما با رندر پیچک سازگار خواهد بود.
        
 
 
        "scripts": {
    "postinstall": "ngcc"
@@ -5395,9 +5394,9 @@ 
        NgZone چیه؟
        
-
        Angular خدماتی به نام NGZONE را ارائه می دهد که منطقه ای به نام "Angular" ایجاد می کند تا در صورت رضایت از شرایط زیر ، به طور خودکار تشخیص تغییر را ایجاد کند.
        
+
        Angular خدماتی به نام NGZONE را ارائه می دهد که منطقه ای به نام "Angular" ایجاد میکنه تا در صورت رضایت از شرایط زیر ، به طور خودکار تشخیص تغییر را ایجاد کند.
        
 
          
-
        1. هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود.
          2. 
+
        2. هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا میشه.
          3. 
 
        3. هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است.
          4. 
 
        
 
        فهرست
        
@@ -5406,7 +5405,7 @@ 
        NoopZone چیه؟
        
 
        5. 
 
      
-
      منطقه به طور پیش فرض در برنامه های زاویه ای بارگیری و مورد نیاز است و به زاویه کمک می کند تا بداند چه موقع باعث تشخیص تغییر می شود. به این ترتیب ، این باعث می شود که توسعه دهندگان Sures روی توسعه برنامه و نه اصلی ترین قسمت زاویه ای متمرکز شوند. همچنین می توانید از Angular بدون منطقه استفاده کنید اما تشخیص تغییر باید به تنهایی اجرا شود و «Zone Zone» باید در فرآیند bootstrap پیکربندی شود. 
+
      منطقه به طور پیش فرض در برنامه های انگولاری بارگیری و مورد نیاز است و به زاویه کمک میکنه تا بداند چه موقع باعث تشخیص تغییر میشه. به این ترتیب ، این باعث میشه که توسعه دهندگان Sures روی توسعه برنامه و نه اصلی ترین قسمت انگولاری متمرکز شوند. همچنین می تونین از Angular بدون منطقه استفاده کنید اما تشخیص تغییر باید به تنهایی اجرا شود و «Zone Zone» باید در فرآیند bootstrap پیکربندی شود. 
  بیایید دو مرحله زیر را برای حذف Zone.js دنبال کنیم. 
  1. واردات Zone.js را از polyfills.ts حذف کنید.    
  
@@ -5437,7 +5436,7 @@ 
      
 
    33. 
 
      چطوری کامپوننت های displayBlock ایجاد میکنی؟
      
-
      به طور پیش فرض ، Angular CLI مؤلفه هایی را در یک حالت نمایش داده شده درون خطی ایجاد می کند (یعنی صفحه نمایش: درون خطی). اما ایجاد مؤلفه هایی با نمایشگر امکان پذیر است: سبک بلوک با استفاده از گزینه "DisplayBlock":
      
+
      به طور پیش فرض ، Angular CLI مؤلفه هایی را در یک حالت نمایش داده شده درون خطی ایجاد میکنه (یعنی صفحه نمایش: درون خطی). اما ایجاد مؤلفه هایی با نمایشگر امکان پذیر است: سبک بلوک با استفاده از گزینه "DisplayBlock":
      
 
 
      ng generate component my-component --displayBlock
 
      
@@ -5446,10 +5445,10 @@ 
      
 
      @Component({
@@ -5467,7 +5466,7 @@ 
      }
 
      
 
        
-
      1. HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
        2. 
+
      2. HTTP Data Request: می تونین از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
        3. 
 
      
 
 
      data = 'default value';
@@ -5480,7 +5479,7 @@ 
      }
 
      
 
        
-
      1. Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
        2. 
+
      2. Macro tasks setTimeout() or setInterval(): می تونین داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
        3. 
 
      
 
 
      data = 'default value';
@@ -5492,7 +5491,7 @@ 
      }
 
      
 
        
-
      1. Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید
        2. 
+
      2. Micro tasks Promises: شما می تونین داده ها را در عملکرد پاسخ به قول وعده به روز کنید
        3. 
 
      
 
 
      data = 'initial value';
@@ -5510,7 +5509,7 @@ 
      منظور از zone context چیه؟
      
-
      زمینه اجرای یک مفهوم انتزاعی است که اطلاعات مربوط به محیط را در کد فعلی اجرا می کند. یک منطقه زمینه اعدام را فراهم می کند که در عملیات ناهمزمان ادامه می یابد ، به عنوان زمینه منطقه خوانده می شود. به عنوان مثال ، زمینه منطقه در عملکرد برگشت به تماس در خارج و داخل SettimeOut یکسان خواهد بود ،
      
+
      زمینه اجرای یک مفهوم انتزاعی است که اطلاعات مربوط به محیط را در کد فعلی اجرا میکنه. یک منطقه زمینه اعدام را فراهم میکنه که در عملیات ناهمزمان ادامه می یابد ، به عنوان زمینه منطقه خوانده میشه. برای مثال ، زمینه منطقه در عملکرد برگشت به تماس در خارج و داخل SettimeOut یکسان خواهد بود ،
      
 
 
      zone.run(() => {
      // outside zone
@@ -5528,7 +5527,7 @@ 
      هوک های lifecycle مروبوط به یک zone چیا هستن؟
      
 
      چهار قلاب چرخه عمر برای عملیات ناهمزمان از Zone.js. وجود دارد.
      
 
        
-
      1. onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید ()
        2. 
+
      2. onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد میشه. برای مثال ، وقتی با SetTimeOut تماس می گیرید ()
        3. 
 
      
 
 
      onScheduleTask: function(delegate, curr, target, task) {
@@ -5537,7 +5536,7 @@ 
      }
 
      
 
        
-
      1. onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
        2. 
+
      2. onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد میکنه. برای مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
        3. 
 
      
 
 
      onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) {
@@ -5546,7 +5545,7 @@ 
      }
 
      
 
        
-
      1. onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند.
        2. 
+
      2. onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر میکنه (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر میکنه.
        3. 
 
      
 
 
      onHasTask: function(delegate, curr, target, hasTaskState) {
@@ -5555,7 +5554,7 @@ 
      }
 
      
 
        
-
      1. onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود.
        2. 
+
      2. onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا میشه ، ایجاد میشه.
        3. 
 
      
 
 
      onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) {
@@ -5567,7 +5566,7 @@ 
      چه متد هایی از ngZone برای کنترل حساسیت تغییر استفاده میشه؟
      
-
      سرویس NGZONE یک روش `run () را ارائه می دهد که به شما امکان می دهد عملکردی را در داخل منطقه زاویه ای اجرا کنید. این عملکرد برای اجرای API های شخص ثالث که توسط منطقه اداره نمی شوند و باعث تشخیص تغییر خودکار در زمان صحیح می شوند ، استفاده می شود.
      
+
      سرویس NGZONE یک روش `run () را ارائه می دهد که به شما امکان می دهد عملکردی را در داخل منطقه انگولاری اجرا کنید. این عملکرد برای اجرای API های شخص ثالث که توسط منطقه اداره نمیشن و باعث تشخیص تغییر خودکار در زمان صحیح میشن ، استفاده میشه.
      
 
 
      export class AppComponent implements OnInit {
   constructor(private ngZone: NgZone) {}
@@ -5581,7 +5580,7 @@ 
      }
 }
 
      
-
      در حالی که "روش runoutsideangular ()` استفاده می شود وقتی که نمی خواهید تغییر تغییر را ایجاد کنید.
      
+
      در حالی که "روش runoutsideangular ()` استفاده میشه وقتی که نمی خواهید تغییر تغییر را ایجاد کنید.
      
 
 
      export class AppComponent implements OnInit {
   constructor(private ngZone: NgZone) {}
@@ -5599,8 +5598,8 @@ 
      جطوری تنظیمات مربوط به zonejs رو تغییر میدی؟
      
-
      شما می توانید با پیکربندی آنها در یک پرونده جداگانه ، تنظیمات منطقه را تغییر داده و درست پس از واردات Zonejs وارد کنید.
      
-به عنوان مثال ، شما می توانید Patch Monkey RequestAnimationFrame () را غیرفعال کنید تا از تغییر برای به روزرسانی داده به عنوان یک تنظیم جلوگیری کنید و از وقایع DOM (یک رویداد Mousemove یا Scroll) جلوگیری کنید تا تغییر تغییر را ایجاد کند. بیایید بگوییم پرونده جدید به نام Zone-flags.js ،
      
+
      شما می تونین با پیکربندی آنها در یک پرونده جداگانه ، تنظیمات منطقه را تغییر داده و درست پس از واردات Zonejs وارد کنید.
      
+برای مثال ، شما می تونین Patch Monkey RequestAnimationFrame () را غیرفعال کنید تا از تغییر برای به روزرسانی داده به عنوان یک تنظیم جلوگیری کنید و از وقایع DOM (یک رویداد Mousemove یا Scroll) جلوگیری کنید تا تغییر تغییر را ایجاد کند. بیایید بگوییم پرونده جدید به نام Zone-flags.js ،
      
 
 
      // disable patching requestAnimationFrame
 (window as any).__Zone_disable_requestAnimationFrame = true;
@@ -5620,8 +5619,8 @@ 
      چطوری یه انیمیشن رو trigger میکنی؟
      
-
      Angular یک عملکرد "ماشه ()" برای انیمیشن را به منظور جمع آوری حالت ها و انتقال با یک نام انیمیشن خاص فراهم می کند تا بتوانید آن را به عنصر تحریک در الگوی HTML وصل کنید. این عملکرد را برای تغییرات تماشا می کند و هنگام تغییر ، اقدامات را آغاز می کند.
      
-به عنوان مثال ، بیایید Trigger به نام "Updown" ایجاد کنیم و آن را به عنصر دکمه وصل کنیم.
      
+
      Angular یک عملکرد "ماشه ()" برای انیمیشن را به منظور جمع آوری حالت ها و انتقال با یک نام انیمیشن خاص فراهم میکنه تا بتوانید آن را به عنصر تحریک در الگوی HTML وصل کنید. این عملکرد را برای تغییرات تماشا میکنه و هنگام تغییر ، اقدامات را آغاز میکنه.
      
+برای مثال ، بیایید Trigger به نام "Updown" ایجاد کنیم و آن را به عنصر دکمه وصل کنیم.
      
 
 
      @Component({
      selector: 'app-up-down',
@@ -5662,7 +5661,7 @@ 
      چطوری injector ها رو با provider ها برای لول های مختلف کانفیگ میکنی؟
      
-
      با تعیین مقدار ابرداده می توانید انژکتورها را با ارائه دهندگان در سطوح مختلف برنامه خود پیکربندی کنید. پیکربندی می تواند در یکی از سه مکان اتفاق بیفتد ،
      
+
      با تعیین مقدار ابرداده می تونین انژکتورها را با ارائه دهندگان در سطوح مختلف برنامه خود پیکربندی کنید. پیکربندی می تونه در یکی از سه مکان اتفاق بیفتد ،
      
 
        
 
      1. In the @Injectable() decorator for the service itself
        2. 
 
      2. In the @NgModule() decorator for an NgModule
        3. 
@@ -5672,9 +5671,9 @@ 
        آیا استفاده از تزریق در هر کلاس خدمات اجباریه؟
        
-
        نه. اگر کلاس دارای دکوراتورهای زاویه ای دیگری بر روی آن باشد یا هیچ وابستگی نداشته باشد ، دکوراتور injectable () `injectable () لازم نیست. اما نکته مهم در اینجا هر کلاس است که با زاویه تزریق می شود تزئین شده است.
        
-یعنی اگر دکوراتور را اضافه کنیم ، ابرداده "طراحی: پارامترها" اضافه می شود ، و تزریق وابستگی می تواند کار خود را انجام دهد. این دلیل دقیق اضافه کردن دکوراتور injectable () در یک سرویس در صورتی است که این سرویس دارای برخی وابستگی ها باشد.
        
-به عنوان مثال ، بیایید تغییرات مختلف AppService را در یک جزء ریشه مشاهده کنیم ،
        
+
        نه. اگر کلاس دارای دکوراتورهای انگولاری دیگری بر روی آن باشد یا هیچ وابستگی نداشته باشد ، دکوراتور injectable () `injectable () لازم نیست. اما نکته مهم در اینجا هر کلاس است که با زاویه تزریق میشه تزئین شده است.
        
+یعنی اگر دکوراتور را اضافه کنیم ، ابرداده "طراحی: پارامترها" اضافه میشه ، و تزریق وابستگی می تونه کار خود را انجام دهد. این دلیل دقیق اضافه کردن دکوراتور injectable () در یک سرویس در صورتی است که این سرویس دارای برخی وابستگی ها باشد.
        
+برای مثال ، بیایید تغییرات مختلف AppService را در یک جزء ریشه مشاهده کنیم ،
        
 
          
 
        1. AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد.
          2. 
 
        
@@ -5686,7 +5685,7 @@ 
        }
 
      
 
        
-
      1. AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود.
        2. 
+
      2. AppService زیر با دکوراتور ساختگی و Httpservice میتونه بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید میشه.
        3. 
 
      
 
 
      function SomeDummyDecorator() {
@@ -5715,7 +5714,7 @@ 
      .AppService = AppService;
 
      
 
        
-
      1. AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود.
        2. 
+
      2. AppService زیر با تزئینات injectable و httpservice می تونه بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید میشه.
        3. 
 
      
 
 
      @Injectable({
@@ -5731,8 +5730,8 @@ 
      منظور از optional dependency چیه؟
      
-
      وابستگی اختیاری یک دکوراتور پارامتر است که در پارامترهای سازنده مورد استفاده قرار می گیرد ، که این پارامتر را به عنوان یک وابستگی اختیاری نشان می دهد. به همین دلیل ، در صورت عدم یافتن وابستگی ، چارچوب DI تهی را تهی می کند.
      
-به عنوان مثال ، اگر شما یک ارائه دهنده logger را در هیچ کجا ثبت نکنید ، انژکتور مقدار logger (یا سرویس logger) را در کلاس زیر تنظیم می کند.
      
+
      وابستگی اختیاری یک دکوراتور پارامتر است که در پارامترهای سازنده مورد استفاده قرار می گیرد ، که این پارامتر را به عنوان یک وابستگی اختیاری نشان می دهد. به همین دلیل ، در صورت عدم یافتن وابستگی ، چارچوب DI تهی را تهی میکنه.
      
+برای مثال ، اگر شما یک ارائه دهنده logger را در هیچ کجا ثبت نکنید ، انژکتور مقدار logger (یا سرویس logger) را در کلاس زیر تنظیم میکنه.
      
 
 
      import { Optional } from '@angular/core';
 
@@ -5750,16 +5749,16 @@ 
      تایپ های مربوط به injector هرمی چیا هستن؟
      
 
      There are two types of injector hierarchies in Angular
      
 
        
-
      1. ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند.
        2. 
+
      2. ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی میکنه.
        3. 
 
      3. **ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید.
        4. 
 
      
 
      فهرست
      
 
      34. 
 
    34. 
 
      reactive form ها چیا هستن؟
      
-
      فرم های واکنشی یک رویکرد مدل محور برای ایجاد فرم ها به سبک واکنشی است (ورودی های فرم با گذشت زمان تغییر می کنند). اینها در اطراف جریانهای قابل مشاهده ساخته شده اند ، جایی که ورودی ها و مقادیر فرم به عنوان جریان مقادیر ورودی ارائه می شوند. بیایید مراحل زیر را برای ایجاد فرم های واکنشی دنبال کنیم ،
      
+
      فرم های واکنشی یک رویکرد مدل محور برای ایجاد فرم ها به سبک واکنشی است (ورودی های فرم با گذشت زمان تغییر می کنند). اینها در اطراف جریانهای قابل مشاهده ساخته شده اند ، جایی که ورودی ها و مقادیر فرم به عنوان جریان مقادیر ورودی ارائه میشن. بیایید مراحل زیر را برای ایجاد فرم های واکنشی دنبال کنیم ،
      
 
        
-
      1. ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند
        2. 
+
      2. ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام میکنه
        3. 
 
      
 
 
      import { ReactiveFormsModule } from '@angular/forms';
@@ -5796,7 +5795,7 @@ 
      <input type="text" [formControl]="userName">
 </label>
 
      
-
      سرانجام ، مؤلفه با کنترل فرم واکنشی به شرح زیر ظاهر می شود:
      
+
      سرانجام ، مؤلفه با کنترل فرم واکنشی به شرح زیر ظاهر میشه:
      
 
 
      import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
@@ -5819,13 +5818,13 @@ 
      dynamic form ها چیا هستن؟
      
-
      فرم های پویا الگویی است که در آن ما یک فرم را به صورت پویا بر اساس ابرداده می سازیم که یک مدل شی تجاری را توصیف می کند. می توانید آنها را بر اساس API فرم واکنشی ایجاد کنید.
      
+
      فرم های پویا الگویی است که در آن ما یک فرم را به صورت پویا بر اساس ابرداده می سازیم که یک مدل شی تجاری را توصیف میکنه. می تونین آنها را بر اساس API فرم واکنشی ایجاد کنید.
      
 
      فهرست
      
 
      35. 
 
    35. 
 
      template driven form ها چیا هستن؟
      
 
      فرم های محور الگوی فرم های مدل محور هستند که در آن می نویسید که منطق ، اعتبار سنجی ، کنترل و غیره را در قسمت الگوی کد با استفاده از دستورالعمل ها می نویسید. آنها برای سناریوهای ساده مناسب هستند و از اتصال دو طرفه با نحو [(ngmodel)] استفاده می کنند.
      
-به عنوان مثال ، می توانید با دنبال کردن مراحل ساده زیر ، فرم ثبت را به راحتی ایجاد کنید ،
      
+برای مثال ، می تونین با دنبال کردن مراحل ساده زیر ، فرم ثبت را به راحتی ایجاد کنید ،
      
 
        
 
      1. FormsModule را در آرایه واردات ماژول برنامه وارد کنید
        2. 
 
      
@@ -5884,7 +5883,7 @@ 
      <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>
 
      36. 
-
      سرانجام ، فرم ثبت نام الگوی محور به شرح زیر ظاهر می شود.
      
+
      سرانجام ، فرم ثبت نام الگوی محور به شرح زیر ظاهر میشه.
      
 
 
      <div class="container">
      <h1>Registration Form</h1>
@@ -5928,9 +5927,9 @@ 
      روش هایی که برای group کردن فرم کنترل ها وجود داره چیا هستن؟
      
 
      اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد.
      
 
        
-
      1. ** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
        2. 
+
      2. FormGroup: یک فرم را با مجموعه ای از کنترل های ثابت تعریف میکنه که می تونن در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
        3. 
 
      
-
      این فرم گروه می تواند برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.
      
+
      این فرم گروه می تونه برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.
      
 
 
      import { Component } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
@@ -5997,7 +5996,7 @@ 
      </form>
 
      
 
        
-
      1. ** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
        2. 
+
      2. FormArray: یک فرم پویا را در قالب آرایه تعریف میکنه ، جایی که می تونین کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
        3. 
 
      
 
 
      import { Component } from '@angular/core';
@@ -6064,7 +6063,7 @@ 
      چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟>
      
-
      برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می توانید از روش `patchValue () استفاده کنید. به عنوان مثال ، می توانید نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.
      
+
      برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می تونین از روش `patchValue () استفاده کنید. برای مثال ، می تونین نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.
      
 
 
      updateProfile() {
   this.userProfile.patchValue({
@@ -6084,7 +6083,7 @@ 
      هدف از FormBuilder چیه؟
      
-
      FormBuilder به عنوان شکر نحوی برای ایجاد آسان نمونه هایی از یک فرمل ، فرم گروه یا فرم آررای استفاده می شود. این برای کاهش میزان دیگ بخار مورد نیاز برای ساخت اشکال واکنشی پیچیده مفید است. این به عنوان یک کلاس یاور تزریقی بسته `@angular/forms" در دسترس است.
      
+
      FormBuilder به عنوان شکر نحوی برای ایجاد آسان نمونه هایی از یک فرمل ، فرم گروه یا فرم آررای استفاده میشه. این برای کاهش میزان دیگ بخار مورد نیاز برای ساخت اشکال واکنشی پیچیده مفید است. این به عنوان یک کلاس یاور تزریقی بسته `@angular/forms" در دسترس است.
      
 
      For example, the user profile component creation becomes easier as shown here.
      
 
 
      export class UserProfileComponent {
@@ -6105,7 +6104,7 @@ 
      چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟
      
-
      شما می توانید یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.
      
+
      شما می تونین یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.
      
 
 
      export class UserProfileComponent {
 
@@ -6126,7 +6125,7 @@ 
      کلاس هایی که با  ngModel تامین شدن چیا هستن؟
      
-
      دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS زاویه ای به روز می کند تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،
      
+
      دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS انگولاری به روز میکنه تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،
      
 
      
 
 
      
@@ -6159,8 +6158,8 @@ 
      چطوری یه فرم رو ریست میکنی؟
      
 
 
-
      در یک فرم مدل محور ، می توانید فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. 
-  به عنوان مثال ، می توانید مدل فرم را در ارسال به شرح زیر تنظیم کنید ،
+
      در یک فرم مدل محور ، می تونین فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. 
+  برای مثال ، می تونین مدل فرم را در ارسال به شرح زیر تنظیم کنید ،
  <span dir="ltr" align="left">
 
  ```js
@@ -6175,17 +6174,17 @@ 
      
 
    36. 
 
      تایپ های مربوط به validator فانکشن چیا هستن؟
      
-
      در اشکال واکنشی ، اعتبار سنج ها می توانند توابع همزمان یا ناهمزمان باشند ،
      
+
      در اشکال واکنشی ، اعتبار سنج ها می تونن توابع همزمان یا ناهمزمان باشند ،
      
 
        
-
      1. ** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
        2. 
-
      2. ** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
        3. 
+
      3. اعتبار سنجی همگام سازی: این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
        4. 
+
      4. اعتبار سنج های Async: این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر میکنه. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
        5. 
 
      
 
      The representation of these validators looks like below
      
 
@@ -6199,7 +6198,7 @@ 
      میتونی چن تا مثال از validator های build-in بزنی ؟
      
-
      n فرم های واکنشی ، می توانید از اعتبار سنجی داخلی مانند "مورد نیاز" و "minl طول" در کنترل فرم ورودی خود استفاده کنید. به عنوان مثال ، فرم ثبت نام می تواند این اعتبار سنج ها را در قسمت ورودی نام داشته باشد
      
+
      n فرم های واکنشی ، می تونین از اعتبار سنجی داخلی مانند "مورد نیاز" و "minl طول" در کنترل فرم ورودی خود استفاده کنید. برای مثال ، فرم ثبت نام می تونه این اعتبار سنج ها را در قسمت ورودی نام داشته باشد
      
 
 
      this.registrationForm = new FormGroup({
      'name': new FormControl(this.hero.name, [
@@ -6213,7 +6212,7 @@ 
      چطوری پرفورمنس validator های async رو بیتشر میکنی؟
      
-
      از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا می شوند ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد می کند. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
      
+
      از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا میشن ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد میکنه. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
      
 استفاده بر اساس انواع فرم متفاوت خواهد بود.
      
 
        
 
      1. Template-driven forms: Set the property on ngModelOptions directive
        2. 
@@ -6231,12 +6230,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>
@@ -6254,8 +6253,8 @@ 
        منظور از پراپرتی host توی css چیه؟
        
-
        از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده می شود. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی توانید از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
        
-به عنوان مثال ، شما می توانید یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،
        
+
        از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده میشه. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی تونین از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
        
+برای مثال ، شما می تونین یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،
        
 
 
        //Other styles for app.component.css
 //...
@@ -6294,12 +6293,12 @@ 
        مهار تست های کامپوننت چیه؟
        
-
        مهار مؤلفه یک API آزمایش در اطراف یک دستورالعمل یا مؤلفه زاویه ای است تا با مخفی کردن جزئیات اجرای از مجموعه های آزمایش ، تست ها را ساده تر کند. این می تواند بین تست های واحد ، تست های ادغام و تست های پایان به پایان به اشتراک گذاشته شود. ایده برای مهارهای مؤلفه از الگوی ** pageObject ** که معمولاً برای آزمایش ادغام استفاده می شود ، حاصل می شود.
        
+
        مهار مؤلفه یک API آزمایش در اطراف یک دستورالعمل یا مؤلفه انگولاری است تا با مخفی کردن جزئیات اجرای از مجموعه های آزمایش ، تست ها را ساده تر کند. این میتونه بین تست های واحد ، تست های ادغام و تست های پایان به پایان به اشتراک گذاشته شود. ایده برای مهارهای مؤلفه از الگوی pageObject که معمولاً برای آزمایش ادغام استفاده میشه ، حاصل میشه.
        
 
        فهرست
        
 
 
      2. 
 
        مزایای inlining اتوماتیک چیه؟
        
-
        در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده می کند ، بارگیری و درون خطی می کند. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال می شود.
        
+
        در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده میکنه ، بارگیری و درون خطی میکنه. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال میشه.
        
 
        فهرست
        
 
        3. 
 
      3. 
@@ -6309,7 +6308,7 @@ 
        ng-به چی میگن و هدف از اون چیه؟content
        
-
        از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده می شود که به افزایش قابلیت استفاده مجدد مؤلفه کمک می کند.
        
+
        از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده میشه که به افزایش قابلیت استفاده مجدد مؤلفه کمک میکنه.
        
 
        فهرست
        
 
        4. 
 
      
diff --git a/Book.md b/Book.md
index 8dc306e..ad275fb 100644
--- a/Book.md
+++ b/Book.md
@@ -458,7 +458,7 @@ puppeteer:
      | کامپوننت ها معمولا برای ایجاد ویجت های UI استفاده می شن|directive ها برای افزودن رفتار به یک عنصر DOM موجود استفاده می شن |
      | کامپوننت برای تقسیم برنامه به اجزای کوچکتر استفاده می شه | دستورالعمل برای طراحی اجزای قابل استفاده مجدد استفاده می شه|
      | فقط یک جزء می تونه تو هر عنصر DOM وجود داشته باشه | بسیاری از directive ها رو میشه برای هر عنصر DOM استفاده کرد |
-     | @View decorator یا templateurl/template اجباریه | دستورالعمل از View استفاده نمی کند|
+     | @View decorator یا templateurl/template اجباریه | دستورالعمل از View استفاده نمیکنه|
 
      **[فهرست](#فهرست)**
 
@@ -540,7 +540,7 @@ puppeteer:
      دکوراتور NgModule پنج گزینه مهم ( میان همه) داره
      1. گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شه. BrowserModule به طور پیش فرض برای هر برنامه انگولار مبتنی بر وب لازمه
      2. گزینه declarations برای تعریف اجزا تو ماژول مربوطه استفاده می شه
-     3. گزینه bootstrap به Angular می گه که کدام کامپوننت رو تو برنامه بوت استرپ کنه
+     3. گزینه bootstrap به Angular می گه که کدوم کامپوننت رو تو برنامه بوت استرپ کنه
      4. گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود تو انژکتور این ماژول استفاده می شن.
      5. گزینه enterComponents مجموعه ای از اجزاییه که به صورت پویا تو view بارگذاری می شن.
 
@@ -566,7 +566,7 @@ puppeteer:
 
 12. ### data binding چیه؟
 
-     Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM رو فراهم می کند و تعریف برنامه های تعاملی رو بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان می کند. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شه) که در نحوه جریان داده ها متفاوت است.
+     Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM رو فراهم میکنه و تعریف برنامه های تعاملی رو بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان میکنه. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شه) که در نحوه جریان داده ها متفاوت است.
     
      1. **From the Component to the DOM:**
 
@@ -621,9 +621,9 @@ puppeteer:
 
 13. ### metadata چیه؟
 
-     metadata برای تزئین یک کلاس استفاده می شود تا بتونه رفتار مورد انتظار کلاس را پیکربندی کنه. metadata توسط دکوراتورها نمایش داده می شه
+     metadata برای تزئین یک کلاس استفاده میشه تا بتونه رفتار مورد انتظار کلاس را پیکربندی کنه. metadata توسط دکوراتورها نمایش داده می شه
 
-     1. **Class decorators**, به عنوان مثال، @Component و @NgModule
+     1. **Class decorators**, برای مثال، @Component و @NgModule
     
      
      
@@ -655,7 +655,7 @@ puppeteer:
      
      
 
-     2. **Property decorators** برای ویژگی های داخل کلاس ها استفاده می شه به عنوان مثال. @import و export
+     2. **Property decorators** برای ویژگی های داخل کلاس ها استفاده می شه برای مثال. @import و export
      
      
 
@@ -675,7 +675,7 @@ puppeteer:
      
      
      
-     3. **Method decorators** برای متدهای داخل کلاس ها استفاده می شه به عنوان مثال. @HostListener
+     3. **Method decorators** برای متدهای داخل کلاس ها استفاده می شه برای مثال. @HostListener
      
      
 
@@ -696,7 +696,7 @@ puppeteer:
      
      
      
-     4. **Parameter decorators** برای پارامترهای داخل سازنده کلاس استفاده می شه به عنوان مثال. @Inject، اختیاری
+     4. **Parameter decorators** برای پارامترهای داخل سازنده کلاس استفاده می شه برای مثال. @Inject، اختیاری
      
      
 
@@ -721,7 +721,7 @@ puppeteer:
 
 14. ### Angular CLI چی هست؟
 
-     Angular CLI (** Command Line Interface**) یک رابط خط فرمان برای ساخت چارچوب مشخص و ساخت برنامه های انگولار با استفاده از ماژول های استایل nodejs (commonJs) است.
+     Angular CLI (**Command Line Interface**) یک رابط خط فرمان برای ساخت چارچوب مشخص و ساخت برنامه های انگولار با استفاده از ماژول های استایل nodejs (commonJs) است.
      شما باید با استفاده از دستور زیر npm نصب کنید،
 
      
@@ -738,13 +738,13 @@ puppeteer:
 
      2. **ساخت Component ها, Directive ها و Service ها:** ng generate/g 
         انواع مختلف دستورات
-         * ng generate class my-new-class: یک کلاس به برنامه خود اضافه کنید
-         * ng تولید کامپوننت my-new-component: یک کامپوننت به برنامه خود اضافه کنید
-         * ng generate directive my-new-directive: یک directive به برنامه خود اضافه کنید
-         * ng generate enum my-new-enum: یک enum به برنامه خود اضافه کنید
-         * ng generate module my-new-module: یک ماژول به برنامه خود اضافه کنید
-         * تولید لوله my-new-pipe: یک pipe به برنامه خود اضافه کنید
-         * ng generate service my-new-service: یک service به برنامه خود اضافه کنید
+         * ng generate class my-new-class: یک کلاس به برنامه خودتون اضافه کنین
+         * ng تولید کامپوننت my-new-component: یک کامپوننت به برنامه خودتون اضافه کنین
+         * ng generate directive my-new-directive: یک directive به برنامه خودتون اضافه کنین
+         * ng generate enum my-new-enum: یک enum به برنامه خودتون اضافه کنین
+         * ng generate module my-new-module: یک ماژول به برنامه خودتون اضافه کنین
+         * تولید لوله my-new-pipe: یک pipe به برنامه خودتون اضافه کنین
+         * ng generate service my-new-service: یک service به برنامه خودتون اضافه کنین
 
      3. **برای اجرای پروژه:** ng serve
 
@@ -859,7 +859,7 @@ puppeteer:
 
 21. ### هدف از directive ngFor چی هستش؟
 
-     ما از directive Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. به عنوان مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،
+     ما از directive Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. برای مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،
 
      
 
@@ -913,7 +913,7 @@ puppeteer:
 
 24. ### منظور از interpolation چیه؟
 
-     interpolation یه نحو خاصیه که Angular آن رو به ویژگی binding تبدیل می کنه. این یه جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده می شود. متن بین پرانتزها اغلب نام یه ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کنه.
+     interpolation یه نحو خاصیه که Angular آن رو به ویژگی binding تبدیل می کنه. این یه جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده میشه. متن بین پرانتزها اغلب نام یه ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کنه.
 
      بیاین یه مثال بزنیم،
 
@@ -935,8 +935,8 @@ puppeteer:
 
 25. ### template expressions ها چیا هستن?
 
-     یک عبارت الگو مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کنه. Angular عبارت رو اجرا می کنه و اون رو به خاصیت یک هدف الزام آور اختصاص میده. هدف ممکن است یک عنصر HTML، یک جزء یا یک دستورالعمل باشد. در ویژگی binding، یک عبارت الگو در نقل قول در سمت راست نماد = مانند [property]="expression ظاهر می شه.
-     در نحو درون یابی، عبارت الگو با پرانتزهای مجعد دوتایی احاطه شده. به عنوان مثال، در درون یابی زیر، عبارت الگو {{username}} است،
+     یک عبارت الگو مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کنه. Angular عبارت رو اجرا می کنه و اون رو به خاصیت یک هدف الزام آور اختصاص میده. هدف ممکنه یک عنصر HTML، یک جزء یا یک دستورالعمل باشد. در ویژگی binding، یک عبارت الگو در نقل قول در سمت راست نماد = مانند [property]="expression ظاهر می شه.
+     در نحو درون یابی، عبارت الگو با پرانتزهای مجعد دوتایی احاطه شده. برای مثال، در درون یابی زیر، عبارت الگو {{username}} است،
      
      
 
@@ -999,7 +999,7 @@ puppeteer:
 
 28. ### pipe ها چیا هستن؟
 
-    یک pipe داده ها رو به عنوان ورودی می گیرد و اون رو به خروجی دلخواه تبدیل می کنه. به عنوان مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی تولد یک جزء به تاریخ دوست‌داشتنی با استفاده از pipe **date** در نظر بگیریم.
+    یک pipe داده ها رو به عنوان ورودی می گیرد و اون رو به خروجی دلخواه تبدیل می کنه. برای مثال، اجازه بدین یک pipe رو برای تبدیل ویژگی تولد یک جزء به تاریخ دوست‌داشتنی با استفاده از pipe **date** در نظر بگیریم.
      
      
 
@@ -1068,7 +1068,7 @@ puppeteer:
 
 31. ### منظور از pipe سفارشی شده چیه؟
 
-     جدا از pipe های داخلی، می توانید pipe سفارشی خود رو با ویژگی های کلیدی زیر بنویسید:
+     جدا از pipe های داخلی، می تونین pipe سفارشی خود رو با ویژگی های کلیدی زیر بنویسید:
      1. پیپ کلاسی است که با metadata pipe **@Pipe** تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید.
      مثلا،
     
@@ -1080,7 +1080,7 @@ puppeteer:
      
      
 
-     2. کلاس pipe روش تبدیل رابط **PipeTransform** رو پیاده سازی می کند که یه مقدار ورودی و به دنبال آن پارامترهای اختیاری رو می پذیرد و مقدار تبدیل شده رو برمی گرداند.
+     2. کلاس pipe روش تبدیل رابط **PipeTransform** رو پیاده سازی میکنه که یه مقدار ورودی و به دنبال آن پارامترهای optional رو قبول میکنه و مقدار تبدیل شده رو برمی گرداند.
      ساختار pipeTransform به صورت زیر خواهد بود.
     
      
@@ -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 را تشخیص بده. برای مثال، هرگونه تغییر در یه مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یه مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یه 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» در دسترس است.
-      می توانید در ماژول ریشه خود به صورت زیر وارد کنید،
+      می تونین در ماژول ریشه خود به صورت زیر وارد کنید،
      
      
 
@@ -1205,8 +1205,8 @@ puppeteer:
       1. دارای ویژگی های تست پذیری است
       2. اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد
       3. رهگیری درخواست و پاسخ
-      4. از API های Observalbe پشتیبانی می کند
-      5. از مدیریت خطای ساده پشتیبانی می کند
+      4. از API های Observalbe پشتیبانی میکنه
+      5. از مدیریت خطای ساده پشتیبانی میکنه
 
      **[فهرست](#فهرست)**
 
@@ -1233,7 +1233,7 @@ puppeteer:
      
 
      2. HttpClient را به برنامه تزریق کنید:
-      بیایید یک userProfileService (userprofile.service.ts) به عنوان مثال ایجاد کنیم. همچنین روش get از HttpClient را تعریف می کند
+      بیایید یک userProfileService (userprofile.service.ts) برای مثال ایجاد کنیم. همچنین روش get از HttpClient را تعریف میکنه
      
      
 
@@ -1256,7 +1256,7 @@ puppeteer:
      
 
      3. یک مؤلفه برای اشتراک سرویس ایجاد کنید:
-      بیایید کامپوننتی به نام UserProfileComponent(userprofile.component.ts) ایجاد کنیم که UserProfileService را تزریق کرده و متد سرویس را فراخوانی می کند.
+      بیایید کامپوننتی به نام UserProfileComponent(userprofile.component.ts) ایجاد کنیم که UserProfileService را تزریق کرده و متد سرویس را فراخوانی میکنه.
     
      
 
@@ -1279,7 +1279,7 @@ puppeteer:
 
 38. ### چطوری response ها رو به صورت کامل بخونیم؟
 
-     ممکن است بدنه پاسخ داده‌های پاسخ کامل را برنگرداند زیرا گاهی اوقات سرورها سرصفحه‌ها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمی‌گردانند. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنید.
+     ممکنه بدنه پاسخ داده‌های پاسخ کامل را برنگردونه چون گاهی اوقات سرورها سرصفحه‌ها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمیگردونه. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنیم.
      
      
 
@@ -1325,7 +1325,7 @@ puppeteer:
 
      RxJS کتابخانه ای برای نوشتن کدهای ناهمزمان و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند.
 
-      به عنوان مثال، می توانید مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.
+      برای مثال، می تونین مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.
 
      
      
@@ -1341,7 +1341,7 @@ puppeteer:
 
 41. ### subscribing چیه؟
      
-     یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر می کند که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد **subscribe()** از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلان‌ها ارسال کنید.
+     یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر میکنه که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد **subscribe()** از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلان‌ها ارسال کنید.
 
       بیایید نمونه‌ای از ایجاد و اشتراک در یک مشاهده‌پذیر ساده، با مشاهده‌گری که پیام دریافت‌شده را در کنسول ثبت می‌کند، در نظر بگیریم.
      
@@ -1375,7 +1375,7 @@ puppeteer:
 42. ### منطور از observable یه چیه؟
 
      Observable یک شی منحصر به فرد شبیه به Promise است که می تونه به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم.
-      مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد می شوند.
+      مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد میشن.
 
       مثال ساده قابل مشاهده را ببینید،
 
@@ -1398,7 +1398,7 @@ puppeteer:
 
 43. ### observer جیه؟
 
-     Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه می شود. دارای ساختار زیر است،
+     Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه میشه. دارای ساختار زیر است،
      
      
 
@@ -1433,10 +1433,10 @@ puppeteer:
 
       | قابل مشاهده | قول |
       |---- | --------- |
-      | اعلامی: محاسبات تا زمان اشتراک شروع نمی شود تا هر زمان که به نتیجه نیاز داشتید، قابل اجرا باشند | اجرا بلافاصله پس از ایجاد|
+      | اعلامی: محاسبات تا زمان اشتراک شروع نمیشه تا هر زمان که به نتیجه نیاز داشتید، قابل اجرا باشند | اجرا بلافاصله پس از ایجاد|
       | ارائه مقادیر متعدد در طول زمان | فقط یک |
-      | روش Subscribe برای مدیریت خطا استفاده می شود که مدیریت خطا را متمرکز و قابل پیش بینی می کند| خطاهای فشاری به کودک وعده می دهد |
-      | ارائه زنجیره و اشتراک برای رسیدگی به برنامه های پیچیده | فقط از .then() بند | استفاده می کند
+      | روش Subscribe برای مدیریت خطا استفاده میشه که مدیریت خطا را متمرکز و قابل پیش بینی میکنه| خطاهای فشاری به کودک وعده می دهد |
+      | ارائه زنجیره و اشتراک برای رسیدگی به برنامه های پیچیده | فقط از .then() بند | استفاده میکنه
 
      **[فهرست](#فهرست)**
 
@@ -1473,7 +1473,7 @@ puppeteer:
 
      شما می‌توانید با تعیین یک **بازخوانی خطا** روی ناظر به جای تکیه بر try/catch که در محیط ناهمزمان بی‌اثر هستند، خطاها را مدیریت کنید.
 
-      به عنوان مثال، می توانید خطا را به صورت زیر تعریف کنید.
+      برای مثال، می تونین خطا را به صورت زیر تعریف کنید.
 
      
      
@@ -1493,7 +1493,7 @@ puppeteer:
 
      متد subscribe () می‌تونه تعاریف تابع برگشتی را به‌صورت خطی بپذیرد، برای کنترل‌کننده‌های بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومان‌های موقعیتی شناخته می‌شود.
 
-      به عنوان مثال، می توانید متد subscribe را به صورت زیر تعریف کنید.
+      برای مثال، می تونین متد subscribe را به صورت زیر تعریف کنید.
 
      
      
@@ -1524,7 +1524,7 @@ puppeteer:
 
 49. ### توابع سازنده observable چیا هستن؟
 
-     RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم می کند. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،
+     RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم میکنه. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،
 
       1. از قول یک قابل مشاهده ایجاد کنید
      
@@ -1594,13 +1594,13 @@ puppeteer:
 
 51. ### element های انگولار چیا هستن؟
 
-     عناصر انگولار، اجزای انگولار هستند که به‌عنوان **عناصر سفارشی** (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بسته‌بندی شده‌اند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد می کند، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر انگولاری" ارائه می دهد.
+     عناصر انگولار، اجزای انگولار هستند که به‌عنوان **عناصر سفارشی** (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بسته‌بندی شده‌اند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد میکنه، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر انگولاری" ارائه می دهد.
 
      **[فهرست](#فهرست)**
 
 52. ### پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
 
-     از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی می شوند، پشتیبانی مرورگر از عناصر انگولاری مانند پشتیبانی از عناصر سفارشی است.
+     از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی میشن، پشتیبانی مرورگر از عناصر انگولاری مانند پشتیبانی از عناصر سفارشی است.
 
       این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی می‌شود و برای مرورگرهای دیگر در انتظار است.
 
@@ -1609,20 +1609,20 @@ puppeteer:
       | کروم | پشتیبانی بومی|
       | اپرا | پشتیبانی بومی |
       | سافاری| پشتیبانی بومی |
-      | فایرفاکس | به طور بومی از نسخه 63 به بعد پشتیبانی می شود. باید dom.webcomponents.enabled و dom.webcomponents.customelements.enabled را در مرورگرهای قدیمی فعال کنید |
+      | فایرفاکس | به طور بومی از نسخه 63 به بعد پشتیبانی میشه. باید dom.webcomponents.enabled و dom.webcomponents.customelements.enabled را در مرورگرهای قدیمی فعال کنید |
       | Edge| در حال حاضر در حال انجام است|
 
      **[فهرست](#فهرست)**
 
 53. ### element های کاستوم شده چیا هستن؟
 
-     عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل می شود، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ می کند، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت می کند. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی می‌شود و در مرورگرهای دیگر از طریق polyfills در دسترس است.
+     عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل میشه، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ میکنه، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت میکنه. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی می‌شود و در مرورگرهای دیگر از طریق polyfills در دسترس است.
 
      **[فهرست](#فهرست)**
 
 54. ### bootstrap کردن element های کاستوم شده لازمه؟
      
-     خیر، عناصر سفارشی هنگامی که به DOM اضافه می شوند به طور خودکار راه اندازی می شوند (یا شروع می شوند) و وقتی از DOM حذف می شوند به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه می شود، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار می کند و به دانش خاصی از Angular نیاز ندارد.
+     خیر، عناصر سفارشی هنگامی که به DOM اضافه میشن به طور خودکار راه اندازی میشن (یا شروع میشن) و وقتی از DOM حذف میشن به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه میشه، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار میکنه و به دانش خاصی از Angular نیاز ندارد.
 
      **[فهرست](#فهرست)**
 
@@ -1631,8 +1631,8 @@ puppeteer:
      در زیر مراحل به ترتیب در مورد عملکرد عناصر سفارشی آمده است،
      1. **App registers custom element with browser:** از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که می‌تونه در مرورگر به عنوان یک عنصر سفارشی ثبت شود.
      2. **App adds custom element to DOM:** عنصر سفارشی را درست مانند یک عنصر HTML داخلی مستقیماً به DOM اضافه کنید.
-     3. **Browser instantiate component based class:** مرورگر یک نمونه از کلاس ثبت شده ایجاد می کند و آن را به DOM اضافه می کند.
-     4. **Instance provides content with data binding and change detection:** محتوای با در قالب با استفاده از کامپوننت و داده های DOM ارائه می شود.
+     3. **Browser instantiate component based class:** مرورگر یک نمونه از کلاس ثبت شده ایجاد میکنه و آن را به DOM اضافه میکنه.
+     4. **Instance provides content with data binding and change detection:** محتوای با در قالب با استفاده از کامپوننت و داده های DOM ارائه میشه.
      نمودار جریان عملکرد عناصر سفارشی به شرح زیر است:
 
      ![CustomElement](images/customElement.png)
@@ -1642,7 +1642,7 @@ puppeteer:
 56. ### چطوری کامپوننت عا رو به custom element تبدیل کنیم؟
      تبدیل اجزا به عناصر سفارشی شامل **دو** مرحله اصلی است،
       1. **کلاس عنصر سفارشی بسازید:** Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیاده‌سازی می‌کند و یک کلاس سازنده ایجاد می‌کند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده می‌شود.
-      2. ** ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده می کند. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو می شود، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده می کند.
+      2. **ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده میکنه. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو میشه، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده میکنه.
 
      The detailed structure would be as follows,
      ![CreateElement](images/createElement.png)
@@ -1651,9 +1651,9 @@ puppeteer:
 
 57. ### قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
 
-     ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت می شوند. اجازه دهید آنها را در دو مرحله توصیف کنیم،
-      1. CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه می کند. به عنوان مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
-      2. خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال می شوند که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
+     ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت میشن. اجازه دهید آنها را در دو مرحله توصیف کنیم،
+      1. CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه میکنه. برای مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
+      2. خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال میشن که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
 
      **[فهرست](#فهرست)**
 
@@ -1676,7 +1676,7 @@ puppeteer:
      
      
 
-     2. پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
+     2. پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید میکنه.
 
      
 
@@ -1693,14 +1693,14 @@ puppeteer:
 
 59. ### کامپوننت های داینامیک چیا هستن؟
 
-     مؤلفه‌های پویا مؤلفه‌هایی هستند که مکان مؤلفه‌ها در برنامه در زمان ساخت تعریف نشده است، یعنی در هیچ قالب انگولار استفاده نمی‌شوند. اما کامپوننت نمونه سازی می شود و در زمان اجرا در برنامه قرار می گیرد.
+     مؤلفه‌های پویا مؤلفه‌هایی هستند که مکان مؤلفه‌ها در برنامه در زمان ساخت تعریف نشده است، یعنی در هیچ قالب انگولار استفاده نمی‌شوند. اما کامپوننت نمونه سازی میشه و در زمان اجرا در برنامه قرار می گیرد.
 
      **[فهرست](#فهرست)**
 
 60. ### انواع مختلف directive ها کدوما هستن؟
 
      عمدتاً سه نوع دستورالعمل وجود دارد:
-      1. ** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند.
+      1. **مؤلفه ها** - این دستورالعمل ها دارای یک الگو هستند.
       2. **دستورالعمل های ساختاری** — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.
       3. **دستورالعمل های ویژگی** - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.
 
@@ -1708,13 +1708,13 @@ puppeteer:
 
 61. ### چطوری با استفاده از CLI یه directive درست میکنی؟
 
-     می‌توانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (`src/app/components/directivename.directive.ts`)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد می کند و فایل کلاس دستورالعمل را در ماژول ریشه اعلام می کند.
+     می‌توانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (`src/app/components/directivename.directive.ts`)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد میکنه و فایل کلاس دستورالعمل را در ماژول ریشه اعلام میکنه.
 
      **[فهرست](#فهرست)**
 
 62. ### یه مثال از استفاده directive با اتریبیوت بزن؟
 
-     بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می توانید دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:
+     بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می تونین دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:
 
       1. کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید **Directive** را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و **ElementRef** را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.
     
@@ -1736,7 +1736,7 @@ puppeteer:
      
      
 
-     2. دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال، 
      )
+     2. دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (برای مثال، 
      )
      
      
 
@@ -1760,13 +1760,13 @@ puppeteer:
 
 63. ### Angular Router چیه؟
 
-     Angular Router مکانیزمی است که در آن هنگام انجام وظایف برنامه توسط کاربران، ناوبری از یک نمای به نمای بعدی انجام می شود. مفاهیم یا مدل ناوبری برنامه مرورگر را به عاریت گرفته است.
+     Angular Router مکانیزمی است که در آن هنگام انجام وظایف برنامه توسط کاربران، ناوبری از یک نمای به نمای بعدی انجام میشه. مفاهیم یا مدل ناوبری برنامه مرورگر را به عاریت گرفته است.
 
      **[فهرست](#فهرست)**
 
 64. ### هدف از base href tag چیه؟
 
-     برنامه مسیریابی باید عنصر  را به عنوان اولین فرزند در تگ  به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می توانید مقدار href را به صورت زیر تنظیم کنید
+     برنامه مسیریابی باید عنصر  را به عنوان اولین فرزند در تگ  به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می تونین مقدار href را به صورت زیر تنظیم کنید
      
      
 
@@ -1780,7 +1780,7 @@ puppeteer:
 
 65. ### import های مربوط به router چیه؟
 
-     Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخانه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. به عنوان مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم.
+     Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخانه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. برای مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم.
      
      
 
@@ -1794,7 +1794,7 @@ puppeteer:
 
 66. ### router outlet چیه؟
 
-     RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل می کند که نقطه ای را در قالب مشخص می کند که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده می شود،
+     RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل میکنه که نقطه ای را در قالب مشخص میکنه که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده میشه،
      
      
 
@@ -1809,7 +1809,7 @@ puppeteer:
 
 67. ### router link ها چیا هستن؟
 
-     RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می توانید مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.
+     RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می تونین مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.
      
      
 
@@ -1827,7 +1827,7 @@ puppeteer:
      **[فهرست](#فهرست)**
 
 68. ### منظور از منظور از router state چیه؟     
-     RouterLinkActive دستورالعملی است که کلاس‌های css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر می‌دهد. به عنوان مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه می کند و زمانی که پیوند غیر فعال است حذف می کند. به عنوان مثال، می توانید آنها را مانند زیر به RouterLinks اضافه کنید.
+     RouterLinkActive دستورالعملی است که کلاس‌های css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر می‌دهد. برای مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه میکنه و زمانی که پیوند غیر فعال است حذف میکنه. برای مثال، می تونین آنها را مانند زیر به RouterLinks اضافه کنید.
      
      
 
@@ -1869,7 +1869,7 @@ puppeteer:
 
 70. ### event های مربوط به router چیا هستن؟
 
-     در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر می کند که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.
+     در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر میکنه که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.
 
      توالی رویدادهای روتر به شرح زیر است:
 
@@ -1894,7 +1894,7 @@ puppeteer:
 
 71. ### منظور از activated route چیه؟
 
-     ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق می شود. در مثال زیر می توانید به مسیر و پارامترهای مسیر دسترسی داشته باشید.
+     ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق میشه. در مثال زیر می تونین به مسیر و پارامترهای مسیر دسترسی داشته باشید.
      
      
 
@@ -1955,9 +1955,9 @@ puppeteer:
 
 73. ### هدف از Wildcard route چیه؟
 
-     اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث می شود روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می توانید از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.
+     اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث میشه روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می تونین از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.
 
-      به عنوان مثال، شما می توانید PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید
+      برای مثال، شما می تونین PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید
 
      
      
@@ -1972,7 +1972,7 @@ puppeteer:
 
 74. ### ما همیشه به routing module نیاز داریم؟
 
-     نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، می‌توانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه می شود که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.
+     نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، می‌توانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه میشه که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.
 
      **[فهرست](#فهرست)**
 
@@ -1990,9 +1990,9 @@ puppeteer:
 
      **[فهرست](#فهرست)**
 
-77. ### What is JIT?
+77. ### JIT چیه؟
 
-     Just-in-Time (JIT) نوعی کامپایل است که برنامه شما را در زمان اجرا در مرورگر کامپایل می کند. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت محلی) را اجرا می کنید، کامپایل JIT پیش فرض است. به عنوان مثال، دستورات زیر برای کامپایل JIT استفاده می شود،
+     Just-in-Time (JIT) نوعی کامپایله که برنامه رو موقع اجرا تو مرورگر کامپایل میکنه. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت لوکال) رو اجرا می کنین کامپایل JIT پیش فرض هستش. برای مثال، دستورات زیر برای کامپایل JIT استفاده میشه،
      
      
 
@@ -2005,9 +2005,9 @@ puppeteer:
 
      **[فهرست](#فهرست)**
 
-78. ### What is AOT?
+78. ### AOT چیه؟
 
-     Ahead-of-Time (AOT) نوعی کامپایل است که برنامه شما را در زمان ساخت کامپایل می کند. برای کامپایل AOT، گزینه «--aot» را با دستور ng build یا ng serve به شرح زیر اضافه کنید.
+     Ahead-of-Time (AOT) نوعی کامپایله که برنامه رو تو زمان ساخت کامپایل میکنه. برای کامپایل AOT، گزینه «--aot» رو با دستور ng build یا ng serve مثل کد زیر اضافه کنید.
      
      
 
@@ -2018,56 +2018,56 @@ puppeteer:
      
      
 
-     **نکته:** دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل می شود.
+     **نکته:** دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل میشه.
 
      **[فهرست](#فهرست)**
 
 79. ### چرا ما به پروسه کامپایل نیاز داریم؟
 
-     کامپوننت ها و قالب های Angular را نمی توان مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتوانند در مرورگر اجرا شوند نیاز به یک فرآیند کامپایل دارند. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت کارآمد تبدیل می‌شوند.
+     کامپوننت ها و قالب های Angular رو نمی شه مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتونن تو مرورگر اجرا شن نیاز به یک فرآیند کامپایل دارن. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت قابل اجرا تبدیل مشن.
 
      **[فهرست](#فهرست)**
 
 80. ### مزایای استفاده از AOT چیه؟
 
-     1. ** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تونه برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.
-      2. ** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.
-      3. **اندازه دانلود فریمورک Angular کوچکتر:** نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.
-      4. **تشخیص خطاهای قالب زودتر:** خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.
-      5. **امنیت بهتر:** قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.
+     1. **رندر سریعتر:** مرورگر یک نسخه از پیش کامپایل شده برنامه رو دانلود میکنه. بنابراین می تونه برنامه رو بلافاصله بدون کامپایل کردن برنامه رندر کنه.
+     2. **درخواست های async کمتر:** قالب های HTML خارجی و برگه های سبک CSS رو تو برنامه جاوا اسکریپت قرار می ده که درخواست های جداگانه ajax رو حذف می کنه.
+     3. **اندازه دانلود فریمورک Angular کوچکتر:** نیازی به دانلود کامپایلر Angular ندارد. از این رو حجم برنامه رو کمترش میکنه.
+     4. **تشخیص زودتر خطاهای template:** خطاهای اتصال template رو در مرحله ساخت شناسایی و گزارش می کنه.
+     5. **امنیت بهتر:** قالب ها و اجزای HTML رو در جاوا اسکریپت کامپایل می کنه. بنابراین هیچ حمله injection اتفاق نمیوفته.
 
      **[فهرست](#فهرست)**
 
 81. ### روش های کنترل کامپایل شدن با AOT چیا هستن؟
 
-     شما می توانید کامپایل برنامه خود را به دو روش کنترل کنید،
-      1. با ارائه گزینه های کامپایلر قالب در فایل `tsconfig.json`
-      2. با پیکربندی فراداده Angular با دکوراتورها
+     می تونیم کامپایل برنامه رو به دو روش کنترل کنیم
+     1. با ارائه گزینه های کامپایلر قالب در فایل `tsconfig.json`
+     2. با پیکربندی فراداده Angular با دکوراتورها
 
      **[فهرست](#فهرست)**
 
 82. ### محدودیت هایی که روی metadata وجود داره چیا هستن؟
 
-     در Angular، شما باید ابرداده را با محدودیت های کلی زیر بنویسید:
-      1. نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید
-      2. کامپایلر فقط می تونه به نمادهایی که صادر شده اند ارجاع دهد
-      3. فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید
-      4. اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.
+     در Angular، باید metadata رو با محدودیت های کلی زیر نوشت:
+     1. نحو عبارت رو با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسیم
+     2. کامپایلر فقط می تونه به نمادهایی که صادر شده ان ارجاع بده
+     3. فقط توابع پشتیبانی شده توسط کامپایلر رو فراخوانی کنیم
+     4. اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشن.
 
      **[فهرست](#فهرست)**
 
 83. ### فاز های کامپایل با استفاده از AOT چیا هستن؟
 
-     کامپایلر AOT در سه فاز کار می کند،
-      1. **تحلیل کد:** کامپایلر نمایشی از منبع را ثبت می کند
-      2. **تولید کد:** تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.
-      3. ** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.
+     کامپایلر AOT تو سه فاز کار می کنه
+     1. **تحلیل کد:** کامپایلر نمایشی از منبع رو ثبت می کنه
+     2. **تولید کد:** تفسیر رو کنترل می کنه و همچنین محدودیت هایی رو در مورد آنچه تفسیر می کنه ایجاد می کنه.
+     3. **اعتبار سنجی:** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کنه.
 
      **[فهرست](#فهرست)**
 
 84. ###  ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
 
-     خیر، توابع پیکان یا توابع لامبدا را نمی توان برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. به عنوان مثال، قطعه زیر نامعتبر است:
+     نه arrow function یا توابع لامبدا رو نمیشه برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. برای مثال، کد زیر اعتباری نداره:
 
      
      
@@ -2082,7 +2082,7 @@ puppeteer:
      
      
 
-     To fix this, it has to be changed as following exported function:
+     برای حل این مشکل کد بالا رو به شکل زیر تغییر میدیم:
      
      
 
@@ -2100,27 +2100,27 @@ puppeteer:
      
      
 
-     اگر همچنان از تابع arrow استفاده می کنید، یک گره خطا به جای تابع ایجاد می کند. وقتی کامپایلر بعداً این گره را تفسیر می‌کند، یک خطا گزارش می‌کند تا تابع فلش را به یک تابع صادر شده تبدیل کند.
-    **نکته:** از Angular5 به بعد، کامپایلر به طور خودکار این بازنویسی را در حین انتشار فایل js. انجام می دهد.
+     اگه هنوز از تابع arrow استفاده می کنین یک گره خطا به جای تابع ایجاد می کنه. وقتی کامپایلر بعداً این گره رو تفسیر می‌کنه، یک خطا گزارش می کنه تا تابع فلش را به یک تابع صادر شده تبدیل کنه.
+    **نکته:** از Angular5 به بعد، کامپایلر به طور خودکار این بازنویسی رو در حین انتشار فایل js. انجام می ده.
 
      **[فهرست](#فهرست)**
 
 85. ### هدف از استفاده از فایل های metadata json چیه؟
      
-     فایل metadata.json را می‌توان به‌عنوان نموداری از ساختار کلی فراداده‌های تزئینگر، که به‌عنوان یک درخت نحو انتزاعی (AST) نشان داده می‌شود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمع‌آورنده AOT ابرداده‌های ثبت‌شده در تزئینات Angular را اسکن می‌کند و اطلاعات فراداده را در فایل‌های .metadata.json، یک عدد برای هر فایل .d.ts، خروجی می‌دهد.
+     فایل metadata.json رو میشه به‌عنوان نموداری از ساختار کلی metadata های تزئینگر، که به‌عنوان یک درخت نحو انتزاعی (AST) نشان داده می‌شود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمع‌آورنده AOT ابرداده‌های ثبت‌شده در تزئینات Angular رو اسکن می‌کنه و اطلاعات metadata رو در فایل‌های .metadata.json، یک عدد برای هر فایل .d.ts، خروجی می‌ده.
 
      **[فهرست](#فهرست)**
 
 86. ###  توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
      
-     خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کند. اگر عبارتی از نحو پشتیبانی نشده استفاده کند، گردآورنده یک گره خطا در فایل .metadata.json می نویسد. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به آن تکه متادیتا نیاز داشته باشد، خطایی را گزارش می‌کند.
+     خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کنه. اگر عبارتی از نحو پشتیبانی نشده استفاده کنه گردآورنده یک گره خطا در فایل .metadata.json می نویسه. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به اون تکه metadata ها نیاز داشته باشه خطایی رو گزارش می‌کنه.
 
      **[فهرست](#فهرست)**
 
 87. ### folding چیه؟
 
-     کامپایلر فقط میتونه ارجاعات به نمادهای صادر شده در ابرداده را حل کند. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا می شوند. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت را در حین جمع آوری ارزیابی می کند و نتیجه را به جای عبارت اصلی در .metadata.json ثبت می کند.
-     به عنوان مثال، کامپایلر نمی تونه مرجع انتخابگر را ارجاع دهد زیرا صادر نشده است
+     کامپایلر فقط میتونه ارجاعات به نمادهای export شده در metadata رو حل کنه. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا میشن. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت رو در حین جمع آوری ارزیابی می کنه و نتیجه رو به جای عبارت اصلی در .metadata.json ثبت می کنه.
+     برای مثال، کامپایلر نمی تونه مرجع انتخابگر رو ارجاع بده چون export نشده
      
      
 
@@ -2133,7 +2133,7 @@ puppeteer:
      
      
 
-     در انتخابگر درون خطی تا می شود
+     در انتخابگر درون خطی تا میشه
      
      
 
@@ -2145,14 +2145,14 @@ puppeteer:
      
      
 
-     به یاد داشته باشید که کامپایلر نمی تونه همه چیز را تا کند. به عنوان مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
+     به یاد داشته باشین که کامپایلر نمی تونه همه چیز رو fold کنه. برای مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
 
     **[فهرست](#فهرست)**
 
 88. ### macros چیه؟
 
-     کامپایلر AOT از ماکروها به شکل توابع یا متدهای ایستا پشتیبانی می کند که عبارتی را در یک عبارت بازگشتی واحد برمی گرداند.
-      به عنوان مثال، یک تابع ماکرو زیر را در نظر بگیرید،
+     کامپایلر AOT از macro ها به شکل توابع یا متدهای ایستا پشتیبانی می کنه که عبارتی رو در یک عبارت بازگشتی واحد برمی گرداند.
+     برای مثال، یک تابع macro زیر رو در نظر بگیرین
      
      
 
@@ -2164,7 +2164,7 @@ puppeteer:
 
      
 
-    می توانید از آن در داخل ابرداده به عنوان یک عبارت استفاده کنید،
+    می تونین از اون توی داخل metadata به عنوان یک عبارت استفاده کنین
 
 
      
@@ -2179,7 +2179,7 @@ puppeteer:
      
      
 
-     The compiler treats the macro expression as it written directly
+     کامپایلر با عبارات macro مثل نوشته شدن مستقیم رفتار میکنه
      
      
 
@@ -2197,8 +2197,8 @@ puppeteer:
 89. ### چن تا مثال از ارور های مربوط به metatdata بزن؟
 
 
-     1. **فرم عبارت پشتیبانی نمی شود:** برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های انگولاری استفاده می شود می توانند این خطا را ایجاد کنند.
-         بیایید برخی از این نمونه ها را ببینیم،
+     1. **فرم عبارت پشتیبانی نمیشه:** برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که تو فراداده های انگولاری استفاده میشه می تونن این خطا رو ایجاد کنن.
+     بعضی از این نمونه ها رو ببینیم،
     
      
      
@@ -2212,7 +2212,7 @@ puppeteer:
      
 
      2. **ارجاع به یک نماد محلی (غیرصادراتی):** کامپایلر با نماد ارجاعی به یک نماد تعریف شده محلی مواجه شد که یا صادر نشده یا مقداردهی اولیه نشده است.
-      بیایید این خطا را مثال بزنیم،
+     برای مثال
     
      
      
@@ -2234,6 +2234,7 @@ puppeteer:
      
 
      You can fix this by either exporting or initializing the value,
+     برای حل این مشکل یا میتونیم مقدار رو export بگیریم یا مقدار رو تعریف کنیم
      
      
 
@@ -2245,7 +2246,7 @@ puppeteer:
      
      
 
-     3. ** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمی‌توانید useFactory ارائه‌دهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
+     3. **فراخوانی تابع پشتیبانی نمیشه:** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کنه. برای مثال، نمی‌توانید useFactory ارائه‌دهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
 
      
 
@@ -2258,7 +2259,7 @@ puppeteer:
      
      
 
-     You can fix this with exported function
+     میتونیم این مشکل رو با تابع export شده حل کنیم
      
      
 
@@ -2274,7 +2275,7 @@ puppeteer:
      
      
 
-     4. **متغیر تخریب شده یا ثابت پشتیبانی نمی شود:** کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
+     4. **متغیر تخریب شده یا ثابت پشتیبانی نمیشه:** کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی رو پشتیبانی نمی کنه. برای مثال، ما نمی تونیم چیزی شبیه به این بتویسیم:
      
      
 
@@ -2292,7 +2293,7 @@ puppeteer:
      
      
 
-     شما می توانید این مشکل را با مقادیر غیر تخریب شده برطرف کنید
+     ما می تونیم این مشکل رو با مقادیر غیر تخریب شده برطرف کنیم
 
      
 
@@ -2311,13 +2312,13 @@ puppeteer:
 
 90. ### منظور از metadata rewriting چیه؟
 
-     بازنویسی متادیتا فرآیندی است که در آن کامپایلر عبارتی را که فیلدهایی مانند useClass، useValue، useFactory و داده را مقداردهی اولیه می کند، به یک متغیر صادر شده تبدیل می کند که جایگزین عبارت می شود. به یاد داشته باشید که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می دهد اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی دهد.
+     metadata rewriting فرآینده که تو اون کامپایلر عبارتی رو که فیلدهایی مانند useClass، useValue، useFactory و داده رو مقداردهی اولیه می کنه، به یک متغیر صادر شده تبدیل می کنه که جایگزین عبارت میشه. به یاد داشته باشیم که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می ده اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی ده.
 
     **[فهرست](#فهرست)**
 
 91. ### توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
 
-     Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.
+     Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی میکنه. برای مثال، پیکربندی از فایل پایه (برای مثال، tsconfig.base.json) ابتدا بارگیری میشه، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو میشن.
      
      
 
@@ -2342,7 +2343,7 @@ puppeteer:
 
 92. ### چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
 
-     گزینه های کامپایلر قالب انگولاری به عنوان اعضای شی **angularCompilerOptions** در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.
+     گزینه های کامپایلر قالب انگولاری به عنوان اعضای شی **angularCompilerOptions** در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص میشن.
      
      
 
@@ -2366,7 +2367,7 @@ puppeteer:
 
 93. ### چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
 
-     شما می توانید صریحاً با افزودن گزینه کامپایلر **fullTemplateTypeCheck** در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.
+     شما می تونین صریحاً با افزودن گزینه کامپایلر **fullTemplateTypeCheck** در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده میشه، پیام های خطا تولید میکنه.
 
      برای مثال، جزء زیر را در نظر بگیرید:
 
@@ -2385,7 +2386,7 @@ puppeteer:
      
      
 
-     این باعث ایجاد خطای زیر می شود:
+     این باعث ایجاد خطای زیر میشه:
      
      
 
@@ -2399,7 +2400,7 @@ puppeteer:
 
 94. ### هدف از any type توی cast function چیه؟
 
-     می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
+     می تونین بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
      
      
 
@@ -2409,7 +2410,7 @@ puppeteer:
      
      
 
-     تابع $any() cast نیز با این کار می کند تا امکان دسترسی به اعضای اعلام نشده کامپوننت را فراهم کند.
+     تابع $any() cast نیز با این کار میکنه تا امکان دسترسی به اعضای اعلام نشده کامپوننت را فراهم کنه.
      
      
 
@@ -2423,7 +2424,7 @@ puppeteer:
 
 95. ### اپراتور non null assertion چیه؟
      
-     برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
+     برای سرکوب خطای Object is assibly 'undefined' می تونین از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم میشن، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
 
      
      
@@ -2450,7 +2451,7 @@ puppeteer:
 
 96. ### منظور از type narrowing چیه؟
 
-     عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
+     عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده میشه. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کنه که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
 
      
      
@@ -2473,9 +2474,9 @@ puppeteer:
 
      بخش وابستگی های package.json با در یک برنامه انگولاری را می توان به صورت زیر تقسیم کرد:
 
-     1. ** بسته های انگولاری: ** هسته انگولاری و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.
+     1. **بسته های انگولاری:** هسته انگولاری و ماژول های اختیاری. نام بسته آنها @angular/ شروع میشه.
      2. **بسته های پشتیبانی:** کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.
-     3. ** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.
+     3. **بسته های Polyfill:** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل میکنه.
 
      **[فهرست](#فهرست)**
 
@@ -2493,7 +2494,7 @@ puppeteer:
 
 100. ### codelyzer چیه؟
 
-     Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.
+     Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می تونین تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی میکنه و می توان از آن به صورت زیر استفاده کرد.
      
      
 
@@ -2508,7 +2509,7 @@ puppeteer:
 
 101. ### angular animation چیه؟
 
-     سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگی‌ها شامل موقعیت‌ها، اندازه‌ها، تبدیل‌ها، رنگ‌ها، حاشیه‌ها و غیره است. ماژول‌های Angular برای انیمیشن‌ها **@angular/animations** و **@angular/platform-browser** هستند و این وابستگی‌ها به طور خودکار به پروژه شما اضافه می‌شوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
+     سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کنه. این ویژگی‌ها شامل موقعیت‌ها، اندازه‌ها، تبدیل‌ها، رنگ‌ها، حاشیه‌ها و غیره است. ماژول‌های Angular برای انیمیشن‌ها **@angular/animations** و **@angular/platform-browser** هستند و این وابستگی‌ها به طور خودکار به پروژه شما اضافه می‌شوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
 
      **[فهرست](#فهرست)**
 
@@ -2516,7 +2517,7 @@ puppeteer:
 
      برای پیاده سازی انیمیشن در پروژه انگولاری خود باید مراحل زیر را دنبال کنید.
 
-     1. **Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیت‌های انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).
+     1. **Enabling the animations module:** BrowserAnimationsModule رو import کنین تا قابلیت‌های انیمیشن را به ماژول برنامه Angular root خود اضافه کنین (برای مثال، src/app/app.module.ts).
      
      
      
@@ -2539,7 +2540,7 @@ puppeteer:
      
      
 
-     2. **Importing animation functions into component files:** توابع انیمیشن مورد نیاز را از @angular/animations در فایل‌های مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts).
+     2. **Importing animation functions into component files:** توابع انیمیشن مورد نیازتون رو از @angular/animations در فایل‌های مؤلفه import کنین (برای مثال، src/app/app.component.ts).
      
      
      
@@ -2557,7 +2558,7 @@ puppeteer:
      
      
 
-     3. **Adding the animation metadata property:** یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
+     3. **Adding the animation metadata property:** یک ویژگی metadata به نام animations اضافه کنین: در دکوراتور @Component() در فایل های کامپوننت (برای مثال src/app/app.component.ts)
      
      
      
@@ -2579,9 +2580,9 @@ puppeteer:
 
 103. ### تابع state چیه؟
 
-     تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
+     تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده میشه. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
 
-      به عنوان مثال، می توانید یک تابع حالت باز بنویسید 
+     برای مثال، می تونین یک تابع حالت باز بنویسین 
      
      
 
@@ -2599,7 +2600,7 @@ puppeteer:
 
 104. ### هدف از تابع style چیه؟
 
-     تابع style برای تعریف مجموعه‌ای از سبک‌ها برای مرتبط کردن با یک نام وضعیت استفاده می‌شود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
+     تابع style برای تعریف مجموعه‌ای از سبک‌ها برای مرتبط کردن با یک نام وضعیت استفاده می‌شود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. برای مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
 
  
      
@@ -2671,7 +2672,7 @@ puppeteer:
 
 106. ### تابع transition چیه؟
 
-     تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.
+     تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده میشه. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص میکنه و آرگومان دوم تابع animate() را می پذیرد.
 
       بیایید یک مثال انتقال حالت از باز به بسته با انتقال نیم ثانیه بین حالت ها را در نظر بگیریم.
 
@@ -2716,17 +2717,17 @@ puppeteer:
 
 108. ### service worker چیه و نقشش توی انگولار چیه؟
 
-     Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
+     Service Worker یک اسکریپت است که در مرورگر وب اجرا میشه و حافظه پنهان یک برنامه را مدیریت میکنه. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه میشه. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کنه یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
 
      **[فهرست](#فهرست)**
 
 109. ### اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
 
-     1. یک برنامه را مانند نصب یک برنامه بومی کش می کند
+     1. یک برنامه را مانند نصب یک برنامه بومی کش میکنه
      2. یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
-     3. هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند
-     4. هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود
-     5. Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.
+     3. هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری میکنه
+     4. هنگامی که تغییرات منتشر میشه، بلافاصله در پس زمینه به روز میشه
+     5. Service Workers پهنای باند را با بارگیری منابع صرفه جویی میکنه که فقط زمانی که آنها تغییر کرده اند.
 
      **[فهرست](#فهرست)**
 
@@ -2736,7 +2737,7 @@ puppeteer:
 
       | AngularJS | Angular |
       |---- | ---------
-      | توکن های تزریق وابستگی همیشه رشته ای هستند | توکن ها می توانند انواع مختلفی داشته باشند. آنها اغلب کلاس هستند و گاهی اوقات می توانند رشته باشند. |
+      | توکن های تزریق وابستگی همیشه رشته ای هستند | توکن ها می تونن انواع مختلفی داشته باشند. آنها اغلب کلاس هستند و گاهی اوقات می تونن رشته باشند. |
       | دقیقاً یک انژکتور وجود دارد حتی اگر یک برنامه کاربردی چند ماژول است | یک سلسله مراتب درختی از انژکتورها وجود دارد که برای هر جزء یک انژکتور ریشه و یک انژکتور اضافی وجود دارد. |
 
      **[فهرست](#فهرست)**
@@ -2745,7 +2746,7 @@ puppeteer:
 
      Angular Ivy یک موتور رندر جدید برای Angular است. می‌توانید نسخه پیش‌نمایش Ivy را از نسخه 8 Angular انتخاب کنید.
 
-     1. با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید
+     1. با استفاده از پرچم --enable-ivy با دستور ng new می تونین ivy را در یک پروژه جدید فعال کنید
 
       
      
@@ -2776,7 +2777,7 @@ puppeteer:
 
 112. ### قابلیت هایی که توی حالت ivy وجود دارن چیا هستن؟
 
-     می توانید با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.
+     می تونین با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.
 
      1. کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است
      2. زمان بازسازی سریعتر
@@ -2787,7 +2788,7 @@ puppeteer:
 
 113. ### میتونیم از مدل کامپایل AOT توی حالت Ivy استفاده کنیم؟
 
-     بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کند.
+     بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کنه.
 
   
      
@@ -2816,13 +2817,13 @@ puppeteer:
 
 114. ### سرویس زبان انگولار چیه؟
 
-     سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالب‌های Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیه‌نویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا می کند و سپس تمام خدمات زبان را ارائه می دهد.
+     سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالب‌های Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیه‌نویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا میکنه و سپس تمام خدمات زبان را ارائه می دهد.
 
      **[فهرست](#فهرست)**
 
 115. ### چطوری از سرویس زبان انگولار توی پروژمون استفاده کنیم؟
 
-     با دستور npm زیر می توانید Angular Language Service را در پروژه خود نصب کنید.
+     با دستور npm زیر می تونین Angular Language Service را در پروژه خود نصب کنید.
 
      
 
@@ -2844,7 +2845,7 @@ puppeteer:
      
      
 
-     **نکته:** خدمات تکمیل و تشخیص فقط برای فایل های .ts کار می کند. برای پشتیبانی از فایل های HTML باید از افزونه های سفارشی استفاده کنید.
+     **نکته:** خدمات تکمیل و تشخیص فقط برای فایل های .ts کار میکنه. برای پشتیبانی از فایل های HTML باید از افزونه های سفارشی استفاده کنید.
 
      **[فهرست](#فهرست)**
 
@@ -2873,10 +2874,10 @@ puppeteer:
      **[فهرست](#فهرست)**
 
 118. ### چطوری web worker توی پروژه ات اضافه می کنی؟
-     شما می توانید وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، می‌توانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد می‌کند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد
+     شما می تونین وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، می‌توانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد می‌کند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد
 
      1. پروژه خود را برای استفاده از Web Workers پیکربندی کنید
-     2. app.worker.ts را برای دریافت پیام اضافه می کند
+     2. app.worker.ts را برای دریافت پیام اضافه میکنه
       
      
      
@@ -2909,7 +2910,7 @@ puppeteer:
      
      
 
-     **نکته:** ممکن است نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
+     **نکته:** ممکنه نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
 
      **[فهرست](#فهرست)**
 
@@ -2922,22 +2923,22 @@ puppeteer:
      **[فهرست](#فهرست)**
 
 120. ### Angular CLI Builder چیه؟
-     در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، می‌توانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدام ابزار شخص ثالث توسط یک دستور موجود استفاده می‌شود، فراهم کنید.
+     در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، می‌توانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدوم ابزار شخص ثالث توسط یک دستور موجود استفاده می‌شود، فراهم کنید.
 
      **[فهرست](#فهرست)**
 
 121. ### منظور از Builder چیه؟
-     یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده می کند. کد سازنده در یک بسته npm تعریف شده است. به عنوان مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا می کند و KarmaBuilder سرور Karma را راه اندازی می کند و یک بسته وب را برای آزمایش های واحد اجرا می کند.
+     یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده میکنه. کد سازنده در یک بسته npm تعریف شده است. برای مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا میکنه و KarmaBuilder سرور Karma را راه اندازی میکنه و یک بسته وب را برای آزمایش های واحد اجرا میکنه.
 
      **[فهرست](#فهرست)**
 
 122. ### چطوری یه builder رواجرا میکنی؟
-     دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده می شود. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیش‌فرض برای سازنده‌های داخلی است.
+     دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده میشه. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیش‌فرض برای سازنده‌های داخلی است.
 
      **[فهرست](#فهرست)**
 
 123. ### چطوری توی انگولار یه app shell ایجاد میکنی؟
-     پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر می شود مفید است زیرا مرورگر می تونه HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می توانید با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد می کند، به این هدف برسید.
+     پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر میشه مفید است چون مرورگر می تونه HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می تونین با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد میکنه، به این هدف برسید.
 
   
      
@@ -2954,18 +2955,18 @@ puppeteer:
 
 124. ### استانداردcase type ها برای استفاده توی انگولار چیا هستن؟
 
-     Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده می کند. Angular لیستی از انواع موارد زیر را دنبال می کند.
+     Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده میکنه. Angular لیستی از انواع موارد زیر را دنبال میکنه.
 
-     1. **camelCase :** نمادها، ویژگی‌ها، روش‌ها، نام pipe ها، انتخاب‌کننده‌های دستورالعمل غیرمولفه، ثابت‌ها از حروف کوچک در حرف اول آیتم استفاده می‌کنند. به عنوان مثال، "selectedUser"
+     1. **camelCase :** نمادها، ویژگی‌ها، روش‌ها، نام pipe ها، انتخاب‌کننده‌های دستورالعمل غیرمولفه، ثابت‌ها از حروف کوچک در حرف اول آیتم استفاده می‌کنند. برای مثال، "selectedUser"
      2. **UpperCamelCase (or PascalCase):** نام کلاس‌ها، از جمله کلاس‌هایی که اجزا، رابط‌ها، NgModules، دستورالعمل‌ها و pipe ها را تعریف می‌کنند، از حروف بزرگ در حرف اول آیتم استفاده می‌کنند.
-     3. **dash-case (or "kebab-case"):** در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list".
-     4. **UPPER_UNDERSCORE_CASE:** همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS".
+     3. **dash-case (or "kebab-case"):** در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده میشه. برای مثال، "app-user-list".
+     4. **UPPER_UNDERSCORE_CASE:** همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. برای مثال، "NUMBER_OF_USERS".
 
      **[فهرست](#فهرست)**
 
 125. ### class decorator ها توی انگولار چیا هستن؟
 
-     دکوراتور کلاس، دکوراتوری است که بلافاصله قبل از تعریف کلاس ظاهر می شود، که کلاس را از نوع معین اعلام می کند و ابرداده مناسب برای نوع را فراهم می کند.
+     دکوراتور کلاس، دکوراتوری است که بلافاصله قبل از تعریف کلاس ظاهر میشه، که کلاس را از نوع معین اعلام میکنه و ابرداده مناسب برای نوع را فراهم میکنه.
 
      لیست زیر از دکوراتورها در زیر کلاس دکوراتورها آمده است:
 
@@ -2979,7 +2980,7 @@ puppeteer:
 
 126. ### class field decorator چیه؟
 
-     دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام می شوند که نوع آن فیلد را مشخص می کند. برخی از نمونه ها عبارتند از: @input و @output، 
+     دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام میشن که نوع آن فیلد را مشخص میکنه. برخی از نمونه ها عبارتند از: @input و @output، 
      
      
 
@@ -2994,7 +2995,7 @@ puppeteer:
 
 127. ### declarable توی انگولار چیه ؟
 
-     Declarable یک نوع کلاس است که می توانید آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود  
+     Declarable یک نوع کلاس است که می تونین آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود  
      
      
 
@@ -3041,12 +3042,12 @@ puppeteer:
 
 130. ### Angular DSL چیه؟
 
-     یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه می‌دهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل می کند که مرورگر بتونه آن را درک کند. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.
+     یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه می‌دهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل میکنه که مرورگر بتونه آن را درک کنه. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.
 
       اساساً شما 3 نحو اصلی را در Angular DSL خواهید دید.
 
-     1. `()`: برای رویدادهای خروجی و DOM استفاده می شود.
-     2. `[]`: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.
+     1. `()`: برای رویدادهای خروجی و DOM استفاده میشه.
+     2. `[]`: برای ورودی و ویژگی های خاص عنصر DOM استفاده میشه.
      3. `*`: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.
 
      **[فهرست](#فهرست)**
@@ -3081,22 +3082,22 @@ puppeteer:
 
 132.  ### Bazel tool چیه؟
 
-     Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تونه وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید.
+     Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تونه وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کنه. در Angular8 می تونین برنامه CLI خود را با Bazel بسازید.
      **نکته:** خود فریم ورک Angular با Bazel ساخته شده است.
 
      **[فهرست](#فهرست)**
 
 133.  ### مزایای استفاده از ابزار Bazel چیه؟
 
-     1. این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
+     1. این امکان را ایجاد میکنه که با همان ابزار بک اند و جلویی شما را بسازید
      2. ساخت افزایشی و تست
-     3. این امکان را ایجاد می کند که از راه دور ساخت و حافظه پنهان در یک مزرعه ساخت.
+     3. این امکان را ایجاد میکنه که از راه دور ساخت و حافظه پنهان در یک مزرعه ساخت.
 
      **[فهرست](#فهرست)**
 
 134. ### چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟
 
-     بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
+     بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کنه.
      1. **Use in an existing applciation:** @angular/bazel را با استفاده از CLI اضافه کنید
      
      
@@ -3117,13 +3118,13 @@ puppeteer:
      ```
      
      
-     وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده می شود و نتایج را در پوشه dist/bin خروجی می دهد.
+     وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده میشه و نتایج را در پوشه dist/bin خروجی می دهد.
 
      **[فهرست](#فهرست)**
 
 135. ### چطوری ابزار Bazel رو مستقیما اجرا میکنی؟
 
-     گاهی اوقات ممکن است بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می توانید با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
+     گاهی اوقات ممکنه بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می تونین با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
 
      
 
@@ -3139,23 +3140,23 @@ puppeteer:
 
 136. ### platform توی انگولار چیه؟
 
-     پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تونه یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بسته‌های angular/platform-*@ ارائه می‌شود و این بسته‌ها به برنامه‌هایی که از «@angular/core» و «@angular/common» استفاده می‌کنند اجازه می‌دهند در محیط‌های مختلف اجرا شوند.
-      به عنوان مثال، Angular می تونه به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،
+     پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا میشه. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تونه یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بسته‌های angular/platform-*@ ارائه می‌شود و این بسته‌ها به برنامه‌هایی که از «@angular/core» و «@angular/common» استفاده می‌کنند اجازه می‌دهند در محیط‌های مختلف اجرا شوند.
+      برای مثال، Angular می تونه به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، برای مثال،
 
-     1. در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
-      2. هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
+     1. در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده میکنه.
+      2. هنگامی که SSR (رندر سمت سرور) استفاده میشه، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده میکنه.
 
      **[فهرست](#فهرست)**
 
 137. ### اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟
 
-     اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
+     اگر چندین ماژول یک ماژول را وارد کنه، angular آن را فقط یک بار ارزیابی میکنه (وقتی اولین بار با ماژول روبرو میشه). از این شرط پیروی میکنه حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر میشه.
 
      **[فهرست](#فهرست)**
 
 138. ### چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟
 
-     برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل `@ViewChild` استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
+     برای دسترسی مستقیم به عناصر موجود در نما می تونین از دستورالعمل `@ViewChild` استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
      
      
 
@@ -3184,7 +3185,7 @@ puppeteer:
 
 139. ### چطوری توی انگولار route رو تغییر میدی؟
 
-     در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
+     در Angular7 می تونین برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
 
      
 
@@ -3262,19 +3263,19 @@ puppeteer:
 
 141. ### هدف از defferentail loading توی CLI چیه؟
 
-     از انتشار Angular8 به بعد، برنامه‌ها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته می‌شوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
+     از انتشار Angular8 به بعد، برنامه‌ها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته میشن تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازنس.
 
-     1. اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره می‌برد، پلی‌فیل‌های کمتری ارسال می‌کند و منجر به اندازه بسته‌ای کوچک‌تر می‌شود.
-      2. ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلی‌فیل‌های لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
+     1. اولین ساخت شامل نحو ES2015 هس که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره می‌برد، plyfill ها کمتری ارسال می‌کند و منجر به اندازه بسته‌ای کوچک‌تر میشه.
+     2. ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام plyfill های لازمه. اما این باعث میشه اندازه بسته بزرگتر شه.
 
-     **نکته:** این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
+     **نکته:** این استراتژی برای پشتیبانی از چندین مرورگر استفاده میشه، اما فقط کد مورد نیاز مرورگر را بارگیری میکنه.
 
      **[فهرست](#فهرست)**
 
 142. ### انگولار از dynamic import پشتیبانی میگنه؟
 
-     بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، می‌توانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
-      قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را می‌پذیرد و در طول زمان ساخت، خطا می‌دهد.
+     بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی میکنه. برای مثال، میتونین از دستور import برای lazy loading ماژول با استفاده از روش «loadChildren» استفاده کنین و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
+     قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی رو با lazy loading کنین. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته رو می‌پذیرد و موقع build خطا میده.
  
      
      
@@ -3285,7 +3286,7 @@ puppeteer:
      
      
 
-     این مشکل با استفاده از واردات پویا حل می شود و IDE ها می توانند آن را در طول زمان کامپایل پیدا کنند.
+     این مشکل با استفاده از واردات پویا حل میشه و IDE ها می تونن اون رو در طول زمان کامپایل پیدا کنن.
  
      
      
@@ -3300,7 +3301,7 @@ puppeteer:
 
 143. ### منظور از lazy loading چیه؟
 
-     Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
+     Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing هس. این به ما کمک میکنه تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب رو به صورت تکه ای دانلود کنیم. برای Lazy loading با بارگیری async ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده میشه. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» رو مثل زیر بارگیری کنیم.
  
      
      
@@ -3329,7 +3330,7 @@ puppeteer:
 
 144. ### workspace API چیه؟
 
-     نسخه Angular 8.0 API های Workspace را معرفی می کند تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کند. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده می‌شود. می‌توانید گزینه بهینه‌سازی را برای build target به صورت زیر فعال یا اضافه کنید.
+     نسخه Angular 8.0 API های Workspace را معرفی میکنه تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کنه. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده می‌شود. می‌توانید گزینه بهینه‌سازی را برای build target به صورت زیر فعال یا اضافه کنید.
  
      
      
@@ -3366,7 +3367,7 @@ puppeteer:
 
 145. ### چطوری ورژن انگولار رو آپدیت میکنی؟
 
-     ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
+     ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. برای مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده lazy شما به صورت خودکار به نحو واردات جدید منتقل میشه.
      
      
 
@@ -3380,7 +3381,7 @@ puppeteer:
 
 146. ### Angular Material چیست؟
 
-     Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
+     Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی میکنه. با استفاده از Angular Material می تونین Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
      
      
 
@@ -3392,7 +3393,7 @@ puppeteer:
      
      
 
-     از دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی می کند. آخرین نسخه متریال Angular 8.1.1 است
+     از دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی میکنه. آخرین نسخه متریال Angular 8.1.1 است
 
      **[فهرست](#فهرست)**
 
@@ -3422,13 +3423,13 @@ puppeteer:
 
 148. ### NgUpgrade چیه؟
 
-     NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
+     NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می تونین از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
 
      **[فهرست](#فهرست)**
 
 149. ### چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟
 
-     Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. به‌طور پیش‌فرض، این دستور برنامه را در حالت تماشا می‌سازد و «Karma test runner» را راه‌اندازی می‌کند. خروجی نتایج آزمون به صورت زیر خواهد بود:
+     Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب میکنه. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. به‌طور پیش‌فرض، این دستور برنامه را در حالت تماشا می‌سازد و «Karma test runner» را راه‌اندازی می‌کند. خروجی نتایج آزمون به صورت زیر خواهد بود:
      
      
 
@@ -3443,17 +3444,17 @@ puppeteer:
      
      
 
-     **نکته:** یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
+     **نکته:** یک مرورگر کروم نیز باز میشه و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
 
      **[فهرست](#فهرست)**
 
 150. ### چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟
 
-     Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی `src/polyfills.ts` به عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
+     Angular CLI به طور رسمی از polyfills پشتیبانی میکنه. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی `src/polyfills.ts` به عنوان بخشی از پوشه پروژه شما ایجاد میشه. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
 
-     1. **Mandatory polyfills:** هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
+     1. **Mandatory polyfills:** هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب میشن.
      2. **Optional polyfills:** شما باید بسته npm آن را نصب کنید و سپس دستور import را در فایل 'src/polyfills.ts' ایجاد کنید.
-     به عنوان مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
+     برای مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
      
      
 
@@ -3479,8 +3480,8 @@ puppeteer:
 
      می‌توانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روش‌های خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
 
-     1. **ApplicationRef.tick():** از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
-     2. **NgZone.run(callback):** عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
+     1. **ApplicationRef.tick():** از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی میکنه.
+     2. **NgZone.run(callback):** عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی میکنه.
      3. **ChangeDetectorRef.detectChanges():** فقط اجزاء و بچه ها را تشخیص می دهد.
 
      **[فهرست](#فهرست)**
@@ -3508,13 +3509,13 @@ puppeteer:
      4. **Angular 4:**
           * اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است.
           * با Angular 4 اندازه بسته‌های تولیدی صدها کیلوبایت کاهش می‌یابد.
-          * ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود.
+          * ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل میشه.
           * پشتیبانی از Typescript 2.1 و 2.2.
           * جهانی انگولاری
           * HttpClient جدید
      5. **Angular 5:**
-          * Angular 5 انگولاری را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید.
-          * با بهینه ساز ساخت جدید ارسال می شود.
+          * Angular 5 انگولاری را سریعتر میکنه. زمان بارگذاری و زمان اجرا را بهبود بخشید.
+          * با بهینه ساز ساخت جدید ارسال میشه.
           * پشتیبانی از Typescript 2.5.
           * کارگر خدماتی
      6. **Angular 6:**
@@ -3530,8 +3531,8 @@ puppeteer:
           * TypeScript 3.1
           * RxJS 6.3
           * Angular CLI جدید
-          * قابلیت CLI Prompts توانایی پرسیدن سوالات از کاربر را قبل از اجرا فراهم می کند. مانند گفتگوی تعاملی بین کاربر و CLI است
-          * با بهبود قابلیت CLI Prompts، به توسعه دهندگان کمک می کند تا تصمیم بگیرند. دستورات جدید ng از کاربران می‌خواهند مسیریابی و انواع سبک‌های CSS (SCSS) و ng add @angular/material تم و ژست‌ها یا انیمیشن‌ها را می‌خواهد.
+          * قابلیت CLI Prompts توانایی پرسیدن سوالات از کاربر را قبل از اجرا فراهم میکنه. مانند گفتگوی تعاملی بین کاربر و CLI است
+          * با بهبود قابلیت CLI Prompts، به توسعه دهندگان کمک میکنه تا تصمیم بگیرند. دستورات جدید ng از کاربران می‌خواهند مسیریابی و انواع سبک‌های CSS (SCSS) و ng add @angular/material تم و ژست‌ها یا انیمیشن‌ها را می‌خواهد.
      8. **Angular 8:**
           * در ماه می 2019 منتشر شد.
           * TypeScript 3.4
@@ -3561,7 +3562,7 @@ puppeteer:
 
 154. ### چرا فریم ورک های web tracking 
 
-     Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمی شود و در اکثر برنامه ها شکسته می شود، در آخرین نسخه منسوخ شده است.
+     Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمیشه و در اکثر برنامه ها شکسته میشه، در آخرین نسخه منسوخ شده است.
 
      **[فهرست](#فهرست)**
 
@@ -3605,14 +3606,14 @@ puppeteer:
 
 157. ### ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟
 
-     Angular از جدیدترین مرورگرها پشتیبانی می کند که شامل مرورگرهای دسکتاپ و موبایل می شود.
+     Angular از جدیدترین مرورگرها پشتیبانی میکنه که شامل مرورگرهای دسکتاپ و موبایل میشه.
 
      | مرورگر | نسخه |
      |---- | --------- |
      | کروم | آخرین |
      | فایرفاکس | آخرین |
      | لبه | 2 جدیدترین نسخه اصلی |
-     | IE | 11، 10، 9 (حالت سازگاری پشتیبانی نمی شود) |
+     | IE | 11، 10، 9 (حالت سازگاری پشتیبانی نمیشه) |
      | سافاری | 2 جدیدترین نسخه اصلی |
      | اینترنت اکسپلورر موبایل | 11 |
      | iOS | 2 جدیدترین نسخه اصلی |
@@ -3622,7 +3623,7 @@ puppeteer:
 
 158. ### schematic چیه؟
 
-     این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف می کند. قوانینی را تعریف می کند که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
+     این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف میکنه. قوانینی را تعریف میکنه که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
 
      **[فهرست](#فهرست)**
 
@@ -3634,7 +3635,7 @@ puppeteer:
 
 160. ### Schematics CLI چیه؟
 
-     طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه می شوند. برای نصب شماتیک های اجرایی استفاده می شود که می توانید از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می توانید از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می توانید Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
+     طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه میشن. برای نصب شماتیک های اجرایی استفاده میشه که می تونین از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می تونین از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می تونین Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
      
      
 
@@ -3658,30 +3659,30 @@ puppeteer:
 
 162. ### توی انگولار چطوری از XSS Atack جلوگیری میکنی؟
 
-     Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. به عنوان مثال، Angular پاکسازی می‌کند و از مقادیر نامعتبر فرار می‌کند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درون‌یابی در DOM درج می‌شود.
+     Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. برای مثال، Angular پاکسازی می‌کند و از مقادیر نامعتبر فرار می‌کند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درون‌یابی در DOM درج می‌شود.
 
      **[فهرست](#فهرست)**
 
 163. ### قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟
 
-     کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری می کند و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه می شود از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
+     کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری میکنه و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه میشه از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
 
      **[فهرست](#فهرست)**
 
 164. ### موضوع های امنیتی توی انگولار چیا هستن؟
 
-     Angular زمینه های امنیتی زیر را برای پاکسازی تعریف می کند:
+     Angular زمینه های امنیتی زیر را برای پاکسازی تعریف میکنه:
 
-     1. **HTML:** هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده می شود.
-     2. **Style:** هنگام اتصال CSS به ویژگی style استفاده می شود.
-     3. **URL:** برای ویژگی های URL مانند `` استفاده می شود.
-     4. **Resource URL:** این یک URL است که به عنوان کدی مانند `
      37.