From 09c91334d7e31ca37c9a5923d4efc2c9acd26331 Mon Sep 17 00:00:00 2001 From: jesus re Date: Thu, 14 Sep 2023 18:56:30 +0330 Subject: [PATCH] linking question 70 to 100 --- Book.html | 14286 +++++++++++----------------------------------------- Book.md | 60 +- 2 files changed, 2919 insertions(+), 11427 deletions(-) diff --git a/Book.html b/Book.html index c1a48f8..73c3a0c 100644 --- a/Book.html +++ b/Book.html @@ -6,893 +6,1299 @@ - + -
-
-Mariotek -

مجموعه سوال و جواب‌های انگولار

+
+
+
+
+ به نام خدا +
+
+ مجموعه سوال و جواب‌های + انگولار +
+
+ عیسی رضائی +
+
+
+ +
+ +
+Mariotek +

مجموعه سوال و جواب‌های انگولار

-

اگه از کتاب خوشتون اومد به گیت‌هابمون مراجعه کنین و بهمون ⭐ بدین. اگر هم قصد مشارکت داشتید همونجا می‌تونین شروع کنین و ما هم خیلی خوشحال می‌شیم 😃

+

اگه از کتاب خوشتون اومد به گیت‌هابمون مراجعه کنین و بهمون ⭐️ بدین. اگر هم قصد مشارکت داشتید همونجا می‌تونین شروع کنین و ما هم خیلی خوشحال می‌شیم 😃

-

لینک گیت‌هاب ما برای مشارکت برای تولید کتاب‌ها: https://github.com/mariotek

+

لینک گیت‌هاب ما برای مشارکت برای تولید کتاب‌ها: https://github.com/mariotek

 -

نحوه دانلود کتاب به فرمت‌های PDF/Epub

-

می‌تونین خیلی راحت نسخه آنلاین کتاب استفاده کنین یا اگه به فایل کتاب می‌خوایین دسترسی داشته باشین، از بخش ریلیزهای گیت‌هاب به فرمت‌های مختلف آخرین نسخه کتاب رو می‌تونین دریافت کنین.

+

نحوه دانلود کتاب به فرمت‌های PDF/Epub

+

می‌تونین خیلی راحت نسخه آنلاین کتاب استفاده کنین یا اگه به فایل کتاب می‌خوایین دسترسی داشته باشین، از بخش ریلیزهای گیت‌هاب به فرمت‌های مختلف آخرین نسخه کتاب رو می‌تونین دریافت کنین.




-

فهرست

+

فهرست

- - + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -900,7 +1306,7 @@

فهرست

- + @@ -908,35 +1314,35 @@

فهرست

- + - + - + - + - + - + - + - + @@ -944,291 +1350,291 @@

فهرست

- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
ردیفسوالردیفسوال
1فریمورک انگولار چیه؟فریمورک انگولار چیه؟
2فرق بین انگولار و انگولار جی اس چیه؟فرق بین انگولار و انگولار جی اس چیه؟
3تایپ اسکریپت چیه؟تایپ اسکریپت چیه؟
4یه دیاگرام تصویری از ساختار انگولار بنویس؟یه دیاگرام تصویری از ساختار انگولار بنویس؟
5کامپوننت های کلیدی انگولار کدوما هستن؟کامپوننت های کلیدی انگولار کدوما هستن؟
6directives ها چیا هستن؟directives ها چیا هستن؟
7کامپوننت ها چیا هستن؟کامپوننت ها چیا هستن؟
8تفاوت های بین directive و کامپوننت چیه؟تفاوت های بین directive و کامپوننت چیه؟
9template چیه؟template چیه؟
10ماژول چیه؟ماژول چیه؟
11lifecycle های مربوط به انگولار چیا هستن؟lifecycle های مربوط به انگولار چیا هستن؟
12data binding چیه؟data binding چیه؟
13metadata چیه؟metadata چیه؟
14Angular CLI چی هست؟Angular CLI چی هست؟
15فرق بین constructor و ngOnInit چیه؟فرق بین constructor و ngOnInit چیه؟
16service چیه؟service چیه؟
17dependency injection توی انگولار یعنی چی؟dependency injection توی انگولار یعنی چی؟
18ساختار Dependency توی انگولار چطوری چیده میشه؟ساختار Dependency توی انگولار چطوری چیده میشه؟
19هدف از AsyncPipe چیه؟هدف از AsyncPipe چیه؟
20بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
21هدف از directive ngFor چی هستش؟هدف از directive ngFor چی هستش؟
22هدف از directive ngIf چیه؟هدف از directive ngIf چیه؟
23اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟
24منظور از interpolation چیه؟منظور از interpolation چیه؟
25template expressions ها چیا هستن?template expressions ها چیا هستن?
26template statements ها چیا هستن؟template statements ها چیا هستن؟
27چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟
28pipe ها چیا هستن؟pipe ها چیا هستن؟
29یه pipe منظور از پارامتردار شده چیه؟یه pipe منظور از پارامتردار شده چیه؟
30چطوری زنجیره ای از pipe ها میسازی؟چطوری زنجیره ای از pipe ها میسازی؟
31منظور از pipe سفارشی شده چیه؟منظور از pipe سفارشی شده چیه؟
32یه مثال از pipe سفارشی شده بزن؟یه مثال از pipe سفارشی شده بزن؟
33فرق بین pure pipe و impure pipe چیه؟فرق بین pure pipe و impure pipe چیه؟
34منظور از botstrapping module چیه؟منظور از botstrapping module چیه؟
35observable ها چیا هستن؟observable ها چیا هستن؟
36HttpClient چیه و مزیت های اون چیا هستن؟HttpClient چیه و مزیت های اون چیا هستن؟
37چطوری از HttpClient استفاده کنیم؟چطوری از HttpClient استفاده کنیم؟
38چطوری response ها رو به صورت کامل بخونیم؟چطوری response ها رو به صورت کامل بخونیم؟
39چطوری عمل error handling رو انجام میدی؟چطوری عمل error handling رو انجام میدی؟
40RxJS چیه؟RxJS چیه؟
41subscribing چیه؟subscribing چیه؟
42منطور از observable یه چیه؟منطور از observable یه چیه؟
43observer جیه؟observer جیه؟
44تفاوت بین pronise و یه oberservable چیه؟تفاوت بین pronise و یه oberservable چیه؟
45multicasting چیه؟multicasting چیه؟
46جطوری روی observevable ها error handling انجام میدی؟جطوری روی observevable ها error handling انجام میدی؟
47مختصر شده متصد subscribe چیه؟مختصر شده متصد subscribe چیه؟
48توابع مفیدی روی RxJS وجود دارن چیا هستن؟توابع مفیدی روی RxJS وجود دارن چیا هستن؟
49توابع سازنده observable چیا هستن؟توابع سازنده observable چیا هستن؟
50چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟
51element های انگولار چیا هستن؟element های انگولار چیا هستن؟
52پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
53element های کاستوم شده چیا هستن؟element های کاستوم شده چیا هستن؟
54bootstrap کردن element های کاستوم شده لازمه؟bootstrap کردن element های کاستوم شده لازمه؟
55ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟
56چطوری کامپوننت عا رو به custom element تبدیل کنیم؟چطوری کامپوننت عا رو به custom element تبدیل کنیم؟
57قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
58چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟
59کامپوننت های داینامیک چیا هستن؟کامپوننت های داینامیک چیا هستن؟
60انواع مختلف directive ها کدوما هستن؟انواع مختلف directive ها کدوما هستن؟
61چطوری با استفاده از CLI یه directive درست میکنی؟چطوری با استفاده از CLI یه directive درست میکنی؟
62یه مثال از استفاده directive با اتریبیوت بزن؟یه مثال از استفاده directive با اتریبیوت بزن؟
63Angular Router چیه؟Angular Router چیه؟
64هدف از base href tag چیه؟هدف از base href tag چیه؟
65import های مربوط به router چیه؟import های مربوط به router چیه؟
66router outlet چیه؟router outlet چیه؟
67router link ها چیا هستن؟router link ها چیا هستن؟
68منظور از router link های active جیه؟منظور از router link های active جیه؟
69منظور از router state چیه؟منظور از router state چیه؟
70event های مربوط به router چیا هستن؟event های مربوط به router چیا هستن؟
71منظور از activated route چیه؟منظور از activated route چیه؟
72چطوری router های پروژه ات رو تعریف میکنی؟چطوری router های پروژه ات رو تعریف میکنی؟
73هدف از Wildcard route چیه؟هدف از Wildcard route چیه؟
74ما همیشه به routing module نیاز داریم؟ما همیشه به routing module نیاز داریم؟
75Angular Universal چیه؟Angular Universal چیه؟
76انگولار به چن روش کامپایل میشه؟انگولار به چن روش کامپایل میشه؟
77JIT چیه؟JIT چیه؟
78AOT چیه؟AOT چیه؟
79چرا ما به پروسه کامپایل نیاز داریم؟چرا ما به پروسه کامپایل نیاز داریم؟
80مزایای استفاده از AOT چیه؟مزایای استفاده از AOT چیه؟
81روش های کنترل کامپایل شدن با AOT چیا هستن؟روش های کنترل کامپایل شدن با AOT چیا هستن؟
82محدودیت هایی که روی metadata وجود داره چیا هستن؟محدودیت هایی که روی metadata وجود داره چیا هستن؟
83فاز های کامپایل با استفاده از AOT چیا هستن؟فاز های کامپایل با استفاده از AOT چیا هستن؟
84 ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟ ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
85هدف از استفاده از فایل های metadata json چیه؟هدف از استفاده از فایل های metadata json چیه؟
86 توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟ توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
87folding چیه؟folding چیه؟
88macros چیه؟macros چیه؟
89چن تا مثال از ارور های مربوط به metatdata بزن؟چن تا مثال از ارور های مربوط به metatdata بزن؟
90منظور از metadata rewriting چیه؟منظور از metadata rewriting چیه؟
91توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
92چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
93چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
94هدف از any type توی cast function چیه؟هدف از any type توی cast function چیه؟
95non null تایپ non null تایپ
96منظور از type narrowing چیه؟منظور از type narrowing چیه؟
97چطوری dependency های مختلف توی انگولار تعریف میکنی؟چطوری dependency های مختلف توی انگولار تعریف میکنی؟
98zone توی انگولار چیه؟zone توی انگولار چیه؟
99هدف از ماژول مشترک توی انگولار چیه؟هدف از ماژول مشترک توی انگولار چیه؟
100codelyzer چیه؟codelyzer چیه؟
101angular animation چیه؟angular animation چیه؟
102مراحل استفاده از ماژول های animation چیه؟مراحل استفاده از ماژول های animation چیه؟
103تابع state چیه؟تابع state چیه؟
104هدف از تابع style چیه؟هدف از تابع style چیه؟
105هدف از تابع animate چیه؟هدف از تابع animate چیه؟
106تابع transition چیه؟تابع transition چیه؟
107چطوری کد های dynamاسکریپت های رو توی کدمون وارد کنیم؟چطوری کد های dynamاسکریپت های رو توی کدمون وارد کنیم؟
108service worker چیه و نقشش توی انگولار چیه؟service worker چیه و نقشش توی انگولار چیه؟
109اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
110تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟
111Angular Ivy چیه؟Angular Ivy چیه؟
112قابلیت هایی که توی حالت ivy وجود دارن چیا هستن؟قابلیت هایی که توی حالت ivy وجود دارن چیا هستن؟
113میتونیم از مدل کامپایل AOT توی حالت Ivy استفاده کنیم؟میتونیم از مدل کامپایل AOT توی حالت Ivy استفاده کنیم؟
114سرویس زبان انگولار چیه؟سرویس زبان انگولار چیه؟
115چطوری از سرویس زبان انگولار توی پروژمون استفاده کنیم؟چطوری از سرویس زبان انگولار توی پروژمون استفاده کنیم؟
116ادیتوری که سرویس زبان انگولار رو ساپورت گنن وجود داره؟ادیتوری که سرویس زبان انگولار رو ساپورت گنن وجود داره؟
117قابلیت هایی که توی سرویس زبان انگولار وجود دارن چیا هستن؟قابلیت هایی که توی سرویس زبان انگولار وجود دارن چیا هستن؟
118چطوری web worker توی پروژه ات اضافه می کنی؟چطوری web worker توی پروژه ات اضافه می کنی؟
119محدودیت ها موقع استفاده کردن از Web worker ها چیا هستن؟محدودیت ها موقع استفاده کردن از Web worker ها چیا هستن؟
120Angular CLI Builder چیه؟Angular CLI Builder چیه؟
121منظور از Builder چیه؟منظور از Builder چیه؟
122چطوری یه builderچطوری یه builder
123چطوری توی انگولار یه app shell ایجاد میکنی؟چطوری توی انگولار یه app shell ایجاد میکنی؟
124استانداردcase type ها برای استفاده توی انگولار چیا هستن؟استانداردcase type ها برای استفاده توی انگولار چیا هستن؟
125class decorator ها توی انگولار چیا هستن؟class decorator ها توی انگولار چیا هستن؟
126class feild decorator چیه؟class feild decorator چیه؟
127declarable توی انگولار چیه ؟declarable توی انگولار چیه ؟
128محدودیت هایی که توی declarble class ها داریم چیا هستن؟محدودیت هایی که توی declarble class ها داریم چیا هستن؟
129DI token چیه؟DI token چیه؟
130Angular DSL چیه؟Angular DSL چیه؟
131rxjs Subject چیه؟rxjs Subject چیه؟
132Bazel tool چیه؟Bazel tool چیه؟
133مزایای استفاده از ابزار Bazel چیه؟مزایای استفاده از ابزار Bazel چیه؟
134چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟
135چطوری ابزار Bazel رو مستقیما اجرا میکنی؟چطوری ابزار Bazel رو مستقیما اجرا میکنی؟
136platform توی انگولار چیه؟platform توی انگولار چیه؟
137اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟
138چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟
139چطوری توی انگولار route رو تغییر میدی؟چطوری توی انگولار route رو تغییر میدی؟
140چطوری headers رو برای کاربر HTTP میفرستی؟چطوری headers رو برای کاربر HTTP میفرستی؟
141هدف از defferentail loading توی CLI چیه؟هدف از defferentail loading توی CLI چیه؟
142انگولار از dynamic import پشتیبانی میگنه؟انگولار از dynamic import پشتیبانی میگنه؟
143منظور از lazy loading چیه؟منظور از lazy loading چیه؟
144منظور از workspace API چیه؟منظور از workspace API چیه؟
145چطوری ورژن انگولار رو بروزرسانی میکنی؟چطوری ورژن انگولار رو بروزرسانی میکنی؟
146Angular Material چیه؟Angular Material چیه؟
147چطوری location service رو توی انگولار اپدیت میکنی؟چطوری location service رو توی انگولار اپدیت میکنی؟
148NgUpgrade چیه؟NgUpgrade چیه؟
149چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟
150چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟
151روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟
152ورژن های مختلف انگولار چیا هستن و تفاوتشون چیه؟ورژن های مختلف انگولار چیا هستن و تفاوتشون چیه؟
153قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟
154چرا دیگه از فریم ورک های web tracking استفاده نمیشه؟ چرا دیگه از فریم ورک های web tracking استفاده نمیشه؟
155چرا دیگه از پکیج های web worker استفاده نمیشه؟چرا دیگه از پکیج های web worker استفاده نمیشه؟
156چطوری ورژن CLI انگولار رو پیدا میکنی؟چطوری ورژن CLI انگولار رو پیدا میکنی؟
157ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟
158schematic چیه؟schematic چیه؟
159قوانینی که توی Schematices چیا هستن؟قوانینی که توی Schematices چیا هستن؟
160Schematics CLI چیه؟Schematics CLI چیه؟
161بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟
162توی انگولار چطوری از XSS Atack جلوگیری میکنی؟توی انگولار چطوری از XSS Atack جلوگیری میکنی؟
163قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟
164موضوع های امنیتی مختلف که توی انگولار وجود دارن چیا هستن؟موضوع های امنیتی مختلف که توی انگولار وجود دارن چیا هستن؟
165Sanitization چیه و انگولار ازش پشتیبانی میکنه؟Sanitization چیه و انگولار ازش پشتیبانی میکنه؟
166هدف از innerHTML چیه؟هدف از innerHTML چیه؟
167تفاوت بین interpolated content و innerHTML چیه؟تفاوت بین interpolated content و innerHTML چیه؟
168چطوری از sanitizaltion خودکار جلوگیری میکنی؟چطوری از sanitizaltion خودکار جلوگیری میکنی؟
169استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟
170DOM sanitizer چیه؟DOM sanitizer چیه؟
171چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟
172انگولار از حمله های سطح http جلوگیری میکنه؟انگولار از حمله های سطح http جلوگیری میکنه؟
173Http 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چطوری برای مناطق مختلف build رو کانفیگ میکنی؟چطوری برای مناطق مختلف build رو کانفیگ میکنی؟
189منظور از کتابخونه انگولار چیه؟منظور از کتابخونه انگولار چیه؟
190کامپایلر AOT چیه؟کامپایلر AOT چیه؟
191چطوری یه المنت رو از توی ساختار کامپوننت انتخاب میکنی؟چطوری یه المنت رو از توی ساختار کامپوننت انتخاب میکنی؟
192TestBed چیه؟TestBed چیه؟
193protractor چیه؟protractor چیه؟
194منظور زا collection چیه؟منظور زا collection چیه؟
195
196چطوری از Jquery توی انگولار استفاده میکنی؟چطوری از Jquery توی انگولار استفاده میکنی؟
197
198منظور از router state چیه؟منظور از router state چیه؟
199چطوری میتونم از SASS توی پروژه انگولار استفاده کنم؟چطوری میتونم از SASS توی پروژه انگولار استفاده کنم؟
200هدف از hidden property چیه؟هدف از hidden property چیه؟
201فرق بین ngIf و hidden property چیه؟فرق بین ngIf و hidden property چیه؟
202slice pipe چیه؟slice pipe چیه؟
203برای دابرکتیو ngFor پراپرتی index چیه؟برای دابرکتیو ngFor پراپرتی index چیه؟
204هدف از ngFor trackBy چیه؟هدف از ngFor trackBy چیه؟
205هدف از دایرکتیو ngSwitch چیه؟هدف از دایرکتیو ngSwitch چیه؟
206
207منظور از اپراتور امن safe navigation چیه؟منظور از اپراتور امن safe navigation چیه؟
208تنظیمات خاصی برای انگولار 9 نیازه؟تنظیمات خاصی برای انگولار 9 نیازه؟
209تغییرات تایپ های امن TestBed API توی انگولار 9 چیا بودن؟تغییرات تایپ های امن TestBed API توی انگولار 9 چیا بودن؟
210ارسال فلگ static برای ViewChild اجباریه؟ارسال فلگ static برای ViewChild اجباریه؟
211لیست مربوط به اپراتور های template expression چیا هستن؟لیست مربوط به اپراتور های template expression چیا هستن؟
212فرق بین pipe و ternary operator ها چیه؟فرق بین pipe و ternary operator ها چیه؟
213منظور از entry component چیه؟منظور از entry component چیه؟
214منظور از bootstraped component چیه؟منظور از bootstraped component چیه؟
215چطوری به صورت دستی یه app رو bootstrap میکنی؟چطوری به صورت دستی یه app رو bootstrap میکنی؟
216لازمه که یه کامپوننت رو بوت استرپ کنیم که به یه entry component تبدیل بشه؟لازمه که یه کامپوننت رو بوت استرپ کنیم که به یه entry component تبدیل بشه؟
217منظور از routed entry component چیه؟منظور از routed entry component چیه؟
218چرا استفاده از آزایه entry coponenet همیشه اجباری نیست؟ چرا استفاده از آزایه entry coponenet همیشه اجباری نیست؟
219ما توی انگولار 9 به آرایه entry component نیاز داریم؟ ما توی انگولار 9 به آرایه entry component نیاز داریم؟
220همه ی کامپوننت ها موقع build گرفتن ایحاد میشن؟همه ی کامپوننت ها موقع build گرفتن ایحاد میشن؟
221منظور از کامپایلر انگولار چیه؟منظور از کامپایلر انگولار چیه؟
222نقش ngModule metadata توی مراحل کامپایل چیه ؟نقش ngModule metadata توی مراحل کامپایل چیه ؟
223انگولار چطوری کامپوننت ها رو تشخیص میده؟ با directive ها یا pipe ها؟انگولار چطوری کامپوننت ها رو تشخیص میده؟ با directive ها یا pipe ها؟
224یه مثال برای NgModules بزن؟یه مثال برای NgModules بزن؟
225feature module ها چیا هستن؟feature module ها چیا هستن؟
226ماژول های import شده داخل CLI ساخته شده توسط feature module ها چیا هستن؟ماژول های import شده داخل CLI ساخته شده توسط feature module ها چیا هستن؟
227تفاوت های بین ngmodule و javascript module چیا هستن؟تفاوت های بین ngmodule و javascript module چیا هستن؟
228ارور هایی که میتونه با declaration ایجاد بشه چیا هستن؟ارور هایی که میتونه با declaration ایجاد بشه چیا هستن؟
229مراحلی که باید طی بشه برای اینکه declaration element استفاده کنیم چیا هستن؟مراحلی که باید طی بشه برای اینکه declaration element استفاده کنیم چیا هستن؟
230چه اتفاقی میوفته اگه ما از browserModule داخل feature module استفاده کنیم؟چه اتفاقی میوفته اگه ما از browserModule داخل feature module استفاده کنیم؟
231تایپ های مربوط به feature module ها چیا هستن؟تایپ های مربوط به feature module ها چیا هستن؟
232منظور از provider چیه؟منظور از provider چیه؟
233نیازمندی های مروبط به provider scope چیا هستن؟نیازمندی های مروبط به provider scope چیا هستن؟
234چطوری یه ماژول رو برای provider scope اجباری میکنی؟چطوری یه ماژول رو برای provider scope اجباری میکنی؟
235چطوری یه سرویس singleton رو ایجاد میکنی؟چطوری یه سرویس singleton رو ایجاد میکنی؟
236روش های مختلف حذف سرویس های تکراری register شده چیه؟روش های مختلف حذف سرویس های تکراری register شده چیه؟
237چطوری متد forRoot برای جلوگیری از duplicate شدن router instance مناسبه؟چطوری متد forRoot برای جلوگیری از duplicate شدن router instance مناسبه؟
238منظور از shared module چیه؟منظور از shared module چیه؟
239میتونیم سرویس هایی رو بر اساس ماژول به اشتراک بذاریم؟میتونیم سرویس هایی رو بر اساس ماژول به اشتراک بذاریم؟
240چطوری direction فعلی رو برای locales بدست میاری؟چطوری direction فعلی رو برای locales بدست میاری؟
241ngcc چیه؟ngcc چیه؟
242کدوم class ها نباید به declaration ها اضافه بشن؟کدوم class ها نباید به declaration ها اضافه بشن؟
243ngzone چیه؟ngzone چیه؟
244NoopZone چیه؟NoopZone چیه؟
245چطوری کامپوننت های displayBlock ایجاد میکنی؟چطوری کامپوننت های displayBlock ایجاد میکنی؟
246حالت هایی که موقع حساسیت به تغییر میتونه ایجاد بشه چیا هستن؟حالت هایی که موقع حساسیت به تغییر میتونه ایجاد بشه چیا هستن؟
247منظور از zone context چیه؟منظور از zone context چیه؟
248هوک های lifecycle مروبوط به یک zone چیا هستن؟هوک های lifecycle مروبوط به یک zone چیا هستن؟
249چه متد هایی از ngZone برای کنترل حساسیت تغییر استفاده میشه؟چه متد هایی از ngZone برای کنترل حساسیت تغییر استفاده میشه؟
250جطوری تنظیمات مربوط به zonejs رو تغییر میدی؟جطوری تنظیمات مربوط به zonejs رو تغییر میدی؟
251چطوری یه انیمیشن رو trigger میکنی؟چطوری یه انیمیشن رو trigger میکنی؟
252چطوری injector ها رو با provider ها برای لول های مختلف کانفیگ میکنی؟چطوری injector ها رو با provider ها برای لول های مختلف کانفیگ میکنی؟
253آیا استفاده از تزریق در هر کلاس service اجباریه؟آیا استفاده از تزریق در هر کلاس service اجباریه؟
254منظور از optional dependency چیه؟منظور از optional dependency چیه؟
255تایپ های مربوط به injector هرمی چیا هستن؟تایپ های مربوط به injector هرمی چیا هستن؟
256reactive form ها چیا هستن؟reactive form ها چیا هستن؟
257dynamic form ها چیا هستن؟dynamic form ها چیا هستن؟
258template driven form ها چیا هستن؟template driven form ها چیا هستن؟
259فرق بین فرم های ری اکتیو و template driven form ها چیا هستن؟فرق بین فرم های ری اکتیو و template driven form ها چیا هستن؟
260روش هایی که برای group کردن فرم کنترل ها وجود داره چیا هستن؟روش هایی که برای group کردن فرم کنترل ها وجود داره چیا هستن؟
261چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟>چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟>
262هدف از FormBuilder چیه؟هدف از FormBuilder چیه؟
263چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟
264کلاس هایی که با ngModel تامین شدن چیا هستن؟کلاس هایی که با ngModel تامین شدن چیا هستن؟
265چطوری یه فرم رو ریست میکنی؟چطوری یه فرم رو ریست میکنی؟
266تایپ های مربوط به validator فانکشن چیا هستن؟تایپ های مربوط به validator فانکشن چیا هستن؟
267میتونی چن تا مثال از validator های build-in بزنی ؟میتونی چن تا مثال از validator های build-in بزنی ؟
268چطوری پرفورمنس validator های async رو بیتشر میکنی؟چطوری پرفورمنس validator های async رو بیتشر میکنی؟
269چطوری ngfor و ngIf برای یه المان همزمان تنظیم کنیم؟چطوری ngfor و ngIf برای یه المان همزمان تنظیم کنیم؟
270منظور از پراپرتی host توی css چیه؟منظور از پراپرتی host توی css چیه؟
271چطوری route فعلی رو بدست میاری؟چطوری route فعلی رو بدست میاری؟
272مهار تست های کامپوننت چیه؟مهار تست های کامپوننت چیه؟
273مزایای inlining اتوماتیک چیه؟مزایای inlining اتوماتیک چیه؟
274content projection چیه؟content projection چیه؟
275ng-content به چی میگن و هدف از اون چیه؟ng-content به چی میگن و هدف از اون چیه؟
  1. -

    فریمورک انگولار چیه؟

    -

    Angular یک پلت‌فرم فرانت‌اند منبع باز مبتنی بر TypeScript است که ساخت برنامه‌ها را در وب/موبایل/کامپیوتر آسان می‌کند. از ویژگی های اصلی این فریم ورک مانند قالب های اعلامی، تزریق وابستگی، ابزارهای انتها به انتها و بسیاری ویژگی های دیگر برای سهولت توسعه استفاده می شود.

    -

    فهرست

    +

    فریمورک انگولار چیه؟

    +

    Angular یک پلت‌فرم فرانت‌اند منبع باز مبتنی بر TypeScript است که ساخت برنامه‌ها را در وب/موبایل/کامپیوتر آسان می‌کند. از ویژگی های اصلی این فریم ورک مانند قالب های اعلامی، تزریق وابستگی، ابزارهای انتها به انتها و بسیاری ویژگی های دیگر برای سهولت توسعه استفاده می شود.

    +

    فهرست

  2. -

    فرق بین انگولار و انگولار جی اس چیه؟

    -

    Angular یک فریم ورک کاملاً احیا شده مبتنی بر مؤلفه است که در آن یک برنامه کاربردی درختی از اجزای جداگانه است.

    +

    فرق بین انگولار و انگولار جی اس چیه؟

    +

    Angular یک فریم ورک کاملاً احیا شده مبتنی بر مؤلفه است که در آن یک برنامه کاربردی درختی از اجزای جداگانه است.

    @@ -1238,388 +1644,94 @@

    فرق بین انگولار و انگولار جی اس چیه؟

    - - + + - - + + - - + + - - + + - - + +
    این بر اساس معماری MVC استاین بر اساس Service/Controller استاین بر اساس معماری MVC استاین بر اساس Service/Controller است
    از جاوا اسکریپت برای ساخت برنامه استفاده می کندبرای نوشتن برنامه، TypeScript را معرفی کرداز جاوا اسکریپت برای ساخت برنامه استفاده می کندبرای نوشتن برنامه، TypeScript را معرفی کرد
    بر اساس مفهوم کنترلرهااین یک رویکرد UI مبتنی بر مؤلفه استبر اساس مفهوم کنترلرهااین یک رویکرد UI مبتنی بر مؤلفه است
    یک چارچوب سازگار با موبایل نیستبا توجه به پلتفرم تلفن همراه توسعه یافته استیک چارچوب سازگار با موبایل نیستبا توجه به پلتفرم تلفن همراه توسعه یافته است
    مشکل در توسعه برنامه کاربردی SEO دوستانهسهولت در ایجاد برنامه های کاربردی سئو دوستانهمشکل در توسعه برنامه کاربردی SEO دوستانهسهولت در ایجاد برنامه های کاربردی سئو دوستانه
    -

    فهرست

    +

    فهرست

  3. -

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

    -

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

    +

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

    +

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

    -
    npm install -g typescript
+
    npm install -g typescript
 
      
-
    Let's see a simple example of TypeScript usage,
    
+
    Let's see a simple example of TypeScript usage,
    
   
-
    function greeter(person: string) {
-     return "Hello, " + person;
+
    function greeter(person: string) {
+     return "Hello, " + person;
 }
 
-let user = "Sudheer";
+let user = "Sudheer";
 
 document.body.innerHTML = greeter(user);
 
      
-
    متد greeter فقط نوع رشته را به عنوان آرگومان مجاز می کند.
    
-
    فهرست
    
-
    4. -
  4. -

    یه دیاگرام تصویری از ساختار انگولار بنویس؟

    -

    بلوک های ساختمان اصلی یک برنامه Angular در نمودار زیر نشان داده شده است
    -ScreenShot

    -

    فهرست

    -
    5. -
  5. -

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

    +

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

    +

    فهرست

    +
    6. +
  6. +

    یه دیاگرام تصویری از ساختار انگولار بنویس؟

    +

    بلوک های ساختمان اصلی یک برنامه Angular در نمودار زیر نشان داده شده است
    +ScreenShot

    +

    فهرست

    +
    7. +
  7. +

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

      -
    1. Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
      2. -
    2. Modules: یک ماژول زاویه‌ای مجموعه‌ای از بلوک‌های ساختمانی پایه زاویه‌ای مانند کامپوننت، دستورالعمل‌ها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم می‌شود و هر قطعه کد به عنوان "ماژول" نامیده می‌شود که یک وظیفه را انجام می‌دهد.
      3. -
    3. Templates: این نماهای یک برنامه Angular را نشان می دهد.
      4. -
    4. Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
      5. -
    5. Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
      6. +

    6. Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.

      7. +

    7. Modules: یک ماژول زاویه‌ای مجموعه‌ای از بلوک‌های ساختمانی پایه زاویه‌ای مانند کامپوننت، دستورالعمل‌ها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم می‌شود و هر قطعه کد به عنوان "ماژول" نامیده می‌شود که یک وظیفه را انجام می‌دهد.

      8. +

    8. Templates: این نماهای یک برنامه Angular را نشان می دهد.

      9. +

    9. Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.

      10. +

    10. Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.

    -

    فهرست

    +

    فهرست

  8. -

    directives ها چیا هستن؟

    -

    directives ها رفتاری را به یک عنصر DOM موجود یا یک نمونه جزء موجود اضافه می کنند.

    +

    directives ها چیا هستن؟

    +

    directives ها رفتاری را به یک عنصر DOM موجود یا یک نمونه جزء موجود اضافه می کنند.

    -
    import { Directive, ElementRef, Input } from '@angular/core';
+
    import { Directive, ElementRef, Input } from '@angular/core';
 
-@Directive({ selector: '[myHighlight]' })
+@Directive({ selector: '[myHighlight]' })
 export class HighlightDirective {
      constructor(el: ElementRef) {
-          el.nativeElement.style.backgroundColor = 'yellow';
+          el.nativeElement.style.backgroundColor = 'yellow';
      }
 }
 
      
-
    اکنون این directive رفتار عنصر HTML را با پس‌زمینه زرد مانند زیر گسترش می‌دهد
    
+
    اکنون این directive رفتار عنصر HTML را با پس‌زمینه زرد مانند زیر گسترش می‌دهد
    
   
-
    <p myHighlight>Highlight me!</p>
+
    <p myHighlight>Highlight me!</p>
 
      
-
    فهرست
    
+
    فهرست
  9. -

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

    -

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

    +

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

    +

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

    -
    import { Component } from '@angular/core';
+
    import { Component } from '@angular/core';
 
 @Component ({
-     selector: 'my-app',
+     selector: 'my-app',
      template: ` <div>
      <h1>{{title}}</h1>
      <div>Learn Angular6 with examples</div>
@@ -1627,15 +1739,15 @@ 
    کامپوننت ها چیا هستن؟
    
 })
 
 export class AppComponent {
-     title: string = 'Welcome to Angular world';
+     title: string = 'Welcome to Angular world';
 }
 
      
-
    فهرست
    
+
    فهرست
  10. -

    تفاوت های بین directive و کامپوننت چیه؟

    -

    در یک یادداشت کوتاه، A component(@component) یک دستورالعمل-با-الگو است.

    -

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

    +

    تفاوت های بین directive و کامپوننت چیه؟

    +

    در یک یادداشت کوتاه، A component(@component) یک دستورالعمل-با-الگو است.

    +

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

    @@ -1645,73 +1757,73 @@

    تفاوت های بین directive و کامپوننت چیه؟

    - - + + - - + + - + - - + + - - + +
    برای ثبت یک مؤلفه، از حاشیه نویسی فراداده @Component استفاده می کنیمبرای ثبت دستورالعمل‌ها، از حاشیه‌نویسی فراداده @Directive استفاده می‌کنیمبرای ثبت یک مؤلفه، از حاشیه نویسی فراداده @Component استفاده می کنیمبرای ثبت دستورالعمل‌ها، از حاشیه‌نویسی فراداده @Directive استفاده می‌کنیم
    کامپوننت ها معمولا برای ایجاد ویجت های UI استفاده می شونددستورالعمل برای افزودن رفتار به یک عنصر DOM موجود استفاده می شودکامپوننت ها معمولا برای ایجاد ویجت های UI استفاده می شونددستورالعمل برای افزودن رفتار به یک عنصر DOM موجود استفاده می شود
    کامپوننت برای تقسیم برنامه به اجزای کوچکتر استفاده می شود دستورالعمل برای طراحی اجزای قابل استفاده مجدد استفاده می شودکامپوننت برای تقسیم برنامه به اجزای کوچکتر استفاده می شود دستورالعمل برای طراحی اجزای قابل استفاده مجدد استفاده می شود
    فقط یک جزء می تواند در هر عنصر DOM وجود داشته باشدبسیاری از دستورالعمل ها را می توان برای هر عنصر DOM استفاده کردفقط یک جزء می تواند در هر عنصر DOM وجود داشته باشدبسیاری از دستورالعمل ها را می توان برای هر عنصر DOM استفاده کرد
    @View decorator یا templateurl/template اجباری استدستورالعمل از View استفاده نمی کند@View decorator یا templateurl/template اجباری استدستورالعمل از View استفاده نمی کند
    -

    فهرست

    +

    فهرست

  11. -

    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';
+
    import { Component } from '@angular/core';
 
 @Component ({
-     selector: 'my-app',
-     template: '
+     selector: 'my-app',
+     template: '
      <div>
           <h1>{{title}}</h1>
           <div>Learn Angular</div>
      </div>
-     '
+     '
 })
 
 export class AppComponent {
-     title: string = 'Hello World';
+     title: string = 'Hello World';
 }
 
      
 
    Using separate template file such as app.component.html
    
   
-
    import { Component } from '@angular/core';
+
    import { Component } from '@angular/core';
 
 @Component ({
-     selector: 'my-app',
-     templateUrl: 'app/app.component.html'
+     selector: 'my-app',
+     templateUrl: 'app/app.component.html'
 })
 
 export class AppComponent {
-     title: string = 'Hello World';
+     title: string = 'Hello World';
 }
 
      
-
    فهرست
    
+
    فهرست
  12. -

    ماژول چیه؟

    -

    ماژول ها مرزهای منطقی در برنامه شما هستند و برنامه به ماژول های جداگانه تقسیم می شود تا عملکرد برنامه شما را از هم جدا کند.
    -بیایید مثالی از app.module.ts ماژول ریشه ای را که با دکوراتور @NgModule به شرح زیر اعلام شده است، بیاوریم.

    +

    ماژول چیه؟

    +

    ماژول ها مرزهای منطقی در برنامه شما هستند و برنامه به ماژول های جداگانه تقسیم می شود تا عملکرد برنامه شما را از هم جدا کند.
    +بیایید مثالی از app.module.ts ماژول ریشه ای را که با دکوراتور @NgModule به شرح زیر اعلام شده است، بیاوریم.

    -
    import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent }  from './app.component';
+
    import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent }  from './app.component';
 
 @NgModule ({
      imports:      [ BrowserModule ],
@@ -1721,93 +1833,81 @@ 
    ماژول چیه؟
    
 })
 export class AppModule { }
 
     
-
    دکوراتور NgModule پنج گزینه مهم (در میان همه) دارد
    
+
    دکوراتور NgModule پنج گزینه مهم (در میان همه) دارد
    
 
      
-
    1. گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
      2. 
-
    2. گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
      3. 
-
    3. گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
      4. 
-
    4. گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
      5. 
-
    5. گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
      6. 
-
    
-
    فهرست
    
-
    13. -
  13. -

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

    -

    برنامه Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک چرخه حیات دارد.
    -نمایش چرخه حیات در نمایش تصویری به شرح زیر است:

    -

    ScreenShot

    +

  14. گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است

    15. +

  15. گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود

    16. +

  16. گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند

    17. +

  17. گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.

    18. +

  18. گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.

    19. +
+

فهرست

+ +
  • +

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

    +

    برنامه Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک چرخه حیات دارد.
    +نمایش چرخه حیات در نمایش تصویری به شرح زیر است:

    +

    ScreenShot

      -
    1. ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.
      2. -
    2. ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.
      3. -
    3. ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.
      4. -
    4. ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.
      5. -
    5. ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.
      6. -
    6. ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.
      7. -
    7. ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.
      8. -
    8. ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.
      9. +

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

      10. +

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

      11. +

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

      12. +

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

      13. +

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

      14. +

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

      15. +

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

      16. +

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

    -

    فهرست

    +

    فهرست

  • -

    data binding چیه؟

    -

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

    +

    data binding چیه؟

    +

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

      -
    1. From the Component to the DOM:
      2. +

    2. From the Component to the DOM:

    -

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

    +

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

    -
    <li>Name: {{ user.name }}</li>
+
    <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">
+
    <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>
+
    <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">
+
    <input type="email" [(ngModel)]="user.email">
 
     
-
    فهرست
    
+
    فهرست
  • -

    What is metadata?

    -

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

    +

    What is metadata?

    +

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

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

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

    -
    import { NgModule, Component } from '@angular/core';
+
    import { NgModule, Component } from '@angular/core';
 
 @Component({
-     selector: 'my-component',
-     template: '<div>Class decorator</div>',
+     selector: 'my-component',
+     template: '<div>Class decorator</div>',
 })
 
 export class MyComponent {
      constructor() {
-          console.log('Hey I am a component!');
+          console.log('Hey I am a component!');
      }
 }
 
@@ -1817,19 +1917,19 @@ 
    What is metadata?
    
 })
 export class MyModule {
      constructor() {
-          console.log('Hey I am a module!');
+          console.log('Hey I am a module!');
      }
 }
 
     
 
      
-
    1. Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
      2. 
+
    2. Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
      3. 
 
    
  
-
    import { Component, Input } from '@angular/core';
+
    import { Component, Input } from '@angular/core';
 
 @Component({
-     selector: 'my-component',
-     template: '<div>Property decorator</div>'
+     selector: 'my-component',
+     template: '<div>Property decorator</div>'
 })
 
 export class MyComponent {
@@ -1838,32 +1938,32 @@ 
    What is metadata?
    
 }
 
     
 
      
-
    1. Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
      2. 
+
    2. Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
      3. 
 
    
  
-
    import { Component, HostListener } from '@angular/core';
+
    import { Component, HostListener } from '@angular/core';
 
 @Component({
-     selector: 'my-component',
-     template: '<div>Method decorator</div>'
+     selector: 'my-component',
+     template: '<div>Method decorator</div>'
 })
 export class MyComponent {
-     @HostListener('click', ['$event'])
+     @HostListener('click', ['$event'])
      onHostClick(event: Event) {
           // clicked, `event` available
      }
 }
 
     
 
      
-
    1. Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
      2. 
+
    2. Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
      3. 
 
    
  
-
    import { Component, Inject } from '@angular/core';
-import { MyService } from './my-service';
+
    import { Component, Inject } from '@angular/core';
+import { MyService } from './my-service';
 
 @Component({
-     selector: 'my-component',
-     template: '<div>Parameter decorator</div>'
+     selector: 'my-component',
+     template: '<div>Parameter decorator</div>'
 })
 export class MyComponent {
      constructor(@Inject(MyService) myService) {
@@ -1871,45 +1971,45 @@ 
    What is metadata?
    
      }
 }
 
     
-
    فهرست
    
+
    فهرست
  • -

    Angular CLI چی هست؟

    -

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

    +

    Angular CLI چی هست؟

    +

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

    -
    npm install @angular/cli@latest
+
    npm install @angular/cli@latest
 
     
-
    در زیر لیستی از چند دستور وجود دارد که هنگام ایجاد پروژه های زاویه ای به کار می آیند
    
+
    در زیر لیستی از چند دستور وجود دارد که هنگام ایجاد پروژه های زاویه ای به کار می آیند
    
 
      
 
    1. 
 
      Creating New Project: ng new 
      
 
      2. 
 
    2. 
 
      Generating Components, Directives & Services: 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: یک دستورالعمل به برنامه خود اضافه کنید
        • 
+
      • ng generate enum my-new-enum: یک enum به برنامه خود اضافه کنید
        • 
+
      • ng generate module my-new-module: یک ماژول به برنامه خود اضافه کنید
        • 
+
      • تولید لوله my-new-pipe: یک لوله به برنامه خود اضافه کنید
        • 
+
      • ng generate service my-new-service: یک سرویس به برنامه خود اضافه کنید
        • 
 
      
 
      3. 
 
    3. 
 
      Running the Project: ng serve
      
 
      4. 
 
    
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    -
    export class App implements OnInit{
+
    export class App implements OnInit{
      constructor(){
      //called first time before the ngOnInit()
      }
@@ -1919,48 +2019,48 @@ 
    فرق بین constructor و ngOnInit چیه؟
    
      }
 }
 
     
-
    فهرست
    
+
    فهرست
  • -

    service چیه؟

    -

    یک سرویس زمانی استفاده می شود که یک عملکرد مشترک باید به ماژول های مختلف ارائه شود. سرویس‌ها به شما اجازه می‌دهند تا نگرانی‌های مربوط به برنامه شما را بیشتر از هم جدا کرده و ماژولاریت بهتری داشته باشید، زیرا به شما امکان می‌دهد عملکردهای مشترک را از اجزا استخراج کنید.

    -

    بیایید یک repoService ایجاد کنیم که می تواند در بین اجزاء مورد استفاده قرار گیرد،

    +

    service چیه؟

    +

    یک سرویس زمانی استفاده می شود که یک عملکرد مشترک باید به ماژول های مختلف ارائه شود. سرویس‌ها به شما اجازه می‌دهند تا نگرانی‌های مربوط به برنامه شما را بیشتر از هم جدا کرده و ماژولاریت بهتری داشته باشید، زیرا به شما امکان می‌دهد عملکردهای مشترک را از اجزا استخراج کنید.

    +

    بیایید یک repoService ایجاد کنیم که می تواند در بین اجزاء مورد استفاده قرار گیرد،

    -
    import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+
    import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
 
 @Injectable({ // The Injectable decorator is required for dependency injection to work
      // providedIn option registers the service with a specific NgModule
-     providedIn: 'root',  // This declares the service with the root app (AppModule)
+     providedIn: 'root',  // This declares the service with the root app (AppModule)
 })
 export class RepoService{
      constructor(private http: Http){
      }
 
      fetchAll(){
-     return this.http.get('https://api.github.com/repositories');
+     return this.http.get('https://api.github.com/repositories');
      }
 }
 
     
-
    سرویس فوق از سرویس Http به عنوان یک وابستگی استفاده می کند.
    
-
    فهرست
    
+
    سرویس فوق از سرویس Http به عنوان یک وابستگی استفاده می کند.
    
+
    فهرست
  • -

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

    -

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

    -

    فهرست

    +

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

    +

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

    +

    فهرست

  • -

    ساختار Dependency توی انگولار چطوری چیده میشه؟

    -

    فهرست

    +

    ساختار Dependency توی انگولار چطوری چیده میشه؟

    +

    فهرست

  • -

    هدف از AsyncPipe چیه؟

    -

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

    -

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

    +

    هدف از AsyncPipe چیه؟

    +

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

    +

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

    -
    @Component({
-     selector: 'async-observable-pipe',
+
    @Component({
+     selector: 'async-observable-pipe',
      template: `<div><code>observable|async</code>:
           Time: {{ time | async }}</div>`
 })
@@ -1970,299 +2070,299 @@ 
    هدف از AsyncPipe چیه؟
    
      );
 }
 
     
-
    فهرست
    
+
    فهرست
  • -

    بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟

    -

    می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید آن را به صورت درون خطی با استفاده از ویژگی template تعریف کنید، یا می توانید الگو را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl در decorator @Component به آن در ابرداده کامپوننت پیوند دهید.

    -

    انتخاب بین HTML درون خطی و مجزا یک موضوع سلیقه، شرایط و خط مشی سازمان است. اما معمولاً از قالب درون خطی برای بخش کوچکی از کد و از فایل قالب خارجی برای نمایش های بزرگتر استفاده می کنیم. به طور پیش فرض، Angular CLI کامپوننت ها را با یک فایل الگو تولید می کند. اما می توانید با دستور زیر آن را لغو کنید

    +

    بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟

    +

    می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید آن را به صورت درون خطی با استفاده از ویژگی template تعریف کنید، یا می توانید الگو را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl در decorator @Component به آن در ابرداده کامپوننت پیوند دهید.

    +

    انتخاب بین HTML درون خطی و مجزا یک موضوع سلیقه، شرایط و خط مشی سازمان است. اما معمولاً از قالب درون خطی برای بخش کوچکی از کد و از فایل قالب خارجی برای نمایش های بزرگتر استفاده می کنیم. به طور پیش فرض، Angular CLI کامپوننت ها را با یک فایل الگو تولید می کند. اما می توانید با دستور زیر آن را لغو کنید

    -
    ng generate component hero -it
+
    ng generate component hero -it
 
     
-
    فهرست
    
+
    فهرست
  • -

    هدف از directive ngFor چی هستش؟

    -

    ما از دستورالعمل Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. به عنوان مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،

    +

    هدف از directive ngFor چی هستش؟

    +

    ما از دستورالعمل Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. به عنوان مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،

    -
    <li *ngFor="let user of users">
+
    <li *ngFor="let user of users">
      {{ user }}
 </li>
 
     
-
    متغیر کاربر در دستورالعمل ngFor دو نقل قول a استtemplate input variable
    
-
    فهرست
    
+
    متغیر کاربر در دستورالعمل ngFor دو نقل قول a استtemplate input variable
    
+
    فهرست
  • -

    هدف از directive ngIf چیه؟

    -

    گاهی اوقات یک برنامه فقط در شرایط خاص نیاز به نمایش یک نما یا بخشی از یک نما دارد. دستورالعمل Angular ngIf یک عنصر را بر اساس شرایط درستی/نادرستی درج یا حذف می کند. اگر سن کاربر بیش از 18 سال باشد، برای نمایش پیام مثالی می زنیم.

    +

    هدف از directive ngIf چیه؟

    +

    گاهی اوقات یک برنامه فقط در شرایط خاص نیاز به نمایش یک نما یا بخشی از یک نما دارد. دستورالعمل Angular ngIf یک عنصر را بر اساس شرایط درستی/نادرستی درج یا حذف می کند. اگر سن کاربر بیش از 18 سال باشد، برای نمایش پیام مثالی می زنیم.

    -
    <p *ngIf="user.age > 18">You are not eligible for student pass!</p>
+
    <p *ngIf="user.age > 18">You are not eligible for student pass!</p>
 
     
-
    Note: Angular پیام را نشان نمی دهد و پنهان نمی کند. در حال افزودن و حذف عنصر پاراگراف از DOM است. که عملکرد را بهبود می بخشد، به خصوص در پروژه های بزرگتر با اتصال داده های زیادی.
    
-
    فهرست
    
+
    Note: Angular پیام را نشان نمی دهد و پنهان نمی کند. در حال افزودن و حذف عنصر پاراگراف از DOM است. که عملکرد را بهبود می بخشد، به خصوص در پروژه های بزرگتر با اتصال داده های زیادی.
    
+
    فهرست
  • -

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

    -

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

    -

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

    +

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

    +

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

    +

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

    -
    export class InnerHtmlBindingComponent {
+
    export class InnerHtmlBindingComponent {
      // For example, a user/attacker-controlled value from a URL.
-     htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
+     htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
 }
 
     
-
    فهرست
    
+
    فهرست
  • -

    منظور از interpolation چیه؟

    -

    درون یابی یک نحو خاص است که Angular آن را به ویژگی binding تبدیل می کند. این یک جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده می شود. متن بین پرانتزها اغلب نام یک ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کند.

    -

    بیایید یک مثال بزنیم،

    +

    منظور از interpolation چیه؟

    +

    درون یابی یک نحو خاص است که Angular آن را به ویژگی binding تبدیل می کند. این یک جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده می شود. متن بین پرانتزها اغلب نام یک ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کند.

    +

    بیایید یک مثال بزنیم،

    -
    <h3>
+
    <h3>
      {{title}}
-     <img src="{{url}}" style="height:30px">
+     <img src="{{url}}" style="height:30px">
 </h3>
 
     
-
    در مثال بالا، Angular خصوصیات عنوان و url را ارزیابی می کند و جاهای خالی را پر می کند، ابتدا عنوان برنامه پررنگ و سپس URL نمایش داده می شود.
    
-
    فهرست
    
+
    در مثال بالا، Angular خصوصیات عنوان و url را ارزیابی می کند و جاهای خالی را پر می کند، ابتدا عنوان برنامه پررنگ و سپس URL نمایش داده می شود.
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    -
    <h3>{{username}}, welcome to Angular</h3>
+
    <h3>{{username}}, welcome to Angular</h3>
 
     
-
    عبارات جاوا اسکریپت زیر در عبارت قالب ممنوع هستند
    
+
    عبارات جاوا اسکریپت زیر در عبارت قالب ممنوع هستند
    
 
      
-
    1. assignments (=، +=، -=، ...)
      2. 
-
    2. new
      3. 
-
    3. زنجیره عبارات با ; یا ،
      4. 
-
    4. عملگرهای افزایش و کاهش (++ و --)
      5. 
+
    5. assignments (=، +=، -=، ...)
      6. 
+
    6. new
      7. 
+
    7. زنجیره عبارات با ; یا ،
      8. 
+
    8. عملگرهای افزایش و کاهش (++ و --)
      9. 
 
    
 
    
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

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

    +

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

    +

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

    +

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

    -
    <button (click)="editProfile()">Edit Profile</button>
+
    <button (click)="editProfile()">Edit Profile</button>
 
     
-
    در عبارت بالا، editProfile یک عبارت الگو است. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند.
    
+
    در عبارت بالا، editProfile یک عبارت الگو است. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند.
    
 
      
-
    1. جدید
      2. 
-
    2. عملگرهای افزایش و کاهش، ++ و --
      3. 
-
    3. انتساب عملگر، مانند += و -=
      4. 
-
    4. عملگرهای بیتی | و &
      5. 
-
    5. عملگرهای عبارت الگو
      6. 
+
    6. جدید
      7. 
+
    7. عملگرهای افزایش و کاهش، ++ و --
      8. 
+
    8. انتساب عملگر، مانند += و -=
      9. 
+
    9. عملگرهای بیتی | و &
      10. 
+
    10. عملگرهای عبارت الگو
      11. 
 
    
 
    
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

      -
    1. از منبع به مشاهده
      2. -
    2. از دیدگاه به منبع
      3. -
    3. View-to-source-to-view
      4. +

    4. از منبع به مشاهده

      5. +

    5. از دیدگاه به منبع

      6. +

    6. View-to-source-to-view

    -

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

    +

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

    - - - + + + - - - + + + - - - + + + - - - + + +
    جهت دادهنحونوعجهت دادهنحونوع
    از منبع به مشاهده (یک طرفه)1. {{expression}} 2. [target]="expression" 3. bind-target="expression"درون یابی، ویژگی، صفت، طبقه، سبکاز منبع به مشاهده (یک طرفه)1. {{expression}} 2. [target]="expression" 3. bind-target="expression"درون یابی، ویژگی، صفت، طبقه، سبک
    از دیدگاه به منبع (یک طرفه)1. (target)="statement" 2. on-target="statement"رویداداز دیدگاه به منبع (یک طرفه)1. (target)="statement" 2. on-target="statement"رویداد
    View-to-source-to-view(دو طرفه)1. [(target)]="expression" 2. bindon-target="expression"دوطرفهView-to-source-to-view(دو طرفه)1. [(target)]="expression" 2. bindon-target="expression"دوطرفه
    -

    فهرست

    +

    فهرست

  • -

    pipe ها چیا هستن؟

    -

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

    +

    pipe ها چیا هستن؟

    +

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

    -
    import { Component } from '@angular/core';
+
    import { Component } from '@angular/core';
 
 @Component({
-     selector: 'app-birthday',
-     template: `<p>Birthday is {{ birthday | date }}</p>`
+     selector: 'app-birthday',
+     template: `<p>Birthday is {{ birthday | date }}</p>`
 })
 export class BirthdayComponent {
      birthday = new Date(1987, 6, 18); // June 18, 1987
 }
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    -
    import { Component } from '@angular/core';
+
    import { Component } from '@angular/core';
 
 @Component({
-     selector: 'app-birthday',
-     template: `<p>Birthday is {{ birthday | date:'dd/MM/yyyy'}}</p>` // 18/06/1987
+     selector: 'app-birthday',
+     template: `<p>Birthday is {{ birthday | date:'dd/MM/yyyy'}}</p>` // 18/06/1987
 })
 export class BirthdayComponent {
      birthday = new Date(1987, 6, 18);
 }
 
     
-
    Note: مقدار پارامتر می تواند هر عبارت الگوی معتبری باشد، مانند یک رشته لفظی یا یک ویژگی جزء.
    
-
    فهرست
    
+
    Note: مقدار پارامتر می تواند هر عبارت الگوی معتبری باشد، مانند یک رشته لفظی یا یک ویژگی جزء.
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    -
    import { Component } from '@angular/core';
+
    import { Component } from '@angular/core';
 
 @Component({
-     selector: 'app-birthday',
-     template: `<p>Birthday is {{  birthday | date:'fullDate' | uppercase}} </p>` // THURSDAY, JUNE 18, 1987
+     selector: 'app-birthday',
+     template: `<p>Birthday is {{  birthday | date:'fullDate' | uppercase}} </p>` // THURSDAY, JUNE 18, 1987
 })
 export class BirthdayComponent {
      birthday = new Date(1987, 6, 18);
 }
 
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

      -
    1. پیپ کلاسی است که با متادیتای لوله @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید.
      -مثلا،
      2. +
    2. پیپ کلاسی است که با متادیتای لوله @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد می‌کنید.
      +مثلا،
    -
    @Pipe({name: 'myCustomPipe'})
+
    @Pipe({name: 'myCustomPipe'})
 
     
 
      
-
    1. کلاس pipe روش تبدیل رابط PipeTransform را پیاده سازی می کند که یک مقدار ورودی و به دنبال آن پارامترهای اختیاری را می پذیرد و مقدار تبدیل شده را برمی گرداند.
      
-ساختار pipeTransform به صورت زیر خواهد بود.
      2. 
+
    2. کلاس pipe روش تبدیل رابط PipeTransform را پیاده سازی می کند که یک مقدار ورودی و به دنبال آن پارامترهای اختیاری را می پذیرد و مقدار تبدیل شده را برمی گرداند.
      
+ساختار pipeTransform به صورت زیر خواهد بود.
      3. 
 
    
  
-
    interface PipeTransform {
+
    interface PipeTransform {
      transform(value: any, ...args: any[]): any
 }
 
     
 
      
-
    1. دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد.
      2. 
+
    2. دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد.
      3. 
 
    
  
-
    template: `{{someInputValue | myCustomPipe: someOtherValue}}`
+
    template: `{{someInputValue | myCustomPipe: someOtherValue}}`
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    -
    import { Pipe, PipeTransform } from '@angular/core';
+
    import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({name: 'customFileSizePipe'})
+@Pipe({name: 'customFileSizePipe'})
 export class FileSizePipe implements PipeTransform {
-     transform(size: number, extension: string = 'MB'): string {
+     transform(size: number, extension: string = 'MB'): string {
           return (size / (1024 * 1024)).toFixed(2) + extension;
      }
 }
 
     
-
    اکنون می توانید از لوله بالا در قالب عبارت زیر استفاده کنید.
    
+
    اکنون می توانید از لوله بالا در قالب عبارت زیر استفاده کنید.
    
  
-
        template: `
+
        template: `
        <h2>Find the size of a file</h2>
-       <p>Size: {{288966 | customFileSizePipe: 'GB'}}</p>
+       <p>Size: {{288966 | customFileSizePipe: 'GB'}}</p>
      `
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

    فهرست

    +

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

    +

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

    +

    فهرست

  • -

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

    -

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

    +

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

    +

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

    -
    /* JavaScript imports */
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+
    /* JavaScript imports */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
-import { AppComponent } from './app.component';
+import { AppComponent } from './app.component';
 
 /* the AppModule class with the @NgModule decorator */
 @NgModule({
-     declarations: [
+     declarations: [
           AppComponent
      ],
-     imports: [
+     imports: [
           BrowserModule,
           FormsModule,
           HttpClientModule
      ],
-     providers: [],
-     bootstrap: [AppComponent]
+     providers: [],
+     bootstrap: [AppComponent]
 })
 export class AppModule { }
 
     
-
    فهرست
    
+
    فهرست
  • -

    observable ها چیا هستن؟

    -

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

    -

    فهرست

    +

    observable ها چیا هستن؟

    +

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

    +

    فهرست

  • -

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

    -

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

    +

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

    +

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

    -
    import { HttpClientModule } from '@angular/common/http';
+
    import { HttpClientModule } from '@angular/common/http';
 
     
-
    مزایای اصلی HttpClient را می توان به شرح زیر ذکر کرد:
    
+
    مزایای اصلی HttpClient را می توان به شرح زیر ذکر کرد:
    
 
      
-
    1. دارای ویژگی های تست پذیری است
      2. 
-
    2. اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد
      3. 
-
    3. رهگیری درخواست و پاسخ
      4. 
-
    4. از API های Observalbe پشتیبانی می کند
      5. 
-
    5. از مدیریت خطای ساده پشتیبانی می کند
      6. 
+
    6. دارای ویژگی های تست پذیری است
      7. 
+
    7. اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد
      8. 
+
    8. رهگیری درخواست و پاسخ
      9. 
+
    9. از API های Observalbe پشتیبانی می کند
      10. 
+
    10. از مدیریت خطای ساده پشتیبانی می کند
      11. 
 
    
-
    فهرست
    
+
    فهرست
  • -

    چطوری از HttpClient استفاده کنیم؟

    -

    در زیر مراحلی که برای استفاده از HttpClient باید طی شود آورده شده است.

    +

    چطوری از HttpClient استفاده کنیم؟

    +

    در زیر مراحلی که برای استفاده از HttpClient باید طی شود آورده شده است.

      -
    1. HttpClient را به ماژول root وارد کنید:
      2. +

    2. HttpClient را به ماژول root وارد کنید:

    -
    import { HttpClientModule } from '@angular/common/http';
+
    import { HttpClientModule } from '@angular/common/http';
 @NgModule({
-     imports: [
+     imports: [
           BrowserModule,
           // import HttpClientModule after BrowserModule.
           HttpClientModule,
@@ -2272,18 +2372,18 @@ 
    چطوری از HttpClient استفاده کنیم؟
    
 export class AppModule {}
 
     
 
      
-
    1. HttpClient را به برنامه تزریق کنید:
      
-بیایید یک userProfileService (userprofile.service.ts) به عنوان مثال ایجاد کنیم. همچنین روش get از HttpClient را تعریف می کند
      2. 
+
    2. HttpClient را به برنامه تزریق کنید:
      
+بیایید یک userProfileService (userprofile.service.ts) به عنوان مثال ایجاد کنیم. همچنین روش get از HttpClient را تعریف می کند
      3. 
 
    
  
-
    import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+
    import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
-const userProfileUrl: string = 'assets/data/profile.json';
+const userProfileUrl: string = 'assets/data/profile.json';
 
 @Injectable()
 export class UserProfileService {
-     constructor(private http: HttpClient) { }
+     constructor(private http: HttpClient) { }
 
      getUserProfile() {
           return this.http.get(this.userProfileUrl);
@@ -2291,73 +2391,73 @@ 
    چطوری از HttpClient استفاده کنیم؟
    
 }
 
     
 
      
-
    1. یک مؤلفه برای اشتراک سرویس ایجاد کنید:
      
-بیایید کامپوننتی به نام UserProfileComponent(userprofile.component.ts) ایجاد کنیم که UserProfileService را تزریق کرده و متد سرویس را فراخوانی می کند.
      2. 
+
    2. یک مؤلفه برای اشتراک سرویس ایجاد کنید:
      
+بیایید کامپوننتی به نام UserProfileComponent(userprofile.component.ts) ایجاد کنیم که UserProfileService را تزریق کرده و متد سرویس را فراخوانی می کند.
      3. 
 
    
  
-
    fetchUserProfile() {
+
    fetchUserProfile() {
 this.userProfileService.getUserProfile()
-     .subscribe((data: User) => this.user = {
-          id: data['userId'],
-          name: data['firstName'],
-          city:  data['city']
+     .subscribe((data: User) => this.user = {
+          id: data['userId'],
+          name: data['firstName'],
+          city:  data['city']
      });
 }
 
     
-
    از آنجایی که روش سرویس فوق یک Observable را برمی گرداند که باید در کامپوننت ثبت شود.
    
-
    فهرست
    
+
    از آنجایی که روش سرویس فوق یک Observable را برمی گرداند که باید در کامپوننت ثبت شود.
    
+
    فهرست
  • -

    چطوری response ها رو به صورت کامل بخونیم؟

    -

    ممکن است بدنه پاسخ داده‌های پاسخ کامل را برنگرداند زیرا گاهی اوقات سرورها سرصفحه‌ها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمی‌گردانند. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنید.

    +

    چطوری response ها رو به صورت کامل بخونیم؟

    +

    ممکن است بدنه پاسخ داده‌های پاسخ کامل را برنگرداند زیرا گاهی اوقات سرورها سرصفحه‌ها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمی‌گردانند. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنید.

    -
    getUserResponse(): Observable<HttpResponse<User>> {
+
    getUserResponse(): Observable<HttpResponse<User>> {
      return this.http.get<User>(
-     this.userUrl, { observe: 'response' });
+     this.userUrl, { observe: 'response' });
 }
 
     
-
    اکنون متد HttpClient.get () یک Observable از HttpResponse تایپ شده را به جای داده های JSON برمی گرداند.
    
-
    فهرست
    
+
    اکنون متد HttpClient.get () یک Observable از HttpResponse تایپ شده را به جای داده های JSON برمی گرداند.
    
+
    فهرست
  • -

    چطوری عمل error handling رو انجام میدی؟

    -

    اگر درخواست در سرور ناموفق باشد یا به دلیل مشکلات شبکه به سرور نرسد، HttpClient به جای پاسخ موفقیت آمیز، یک شی خطا را برمی گرداند. در این مورد، باید با ارسال شیء خطا به عنوان متد ()subscribe، کامپوننت را کنترل کنید.

    -

    بیایید ببینیم که چگونه می توان آن را در کامپوننت با یک مثال مدیریت کرد،

    +

    چطوری عمل error handling رو انجام میدی؟

    +

    اگر درخواست در سرور ناموفق باشد یا به دلیل مشکلات شبکه به سرور نرسد، HttpClient به جای پاسخ موفقیت آمیز، یک شی خطا را برمی گرداند. در این مورد، باید با ارسال شیء خطا به عنوان متد ()subscribe، کامپوننت را کنترل کنید.

    +

    بیایید ببینیم که چگونه می توان آن را در کامپوننت با یک مثال مدیریت کرد،

    -
    fetchUser() {
+
    fetchUser() {
      this.userService.getProfile()
      .subscribe(
-          (data: User) => this.userProfile = { ...data }, // success path
+          (data: User) => this.userProfile = { ...data }, // success path
           error => this.error = error // error path
      );
 }
 
     
 
    It is always a good idea to give the user some meaningful feedback instead of displaying the raw error object returned from HttpClient.
    
-
    فهرست
    
+
    فهرست
  • -

    RxJS چیه؟

    -

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

    -

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

    +

    RxJS چیه؟

    +

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

    +

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

    -
    import { Observable, throwError } from 'rxjs';
-import { catchError, retry } from 'rxjs/operators';
+
    import { Observable, throwError } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
 
     
-
    فهرست
    
+
    فهرست
  • -

    subscribing چیه؟

    -

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

    -

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

    +

    subscribing چیه؟

    +

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

    +

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

    -
    Creates an observable sequence of 5 integers, starting from 1
+
    Creates an observable sequence of 5 integers, starting from 1
 const source = range(1, 5);
 
 // Create observer object
 const myObserver = {
-     next: x => console.log('Observer got a next value: ' + x),
-     error: err => console.error('Observer got an error: ' + err),
-     complete: () => console.log('Observer got a complete notification'),
+     next: x => console.log('Observer got a next value: ' + x),
+     error: err => console.error('Observer got an error: ' + err),
+     complete: () => console.log('Observer got a complete notification'),
 };
 
 // Execute with the observer object and Prints out each item
@@ -2369,1074 +2469,404 @@ 
    subscribing چیه؟
    
 // => Observer got a next value: 5
 // => Observer got a complete notification
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

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

    +

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

    +

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

    +

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

    -
    import { Observable } from 'rxjs';
+
    import { Observable } from 'rxjs';
 
 const observable = new Observable(observer => {
      setTimeout(() => {
-     observer.next('Hello from a Observable!');
+     observer.next('Hello from a Observable!');
      }, 2000);
 });
 
     
-
    فهرست
    
+
    فهرست
  • -

    observer جیه؟

    -

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

    +

    observer جیه؟

    +

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

    -
    interface Observer<T> {
+
    interface Observer<T> {
      closed?: boolean;
      next: (value: T) => void;
      error: (err: any) => void;
      complete: () => void;
 }
 
     
-
    کنترل‌کننده‌ای که رابط Observer را برای دریافت اعلان‌های قابل مشاهده پیاده‌سازی می‌کند، به‌عنوان پارامتری برای مشاهده پذیر به شرح زیر ارسال می‌شود.
    
+
    کنترل‌کننده‌ای که رابط Observer را برای دریافت اعلان‌های قابل مشاهده پیاده‌سازی می‌کند، به‌عنوان پارامتری برای مشاهده پذیر به شرح زیر ارسال می‌شود.
    
  
-
    myObservable.subscribe(myObserver);
+
    myObservable.subscribe(myObserver);
 
     
-
    Note: اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر اعلان های آن نوع را نادیده می گیرد.
    
-
    فهرست
    
+
    Note: اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر اعلان های آن نوع را نادیده می گیرد.
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    - - + + - - + + - - + + - - + + - - + +
    قابل مشاهدهقولقابل مشاهدهقول
    اعلامی: محاسبات تا زمان اشتراک شروع نمی شود تا هر زمان که به نتیجه نیاز داشتید، قابل اجرا باشنداجرا بلافاصله پس از ایجاداعلامی: محاسبات تا زمان اشتراک شروع نمی شود تا هر زمان که به نتیجه نیاز داشتید، قابل اجرا باشنداجرا بلافاصله پس از ایجاد
    ارائه مقادیر متعدد در طول زمانفقط یکارائه مقادیر متعدد در طول زمانفقط یک
    روش Subscribe برای مدیریت خطا استفاده می شود که مدیریت خطا را متمرکز و قابل پیش بینی می کندخطاهای فشاری به کودک وعده می دهدروش Subscribe برای مدیریت خطا استفاده می شود که مدیریت خطا را متمرکز و قابل پیش بینی می کندخطاهای فشاری به کودک وعده می دهد
    ارائه زنجیره و اشتراک برای رسیدگی به برنامه های پیچیدهفقط از .then() بندارائه زنجیره و اشتراک برای رسیدگی به برنامه های پیچیدهفقط از .then() بند
    -

    فهرست

    +

    فهرست

  • -

    multicasting چیه؟

    -

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

    -

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

    +

    multicasting چیه؟

    +

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

    +

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

    -
    var source = Rx.Observable.from([1, 2, 3]);
+
    var source = Rx.Observable.from([1, 2, 3]);
 var subject = new Rx.Subject();
 var multicasted = source.multicast(subject);
 
 // These are, under the hood, `subject.subscribe({...})`:
 multicasted.subscribe({
-     next: (v) => console.log('observerA: ' + v)
+     next: (v) => console.log('observerA: ' + v)
 });
 multicasted.subscribe({
-     next: (v) => console.log('observerB: ' + v)
+     next: (v) => console.log('observerB: ' + v)
 });
 
 // This is, under the hood, `s
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

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

    +

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

    +

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

    +

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

    -
    myObservable.subscribe({
-     next(num) { console.log('Next num: ' + num)},
-     error(err) { console.log('Received an errror: ' + err)}
+
    myObservable.subscribe({
+     next(num) { console.log('Next num: ' + num)},
+     error(err) { console.log('Received an errror: ' + err)}
 });
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

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

    +

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

    +

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

    +

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

    -
    myObservable.subscribe(
-     x => console.log('Observer got a next value: ' + x),
-     err => console.error('Observer got an error: ' + err),
-     () => console.log('Observer got a complete notification')
+
    myObservable.subscribe(
+     x => console.log('Observer got a next value: ' + x),
+     err => console.error('Observer got an error: ' + err),
+     () => console.log('Observer got a complete notification')
 );
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

      -
    1. تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده
      2. -
    2. تکرار از طریق مقادیر در یک جریان
      3. -
    3. نگاشت مقادیر به انواع مختلف
      4. -
    4. فیلتر کردن جریان ها
      5. -
    5. آهنگسازی چند جریان
      6. +

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

      7. +

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

      8. +

    8. نگاشت مقادیر به انواع مختلف

      9. +

    9. فیلتر کردن جریان ها

      10. +

    10. آهنگسازی چند جریان

    -

    فهرست

    +

    فهرست

  • -

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

    -

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

    +

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

    +

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

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

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

    -
    import { from } from 'rxjs'; // from function
-const data = from(fetch('/api/endpoint')); //Created from Promise
+
    import { from } from 'rxjs'; // from function
+const data = from(fetch('/api/endpoint')); //Created from Promise
 data.subscribe({
      next(response) { console.log(response); },
-     error(err) { console.error('Error: ' + err); },
-     complete() { console.log('Completed'); }
+     error(err) { console.error('Error: ' + err); },
+     complete() { console.log('Completed'); }
 });
 
     
 
      
-
    1. Create an observable that creates an AJAX request
      2. 
+
    2. Create an observable that creates an AJAX request
      3. 
 
    
  
-
    import { ajax } from 'rxjs/ajax'; // ajax function
-const apiData = ajax('/api/data'); // Created from AJAX request
+
    import { ajax } from 'rxjs/ajax'; // ajax function
+const apiData = ajax('/api/data'); // Created from AJAX request
 // Subscribe to create the request
 apiData.subscribe(res => console.log(res.status, res.response));
 
     
 
      
-
    1. یک قابل مشاهده از یک شمارنده ایجاد کنید
      2. 
+
    2. یک قابل مشاهده از یک شمارنده ایجاد کنید
      3. 
 
    
  
-
    import { interval } from 'rxjs'; // interval function
+
    import { interval } from 'rxjs'; // interval function
 const secondsCounter = interval(1000); // Created from Counter value
 secondsCounter.subscribe(n =>
      console.log(`Counter value: ${n}`
 ));
 
     
 
      
-
    1. یک قابل مشاهده از یک رویداد ایجاد کنید
      2. 
+
    2. یک قابل مشاهده از یک رویداد ایجاد کنید
      3. 
 
    
  
-
    import { fromEvent } from 'rxjs';
-const el = document.getElementById('custom-element');
-const mouseMoves = fromEvent(el, 'mousemove');
-const subscription = mouseMoves.subscribe((e: MouseEvent) => {
+
    import { fromEvent } from 'rxjs';
+const el = document.getElementById('custom-element');
+const mouseMoves = fromEvent(el, 'mousemove');
+const subscription = mouseMoves.subscribe((e: MouseEvent) => {
      console.log(`Coordnitaes of mouse pointer: ${e.clientX} * ${e.clientY}`);
 });
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

    فهرست

    +

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

    +

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

    +

    فهرست

  • -

    element های انگولار چیا هستن؟

    -

    عناصر زاویه‌ای، اجزای زاویه‌ای هستند که به‌عنوان عناصر سفارشی (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بسته‌بندی شده‌اند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد می کند، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر زاویه ای" ارائه می دهد.

    -

    فهرست

    +

    element های انگولار چیا هستن؟

    +

    عناصر زاویه‌ای، اجزای زاویه‌ای هستند که به‌عنوان عناصر سفارشی (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بسته‌بندی شده‌اند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد می کند، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر زاویه ای" ارائه می دهد.

    +

    فهرست

  • -

    پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟

    -

    از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی می شوند، پشتیبانی مرورگر از عناصر زاویه ای مانند پشتیبانی از عناصر سفارشی است.

    -

    این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی می‌شود و برای مرورگرهای دیگر در انتظار است.

    +

    پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟

    +

    از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی می شوند، پشتیبانی مرورگر از عناصر زاویه ای مانند پشتیبانی از عناصر سفارشی است.

    +

    این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی می‌شود و برای مرورگرهای دیگر در انتظار است.

    - - + + - - + + - - + + - - + + - - + + - +
    مرورگرپشتیبانی از المان زاویه ایمرورگرپشتیبانی از المان زاویه ای
    کرومپشتیبانی بومیکرومپشتیبانی بومی
    اپراپشتیبانی بومیاپراپشتیبانی بومی
    سافاریپشتیبانی بومیسافاریپشتیبانی بومی
    فایرفاکسبه طور بومی از نسخه 63 به بعد پشتیبانی می شود. باید dom.webcomponents.enabled و dom.webcomponents.customelements.enabled را در مرورگرهای قدیمی فعال کنیدفایرفاکسبه طور بومی از نسخه 63 به بعد پشتیبانی می شود. باید dom.webcomponents.enabled و dom.webcomponents.customelements.enabled را در مرورگرهای قدیمی فعال کنید
    Edgeدر حال حاضر در حال انجام استدر حال حاضر در حال انجام است
    -

    فهرست

    +

    فهرست

  • -

    element های کاستوم شده چیا هستن؟

    -

    عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل می شود، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ می کند، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت می کند. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی می‌شود و در مرورگرهای دیگر از طریق polyfills در دسترس است.

    -

    فهرست

    +

    element های کاستوم شده چیا هستن؟

    +

    عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل می شود، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ می کند، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت می کند. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی می‌شود و در مرورگرهای دیگر از طریق polyfills در دسترس است.

    +

    فهرست

  • -

    bootstrap کردن element های کاستوم شده لازمه؟

    -

    خیر، عناصر سفارشی هنگامی که به DOM اضافه می شوند به طور خودکار راه اندازی می شوند (یا شروع می شوند) و وقتی از DOM حذف می شوند به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه می شود، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار می کند و به دانش خاصی از Angular نیاز ندارد.

    -

    فهرست

    +

    bootstrap کردن element های کاستوم شده لازمه؟

    +

    خیر، عناصر سفارشی هنگامی که به DOM اضافه می شوند به طور خودکار راه اندازی می شوند (یا شروع می شوند) و وقتی از DOM حذف می شوند به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه می شود، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار می کند و به دانش خاصی از Angular نیاز ندارد.

    +

    فهرست

  • -

    ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟

    -

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

    +

    ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟

    +

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

      -
    1. App registers custom element with browser: از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که می‌تواند در مرورگر به عنوان یک عنصر سفارشی ثبت شود.
      2. -
    2. App adds custom element to DOM: عنصر سفارشی را درست مانند یک عنصر HTML داخلی مستقیماً به DOM اضافه کنید.
      3. -
    3. Browser instantiate component based class: مرورگر یک نمونه از کلاس ثبت شده ایجاد می کند و آن را به DOM اضافه می کند.
      4. -
    4. Instance provides content with data binding and change detection: محتوای با در قالب با استفاده از کامپوننت و داده های DOM ارائه می شود.
      -نمودار جریان عملکرد عناصر سفارشی به شرح زیر است:
      5. -
    -

    CustomElement

    -

    فهرست

    -
    • -
  • -

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

    -

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

    +

  • App registers custom element with browser: از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که می‌تواند در مرورگر به عنوان یک عنصر سفارشی ثبت شود.

    • +

  • App adds custom element to DOM: عنصر سفارشی را درست مانند یک عنصر HTML داخلی مستقیماً به DOM اضافه کنید.

    • +

  • Browser instantiate component based class: مرورگر یک نمونه از کلاس ثبت شده ایجاد می کند و آن را به DOM اضافه می کند.

    • +
  • Instance provides content with data binding and change detection: محتوای با در قالب با استفاده از کامپوننت و داده های DOM ارائه می شود.
    +نمودار جریان عملکرد عناصر سفارشی به شرح زیر است:
    • + +

    CustomElement

    +

    فهرست

    + +
  • +

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

    +

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

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

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

      4. +

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

    The detailed structure would be as follows,
    -CreateElement

    -

    فهرست

    -
    • -
  • -

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

    -

    ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت می شوند. اجازه دهید آنها را در دو مرحله توصیف کنیم،

    +CreateElement

    +

    فهرست

    +
    • +
  • +

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

    +

    ویژگی های 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" تبدیل شده است.

    -

    فهرست

    +

    فهرست

  • -

    چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟

    -

    می‌توانید از انواع «NgElement» و «WithProperties» که از @angular/elements صادر شده‌اند استفاده کنید.

    -

    بیایید ببینیم که چگونه می توان آن را با مقایسه با کامپوننت Angular اعمال کرد.

    +

    چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟

    +

    می‌توانید از انواع «NgElement» و «WithProperties» که از @angular/elements صادر شده‌اند استفاده کنید.

    +

    بیایید ببینیم که چگونه می توان آن را با مقایسه با کامپوننت Angular اعمال کرد.

      -
    1. ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود.
      2. +

    2. ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود.

    -
    @Component(...)
+
    @Component(...)
 class MyContainer {
      @Input() message: string;
 }
 
     
 
      
-
    1. پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
      2. 
+
    2. پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
      3. 
 
    
  
-
    const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>;
-container.message = 'Welcome to Angular elements!';
+
    const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>;
+container.message = 'Welcome to Angular elements!';
 container.message = true;  // <-- ERROR: TypeScript knows this should be a string.
-container.greet = 'News';  // <-- ERROR: TypeScript knows there is no `greet` property on `container`.
+container.greet = 'News';  // <-- ERROR: TypeScript knows there is no `greet` property on `container`.
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    -

    فهرست

    +

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

    +

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

    +

    فهرست

  • -

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

    -

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

    +

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

    +

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

      -
    1. ** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند.
      2. -
    2. دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.
      3. -
    3. دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.
      4. +

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

      5. +

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

      6. +

    6. دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.

    -

    فهرست

    +

    فهرست

  • -

    چطوری با استفاده از CLI یه directive درست میکنی؟

    -

    می‌توانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (src/app/components/directivename.directive.ts)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد می کند و فایل کلاس دستورالعمل را در ماژول ریشه اعلام می کند.

    -

    فهرست

    +

    چطوری با استفاده از CLI یه directive درست میکنی؟

    +

    می‌توانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (src/app/components/directivename.directive.ts)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد می کند و فایل کلاس دستورالعمل را در ماژول ریشه اعلام می کند.

    +

    فهرست

  • -

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

    -

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

    +

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

    +

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

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

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

    -
    import { Directive, ElementRef } from '@angular/core';
+
    import { Directive, ElementRef } from '@angular/core';
 
 @Directive({
-selector: '[appHighlight]'
+selector: '[appHighlight]'
 })
 export class HighlightDirective {
-     constructor(el: ElementRef) {
-     el.nativeElement.style.backgroundColor = 'red';
+     constructor(el: ElementRef) {
+     el.nativeElement.style.backgroundColor = 'red';
      }
 }
 
     
 
      
-
    1. دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال، 
      )
      2. 
+
    2. دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال، 
      )
      3. 
 
    
  
-
    <p appHighlight>Highlight me!</p>
+
    <p appHighlight>Highlight me!</p>
 
     
 
      
-
    1. برای مشاهده رفتار برجسته در عنصر پاراگراف، برنامه را اجرا کنید
      2. 
+
    2. برای مشاهده رفتار برجسته در عنصر پاراگراف، برنامه را اجرا کنید
      3. 
 
    
  
-
    ng serve
+
    ng serve
 
     
-
    فهرست
    
+
    فهرست
  • -

    Angular Router چیه؟

    -

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

    -

    فهرست

    +

    Angular Router چیه؟

    +

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

    +

    فهرست

  • -

    هدف از base href tag چیه؟

    -

    برنامه مسیریابی باید عنصر را به عنوان اولین فرزند در تگ به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می توانید مقدار href را به صورت زیر تنظیم کنید

    +

    هدف از base href tag چیه؟

    +

    برنامه مسیریابی باید عنصر را به عنوان اولین فرزند در تگ به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می توانید مقدار href را به صورت زیر تنظیم کنید

    -
    <base href="/">
+
    <base href="/">
 
     
-
    فهرست
    
+
    فهرست
  • -

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

    -

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

    +

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

    +

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

    -
    import { RouterModule, Routes } from '@angular/router';
+
    import { RouterModule, Routes } from '@angular/router';
 
     
-
    فهرست
    
+
    فهرست
  • -

    router outlet چیه؟

    -

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

    +

    router outlet چیه؟

    +

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

    -
    <router-outlet></router-outlet>
+
    <router-outlet></router-outlet>
 <!-- Routed components go here -->
 
     
-
    فهرست
    
+
    فهرست
  • -

    router link ها چیا هستن؟

    -

    RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می توانید مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.

    +

    router link ها چیا هستن؟

    +

    RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می توانید مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.

    -
    <h1>Angular Router</h1>
+
    <h1>Angular Router</h1>
 <nav>
-     <a routerLink="/todosList" >List of todos</a>
-     <a routerLink="/completed" >Completed todos</a>
+     <a routerLink="/todosList" >List of todos</a>
+     <a routerLink="/completed" >Completed todos</a>
 </nav>
 <router-outlet></router-outlet>
 
     
-
    فهرست
    
+
    فهرست
  • -

    منظور از منظور از router state چیه؟

    -

    RouterLinkActive دستورالعملی است که کلاس‌های css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر می‌دهد. به عنوان مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه می کند و زمانی که پیوند غیر فعال است حذف می کند. به عنوان مثال، می توانید آنها را مانند زیر به RouterLinks اضافه کنید.

    +

    منظور از منظور از router state چیه؟

    +

    RouterLinkActive دستورالعملی است که کلاس‌های css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر می‌دهد. به عنوان مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه می کند و زمانی که پیوند غیر فعال است حذف می کند. به عنوان مثال، می توانید آنها را مانند زیر به RouterLinks اضافه کنید.

    -
    <h1>Angular Router</h1>
+
    <h1>Angular Router</h1>
 <nav>
-     <a routerLink="/todosList" routerLinkActive="active">List of todos</a>
-     <a routerLink="/completed" routerLinkActive="active">Completed todos</a>
+     <a routerLink="/todosList" routerLinkActive="active">List of todos</a>
+     <a routerLink="/completed" routerLinkActive="active">Completed todos</a>
 </nav>
 <router-outlet></router-outlet>
 
     
-
    فهرست
    
+
    فهرست
  • -

    منظور از router state چیه؟

    -

    RouterState درختی از مسیرهای فعال شده است. هر گره در این درخت از بخش های URL "مصرف شده"، پارامترهای استخراج شده و داده های حل شده می داند. با استفاده از «سرویس روتر» و ویژگی «routerState» می‌توانید از هر کجای برنامه به RouterState فعلی دسترسی داشته باشید.

    +

    منظور از router state چیه؟

    +

    RouterState درختی از مسیرهای فعال شده است. هر گره در این درخت از بخش های URL "مصرف شده"، پارامترهای استخراج شده و داده های حل شده می داند. با استفاده از «سرویس روتر» و ویژگی «routerState» می‌توانید از هر کجای برنامه به RouterState فعلی دسترسی داشته باشید.

    -
    @Component({templateUrl:'template.html'})
+
    @Component({templateUrl:'template.html'})
 class MyComponent {
      constructor(router: Router) {
      const state: RouterState = router.routerState;
@@ -3447,74 +2877,72 @@ 
    منظور از router state چیه؟
    
      }
 }
 
     
-
    فهرست
    
-
    • - -

    event های مربوط به router چیا هستن؟events?

    -
     در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر می کند که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.
-
- توالی رویدادهای روتر به شرح زیر است:
-
- 1. NavigationStart,
- 2. RouteConfigLoadStart,
- 3. RouteConfigLoadEnd,
- 4. RoutesRecognized,
- 5. GuardsCheckStart,
- 6. ChildActivationStart,
- 7. ActivationStart,
- 8. GuardsCheckEnd,
- 9. ResolveStart,
- 10. ResolveEnd,
- 11. ActivationEnd
- 12. ChildActivationEnd
- 13. NavigationEnd,
- 14. NavigationCancel,
- 15. NavigationError
- 16. Scroll
-
- **[فهرست](#فهرست)**
-
    -
      +

      فهرست

      +
    1. -

      منظور از activated route چیه؟

      -

      ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق می شود. در مثال زیر می توانید به مسیر و پارامترهای مسیر دسترسی داشته باشید.

      +

      event های مربوط به router چیا هستن؟

      +

      در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر می کند که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.

      +

      توالی رویدادهای روتر به شرح زیر است:

      +
        +

      1. NavigationStart,

        2. +

      2. RouteConfigLoadStart,

        3. +

      3. RouteConfigLoadEnd,

        4. +

      4. RoutesRecognized,

        5. +

      5. GuardsCheckStart,

        6. +

      6. ChildActivationStart,

        7. +

      7. ActivationStart,

        8. +

      8. GuardsCheckEnd,

        9. +

      9. ResolveStart,

        10. +

      10. ResolveEnd,

        11. +

      11. ActivationEnd

        12. +

      12. ChildActivationEnd

        13. +

      13. NavigationEnd,

        14. +

      14. NavigationCancel,

        15. +

      15. NavigationError

        16. +

      16. Scroll

        17. +
      +

      فهرست

      +
      2. +
    2. +

      منظور از activated route چیه؟

      +

      ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق می شود. در مثال زیر می توانید به مسیر و پارامترهای مسیر دسترسی داشته باشید.

      -
      @Component({...})
+
      @Component({...})
 class MyComponent {
      constructor(route: ActivatedRoute) {
      const id: Observable<string> = route.params.pipe(map(p => p.id));
-     const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
+     const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
      // route.data includes both `data` and `resolve`
      const user = route.data.pipe(map(d => d.user));
      }
 }
 
       
-
      فهرست
      
+
      فهرست
    3. -

      چطوری router های پروژه ات رو تعریف میکنی؟

      -

      یک روتر باید با لیستی از تعاریف مسیر پیکربندی شود. شما روتر را با مسیرها از طریق روش «RouterModule.forRoot()» پیکربندی می‌کنید و نتیجه را به آرایه «واردات» AppModule اضافه می‌کنید.

      +

      چطوری router های پروژه ات رو تعریف میکنی؟

      +

      یک روتر باید با لیستی از تعاریف مسیر پیکربندی شود. شما روتر را با مسیرها از طریق روش «RouterModule.forRoot()» پیکربندی می‌کنید و نتیجه را به آرایه «واردات» AppModule اضافه می‌کنید.

      -
      const appRoutes: Routes = [
-     { path: 'todo/:id',      component: TodoDetailComponent },
+
      const appRoutes: Routes = [
+     { path: 'todo/:id',      component: TodoDetailComponent },
      {
-          path: 'todos',
-          component: TodosListComponent,
-          data: { title: 'Todos List' }
+          path: 'todos',
+          component: TodosListComponent,
+          data: { title: 'Todos List' }
      },
      { 
-          path: '',
-          redirectTo: '/todos',
-          pathMatch: 'full'
+          path: '',
+          redirectTo: '/todos',
+          pathMatch: 'full'
      },
-     { path: '**', component: PageNotFoundComponent }
+     { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
-     imports: [
+     imports: [
           RouterModule.forRoot(
                appRoutes,
-               { enableTracing: true } // <-- debugging purposes only
+               { enableTracing: true } // <-- debugging purposes only
           )
           // other imports here
      ],
@@ -3522,106 +2950,106 @@ 
      چطوری router های پروژه ات رو تعریف میکنی؟
      
 })
 export class AppModule { }
 
       
-
      فهرست
      
+
      فهرست
    4. -

      هدف از Wildcard route چیه؟

      -

      اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث می شود روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می توانید از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.

      -

      به عنوان مثال، شما می توانید PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید

      +

      هدف از Wildcard route چیه؟

      +

      اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث می شود روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می توانید از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.

      +

      به عنوان مثال، شما می توانید PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید

      -
      { path: '**', component: PageNotFoundComponent }
+
      { path: '**', component: PageNotFoundComponent }
 
       
-
      فهرست
      
+
      فهرست
    5. -

      ما همیشه به routing module نیاز داریم؟

      -

      نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، می‌توانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه می شود که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.

      -

      فهرست

      +

      ما همیشه به routing module نیاز داریم؟

      +

      نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، می‌توانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه می شود که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.

      +

      فهرست

    6. -

      Angular Universal چیه؟

      -

      Angular Universal یک ماژول رندر سمت سرور برای برنامه های Angular در سناریوهای مختلف است. این یک پروژه جامعه محور است و در بسته @angular/platform-server موجود است. اخیرا Angular Universal با Angular CLI ادغام شده است.

      -

      فهرست

      +

      Angular Universal چیه؟

      +

      Angular Universal یک ماژول رندر سمت سرور برای برنامه های Angular در سناریوهای مختلف است. این یک پروژه جامعه محور است و در بسته @angular/platform-server موجود است. اخیرا Angular Universal با Angular CLI ادغام شده است.

      +

      فهرست

    7. -

      انگولار به چن روش کامپایل میشه؟

      -

      Angular دو راه برای کامپایل برنامه شما ارائه می دهد.

      +

      انگولار به چن روش کامپایل میشه؟

      +

      Angular دو راه برای کامپایل برنامه شما ارائه می دهد.

        -
      1. به موقع (JIT)
        2. -
      2. پیش از زمان (AOT)
        3. +

      3. به موقع (JIT)

        4. +

      4. پیش از زمان (AOT)

      -

      فهرست

      +

      فهرست

    8. -

      What is JIT?

      -

      Just-in-Time (JIT) نوعی کامپایل است که برنامه شما را در زمان اجرا در مرورگر کامپایل می کند. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت محلی) را اجرا می کنید، کامپایل JIT پیش فرض است. به عنوان مثال، دستورات زیر برای کامپایل JIT استفاده می شود،

      +

      What is JIT?

      +

      Just-in-Time (JIT) نوعی کامپایل است که برنامه شما را در زمان اجرا در مرورگر کامپایل می کند. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت محلی) را اجرا می کنید، کامپایل JIT پیش فرض است. به عنوان مثال، دستورات زیر برای کامپایل JIT استفاده می شود،

      -
      ng build
+
      ng build
 ng serve
 
       
-
      فهرست
      
+
      فهرست
    9. -

      What is AOT?

      -

      Ahead-of-Time (AOT) نوعی کامپایل است که برنامه شما را در زمان ساخت کامپایل می کند. برای کامپایل AOT، گزینه «--aot» را با دستور ng build یا ng serve به شرح زیر اضافه کنید.

      +

      What is AOT?

      +

      Ahead-of-Time (AOT) نوعی کامپایل است که برنامه شما را در زمان ساخت کامپایل می کند. برای کامپایل AOT، گزینه «--aot» را با دستور ng build یا ng serve به شرح زیر اضافه کنید.

      -
      ng build --aot
+
      ng build --aot
 ng serve --aot
 
       
-
      نکته: دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل می شود.
      
-
      فهرست
      
+
      نکته: دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل می شود.
      
+
      فهرست
    10. -

      چرا ما به پروسه کامپایل نیاز داریم؟

      -

      کامپوننت ها و قالب های Angular را نمی توان مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتوانند در مرورگر اجرا شوند نیاز به یک فرآیند کامپایل دارند. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت کارآمد تبدیل می‌شوند.

      -

      فهرست

      +

      چرا ما به پروسه کامپایل نیاز داریم؟

      +

      کامپوننت ها و قالب های Angular را نمی توان مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتوانند در مرورگر اجرا شوند نیاز به یک فرآیند کامپایل دارند. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت کارآمد تبدیل می‌شوند.

      +

      فهرست

    11. -

      مزایای استفاده از AOT چیه؟

      +

      مزایای استفاده از AOT چیه؟

        -
      1. ** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.
        2. -
      2. ** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.
        3. -
      3. اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.
        4. -
      4. تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.
        5. -
      5. امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.
        6. +

      6. ** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.

        7. +

      7. ** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.

        8. +

      8. اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.

        9. +

      9. تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.

        10. +

      10. امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.

      -

      فهرست

      +

      فهرست

    12. -

      روش های کنترل کامپایل شدن با AOT چیا هستن؟

      -

      شما می توانید کامپایل برنامه خود را به دو روش کنترل کنید،

      +

      روش های کنترل کامپایل شدن با AOT چیا هستن؟

      +

      شما می توانید کامپایل برنامه خود را به دو روش کنترل کنید،

        -
      1. با ارائه گزینه های کامپایلر قالب در فایل tsconfig.json
        2. -
      2. با پیکربندی فراداده Angular با دکوراتورها
        3. +

      3. با ارائه گزینه های کامپایلر قالب در فایل tsconfig.json

        4. +

      4. با پیکربندی فراداده Angular با دکوراتورها

      -

      فهرست

      +

      فهرست

    13. -

      محدودیت هایی که روی metadata وجود داره چیا هستن؟

      -

      در Angular، شما باید ابرداده را با محدودیت های کلی زیر بنویسید:

      +

      محدودیت هایی که روی metadata وجود داره چیا هستن؟

      +

      در Angular، شما باید ابرداده را با محدودیت های کلی زیر بنویسید:

        -
      1. نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید
        2. -
      2. کامپایلر فقط می تواند به نمادهایی که صادر شده اند ارجاع دهد
        3. -
      3. فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید
        4. -
      4. اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.
        5. +

      5. نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید

        6. +

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

        7. +

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

        8. +

      8. اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.

      -

      فهرست

      +

      فهرست

    14. -

      فاز های کامپایل با استفاده از AOT چیا هستن؟

      -

      کامپایلر AOT در سه فاز کار می کند،

      +

      فاز های کامپایل با استفاده از AOT چیا هستن؟

      +

      کامپایلر AOT در سه فاز کار می کند،

        -
      1. تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند
        2. -
      2. تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.
        3. -
      3. ** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.
        4. +

      4. تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند

        5. +

      5. تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.

        6. +

      6. ** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.

      -

      فهرست

      +

      فهرست

    15. -

      ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟

      -

      خیر، توابع پیکان یا توابع لامبدا را نمی توان برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. به عنوان مثال، قطعه زیر نامعتبر است:

      +

      ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟

      +

      خیر، توابع پیکان یا توابع لامبدا را نمی توان برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. به عنوان مثال، قطعه زیر نامعتبر است:

      -
      @Component({
+
      @Component({
      providers: [{
      provide: MyService, useFactory: () => getService()
      }]
@@ -3629,7 +3057,7 @@ 
      ما میتونیم از arrow function ها توی AOT اسنتفاده ک
 
       
 
      To fix this, it has to be changed as following exported function:
      
  
-
      function getService(){
+
      function getService(){
      return new MyService();
 }
 
@@ -3639,368 +3067,368 @@ 
      ما میتونیم از arrow function ها توی AOT اسنتفاده ک
      }]
 })
 
       
-
      اگر همچنان از تابع arrow استفاده می کنید، یک گره خطا به جای تابع ایجاد می کند. وقتی کامپایلر بعداً این گره را تفسیر می‌کند، یک خطا گزارش می‌کند تا تابع فلش را به یک تابع صادر شده تبدیل کند.
      
-نکته: از Angular5 به بعد، کامپایلر به طور خودکار این بازنویسی را در حین انتشار فایل js. انجام می دهد.
      
-
      فهرست
      
+
      اگر همچنان از تابع arrow استفاده می کنید، یک گره خطا به جای تابع ایجاد می کند. وقتی کامپایلر بعداً این گره را تفسیر می‌کند، یک خطا گزارش می‌کند تا تابع فلش را به یک تابع صادر شده تبدیل کند.
      
+نکته: از Angular5 به بعد، کامپایلر به طور خودکار این بازنویسی را در حین انتشار فایل js. انجام می دهد.
      
+
      فهرست
    16. -

      هدف از استفاده از فایل های metadata json چیه؟

      -

      فایل metadata.json را می‌توان به‌عنوان نموداری از ساختار کلی فراداده‌های تزئینگر، که به‌عنوان یک درخت نحو انتزاعی (AST) نشان داده می‌شود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمع‌آورنده AOT ابرداده‌های ثبت‌شده در تزئینات Angular را اسکن می‌کند و اطلاعات فراداده را در فایل‌های .metadata.json، یک عدد برای هر فایل .d.ts، خروجی می‌دهد.

      -

      فهرست

      +

      هدف از استفاده از فایل های metadata json چیه؟

      +

      فایل metadata.json را می‌توان به‌عنوان نموداری از ساختار کلی فراداده‌های تزئینگر، که به‌عنوان یک درخت نحو انتزاعی (AST) نشان داده می‌شود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمع‌آورنده AOT ابرداده‌های ثبت‌شده در تزئینات Angular را اسکن می‌کند و اطلاعات فراداده را در فایل‌های .metadata.json، یک عدد برای هر فایل .d.ts، خروجی می‌دهد.

      +

      فهرست

    17. -

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

      -

      خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کند. اگر عبارتی از نحو پشتیبانی نشده استفاده کند، گردآورنده یک گره خطا در فایل .metadata.json می نویسد. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به آن تکه متادیتا نیاز داشته باشد، خطایی را گزارش می‌کند.

      -

      فهرست

      +

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

      +

      خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کند. اگر عبارتی از نحو پشتیبانی نشده استفاده کند، گردآورنده یک گره خطا در فایل .metadata.json می نویسد. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به آن تکه متادیتا نیاز داشته باشد، خطایی را گزارش می‌کند.

      +

      فهرست

    18. -

      folding چیه؟

      -

      کامپایلر فقط می تواند ارجاعات به نمادهای صادر شده در ابرداده را حل کند. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا می شوند. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت را در حین جمع آوری ارزیابی می کند و نتیجه را به جای عبارت اصلی در .metadata.json ثبت می کند.
      -به عنوان مثال، کامپایلر نمی تواند مرجع انتخابگر را ارجاع دهد زیرا صادر نشده است

      +

      folding چیه؟

      +

      کامپایلر فقط می تواند ارجاعات به نمادهای صادر شده در ابرداده را حل کند. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا می شوند. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت را در حین جمع آوری ارزیابی می کند و نتیجه را به جای عبارت اصلی در .metadata.json ثبت می کند.
      +به عنوان مثال، کامپایلر نمی تواند مرجع انتخابگر را ارجاع دهد زیرا صادر نشده است

      -
      let selector = 'app-root';
+
      let selector = 'app-root';
 @Component({
      selector: selector
 })
 
       
-
      در انتخابگر درون خطی تا می شود
      
+
      در انتخابگر درون خطی تا می شود
      
  
-
      @Component({
-     selector: 'app-root'
+
      @Component({
+     selector: 'app-root'
      })
 
       
-
      به یاد داشته باشید که کامپایلر نمی تواند همه چیز را تا کند. به عنوان مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
      
-
      فهرست
      
+
      به یاد داشته باشید که کامپایلر نمی تواند همه چیز را تا کند. به عنوان مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
      
+
      فهرست
    19. -

      macros چیه؟

      -

      کامپایلر AOT از ماکروها به شکل توابع یا متدهای ایستا پشتیبانی می کند که عبارتی را در یک عبارت بازگشتی واحد برمی گرداند.
      -به عنوان مثال، یک تابع ماکرو زیر را در نظر بگیرید،

      +

      macros چیه؟

      +

      کامپایلر AOT از ماکروها به شکل توابع یا متدهای ایستا پشتیبانی می کند که عبارتی را در یک عبارت بازگشتی واحد برمی گرداند.
      +به عنوان مثال، یک تابع ماکرو زیر را در نظر بگیرید،

      -
      export function wrapInArray<T>(value: T): T[] {
+
      export function wrapInArray<T>(value: T): T[] {
      return [value];
 }
 
       
-
      می توانید از آن در داخل ابرداده به عنوان یک عبارت استفاده کنید،
      
+
      می توانید از آن در داخل ابرداده به عنوان یک عبارت استفاده کنید،
      
  
-
      @NgModule({
+
      @NgModule({
      declarations: wrapInArray(TypicalComponent)
 })
 export class TypicalModule {}
 
       
 
      The compiler treats the macro expression as it written directly
      
  
-
      @NgModule({
+
      @NgModule({
      declarations: [TypicalComponent]
 })
 export class TypicalModule {}
 
       
-
      فهرست
      
+
      فهرست
    20. -

      چن تا مثال از ارور های مربوط به metatdata بزن؟

      +

      چن تا مثال از ارور های مربوط به metatdata بزن؟

        -
      1. فرم عبارت پشتیبانی نمی شود: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های زاویه ای استفاده می شود می توانند این خطا را ایجاد کنند.
        -بیایید برخی از این نمونه ها را ببینیم،
        2. +
      2. فرم عبارت پشتیبانی نمی شود: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های زاویه ای استفاده می شود می توانند این خطا را ایجاد کنند.
        +بیایید برخی از این نمونه ها را ببینیم،
      -
      1. export class User { ... }
+
      1. export class User { ... }
       const prop = typeof User; // typeof is not valid in metadata
-2. { provide: 'token', useValue: { [prop]: 'value' } }; // bracket notation is not valid in metadata
+2. { provide: 'token', useValue: { [prop]: 'value' } }; // bracket notation is not valid in metadata
 
       
 
        
-
      1. ارجاع به یک نماد محلی (غیرصادراتی): کامپایلر با نماد ارجاعی به یک نماد تعریف شده محلی مواجه شد که یا صادر نشده یا مقداردهی اولیه نشده است.
        
-بیایید این خطا را مثال بزنیم،
        2. 
+
      2. ارجاع به یک نماد محلی (غیرصادراتی): کامپایلر با نماد ارجاعی به یک نماد تعریف شده محلی مواجه شد که یا صادر نشده یا مقداردهی اولیه نشده است.
        
+بیایید این خطا را مثال بزنیم،
        3. 
 
      
  
-
      // ERROR
-let username: string; // neither exported nor initialized
+
      // ERROR
+let username: string; // neither exported nor initialized
 
 @Component({
-selector: 'my-component',
-template: ... ,
-providers: [
-     { provide: User, useValue: username }
+selector: 'my-component',
+template: ... ,
+providers: [
+     { provide: User, useValue: username }
 ]
 })
 export class MyComponent {}
 
       
 
      You can fix this by either exporting or initializing the value,
      
  
-
      export let username: string; // exported
+
      export let username: string; // exported
 (or)
-let username = 'John'; // initialized
+let username = 'John'; // initialized
 
       
 
        
-
      1. ** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمی‌توانید useFactory ارائه‌دهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
        2. 
+
      2. ** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمی‌توانید useFactory ارائه‌دهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
        3. 
 
      
  
-
      providers: [
-     { provide: MyStrategy, useFactory: function() { ... } },
-     { provide: OtherStrategy, useFactory: () => { ... } }
+
      providers: [
+     { provide: MyStrategy, useFactory: function() { ... } },
+     { provide: OtherStrategy, useFactory: () => { ... } }
 ]
 
       
 
      You can fix this with exported function
      
  
-
         export function myStrategy() { ... }
+
         export function myStrategy() { ... }
    export function otherStrategy() { ... }
    ... // metadata
-   providers: [
-       { provide: MyStrategy, useFactory: myStrategy },
-       { provide: OtherStrategy, useFactory: otherStrategy },
+   providers: [
+       { provide: MyStrategy, useFactory: myStrategy },
+       { provide: OtherStrategy, useFactory: otherStrategy },
    ]
 
       
 
        
-
      1. متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
        2. 
+
      2. متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
        3. 
 
      
  
-
      import { user } from './user';
+
      import { user } from './user';
 
 // destructured assignment to name and age
 const {name, age} = user;
 ... //metadata
-providers: [
-     {provide: Name, useValue: name},
-     {provide: Age, useValue: age},
+providers: [
+     {provide: Name, useValue: name},
+     {provide: Age, useValue: age},
 ]
 
       
-
      شما می توانید این مشکل را با مقادیر غیر تخریب شده برطرف کنید
      
+
      شما می توانید این مشکل را با مقادیر غیر تخریب شده برطرف کنید
      
  
-
         import { user } from './user';
+
         import { user } from './user';
    ... //metadata
-   providers: [
-       {provide: Name, useValue: user.name},
-       {provide: Age, useValue: user.age},
+   providers: [
+       {provide: Name, useValue: user.name},
+       {provide: Age, useValue: user.age},
      ]
 
       
-
      فهرست
      
+
      فهرست
    21. -

      منظور از metadata rewriting چیه؟

      -

      بازنویسی متادیتا فرآیندی است که در آن کامپایلر عبارتی را که فیلدهایی مانند useClass، useValue، useFactory و داده را مقداردهی اولیه می کند، به یک متغیر صادر شده تبدیل می کند که جایگزین عبارت می شود. به یاد داشته باشید که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می دهد اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی دهد.

      -

      فهرست

      +

      منظور از metadata rewriting چیه؟

      +

      بازنویسی متادیتا فرآیندی است که در آن کامپایلر عبارتی را که فیلدهایی مانند useClass، useValue، useFactory و داده را مقداردهی اولیه می کند، به یک متغیر صادر شده تبدیل می کند که جایگزین عبارت می شود. به یاد داشته باشید که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می دهد اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی دهد.

      +

      فهرست

    22. -

      توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟

      -

      Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.

      +

      توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟

      +

      Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.

      -
      {
-     "extends": "../tsconfig.base.json",
-     "compilerOptions": {
-     "experimentalDecorators": true,
+
      {
+     "extends": "../tsconfig.base.json",
+     "compilerOptions": {
+     "experimentalDecorators": true,
      ...
      },
-     "angularCompilerOptions": {
-     "fullTemplateTypeCheck": true,
-     "preserveWhitespaces": true,
+     "angularCompilerOptions": {
+     "fullTemplateTypeCheck": true,
+     "preserveWhitespaces": true,
      ...
      }
 }
 
       
-
      فهرست
      
+
      فهرست
    23. -

      چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟

      -

      گزینه های کامپایلر قالب زاویه ای به عنوان اعضای شی angularCompilerOptions در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.

      +

      چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟

      +

      گزینه های کامپایلر قالب زاویه ای به عنوان اعضای شی angularCompilerOptions در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.

      -
      {
-     "compilerOptions": {
-     "experimentalDecorators": true,
+
      {
+     "compilerOptions": {
+     "experimentalDecorators": true,
                ...
      },
-     "angularCompilerOptions": {
-     "fullTemplateTypeCheck": true,
-     "preserveWhitespaces": true,
+     "angularCompilerOptions": {
+     "fullTemplateTypeCheck": true,
+     "preserveWhitespaces": true,
                ...
      }
 }
 
       
-
      فهرست
      
+
      فهرست
    24. -

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

      -

      شما می توانید صریحاً با افزودن گزینه کامپایلر fullTemplateTypeCheck در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.

      -

      برای مثال، جزء زیر را در نظر بگیرید:

      +

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

      +

      شما می توانید صریحاً با افزودن گزینه کامپایلر fullTemplateTypeCheck در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.

      +

      برای مثال، جزء زیر را در نظر بگیرید:

      -
      @Component({
-     selector: 'my-component',
-     template: '{{user.contacts.email}}'
+
      @Component({
+     selector: 'my-component',
+     template: '{{user.contacts.email}}'
 })
 class MyComponent {
      user?: User;
 }
 
       
-
      این باعث ایجاد خطای زیر می شود:
      
+
      این باعث ایجاد خطای زیر می شود:
      
  
-
      my.component.ts.MyComponent.html(1,1): : Property 'contacts' does not exist on type 'User'. Did you mean 'contact'?
+
      my.component.ts.MyComponent.html(1,1): : Property 'contacts' does not exist on type 'User'. Did you mean 'contact'?
 
       
-
      فهرست
      
+
      فهرست
    25. -

      هدف از any type توی cast function چیه؟

      -

      می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.

      +

      هدف از any type توی cast function چیه؟

      +

      می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.

      -
      template: '{{ $any(user).contacts.email }}'
+
      template: '{{ $any(user).contacts.email }}'
 
       
-
      تابع $any() cast نیز با این کار می کند تا امکان دسترسی به اعضای اعلام نشده کامپوننت را فراهم کند.
      
+
      تابع $any() cast نیز با این کار می کند تا امکان دسترسی به اعضای اعلام نشده کامپوننت را فراهم کند.
      
  
-
      template: '{{ $any(this).contacts.email }}'
+
      template: '{{ $any(this).contacts.email }}'
 
       
-
      فهرست
      
+
      فهرست
    26. -

      اپراتور non null assertion چیه؟

      -

      برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.

      +

      اپراتور non null assertion چیه؟

      +

      برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.

      -
      @Component({
-     selector: 'my-component',
-     template: '<span *ngIf="user"> {{user.name}} contacted through {{contact!.email}} </span>'
+
      @Component({
+     selector: 'my-component',
+     template: '<span *ngIf="user"> {{user.name}} contacted through {{contact!.email}} </span>'
 })
 class MyComponent {
      user?: User;
      contact?: Contact;
 
-     setData(user: User, contact: Contact) {
+     setData(user: User, contact: Contact) {
      this.user = user;
      this.contact = contact;
      }
 }
 
       
-
      فهرست
      
+
      فهرست
    27. -

      منظور از type narrowing چیه؟

      -

      عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.

      +

      منظور از type narrowing چیه؟

      +

      عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.

      -
      @Component({
-     selector: 'my-component',
-     template: '<span *ngIf="user"> {{user.contact.email}} </span>'
+
      @Component({
+     selector: 'my-component',
+     template: '<span *ngIf="user"> {{user.contact.email}} </span>'
 })
 class MyComponent {
      user?: User;
 }
 
       
-
      فهرست
      
+
      فهرست
    28. -

      چطوری dependency های مختلف توی انگولار تعریف میکنی؟

      -

      بخش وابستگی های package.json با در یک برنامه زاویه ای را می توان به صورت زیر تقسیم کرد:

      +

      چطوری dependency های مختلف توی انگولار تعریف میکنی؟

      +

      بخش وابستگی های package.json با در یک برنامه زاویه ای را می توان به صورت زیر تقسیم کرد:

        -
      1. ** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.
        2. -
      2. بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.
        3. -
      3. ** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.
        4. +

      4. ** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.

        5. +

      5. بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.

        6. +

      6. ** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.

      -

      فهرست

      +

      فهرست

    29. -

      zone توی انگولار چیه؟

      -

      Zone یک زمینه اجرایی است که در تمام وظایف ناهمگام باقی می ماند. هنگامی که عملیات جاوا اسکریپت بومی رویدادها را افزایش می دهد، Angular برای اجرای فرآیندهای تشخیص تغییر Angular به zone.js متکی است.

      -

      فهرست

      +

      zone توی انگولار چیه؟

      +

      Zone یک زمینه اجرایی است که در تمام وظایف ناهمگام باقی می ماند. هنگامی که عملیات جاوا اسکریپت بومی رویدادها را افزایش می دهد، Angular برای اجرای فرآیندهای تشخیص تغییر Angular به zone.js متکی است.

      +

      فهرست

    30. -

      هدف از ماژول مشترک توی انگولار چیه؟

      -

      خدمات، لوله‌ها و دستورالعمل‌های مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.

      -

      فهرست

      +

      هدف از ماژول مشترک توی انگولار چیه؟

      +

      خدمات، لوله‌ها و دستورالعمل‌های مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.

      +

      فهرست

    31. -

      codelyzer چیه؟

      -

      Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.

      +

      codelyzer چیه؟

      +

      Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.

      -
      ng new codelyzer
+
      ng new codelyzer
 ng lint
 
      
-
      فهرست
      
+
      فهرست
    32. -

      angular animation چیه؟

      -

      سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگی‌ها شامل موقعیت‌ها، اندازه‌ها، تبدیل‌ها، رنگ‌ها، حاشیه‌ها و غیره است. ماژول‌های Angular برای انیمیشن‌ها @angular/animations و @angular/platform-browser هستند و این وابستگی‌ها به طور خودکار به پروژه شما اضافه می‌شوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.

      -

      فهرست

      +

      angular animation چیه؟

      +

      سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگی‌ها شامل موقعیت‌ها، اندازه‌ها، تبدیل‌ها، رنگ‌ها، حاشیه‌ها و غیره است. ماژول‌های Angular برای انیمیشن‌ها @angular/animations و @angular/platform-browser هستند و این وابستگی‌ها به طور خودکار به پروژه شما اضافه می‌شوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.

      +

      فهرست

    33. -

      مراحل استفاده از ماژول های animation چیه؟

      -

      برای پیاده سازی انیمیشن در پروژه زاویه ای خود باید مراحل زیر را دنبال کنید.

      +

      مراحل استفاده از ماژول های animation چیه؟

      +

      برای پیاده سازی انیمیشن در پروژه زاویه ای خود باید مراحل زیر را دنبال کنید.

        -
      1. **Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیت‌های انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).
        2. +

      2. **Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیت‌های انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).

      -
      import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
      import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
-     imports: [
+     imports: [
      BrowserModule,
      BrowserAnimationsModule
      ],
-     declarations: [ ],
-     bootstrap: [ ]
+     declarations: [ ],
+     bootstrap: [ ]
 })
 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 در فایل‌های مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts).
        3. 
 
      
 
-
          import {
+
          import {
       trigger,
       state,
       style,
       animate,
       transition,
       // ...
-    } from '@angular/animations';
+    } from '@angular/animations';
 
      
 
        
-
      1. Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
        2. 
+
      2. Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
        3. 
 
      
 
-
          @Component({
-      selector: 'app-root',
-      templateUrl: 'app.component.html',
-      styleUrls: ['app.component.css'],
+
          @Component({
+      selector: 'app-root',
+      templateUrl: 'app.component.html',
+      styleUrls: ['app.component.css'],
       animations: [
         // animation triggers go here
       ]
     })
 
      
-
      فهرست
      
+
      فهرست
    34. -

      تابع state چیه؟

      -

      تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().

      -

      به عنوان مثال، می توانید یک تابع حالت باز بنویسید

      +

      تابع state چیه؟

      +

      تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().

      +

      به عنوان مثال، می توانید یک تابع حالت باز بنویسید

      -
      state('open', style({
-  height: '300px',
+
      state('open', style({
+  height: '300px',
   opacity: 0.5,
-  backgroundColor: 'blue'
+  backgroundColor: 'blue'
 })),
 
      
-
      فهرست
      
+
      فهرست
    35. -

      هدف از تابع style چیه؟

      -

      تابع style برای تعریف مجموعه‌ای از سبک‌ها برای مرتبط کردن با یک نام وضعیت استفاده می‌شود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.

      +

      هدف از تابع style چیه؟

      +

      تابع style برای تعریف مجموعه‌ای از سبک‌ها برای مرتبط کردن با یک نام وضعیت استفاده می‌شود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.

      -
      state('close', style({
-  height: '100px',
+
      state('close', style({
+  height: '100px',
   opacity: 0.8,
-  backgroundColor: 'green'
+  backgroundColor: 'green'
 })),
 
      
-
      نکته: The style attributes must be in camelCase.
      
-
      فهرست
      
+
      نکته: The style attributes must be in camelCase.
      
+
      فهرست
    36. -

      هدف از تابع animate چیه؟

      -

      انیمیشن‌های Angular روشی قدرتمند برای پیاده‌سازی انیمیشن‌های پیچیده و قانع‌کننده برای اپلیکیشن وب تک صفحه‌ای Angular شما هستند.

      +

      هدف از تابع animate چیه؟

      +

      انیمیشن‌های Angular روشی قدرتمند برای پیاده‌سازی انیمیشن‌های پیچیده و قانع‌کننده برای اپلیکیشن وب تک صفحه‌ای Angular شما هستند.

      -
         import { Component, OnInit, Input } from '@angular/core';
-   import { trigger, state, style, animate, transition } from '@angular/animations';
+
         import { Component, OnInit, Input } from '@angular/core';
+   import { trigger, state, style, animate, transition } from '@angular/animations';
 
    @Component({
-   selector: 'app-animate',
-   templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,
+   selector: 'app-animate',
+   templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,
    styleUrls: `.myblock {
        background-color: green;
        width: 300px;
@@ -4009,17 +3437,17 @@ 
      هدف از تابع animate چیه؟
      
        margin: 5rem;
        }`,
    animations: [
-       trigger('changeState', [
-       state('state1', style({
-           backgroundColor: 'green',
-           transform: 'scale(1)'
+       trigger('changeState', [
+       state('state1', style({
+           backgroundColor: 'green',
+           transform: 'scale(1)'
        })),
-       state('state2', style({
-           backgroundColor: 'red',
-           transform: 'scale(1.5)'
+       state('state2', style({
+           backgroundColor: 'red',
+           transform: 'scale(1.5)'
        })),
-       transition('*=>state1', animate('300ms')),
-       transition('*=>state2', animate('2000ms'))
+       transition('*=>state1', animate('300ms')),
+       transition('*=>state2', animate('2000ms'))
        ])
    ]
    })
@@ -4033,57 +3461,57 @@ 
      هدف از تابع animate چیه؟
      
        }
    }
 
      
-
      فهرست
      
+
      فهرست
    37. -

      تابع transition چیه؟

      -

      تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.

      -

      بیایید یک مثال انتقال حالت از باز به بسته با انتقال نیم ثانیه بین حالت ها را در نظر بگیریم.

      +

      تابع transition چیه؟

      +

      تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.

      +

      بیایید یک مثال انتقال حالت از باز به بسته با انتقال نیم ثانیه بین حالت ها را در نظر بگیریم.

      -
      transition('open => closed', [
-  animate('500ms')
+
      transition('open => closed', [
+  animate('500ms')
 ]),
 
      
-
      فهرست
      
+
      فهرست
    38. -

      چطوری اسکریپت های dynamic رو توی کدمون وارد کنیم؟

      -

      با استفاده از DomSanitizer می‌توانیم Html، Style، Script، Url پویا را تزریق کنیم.

      -
      </span>
-import { Component, OnInit } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+
      چطوری اسکریپت های dynamic رو توی کدمون وارد کنیم؟
      
+
      با استفاده از DomSanitizer می‌توانیم Html، Style، Script، Url پویا را تزریق کنیم.
      
+
      </span>
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 @Component({
-   selector: 'my-app',
+   selector: 'my-app',
    template: `
-       <div [innerHtml]="htmlSnippet"></div>
+       <div [innerHtml]="htmlSnippet"></div>
    `,
 })
 export class App {
        constructor(protected sanitizer: DomSanitizer) {}
-       htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
+       htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
    }
-
      
-
      فهرست
      
+
      +

      فهرست

    39. -

      service worker چیه و نقشش توی انگولار چیه؟

      -

      Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.

      -

      فهرست

      +

      service worker چیه و نقشش توی انگولار چیه؟

      +

      Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.

      +

      فهرست

    40. -

      اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟

      +

      اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟

        -
      1. یک برنامه را مانند نصب یک برنامه بومی کش می کند
        2. -
      2. یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
        3. -
      3. هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند
        4. -
      4. هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود
        5. -
      5. Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.
        6. +

      6. یک برنامه را مانند نصب یک برنامه بومی کش می کند

        7. +

      7. یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد

        8. +

      8. هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند

        9. +

      9. هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود

        10. +

      10. Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.

      -

      فهرست

      +

      فهرست

    41. -

      تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟

      -

      تزریق وابستگی یک جزء مشترک در AngularJS و Angular است، اما تفاوت‌های کلیدی بین این دو فریم‌ورک در نحوه عملکرد واقعی آن وجود دارد.

      +

      تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟

      +

      تزریق وابستگی یک جزء مشترک در AngularJS و Angular است، اما تفاوت‌های کلیدی بین این دو فریم‌ورک در نحوه عملکرد واقعی آن وجود دارد.

      @@ -4093,62 +3521,62 @@

      تفاوت های بین angularJs و Angular درمورد dependency inject

      - - + + - - + +
      توکن های تزریق وابستگی همیشه رشته ای هستندتوکن ها می توانند انواع مختلفی داشته باشند. آنها اغلب کلاس هستند و گاهی اوقات می توانند رشته باشند.توکن های تزریق وابستگی همیشه رشته ای هستندتوکن ها می توانند انواع مختلفی داشته باشند. آنها اغلب کلاس هستند و گاهی اوقات می توانند رشته باشند.
      دقیقاً یک انژکتور وجود دارد حتی اگر یک برنامه کاربردی چند ماژول استیک سلسله مراتب درختی از انژکتورها وجود دارد که برای هر جزء یک انژکتور ریشه و یک انژکتور اضافی وجود دارد.دقیقاً یک انژکتور وجود دارد حتی اگر یک برنامه کاربردی چند ماژول استیک سلسله مراتب درختی از انژکتورها وجود دارد که برای هر جزء یک انژکتور ریشه و یک انژکتور اضافی وجود دارد.
      -

      فهرست

      +

      فهرست

    42. -

      Angular Ivy چیه؟

      -

      Angular Ivy یک موتور رندر جدید برای Angular است. می‌توانید نسخه پیش‌نمایش Ivy را از نسخه 8 Angular انتخاب کنید.

      +

      Angular Ivy چیه؟

      +

      Angular Ivy یک موتور رندر جدید برای Angular است. می‌توانید نسخه پیش‌نمایش Ivy را از نسخه 8 Angular انتخاب کنید.

        -
      1. با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید
        2. +

      2. با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید

      -
      ng new ivy-demo-app --enable-ivy
+
      ng new ivy-demo-app --enable-ivy
 
      
 
        
-
      1. می‌توانید با افزودن گزینه «enableIvy» در «angularCompilerOptions» در «tsconfig.app.json» پروژه خود، آن را به یک پروژه موجود اضافه کنید.
        2. 
+
      2. می‌توانید با افزودن گزینه «enableIvy» در «angularCompilerOptions» در «tsconfig.app.json» پروژه خود، آن را به یک پروژه موجود اضافه کنید.
        3. 
 
      
 
-
      {
-     "compilerOptions": { ... },
-     "angularCompilerOptions": {
-     "enableIvy": true
+
      {
+     "compilerOptions": { ... },
+     "angularCompilerOptions": {
+     "enableIvy": true
      }
 }
 
      
-
      فهرست
      
+
      فهرست
    43. -

      قابلیت هایی که توی حالت ivy وجود دارن چیا هستن؟

      -

      می توانید با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.

      +

      قابلیت هایی که توی حالت ivy وجود دارن چیا هستن؟

      +

      می توانید با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.

        -
      1. کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است
        2. -
      2. زمان بازسازی سریعتر
        3. -
      3. بهبود اندازه محموله
        4. -
      4. بررسی نوع قالب بهبود یافته است
        5. +

      5. کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است

        6. +

      6. زمان بازسازی سریعتر

        7. +

      7. بهبود اندازه محموله

        8. +

      8. بررسی نوع قالب بهبود یافته است

      -

      فهرست

      +

      فهرست

    44. -

      میتونیم از مدل کامپایل AOT توی حالت Ivy استفاده کنیم؟

      -

      بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کند.

      +

      میتونیم از مدل کامپایل AOT توی حالت Ivy استفاده کنیم؟

      +

      بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کند.

      -
       {
-   "projects": {
-     "my-project": {
-       "architect": {
-         "build": {
-           "options": {
+
       {
+   "projects": {
+     "my-project": {
+       "architect": {
+         "build": {
+           "options": {
              ...
-             "aot": true,
+             "aot": true,
            }
          }
        }
@@ -4156,7976 +3584,198 @@ 
      میتونیم از مدل کامپایل AOT توی حالت Ivy استفا
    }
  }
 
      
-
      فهرست
      
+
      فهرست
    45. -

      سرویس زبان انگولار چیه؟

      -

      سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالب‌های Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیه‌نویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا می کند و سپس تمام خدمات زبان را ارائه می دهد.

      -

      فهرست

      +

      سرویس زبان انگولار چیه؟

      +

      سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالب‌های Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیه‌نویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا می کند و سپس تمام خدمات زبان را ارائه می دهد.

      +

      فهرست

    46. -

      چطوری از سرویس زبان انگولار توی پروژمون استفاده کنیم؟

      -

      با دستور npm زیر می توانید Angular Language Service را در پروژه خود نصب کنید.

      +

      چطوری از سرویس زبان انگولار توی پروژمون استفاده کنیم؟

      +

      با دستور npm زیر می توانید Angular Language Service را در پروژه خود نصب کنید.

      -
       npm install --save-dev @angular/language-service
+
       npm install --save-dev @angular/language-service
 
      
-
      پس از آن موارد زیر را به بخش "compilerOptions" tsconfig.json پروژه خود اضافه کنید
      
+
      پس از آن موارد زیر را به بخش "compilerOptions" tsconfig.json پروژه خود اضافه کنید
      
 
-
       "plugins": [
-     {"name": "@angular/language-service"}
+
       "plugins": [
+     {"name": "@angular/language-service"}
  ]
 
      
-
      نکته: خدمات تکمیل و تشخیص فقط برای فایل های .ts کار می کند. برای پشتیبانی از فایل های HTML باید از افزونه های سفارشی استفاده کنید.
      
-
      فهرست
      
+
      نکته: خدمات تکمیل و تشخیص فقط برای فایل های .ts کار می کند. برای پشتیبانی از فایل های HTML باید از افزونه های سفارشی استفاده کنید.
      
+
      فهرست
    47. -

      ادیتوری که سرویس زبان انگولار رو ساپورت گنن وجود داره؟

      -

      بله، سرویس زبان Angular در حال حاضر برای Visual Studio Code و WebStorm IDE در دسترس است. شما باید سرویس زبان زاویه ای را با استفاده از افزونه و devDependency نصب کنید. در ویرایشگر sublime، باید تایپ اسکریپتی را نصب کنید که دارای مدل پلاگین سرویس زبان است.

      -

      فهرست

      +

      ادیتوری که سرویس زبان انگولار رو ساپورت گنن وجود داره؟

      +

      بله، سرویس زبان Angular در حال حاضر برای Visual Studio Code و WebStorm IDE در دسترس است. شما باید سرویس زبان زاویه ای را با استفاده از افزونه و devDependency نصب کنید. در ویرایشگر sublime، باید تایپ اسکریپتی را نصب کنید که دارای مدل پلاگین سرویس زبان است.

      +

      فهرست

    48. -

      قابلیت هایی که توی سرویس زبان انگولار وجود دارن چیا هستن؟

      -

      اساساً 3 ویژگی اصلی توسط Angular Language Service ارائه شده است.

      +

      قابلیت هایی که توی سرویس زبان انگولار وجود دارن چیا هستن؟

      +

      اساساً 3 ویژگی اصلی توسط Angular Language Service ارائه شده است.

      1. -

        Autocompletion: تکمیل خودکار می تواند زمان توسعه شما را با ارائه امکانات و نکات متنی در حین تایپ در درون یابی و عناصر، سرعت بخشد.

        -

        ScreenShot

        -
        2. -
      2. -

        Error checking: همچنین می تواند به شما در مورد اشتباهات کدتان هشدار دهد.

        -

        ScreenShot

        -
        3. -
      3. -

        Navigation: ناوبری به شما این امکان را می دهد که یک کامپوننت، دایرکتیو، ماژول را نگه دارید و سپس F12 را کلیک کرده و فشار دهید تا مستقیماً به تعریف آن بروید.

        -

        ScreenShot

        -
        4. -
      -

      فهرست

      -
      49. -
    49. -

      چطوری web worker توی پروژه ات اضافه می کنی؟

      -

      شما می توانید وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، می‌توانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد می‌کند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد

      +

      Autocompletion: تکمیل خودکار می تواند زمان توسعه شما را با ارائه امکانات و نکات متنی در حین تایپ در درون یابی و عناصر، سرعت بخشد.

      +

      ScreenShot

      +
      50. +
    50. +

      Error checking: همچنین می تواند به شما در مورد اشتباهات کدتان هشدار دهد.

      +

      ScreenShot

      +
      51. +
    51. +

      Navigation: ناوبری به شما این امکان را می دهد که یک کامپوننت، دایرکتیو، ماژول را نگه دارید و سپس F12 را کلیک کرده و فشار دهید تا مستقیماً به تعریف آن بروید.

      +

      ScreenShot

      +
      52. +
    +

    فهرست

    + +
  • +

    چطوری web worker توی پروژه ات اضافه می کنی؟

    +

    شما می توانید وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «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. پروژه خود را برای استفاده از Web Workers پیکربندی کنید

      4. +

    4. app.worker.ts را برای دریافت پیام اضافه می کند

    -
    addEventListener('message', ({ data }) => {
+
    addEventListener('message', ({ data }) => {
      const response = `worker response to ${data}`;
      postMessage(response);
 });
 
    
 
      
-
    1. فایل کامپوننت «app.component.ts» با فایل web worker به‌روزرسانی شد
      2. 
+
    2. فایل کامپوننت «app.component.ts» با فایل web worker به‌روزرسانی شد
      3. 
 
    
 
-
    if (typeof Worker !== 'undefined') {
+
    if (typeof Worker !== 'undefined') {
      // Create a new
-     const worker = new Worker('./app.worker', { type: 'module' });
+     const worker = new Worker('./app.worker', { type: 'module' });
      worker.onmessage = ({ data }) => {
-     console.log('page got message: $\{data\}');
+     console.log('page got message: $\{data\}');
      };
-     worker.postMessage('hello');
+     worker.postMessage('hello');
 } else {
      // Web Workers are not supported in this environment.
 }
 
    
-
    نکته: ممکن است نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
    
-
    فهرست
    
+
    نکته: ممکن است نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
    
+
    فهرست
  • -

    محدودیت ها موقع استفاده کردن از Web worker ها چیا هستن؟

    -

    هنگام استفاده از Web Workers در پروژه های Angular باید دو نکته مهم را به خاطر بسپارید:

    -

    1.برخی از محیط‌ها یا پلتفرم‌ها (مانند @angular/platform-server) که در رندر سمت سرور استفاده می‌شوند، از Web Workers پشتیبانی نمی‌کنند. در این مورد باید مکانیزم بازگشتی برای انجام محاسبات برای کار در این محیط ها فراهم کنید.
    -2. اجرای Angular در وب‌کار با استفاده از «@angular/platform-webworker» هنوز در Angular CLI پشتیبانی نمی‌شود.

    -

    فهرست

    +

    محدودیت ها موقع استفاده کردن از Web worker ها چیا هستن؟

    +

    هنگام استفاده از Web Workers در پروژه های Angular باید دو نکته مهم را به خاطر بسپارید:

    +

    1.برخی از محیط‌ها یا پلتفرم‌ها (مانند @angular/platform-server) که در رندر سمت سرور استفاده می‌شوند، از Web Workers پشتیبانی نمی‌کنند. در این مورد باید مکانیزم بازگشتی برای انجام محاسبات برای کار در این محیط ها فراهم کنید.
    +2. اجرای Angular در وب‌کار با استفاده از «@angular/platform-webworker» هنوز در Angular CLI پشتیبانی نمی‌شود.

    +

    فهرست

  • -

    Angular CLI Builder چیه؟

    -

    در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، می‌توانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدام ابزار شخص ثالث توسط یک دستور موجود استفاده می‌شود، فراهم کنید.

    -

    فهرست

    +

    Angular CLI Builder چیه؟

    +

    در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، می‌توانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدام ابزار شخص ثالث توسط یک دستور موجود استفاده می‌شود، فراهم کنید.

    +

    فهرست

  • -

    منظور از Builder چیه؟

    -

    یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده می کند. کد سازنده در یک بسته npm تعریف شده است. به عنوان مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا می کند و KarmaBuilder سرور Karma را راه اندازی می کند و یک بسته وب را برای آزمایش های واحد اجرا می کند.

    -

    فهرست

    +

    منظور از Builder چیه؟

    +

    یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده می کند. کد سازنده در یک بسته npm تعریف شده است. به عنوان مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا می کند و KarmaBuilder سرور Karma را راه اندازی می کند و یک بسته وب را برای آزمایش های واحد اجرا می کند.

    +

    فهرست

  • -

    چطوری یه builder رواجرا میکنی؟

    -

    دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده می شود. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیش‌فرض برای سازنده‌های داخلی است.

    -

    فهرست

    +

    چطوری یه builder رواجرا میکنی؟

    +

    دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده می شود. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیش‌فرض برای سازنده‌های داخلی است.

    +

    فهرست

  • -

    چطوری توی انگولار یه app shell ایجاد میکنی؟

    -

    پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر می شود مفید است زیرا مرورگر می تواند HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می توانید با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد می کند، به این هدف برسید.

    +

    چطوری توی انگولار یه app shell ایجاد میکنی؟

    +

    پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر می شود مفید است زیرا مرورگر می تواند HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می توانید با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد می کند، به این هدف برسید.

    -
    ng generate appShell [options] (or)
+
    ng generate appShell [options] (or)
 ng g appShell [options]
 
    
-
    فهرست
    
+
    فهرست
  • -

    استانداردcase type ها برای استفاده توی انگولار چیا هستن؟

    -

    Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده می کند. Angular لیستی از انواع موارد زیر را دنبال می کند.

    +

    استانداردcase type ها برای استفاده توی انگولار چیا هستن؟

    +

    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 : نمادها، ویژگی‌ها، روش‌ها، نام لوله‌ها، انتخاب‌کننده‌های دستورالعمل غیرمولفه، ثابت‌ها از حروف کوچک در حرف اول آیتم استفاده می‌کنند. به عنوان مثال، "selectedUser"

      6. +

    6. UpperCamelCase (or PascalCase): نام کلاس‌ها، از جمله کلاس‌هایی که اجزا، رابط‌ها، NgModules، دستورالعمل‌ها و لوله‌ها را تعریف می‌کنند، از حروف بزرگ در حرف اول آیتم استفاده می‌کنند.

      7. +

    7. dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list".

      8. +

    8. UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS".

    -

    فهرست

    +

    فهرست

  • -

    class decorator ها توی انگولار چیا هستن؟

    -

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

    -

    لیست زیر از دکوراتورها در زیر کلاس دکوراتورها آمده است:

    +

    class decorator ها توی انگولار چیا هستن؟

    +

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

    +

    لیست زیر از دکوراتورها در زیر کلاس دکوراتورها آمده است:

      -
    1. @Component()
      2. -
    2. @Directive()
      3. -
    3. @Pipe()
      4. -
    4. @Injectable()
      5. -
    5. @NgModule()
      6. +

    6. @Component()

      7. +

    7. @Directive()

      8. +

    8. @Pipe()

      9. +

    9. @Injectable()

      10. +

    10. @NgModule()

    -

    فهرست

    +

    فهرست

  • -

    class field decorator چیه؟

    -

    دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام می شوند که نوع آن فیلد را مشخص می کند. برخی از نمونه ها عبارتند از: @input و @output،

    +

    class field decorator چیه؟

    +

    دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام می شوند که نوع آن فیلد را مشخص می کند. برخی از نمونه ها عبارتند از: @input و @output،

    -
     @Input() myProperty;
+
     @Input() myProperty;
  @Output() myEvent = new EventEmitter();
 
    
-
    فهرست
    
+
    فهرست
  • -

    declarable توی انگولار چیه ؟

    -

    Declarable یک نوع کلاس است که می توانید آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود

    +

    declarable توی انگولار چیه ؟

    +

    Declarable یک نوع کلاس است که می توانید آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود

    -
     declarations: [
+
     declarations: [
    YourComponent,
    YourPipe,
    YourDirective
  ],
 
    
-
    فهرست
    
+
    فهرست
  • -

    محدودیت هایی که توی declarble class ها داریم چیا هستن؟

    -

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

    +

    محدودیت هایی که توی declarble class ها داریم چیا هستن؟

    +

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

      -
    1. کلاسی که قبلاً در NgModule دیگری اعلام شده است
      2. -
    2. کلاس های Ngmodule
      3. -
    3. کلاس های خدماتی
      4. -
    4. کلاس های کمکی
      5. +

    5. کلاسی که قبلاً در NgModule دیگری اعلام شده است

      6. +

    6. کلاس های Ngmodule

      7. +

    7. کلاس های خدماتی

      8. +

    8. کلاس های کمکی

    -

    فهرست

    +

    فهرست

  • -

    DI token چیه؟

    -

    توکن DI یک توکن جستجوی مرتبط با ارائه دهنده وابستگی در سیستم تزریق وابستگی است. انژکتور یک نقشه ارائه دهنده توکن داخلی دارد که در صورت درخواست وابستگی به آن ارجاع می دهد و رمز DI کلید نقشه است. بیایید استفاده از DI Token را مثال بزنیم،

    +

    DI token چیه؟

    +

    توکن DI یک توکن جستجوی مرتبط با ارائه دهنده وابستگی در سیستم تزریق وابستگی است. انژکتور یک نقشه ارائه دهنده توکن داخلی دارد که در صورت درخواست وابستگی به آن ارجاع می دهد و رمز DI کلید نقشه است. بیایید استفاده از DI Token را مثال بزنیم،

    -
     const BASE_URL = new InjectionToken<string>('BaseUrl');
+
     const BASE_URL = new InjectionToken<string>('BaseUrl');
  const injector =
-    Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]});
+    Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]});
  const url = injector.get(BASE_URL);
 
    
-
    فهرست
    
+
    فهرست
  • -

    Angular DSL چیه؟

    -

    یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه می‌دهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل می کند که مرورگر بتواند آن را درک کند. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.

    -

    اساساً شما 3 نحو اصلی را در Angular DSL خواهید دید.

    +

    Angular DSL چیه؟

    +

    یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه می‌دهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل می کند که مرورگر بتواند آن را درک کند. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.

    +

    اساساً شما 3 نحو اصلی را در Angular DSL خواهید دید.

      -
    1. (): برای رویدادهای خروجی و DOM استفاده می شود.
      2. -
    2. []: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.
      3. -
    3. *: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.
      4. +

    4. (): برای رویدادهای خروجی و DOM استفاده می شود.

      5. +

    5. []: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.

      6. +

    6. *: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.

    -

    فهرست

    +

    فهرست

  • -

    rxjs Subject چیه؟

    -

    یک موضوع RxJS نوع خاصی از Observable است که اجازه می‌دهد مقادیر برای بسیاری از Observerها چندپخشی شوند. در حالی که مشاهده پذیرهای ساده یکپارچه هستند (هر مشاهده کننده مشترک دارای اجرای مستقل از Observable است)، سوژه ها چندپخشی هستند.

    -

    یک موضوع مانند یک مشاهده پذیر است، اما می تواند برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.

    +

    rxjs Subject چیه؟

    +

    یک موضوع RxJS نوع خاصی از Observable است که اجازه می‌دهد مقادیر برای بسیاری از Observerها چندپخشی شوند. در حالی که مشاهده پذیرهای ساده یکپارچه هستند (هر مشاهده کننده مشترک دارای اجرای مستقل از Observable است)، سوژه ها چندپخشی هستند.

    +

    یک موضوع مانند یک مشاهده پذیر است، اما می تواند برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.

    -
     import { Subject } from 'rxjs';
+
     import { Subject } from 'rxjs';
 
    const subject = new Subject<number>();
 
@@ -12139,102 +3789,107 @@ 
    rxjs Subject چیه؟
    
    subject.next(1);
    subject.next(2);
 
    
-
    فهرست
    
+
    فهرست
  • -

    Bazel tool چیه؟

    +

    Bazel tool چیه؟

    • -
     Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تواند وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید.
- **نکته:** خود فریم ورک Angular با Bazel ساخته شده است.
+
     Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تواند وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید.
+ **نکته:** خود فریم ورک Angular با Bazel ساخته شده است.
 
- **[فهرست](#فهرست)**
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      مزایای استفاده از ابزار Bazel چیه؟
      
+
      مزایای استفاده از ابزار Bazel چیه؟
      
+
      2. 
+
    2. 
+
      این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
      
+
      3. 
+
    3. 
+
      ساخت افزایشی و تست
      
+
      4. 
+
    4. 
+
      این امکان را ایجاد می کند که از راه دور ساخت و حافظه پنهان در یک مزرعه ساخت.
      
 
      5. 
 
    
-
     1. این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
- 2. ساخت افزایشی و تست
- 3. این امکان را ایجاد می کند که از راه دور ساخت و حافظه پنهان در یک مزرعه ساخت.
-
- **[فهرست](#فهرست)**
+
     **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟
      
-
      بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
      
+
      چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟
      
+
      بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
      
 
        
-
      1. Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید
        2. 
+
      2. Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید
        3. 
 
      
 
-
      ng add @angular/bazel
+
      ng add @angular/bazel
 
      
 
        
-
      1. Use in a new application: بسته را نصب کنید و برنامه را با گزینه مجموعه ایجاد کنید
        2. 
+
      2. Use in a new application: بسته را نصب کنید و برنامه را با گزینه مجموعه ایجاد کنید
        3. 
 
      
 
-
      npm install -g @angular/bazel
+
      npm install -g @angular/bazel
 ng new --collection=@angular/bazel
 
      
-وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده می شود و نتایج را در پوشه dist/bin خروجی می دهد.
-
      فهرست
      
+وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده می شود و نتایج را در پوشه dist/bin خروجی می دهد.
+
      فهرست
      
 
      2. 
 
    2. 
-
      چطوری ابزار Bazel رو مستقیما اجرا میکنی؟
      
-
      گاهی اوقات ممکن است بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می توانید با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/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 build [targets] // Compile the default output artifacts of the given targets.
 bazel test [targets] // Run the tests with *_test targets found in the pattern.
 bazel run [target]: Compile the program represented by target and then run it.
 
      
-
      فهرست
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      platform توی انگولار چیه؟
      
-
      پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تواند یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بسته‌های angular/platform-*@ ارائه می‌شود و این بسته‌ها به برنامه‌هایی که از «@angular/core» و «@angular/common» استفاده می‌کنند اجازه می‌دهند در محیط‌های مختلف اجرا شوند.
      
-به عنوان مثال، Angular می تواند به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،
      
+
      platform توی انگولار چیه؟
      
+
      پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تواند یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بسته‌های angular/platform-*@ ارائه می‌شود و این بسته‌ها به برنامه‌هایی که از «@angular/core» و «@angular/common» استفاده می‌کنند اجازه می‌دهند در محیط‌های مختلف اجرا شوند.
      
+به عنوان مثال، Angular می تواند به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،
      
 
        
-
      1. در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
        2. 
-
      2. هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
        3. 
+
      3. در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
        4. 
+
      4. هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟
      
-
      اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
      
-
      فهرست
      
+
      اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟
      
+
      اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟
      
-
      برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل @ViewChild استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
      
+
      چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟
      
+
      برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل @ViewChild استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
      
 
-
      <input #uname>
+
      <input #uname>
 
      
-
      و view child Directive را تعریف کرده و در قلاب چرخه حیات ngAfterViewInit به آن دسترسی پیدا کنید
      
+
      و view child Directive را تعریف کرده و در قلاب چرخه حیات ngAfterViewInit به آن دسترسی پیدا کنید
      
 
-
      @ViewChild('uname') input;
+
      @ViewChild('uname') input;
 
 ngAfterViewInit() {
   console.log(this.input.nativeElement.value);
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      چطوری توی انگولار route رو تغییر میدی؟
      
-
      در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
      
+
      چطوری توی انگولار route رو تغییر میدی؟
      
+
      در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
      
 
-
      this.router.events.subscribe((event: Event) => {})
+
      this.router.events.subscribe((event: Event) => {})
 
      
-
      بیایید یک جزء ساده برای تشخیص تغییرات روتر در نظر بگیریم
      
+
      بیایید یک جزء ساده برای تشخیص تغییرات روتر در نظر بگیریم
      
 
-
      import { Component } from '@angular/core';
-import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
+
      import { Component } from '@angular/core';
+import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
 
 @Component({
-    selector: 'app-root',
+    selector: 'app-root',
     template: `<router-outlet></router-outlet>`
 })
 export class AppComponent {
@@ -12258,94 +3913,94 @@ 
      چطوری توی انگولار route رو تغییر میدی؟
      
    }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      7. 
 
    7. 
-
      چطوری headers رو برای کاربر HTTP میفرستی؟
      
-
      می‌توانید مستقیماً نقشه شی را برای مشتری http ارسال کنید یا کلاس HttpHeaders را برای تهیه هدرها ایجاد کنید.
      
+
      چطوری headers رو برای کاربر HTTP میفرستی؟
      
+
      می‌توانید مستقیماً نقشه شی را برای مشتری http ارسال کنید یا کلاس HttpHeaders را برای تهیه هدرها ایجاد کنید.
      
 
-
      constructor(private _http: HttpClient) {}
-this._http.get('someUrl',{
-   headers: {'header1':'value1','header2':'value2'}
+
      constructor(private _http: HttpClient) {}
+this._http.get('someUrl',{
+   headers: {'header1':'value1','header2':'value2'}
 });
 
 (or)
-let headers = new HttpHeaders().set('header1', headerValue1); // create header object
-headers = headers.append('header2', headerValue2); // add a new header, creating a new object
-headers = headers.append('header3', headerValue3); // add another header
+let headers = new HttpHeaders().set('header1', headerValue1); // create header object
+headers = headers.append('header2', headerValue2); // add a new header, creating a new object
+headers = headers.append('header3', headerValue3); // add another header
 
-let params = new HttpParams().set('param1', value1); // create params object
-params = params.append('param2', value2); // add a new param, creating a new object
-params = params.append('param3', value3); // add another param
+let params = new HttpParams().set('param1', value1); // create params object
+params = params.append('param2', value2); // add a new param, creating a new object
+params = params.append('param3', value3); // add another param
 
-return this._http.get<any[]>('someUrl', { headers: headers, params: params })
+return this._http.get<any[]>('someUrl', { headers: headers, params: params })
 
      
-
      فهرست
      
+
      فهرست
      
 
      8. 
 
    8. 
-
      هدف از defferentail loading توی CLI چیه؟
      
-
      از انتشار Angular8 به بعد، برنامه‌ها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته می‌شوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
      
+
      هدف از defferentail loading توی CLI چیه؟
      
+
      از انتشار Angular8 به بعد، برنامه‌ها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته می‌شوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
      
 
        
-
      1. اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره می‌برد، پلی‌فیل‌های کمتری ارسال می‌کند و منجر به اندازه بسته‌ای کوچک‌تر می‌شود.
        2. 
-
      2. ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلی‌فیل‌های لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
        3. 
+
      3. اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره می‌برد، پلی‌فیل‌های کمتری ارسال می‌کند و منجر به اندازه بسته‌ای کوچک‌تر می‌شود.
        4. 
+
      4. ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلی‌فیل‌های لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
        5. 
 
      
-
      نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
      
-
      فهرست
      
+
      نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
      
+
      فهرست
      
 
      9. 
 
    9. 
-
      انگولار از dynamic import پشتیبانی میگنه؟
      
-
      بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، می‌توانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
      
-قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را می‌پذیرد و در طول زمان ساخت، خطا می‌دهد.
      
+
      انگولار از dynamic import پشتیبانی میگنه؟
      
+
      بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، می‌توانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
      
+قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را می‌پذیرد و در طول زمان ساخت، خطا می‌دهد.
      
 
-
      {path: ‘user’, loadChildren: ‘./users/user.module#UserModulee’},
+
      {path: ‘user’, loadChildren: ‘./users/user.module#UserModulee’},
 
      
-
      این مشکل با استفاده از واردات پویا حل می شود و IDE ها می توانند آن را در طول زمان کامپایل پیدا کنند.
      
+
      این مشکل با استفاده از واردات پویا حل می شود و IDE ها می توانند آن را در طول زمان کامپایل پیدا کنند.
      
 
-
      {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};
+
      {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};
 
      
-
      فهرست
      
+
      فهرست
      
 
      10. 
 
    10. 
-
      منظور از lazy loading چیه؟
      
-
      Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
      
+
      منظور از lazy loading چیه؟
      
+
      Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
      
 
-
      const routes: Routes = [
+
      const routes: Routes = [
   {
-    path: 'customers',
-    loadChildren: () => import('./customers/customers.module').then(module => module.CustomersModule)
+    path: 'customers',
+    loadChildren: () => import('./customers/customers.module').then(module => module.CustomersModule)
   },
   {
-    path: 'orders',
-    loadChildren: () => import('./orders/orders.module').then(module => module.OrdersModule)
+    path: 'orders',
+    loadChildren: () => import('./orders/orders.module').then(module => module.OrdersModule)
   },
   {
-    path: '',
-    redirectTo: '',
-    pathMatch: 'full'
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
   }
 ];
 
      
-
      فهرست
      
+
      فهرست
      
 
      11. 
 
    11. 
-
      workspace API چیه؟
      
-
      نسخه Angular 8.0 API های Workspace را معرفی می کند تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کند. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده می‌شود. می‌توانید گزینه بهینه‌سازی را برای build target به صورت زیر فعال یا اضافه کنید.
      
+
      workspace API چیه؟
      
+
      نسخه 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';
+
      import { NodeJsSyncHost } from '@angular-devkit/core/node';
+import { workspaces } from '@angular-devkit/core';
 
 async function addBuildTargetOption() {
     const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
-    const workspace = await workspaces.readWorkspace('path/to/workspace/directory/', host);
+    const workspace = await workspaces.readWorkspace('path/to/workspace/directory/', host);
 
-    const project = workspace.projects.get('my-app');
+    const project = workspace.projects.get('my-app');
     if (!project) {
-      throw new Error('my-app does not exist');
+      throw new Error('my-app does not exist');
     }
 
-    const buildTarget = project.targets.get('build');
+    const buildTarget = project.targets.get('build');
     if (!buildTarget) {
-      throw new Error('build target does not exist');
+      throw new Error('build target does not exist');
     }
 
     buildTarget.options.optimization = true;
@@ -12355,33 +4010,33 @@ 
      workspace API چیه؟
      
 
 addBuildTargetOption();
 
      
-
      فهرست
      
+
      فهرست
      
 
      12. 
 
    12. 
-
      چطوری ورژن انگولار رو آپدیت میکنی؟
      
-
      ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
      
+
      چطوری ورژن انگولار رو آپدیت میکنی؟
      
+
      ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
      
 
-
      $ ng update @angular/cli @angular/core
+
      $ ng update @angular/cli @angular/core
 
      
-
      فهرست
      
+
      فهرست
      
 
      13. 
 
    13. 
-
      Angular Material چیست؟
      
-
      Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
      
+
      Angular Material چیست؟
      
+
      Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
      
 
-
      npm install --save @angular/material @angular/cdk @angular/animations
+
      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 است
      
+
      فهرست
      
 
      14. 
 
    14. 
-
      چطوری location service رو توی انگولار اپدیت میکنی؟
      
-
      اگر از سرویس «location»دربرنامهقدیمیAngularJSخوداستفادهمی‌کنید،اکنونمی‌توانیداز«LocationUpgradeModule»(سرویسمکانیکپارچه)استفادهکنیدکهمسئولیت‌هایسرویس«location» در برنامه قدیمی AngularJS خود استفاده می‌کنید، اکنون می‌توانید از «LocationUpgradeModule» (سرویس مکان یکپارچه) استفاده کنید که مسئولیت‌های سرویس «location» را به سرویس «Location» در Angular می‌گذارد. بیایید این ماژول را مانند زیر به AppModule اضافه کنیم،
      
+
      چطوری location service رو توی انگولار اپدیت میکنی؟
      
+
      اگر از سرویس «location»دربرنامهقدیمیAngularJSخوداستفادهمی‌کنید،اکنونمی‌توانیداز«LocationUpgradeModule»(سرویسمکانیکپارچه)استفادهکنیدکهمسئولیت‌هایسرویس«location» در برنامه قدیمی AngularJS خود استفاده می‌کنید، اکنون می‌توانید از «LocationUpgradeModule» (سرویس مکان یکپارچه) استفاده کنید که مسئولیت‌های سرویس «location» را به سرویس «Location» در Angular می‌گذارد. بیایید این ماژول را مانند زیر به AppModule اضافه کنیم،
      
 
-
      // Other imports ...
-import { LocationUpgradeModule } from '@angular/common/upgrade';
+
      // Other imports ...
+import { LocationUpgradeModule } from '@angular/common/upgrade';
 
 @NgModule({
   imports: [
@@ -12391,442 +4046,442 @@ 
      چطوری location service رو توی انگولار اپدیت میکنی
 })
 export class AppModule {}
 
      
-
      فهرست
      
+
      فهرست
      
 
      15. 
 
    15. 
-
      NgUpgrade چیه؟
      
-
      NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
      
-
      فهرست
      
+
      NgUpgrade چیه؟
      
+
      NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
      
+
      فهرست
      
 
      16. 
 
    16. 
-
      چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟
      
-
      Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. به‌طور پیش‌فرض، این دستور برنامه را در حالت تماشا می‌سازد و «Karma test runner» را راه‌اندازی می‌کند. خروجی نتایج آزمون به صورت زیر خواهد بود:
      
+
      چطوری اپلیکیشن انگولارتو با استفاده از CLI تست میکنی؟
      
+
      Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. به‌طور پیش‌فرض، این دستور برنامه را در حالت تماشا می‌سازد و «Karma test runner» را راه‌اندازی می‌کند. خروجی نتایج آزمون به صورت زیر خواهد بود:
      
 
-
      10% building modules 1/1 modules 0 active
+
      10% building modules 1/1 modules 0 active
 ...INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
 ...INFO [launcher]: Launching browser Chrome ...
 ...INFO [launcher]: Starting browser Chrome
 ...INFO [Chrome ...]: Connected on socket ...
 Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)
 
      
-
      نکته: یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
      
-
      فهرست
      
+
      نکته: یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
      
+
      فهرست
      
 
      17. 
 
    17. 
-
      چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟
      
-
      Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی src/polyfills.ts به عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
      
+
      چطوری از polyfill ها توی اپلیکیشن انگولار استفاده میکنی؟
      
+
      Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی src/polyfills.ts به عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
      
 
        
-
      1. Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
        2. 
-
      2. Optional polyfills: شما باید بسته npm آن را نصب کنید و سپس دستور import را در فایل 'src/polyfills.ts' ایجاد کنید.
        
-به عنوان مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
        3. 
+
      3. Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
        4. 
+
      4. Optional polyfills: شما باید بسته npm آن را نصب کنید و سپس دستور import را در فایل 'src/polyfills.ts' ایجاد کنید.
        
+به عنوان مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
        5. 
 
      
 
-
      npm install --save web-animations-js
+
      npm install --save web-animations-js
 
      
-
      و دستور import را در فایل polyfill ایجاد کنید.
      
+
      و دستور import را در فایل polyfill ایجاد کنید.
      
 
-
      import 'web-animations-js';
+
      import 'web-animations-js';
 
      
-
      فهرست
      
+
      فهرست
      
 
      18. 
 
    18. 
-
      روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟
      
-
      می‌توانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روش‌های خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
      
+
      روش های گه برای فعال سازی change detection استفاده میشن چیا هستن؟
      
+
      می‌توانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روش‌های خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
      
 
        
-
      1. ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
        2. 
-
      2. NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
        3. 
-
      3. ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
        4. 
+
      4. ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
        5. 
+
      5. NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
        6. 
+
      6. ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
        7. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      19. 
 
    19. 
-
      ورژن های مختلف انگولار چیا هستن و تفاوتشون چیه؟
      
-
      نسخه های مختلفی از فریم ورک Angular وجود دارد. بیایید ویژگی های تمام نسخه های مختلف را ببینیم،
      
+
      ورژن های مختلف انگولار چیا هستن و تفاوتشون چیه؟
      
+
      نسخه های مختلفی از فریم ورک Angular وجود دارد. بیایید ویژگی های تمام نسخه های مختلف را ببینیم،
      
 
        
 
      1. Angular 1:
 
          
-
        • Angular 1 (AngularJS) اولین فریم ورک انگولاری است که در سال 2010 منتشر شد.
          • 
-
        • AngularJS برای دستگاه های تلفن همراه ساخته نشده است.
          • 
-
        • بر پایه کنترلرهایی با معماری MVC ساخته شده است.
          • 
+
        • Angular 1 (AngularJS) اولین فریم ورک انگولاری است که در سال 2010 منتشر شد.
          • 
+
        • AngularJS برای دستگاه های تلفن همراه ساخته نشده است.
          • 
+
        • بر پایه کنترلرهایی با معماری MVC ساخته شده است.
          • 
 
        
 
        2. 
 
      2. Angular 2:
 
          
-
        • Angular 2 در سال 2016 منتشر شد. Angular 2 بازنویسی کامل نسخه Angular1 است.
          • 
-
        • مشکلات عملکرد نسخه Angular 1 در نسخه Angular 2 برطرف شده است.
          • 
-
        • Angular 2 برخلاف نسخه Angular 1 از ابتدا برای دستگاه های تلفن همراه ساخته شده است.
          • 
-
        • Angular 2 مبتنی بر کامپوننت است.
          • 
+
        • Angular 2 در سال 2016 منتشر شد. Angular 2 بازنویسی کامل نسخه Angular1 است.
          • 
+
        • مشکلات عملکرد نسخه Angular 1 در نسخه Angular 2 برطرف شده است.
          • 
+
        • Angular 2 برخلاف نسخه Angular 1 از ابتدا برای دستگاه های تلفن همراه ساخته شده است.
          • 
+
        • Angular 2 مبتنی بر کامپوننت است.
          • 
 
        
 
        3. 
 
      3. Angular 3:
 
          
-
        • نسخه های مختلف بسته در Angular 2 به شرح زیر است:
          • 
-
        • @angular/core نسخه 2.3.0
          • 
-
        • @angular/compiler نسخه 2.3.0
          • 
-
        • @angular/http نسخه 2.3.0
          • 
-
        • @angular/router نسخه 3.3.0
          • 
-
        • بسته روتر قبلاً نسخه 3 است، بنابراین برای جلوگیری از سردرگمی به نسخه Angular 4 و نسخه 3 نادیده گرفته شده است.
          • 
+
        • نسخه های مختلف بسته در Angular 2 به شرح زیر است:
          • 
+
        • @angular/core نسخه 2.3.0
          • 
+
        • @angular/compiler نسخه 2.3.0
          • 
+
        • @angular/http نسخه 2.3.0
          • 
+
        • @angular/router نسخه 3.3.0
          • 
+
        • بسته روتر قبلاً نسخه 3 است، بنابراین برای جلوگیری از سردرگمی به نسخه Angular 4 و نسخه 3 نادیده گرفته شده است.
          • 
 
        
 
        4. 
 
      4. Angular 4:
 
          
-
        • اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است.
          • 
-
        • با Angular 4 اندازه بسته‌های تولیدی صدها کیلوبایت کاهش می‌یابد.
          • 
-
        • ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود.
          • 
-
        • پشتیبانی از Typescript 2.1 و 2.2.
          • 
-
        • جهانی زاویه ای
          • 
-
        • HttpClient جدید
          • 
+
        • اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است.
          • 
+
        • با Angular 4 اندازه بسته‌های تولیدی صدها کیلوبایت کاهش می‌یابد.
          • 
+
        • ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود.
          • 
+
        • پشتیبانی از Typescript 2.1 و 2.2.
          • 
+
        • جهانی زاویه ای
          • 
+
        • HttpClient جدید
          • 
 
        
 
        5. 
 
      5. Angular 5:
 
          
-
        • Angular 5 زاویه ای را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید.
          • 
-
        • با بهینه ساز ساخت جدید ارسال می شود.
          • 
-
        • پشتیبانی از Typescript 2.5.
          • 
-
        • کارگر خدماتی
          • 
+
        • Angular 5 زاویه ای را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید.
          • 
+
        • با بهینه ساز ساخت جدید ارسال می شود.
          • 
+
        • پشتیبانی از Typescript 2.5.
          • 
+
        • کارگر خدماتی
          • 
 
        
 
        6. 
 
      6. Angular 6:
 
          
-
        • در ماه می 2018 منتشر شد.
          • 
-
        • شامل رابط خط فرمان زاویه ای (CLI)، کیت توسعه اجزا (CDK)، بسته مواد زاویه ای، عناصر زاویه ای.
          • 
-
        • رفع اشکال سرویس کارگر.
          • 
-
        • i18n
          • 
-
        • حالت آزمایشی برای آیوی.
          • 
-
        • RxJS 6.0
          • 
-
        • لرزش درخت
          • 
+
        • در ماه می 2018 منتشر شد.
          • 
+
        • شامل رابط خط فرمان زاویه ای (CLI)، کیت توسعه اجزا (CDK)، بسته مواد زاویه ای، عناصر زاویه ای.
          • 
+
        • رفع اشکال سرویس کارگر.
          • 
+
        • i18n
          • 
+
        • حالت آزمایشی برای آیوی.
          • 
+
        • RxJS 6.0
          • 
+
        • لرزش درخت
          • 
 
        
 
        7. 
 
      7. Angular 7:
 
          
-
        • در اکتبر 2018 منتشر شد.
          • 
-
        • TypeScript 3.1
          • 
-
        • RxJS 6.3
          • 
-
        • Angular CLI جدید
          • 
-
        • قابلیت CLI Prompts توانایی پرسیدن سوالات از کاربر را قبل از اجرا فراهم می کند. مانند گفتگوی تعاملی بین کاربر و CLI است
          • 
-
        • با بهبود قابلیت CLI Prompts، به توسعه دهندگان کمک می کند تا تصمیم بگیرند. دستورات جدید ng از کاربران می‌خواهند مسیریابی و انواع سبک‌های CSS (SCSS) و ng add @angular/material تم و ژست‌ها یا انیمیشن‌ها را می‌خواهد.
          • 
+
        • در اکتبر 2018 منتشر شد.
          • 
+
        • TypeScript 3.1
          • 
+
        • RxJS 6.3
          • 
+
        • Angular CLI جدید
          • 
+
        • قابلیت CLI Prompts توانایی پرسیدن سوالات از کاربر را قبل از اجرا فراهم می کند. مانند گفتگوی تعاملی بین کاربر و CLI است
          • 
+
        • با بهبود قابلیت CLI Prompts، به توسعه دهندگان کمک می کند تا تصمیم بگیرند. دستورات جدید ng از کاربران می‌خواهند مسیریابی و انواع سبک‌های CSS (SCSS) و ng add @angular/material تم و ژست‌ها یا انیمیشن‌ها را می‌خواهد.
          • 
 
        
 
        8. 
 
      8. Angular 8:
 
          
-
        • در ماه می 2019 منتشر شد.
          • 
-
        • TypeScript 3.4
          • 
+
        • در ماه می 2019 منتشر شد.
          • 
+
        • TypeScript 3.4
          • 
 
        
 
        9. 
 
      9. Angular 9:
 
          
-
        • در فوریه 2020 منتشر شد.
          • 
-
        • TypeScript 3.7
          • 
-
        • Ivy به طور پیش فرض فعال است
          • 
+
        • در فوریه 2020 منتشر شد.
          • 
+
        • TypeScript 3.7
          • 
+
        • Ivy به طور پیش فرض فعال است
          • 
 
        
 
        10. 
 
      10. Angular 10:
 
          
-
        • در ژوئن 2020 منتشر شد.
          • 
-
        • TypeScript 3.9
          • 
-
        • TSlib 2.0
          • 
+
        • در ژوئن 2020 منتشر شد.
          • 
+
        • TypeScript 3.9
          • 
+
        • TSlib 2.0
          • 
 
        
 
        11. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      20. 
 
    20. 
-
      قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟
      
-
      در زیر لیستی از اصول امنیتی در زاویه ای آورده شده است.
      
+
      قوانین امنیتی که توی انگولار وجود دارن چیا هستن؟
      
+
      در زیر لیستی از اصول امنیتی در زاویه ای آورده شده است.
      
 
        
-
      1. باید از استفاده مستقیم از APIهای DOM اجتناب کنید.
        2. 
-
      2. شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید.
        3. 
-
      3. باید از کامپایلر قالب آفلاین استفاده کنید.
        4. 
-
      4. باید از محافظ XSS سمت سرور استفاده کنید.
        5. 
-
      5. باید از DOM Sanitizer استفاده کنید.
        6. 
-
      6. شما باید از حملات CSRF یا XSRF جلوگیری کنید.
        7. 
+
      7. باید از استفاده مستقیم از APIهای DOM اجتناب کنید.
        8. 
+
      8. شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید.
        9. 
+
      9. باید از کامپایلر قالب آفلاین استفاده کنید.
        10. 
+
      10. باید از محافظ XSS سمت سرور استفاده کنید.
        11. 
+
      11. باید از DOM Sanitizer استفاده کنید.
        12. 
+
      12. شما باید از حملات CSRF یا XSRF جلوگیری کنید.
        13. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      21. 
 
    21. 
-
      چرا فریم ورک های web tracking
      
-
      Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمی شود و در اکثر برنامه ها شکسته می شود، در آخرین نسخه منسوخ شده است.
      
-
      فهرست
      
+
      چرا فریم ورک های web tracking
      
+
      Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمی شود و در اکثر برنامه ها شکسته می شود، در آخرین نسخه منسوخ شده است.
      
+
      فهرست
      
 
      22. 
 
    22. 
-
      چرا از پکیج های web worker استفاده نمیشه؟
      
-
      هر دو «@angular/platform-webworker» و «@angular/platform-webworker-dynamic» رسماً منسوخ شده‌اند، تیم Angular متوجه شد که اجرای برنامه Angular روی Web worker عمل خوبی نیست.
      
-
      فهرست
      
+
      چرا از پکیج های web worker استفاده نمیشه؟
      
+
      هر دو «@angular/platform-webworker» و «@angular/platform-webworker-dynamic» رسماً منسوخ شده‌اند، تیم Angular متوجه شد که اجرای برنامه Angular روی Web worker عمل خوبی نیست.
      
+
      فهرست
      
 
      23. 
 
    23. 
-
      چطوری ورژن CLI انگولار رو پیدا میکنی؟
      
-
      Angular CLI نسخه نصب شده خود را با استفاده از روش های مختلف زیر با استفاده از دستور ng ارائه می دهد
      
+
      چطوری ورژن CLI انگولار رو پیدا میکنی؟
      
+
      Angular CLI نسخه نصب شده خود را با استفاده از روش های مختلف زیر با استفاده از دستور ng ارائه می دهد
      
 
-
      ng v
+
      ng v
 ng version
-ng -v
-ng --version
+ng -v
+ng --version
 
      
-
      و خروجی به صورت زیر خواهد بود:
      
+
      و خروجی به صورت زیر خواهد بود:
      
 
-
      Angular CLI: 1.6.3
+
      Angular CLI: 1.6.3
 Node: 8.11.3
 OS: darwin x64
 Angular:
 ...
 
      
-
      فهرست
      
+
      فهرست
      
 
      24. 
 
    24. 
-
      ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟
      
-
      Angular از جدیدترین مرورگرها پشتیبانی می کند که شامل مرورگرهای دسکتاپ و موبایل می شود.
      
+
      ورژن هایی که از انگولار پشتیبانی میکنن کدوما هستن؟
      
+
      Angular از جدیدترین مرورگرها پشتیبانی می کند که شامل مرورگرهای دسکتاپ و موبایل می شود.
      
 
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
+
-
-
+
+
-
+
-
+
-
-
+
+
      
 
 
      مرورگرنسخهمرورگرنسخه
 
      
       
 
 
      کرومآخرینکرومآخرین
 
      
 
      فایرفاکسآخرینفایرفاکسآخرین
 
      
 
      لبه2 جدیدترین نسخه اصلیلبه2 جدیدترین نسخه اصلی
 
      
 
      
 IE11، 10، 9 (حالت سازگاری پشتیبانی نمی شود)11، 10، 9 (حالت سازگاری پشتیبانی نمی شود)
 
      
 
      سافاری2 جدیدترین نسخه اصلیسافاری2 جدیدترین نسخه اصلی
 
      
 
      اینترنت اکسپلورر موبایلاینترنت اکسپلورر موبایل
 11
 
      
 
      
 iOS2 جدیدترین نسخه اصلی2 جدیدترین نسخه اصلی
 
      
 
      اندروید7.0، 6.0، 5.0، 5.1، 4.4اندروید7.0، 6.0، 5.0، 5.1، 4.4
 
      
       
 
      
-
      فهرست
      
+
      فهرست
      
 
      25. 
 
    25. 
-
      schematic چیه؟
      
-
      این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف می کند. قوانینی را تعریف می کند که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
      
-
      فهرست
      
+
      schematic چیه؟
      
+
      این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف می کند. قوانینی را تعریف می کند که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
      
+
      فهرست
      
 
      26. 
 
    26. 
-
      قوانینی که توی Schematices چیا هستن؟
      
-
      در دنیای شماتیک، این تابعی است که روی درخت فایل برای ایجاد، حذف یا اصلاح فایل‌ها به شیوه‌ای خاص عمل می‌کند.
      
-
      فهرست
      
+
      قوانینی که توی Schematices چیا هستن؟
      
+
      در دنیای شماتیک، این تابعی است که روی درخت فایل برای ایجاد، حذف یا اصلاح فایل‌ها به شیوه‌ای خاص عمل می‌کند.
      
+
      فهرست
      
 
      27. 
 
    27. 
-
      Schematics CLI چیه؟
      
-
      طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه می شوند. برای نصب شماتیک های اجرایی استفاده می شود که می توانید از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می توانید از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می توانید Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
      
+
      Schematics CLI چیه؟
      
+
      طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه می شوند. برای نصب شماتیک های اجرایی استفاده می شود که می توانید از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می توانید از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می توانید Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
      
 
-
      npm install -g @angular-devkit/schematics-cli
+
      npm install -g @angular-devkit/schematics-cli
 
      
-
      فهرست
      
+
      فهرست
      
 
      28. 
 
    28. 
-
      بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟
      
-
      در زیر بهترین شیوه های امنیتی در زاویه ای آورده شده است.
      
+
      بهترین حالت پیاده سازی قوانین امنیتی توی انگولار چیه؟
      
+
      در زیر بهترین شیوه های امنیتی در زاویه ای آورده شده است.
      
 
        
-
      1. از آخرین نسخه های کتابخانه Angular استفاده کنید
        2. 
-
      2. کپی Angular خود را تغییر ندهید
        3. 
-
      3. از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید.
        4. 
+
      4. از آخرین نسخه های کتابخانه Angular استفاده کنید
        5. 
+
      5. کپی Angular خود را تغییر ندهید
        6. 
+
      6. از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید.
        7. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      29. 
 
    29. 
-
      توی انگولار چطوری از XSS Atack جلوگیری میکنی؟
      
-
      Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. به عنوان مثال، Angular پاکسازی می‌کند و از مقادیر نامعتبر فرار می‌کند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درون‌یابی در DOM درج می‌شود.
      
-
      فهرست
      
+
      توی انگولار چطوری از XSS Atack جلوگیری میکنی؟
      
+
      Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. به عنوان مثال، Angular پاکسازی می‌کند و از مقادیر نامعتبر فرار می‌کند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درون‌یابی در DOM درج می‌شود.
      
+
      فهرست
      
 
      30. 
 
    30. 
-
      قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟
      
-
      کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری می کند و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه می شود از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
      
-
      فهرست
      
+
      قانون مربوط به جلوگیری از حمله XSS توی کامپایلر انگولار چیه؟
      
+
      کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری می کند و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه می شود از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
      
+
      فهرست
      
 
      31. 
 
    31. 
-
      موضوع های امنیتی توی انگولار چیا هستن؟
      
-
      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. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      32. 
 
    32. 
-
      Sanitization چیه و انگولار ازش پشتیبانی میکنه؟
      
-
      Sanitization بازرسی یک مقدار نامعتبر است که آن را به مقداری تبدیل می کند که برای درج آن در DOM ایمن است. بله، Angular از ضد عفونی کردن پشتیبانی می کند. مقادیر نامعتبر را برای HTML، سبک‌ها و URLها پاکسازی می‌کند، اما پاکسازی URLهای منبع ممکن نیست زیرا حاوی کد دلخواه هستند.
      
-
      فهرست
      
+
      Sanitization چیه و انگولار ازش پشتیبانی میکنه؟
      
+
      Sanitization بازرسی یک مقدار نامعتبر است که آن را به مقداری تبدیل می کند که برای درج آن در DOM ایمن است. بله، Angular از ضد عفونی کردن پشتیبانی می کند. مقادیر نامعتبر را برای HTML، سبک‌ها و URLها پاکسازی می‌کند، اما پاکسازی URLهای منبع ممکن نیست زیرا حاوی کد دلخواه هستند.
      
+
      فهرست
      
 
      33. 
 
    33. 
-
      هدف از innerHTML چیه؟
      
-
      innerHtml یکی از ویژگی های HTML-Elements است که به شما امکان می دهد محتوای html آن را به صورت برنامه ریزی شده تنظیم کنید. بیایید قطعه کد html زیر را در تگ «
      » با استفاده از binding innerHTML مانند زیر نمایش دهیم.
      
+
      هدف از innerHTML چیه؟
      
+
      innerHtml یکی از ویژگی های HTML-Elements است که به شما امکان می دهد محتوای html آن را به صورت برنامه ریزی شده تنظیم کنید. بیایید قطعه کد html زیر را در تگ «
      » با استفاده از binding innerHTML مانند زیر نمایش دهیم.
      
 
-
      <div [innerHTML]="htmlSnippet"></div>
+
      <div [innerHTML]="htmlSnippet"></div>
 
      
-
      و ویژگی htmlSnippet را از هر جزء تعریف کنید
      
+
      و ویژگی htmlSnippet را از هر جزء تعریف کنید
      
 
-
      export class myComponent {
-  htmlSnippet: string = '<b>Hello World</b>, Angular';
+
      export class myComponent {
+  htmlSnippet: string = '<b>Hello World</b>, Angular';
 }
 
      
-
      متأسفانه این ویژگی می تواند باعث ایجاد اشکالات امنیتی Cross Site Scripting (XSS) در صورت مدیریت نادرست شود.
      
-
      فهرست
      
+
      متأسفانه این ویژگی می تواند باعث ایجاد اشکالات امنیتی Cross Site Scripting (XSS) در صورت مدیریت نادرست شود.
      
+
      فهرست
      
 
      34. 
 
    34. 
-
      تفاوت بین interpolated content و innerHTML چیه؟
      
-
      تفاوت اصلی بین کد درون یابی شده و کد داخلی در رفتار کد تفسیر شده است. محتوای درون‌یابی همیشه حذف می‌شود، یعنی HTML تفسیر نمی‌شود و مرورگر براکت‌های زاویه‌ای را در محتوای متن عنصر نمایش می‌دهد. در جایی که در innerHTML binding، محتوا تفسیر می شود، یعنی مرورگر کاراکترهای < و > را به عنوان HTMLEntities تبدیل می کند. به عنوان مثال، استفاده در قالب به صورت زیر خواهد بود.
      
+
      تفاوت بین interpolated content و innerHTML چیه؟
      
+
      تفاوت اصلی بین کد درون یابی شده و کد داخلی در رفتار کد تفسیر شده است. محتوای درون‌یابی همیشه حذف می‌شود، یعنی HTML تفسیر نمی‌شود و مرورگر براکت‌های زاویه‌ای را در محتوای متن عنصر نمایش می‌دهد. در جایی که در innerHTML binding، محتوا تفسیر می شود، یعنی مرورگر کاراکترهای < و > را به عنوان HTMLEntities تبدیل می کند. به عنوان مثال، استفاده در قالب به صورت زیر خواهد بود.
      
 
-
      <p>Interpolated value:</p>
+
      <p>Interpolated value:</p>
 <div >{{htmlSnippet}}</div>
 <p>Binding of innerHTML:</p>
-<div [innerHTML]="htmlSnippet"></div>
+<div [innerHTML]="htmlSnippet"></div>
 
      
 
      and the property defined in a component.
      
 
-
      export class InnerHtmlBindingComponent {
-  htmlSnippet = 'Template <script>alert("XSS Attack")</script> <b>Code attached</b>';
+
      export class InnerHtmlBindingComponent {
+  htmlSnippet = 'Template <script>alert("XSS Attack")</script> <b>Code attached</b>';
 }
 
      
-
      حتی با وجود اینکه innerHTML binding شانس حمله XSS را ایجاد می کند، Angular این مقدار را ناامن تشخیص می دهد و به طور خودکار آن را پاکسازی می کند.
      
-
      فهرست
      
+
      حتی با وجود اینکه innerHTML binding شانس حمله XSS را ایجاد می کند، Angular این مقدار را ناامن تشخیص می دهد و به طور خودکار آن را پاکسازی می کند.
      
+
      فهرست
      
 
      35. 
 
    35. 
-
      چطوری از sanitizaltion خودکار جلوگیری میکنی؟
      
-
      گاهی اوقات برنامه ها واقعاً نیاز دارند که کدهای اجرایی مانند نمایش <iframe> را از یک URL داشته باشند. در این مورد، باید با گفتن اینکه یک مقدار را بررسی کرده اید، نحوه تولید آن را بررسی کرده اید و مطمئن شده اید که همیشه ایمن است، از پاکسازی خودکار در Angular جلوگیری کنید. اساساً شامل 2 مرحله است،
      
+
      چطوری از sanitizaltion خودکار جلوگیری میکنی؟
      
+
      گاهی اوقات برنامه ها واقعاً نیاز دارند که کدهای اجرایی مانند نمایش <iframe> را از یک URL داشته باشند. در این مورد، باید با گفتن اینکه یک مقدار را بررسی کرده اید، نحوه تولید آن را بررسی کرده اید و مطمئن شده اید که همیشه ایمن است، از پاکسازی خودکار در Angular جلوگیری کنید. اساساً شامل 2 مرحله است،
      
 
        
 
      1. 
-
        Inject DomSanitizer: می توانید DomSanitizer را در کامپوننت به عنوان پارامتر در سازنده تزریق کنید.
        
+
        Inject DomSanitizer: می توانید DomSanitizer را در کامپوننت به عنوان پارامتر در سازنده تزریق کنید.
        
 
        2. 
 
      2. 
-
        با فراخوانی برخی از روش‌های زیر، مقدار قابل اعتماد را علامت‌گذاری کنید
        
+
        با فراخوانی برخی از روش‌های زیر، مقدار قابل اعتماد را علامت‌گذاری کنید
        
 
          
-
        1. bypassSecurityTrustHtml
          2. 
-
        2. bypassSecurityTrustScript
          3. 
-
        3. bypassSecurityTrustStyle
          4. 
-
        4. bypassSecurityTrustUrl
          5. 
-
        5. bypassSecurityTrustResourceUrl
          6. 
+
        6. bypassSecurityTrustHtml
          7. 
+
        7. bypassSecurityTrustScript
          8. 
+
        8. bypassSecurityTrustStyle
          9. 
+
        9. bypassSecurityTrustUrl
          10. 
+
        10. bypassSecurityTrustResourceUrl
          11. 
 
        
 
        3. 
 
      
-
      به عنوان مثال، استفاده از url خطرناک به آدرس اینترنتی مورد اعتماد به صورت زیر خواهد بود.
      
+
      به عنوان مثال، استفاده از url خطرناک به آدرس اینترنتی مورد اعتماد به صورت زیر خواهد بود.
      
 
-
      constructor(private sanitizer: DomSanitizer) {
-  this.dangerousUrl = 'javascript:alert("XSS attack")';
+
      constructor(private sanitizer: DomSanitizer) {
+  this.dangerousUrl = 'javascript:alert("XSS attack")';
   this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
 
      
-
      فهرست
      
+
      فهرست
      
 
      36. 
 
    36. 
-
      استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟
      
-
      خیر، APIها یا روش‌های داخلی مرورگر DOM به‌طور خودکار از شما در برابر آسیب‌پذیری‌های امنیتی محافظت نمی‌کنند. در این مورد توصیه می شود به جای تعامل مستقیم با DOM از قالب های Angular استفاده کنید. اگر اجتناب ناپذیر است، از عملکردهای ضدعفونی داخلی Angular استفاده کنید.
      
-
      فهرست
      
+
      استفاده کردن مستقیم از DOM API مشکل امنیتی داره یا نه؟
      
+
      خیر، APIها یا روش‌های داخلی مرورگر DOM به‌طور خودکار از شما در برابر آسیب‌پذیری‌های امنیتی محافظت نمی‌کنند. در این مورد توصیه می شود به جای تعامل مستقیم با DOM از قالب های Angular استفاده کنید. اگر اجتناب ناپذیر است، از عملکردهای ضدعفونی داخلی Angular استفاده کنید.
      
+
      فهرست
      
 
      37. 
 
    37. 
-
      DOM sanitizer چیه؟
      
-
      «DomSanitizer» برای کمک به جلوگیری از اشکالات امنیتی Cross Site Scripting (XSS) با پاکسازی مقادیر برای ایمن بودن استفاده در زمینه‌های مختلف DOM استفاده می‌شود.
      
-
      فهرست
      
+
      DOM sanitizer چیه؟
      
+
      «DomSanitizer» برای کمک به جلوگیری از اشکالات امنیتی Cross Site Scripting (XSS) با پاکسازی مقادیر برای ایمن بودن استفاده در زمینه‌های مختلف DOM استفاده می‌شود.
      
+
      فهرست
      
 
      38. 
 
    38. 
-
      چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟
      
-
      حفاظت XSS سمت سرور در یک برنامه زاویه ای با استفاده از زبان قالبی که به طور خودکار از مقادیر برای جلوگیری از آسیب پذیری های XSS در سرور فرار می کند، پشتیبانی می شود. اما از زبان قالب برای تولید الگوهای Angular در سمت سرور استفاده نکنید که خطر زیادی برای معرفی آسیب‌پذیری‌های تزریق قالب ایجاد می‌کند.
      
-
      فهرست
      
+
      چطوری سمت سرور از حمله XSS توی انگولار جلوگیری میکنی؟
      
+
      حفاظت XSS سمت سرور در یک برنامه زاویه ای با استفاده از زبان قالبی که به طور خودکار از مقادیر برای جلوگیری از آسیب پذیری های XSS در سرور فرار می کند، پشتیبانی می شود. اما از زبان قالب برای تولید الگوهای Angular در سمت سرور استفاده نکنید که خطر زیادی برای معرفی آسیب‌پذیری‌های تزریق قالب ایجاد می‌کند.
      
+
      فهرست
      
 
      39. 
 
    39. 
-
      انگولار حمله های سطح http رو جلوگیری میکنه؟
      
-
      Angular دارای پشتیبانی داخلی برای جلوگیری از آسیب‌پذیری‌های سطح http مانند جعل درخواست بین سایتی (CSRF یا XSRF) و گنجاندن اسکریپت بین سایتی (XSSI) است. حتی اگر این آسیب‌پذیری‌ها باید در سمت سرور کاهش یابند، Angular کمک‌هایی را برای آسان‌تر کردن ادغام در سمت کلاینت ارائه می‌کند.
      
+
      انگولار حمله های سطح http رو جلوگیری میکنه؟
      
+
      Angular دارای پشتیبانی داخلی برای جلوگیری از آسیب‌پذیری‌های سطح http مانند جعل درخواست بین سایتی (CSRF یا XSRF) و گنجاندن اسکریپت بین سایتی (XSSI) است. حتی اگر این آسیب‌پذیری‌ها باید در سمت سرور کاهش یابند، Angular کمک‌هایی را برای آسان‌تر کردن ادغام در سمت کلاینت ارائه می‌کند.
      
 
        
-
      1. HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود
        2. 
-
      2. کتابخانه HttpClient قرارداد پاسخ‌های JSON پیشوندی را تشخیص می‌دهد (که js غیرقابل اجرا با نویسه‌های ")]}'،\n" کد می‌کند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخ‌های قبل حذف می‌کند. تجزیه بیشتر
        3. 
+
      3. HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود
        4. 
+
      4. کتابخانه HttpClient قرارداد پاسخ‌های JSON پیشوندی را تشخیص می‌دهد (که js غیرقابل اجرا با نویسه‌های ")]}'،\n" کد می‌کند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخ‌های قبل حذف می‌کند. تجزیه بیشتر
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      40. 
 
    40. 
-
      Http  ها چیا هستن؟Interceptors
      
-
      رهگیرهای Http بخشی از @angular/common/http هستند که درخواست‌های HTTP را از برنامه شما به سرور و برعکس در پاسخ‌های HTTP بررسی و تبدیل می‌کنند. این رهگیرها می توانند انواع مختلفی از وظایف ضمنی، از احراز هویت گرفته تا ثبت را انجام دهند.
      
-
      نحو رابط HttpInterceptor مانند زیر است.
      
+
      Http  ها چیا هستن؟Interceptors
      
+
      رهگیرهای Http بخشی از @angular/common/http هستند که درخواست‌های HTTP را از برنامه شما به سرور و برعکس در پاسخ‌های HTTP بررسی و تبدیل می‌کنند. این رهگیرها می توانند انواع مختلفی از وظایف ضمنی، از احراز هویت گرفته تا ثبت را انجام دهند.
      
+
      نحو رابط HttpInterceptor مانند زیر است.
      
 
-
      interface HttpInterceptor {
+
      interface HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
 }
 
      
-
      شما می توانید با اعلان یک کلاس سرویس که متد intercept() رابط HttpInterceptor را پیاده سازی می کند، از interceptors استفاده کنید.
      
+
      شما می توانید با اعلان یک کلاس سرویس که متد intercept() رابط HttpInterceptor را پیاده سازی می کند، از interceptors استفاده کنید.
      
 
-
      @Injectable()
+
      @Injectable()
 export class MyInterceptor implements HttpInterceptor {
     constructor() {}
-    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         ...
     }
 }
 
      
-
      پس از آن می توانید از آن در ماژول خود استفاده کنید،
      
+
      پس از آن می توانید از آن در ماژول خود استفاده کنید،
      
 
-
      @NgModule({
+
      @NgModule({
     ...
-    providers: [
+    providers: [
         {
-            provide: HTTP_INTERCEPTORS,
-            useClass: MyInterceptor,
-            multi: true
+            provide: HTTP_INTERCEPTORS,
+            useClass: MyInterceptor,
+            multi: true
         }
     ]
     ...
 })
 export class AppModule {}
 
      
-
      فهرست
      
+
      فهرست
      
 
      41. 
 
    41. 
-
      کاربرد های مربوط به HTTP interceptor ها چیا هستن؟
      
-
      رهگیرهای HTTP را می توان برای انواع مختلفی از وظایف استفاده کرد،
      
+
      کاربرد های مربوط به HTTP interceptor ها چیا هستن؟
      
+
      رهگیرهای HTTP را می توان برای انواع مختلفی از وظایف استفاده کرد،
      
 
        
-
      1. Authentication
        2. 
-
      2. Logging
        3. 
-
      3. Caching
        4. 
-
      4. Fake backend
        5. 
-
      5. URL transformation
        6. 
-
      6. Modifying headers
        7. 
+
      7. Authentication
        8. 
+
      8. Logging
        9. 
+
      9. Caching
        10. 
+
      10. Fake backend
        11. 
+
      11. URL transformation
        12. 
+
      12. Modifying headers
        13. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      42. 
 
    42. 
-
      داشتن interceptor های چن تایی توی انگولار پشتیبانی میشه؟
      
-
      بله، Angular از چندین رهگیر در یک زمان پشتیبانی می کند. می توانید چندین رهگیر را در ویژگی ارائه دهندگان تعریف کنید:
      
+
      داشتن interceptor های چن تایی توی انگولار پشتیبانی میشه؟
      
+
      بله، Angular از چندین رهگیر در یک زمان پشتیبانی می کند. می توانید چندین رهگیر را در ویژگی ارائه دهندگان تعریف کنید:
      
 
-
      providers: [
-     { provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },
-     { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
+
      providers: [
+     { provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },
+     { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
 ],
 
      
-
      رهگیرها به ترتیبی که ارائه شده اند فراخوانی می شوند. i.n، MyFirst Interceptor ابتدا در پیکربندی رهگیرهای بالا فراخوانی می شود.
      
-
      فهرست
      
+
      رهگیرها به ترتیبی که ارائه شده اند فراخوانی می شوند. i.n، MyFirst Interceptor ابتدا در پیکربندی رهگیرهای بالا فراخوانی می شود.
      
+
      فهرست
      
 
      43. 
 
    43. 
-
      چطوری میتونم از interceptor برای کل پروژه استفاده کنم؟
      
-
      می‌توانید با وارد کردن «HttpClientModule» فقط در AppModule خود، از همان نمونه «HttpInterceptors» برای کل برنامه استفاده کنید، و رهگیرها را به انژکتور برنامه root اضافه کنید.
      
-برای مثال، بیایید کلاسی را تعریف کنیم که در برنامه root قابل تزریق باشد.
      
+
      چطوری میتونم از interceptor برای کل پروژه استفاده کنم؟
      
+
      می‌توانید با وارد کردن «HttpClientModule» فقط در AppModule خود، از همان نمونه «HttpInterceptors» برای کل برنامه استفاده کنید، و رهگیرها را به انژکتور برنامه root اضافه کنید.
      
+برای مثال، بیایید کلاسی را تعریف کنیم که در برنامه root قابل تزریق باشد.
      
 
-
      @Injectable()
+
      @Injectable()
 export class MyInterceptor implements HttpInterceptor {
      intercept(
-          req: HttpRequest<any>,
-          next: HttpHandler
+          req: HttpRequest<any>,
+          next: HttpHandler
      ): Observable<HttpEvent<any>> {
           return next.handle(req).do(event => {
                if (eventt instanceof HttpResponse) {
@@ -12838,9 +4493,9 @@ 
      چطوری میتونم از interceptor برای کل پروژه استفا
 
      
 
      44. 
 
    
-
    پس از آن، HttpClientModule را در AppModule وارد کنید
+
    پس از آن، HttpClientModule را در AppModule وارد کنید
  
- <span dir="ltr" align="left">
+ <span dir="ltr" align="left">
 
  ```js
  @NgModule({
@@ -12856,46 +4511,46 @@ 
    چطوری میتونم از interceptor برای کل پروژه استفا
  
  </span>
 
- **[فهرست](#فهرست)**
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      چطوری انگولار internationalization رو انجام میده؟
      
-
      Angular زمینه های بین المللی سازی زیر را ساده می کند:
      
+
      چطوری انگولار internationalization رو انجام میده؟
      
+
      Angular زمینه های بین المللی سازی زیر را ساده می کند:
      
 
        
-
      1. نمایش تاریخ، عدد، درصد و ارز در قالب محلی.
        2. 
-
      2. آماده سازی متن در قالب های مؤلفه برای ترجمه.
        3. 
-
      3. رسیدگی به اشکال جمع کلمات.
        4. 
-
      4. مدیریت متن جایگزین.
        5. 
+
      5. نمایش تاریخ، عدد، درصد و ارز در قالب محلی.
        6. 
+
      6. آماده سازی متن در قالب های مؤلفه برای ترجمه.
        7. 
+
      7. رسیدگی به اشکال جمع کلمات.
        8. 
+
      8. مدیریت متن جایگزین.
        9. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      2. 
 
    2. 
-
      چطوری به صورت دستی دیتای لوکال رو ذخیره میکنی؟
      
-
      به‌طور پیش‌فرض، Angular فقط حاوی داده‌های محلی برای en-US است که انگلیسی است که در ایالات متحده آمریکا صحبت می‌شود. اما اگر می‌خواهید روی محلی دیگر تنظیم کنید، باید داده‌های محلی را برای آن محلی جدید وارد کنید. پس از آن می توانید با استفاده از روش «registerLocaleData» ثبت نام کنید و نحو این روش به شکل زیر است.
      
+
      چطوری به صورت دستی دیتای لوکال رو ذخیره میکنی؟
      
+
      به‌طور پیش‌فرض، Angular فقط حاوی داده‌های محلی برای en-US است که انگلیسی است که در ایالات متحده آمریکا صحبت می‌شود. اما اگر می‌خواهید روی محلی دیگر تنظیم کنید، باید داده‌های محلی را برای آن محلی جدید وارد کنید. پس از آن می توانید با استفاده از روش «registerLocaleData» ثبت نام کنید و نحو این روش به شکل زیر است.
      
 
-
      registerLocaleData(data: any, localeId?: any, extraData?: any): void
+
      registerLocaleData(data: any, localeId?: any, extraData?: any): void
 
      
-
      به عنوان مثال، اجازه دهید ما زبان آلمانی را وارد کنیم و آن را در برنامه ثبت کنیم
      
+
      به عنوان مثال، اجازه دهید ما زبان آلمانی را وارد کنیم و آن را در برنامه ثبت کنیم
      
 
-
      import { registerLocaleData } from '@angular/common';
-import localeDe from '@angular/common/locales/de';
+
      import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
 
-registerLocaleData(localeDe, 'de');
+registerLocaleData(localeDe, 'de');
 
      
-
      فهرست
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      چهار فازی که برای ترجمه انجام میشه چیا هستن؟
      
-
      فرآیند ترجمه قالب i18n دارای چهار مرحله است:
      
+
      چهار فازی که برای ترجمه انجام میشه چیا هستن؟
      
+
      فرآیند ترجمه قالب 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>
+
      <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
@@ -12903,23 +4558,23 @@ 
      چهار فازی که برای ترجمه انجام میشه چیا هست
  ```
 
      
       
-
      دستور بالا فایلی به نام «messages.xlf» در دایرکتوری ریشه پروژه شما ایجاد می کند.
      
-
      Note: می توانید گزینه های دستوری را برای تغییر قالب، نام، مکان و محل منبع فایل استخراج شده ارائه کنید.
      
+
      دستور بالا فایلی به نام «messages.xlf» در دایرکتوری ریشه پروژه شما ایجاد می کند.
      
+
      Note: می توانید گزینه های دستوری را برای تغییر قالب، نام، مکان و محل منبع فایل استخراج شده ارائه کنید.
      
 
        
-
      1. Edit the generated translation file: متن استخراج شده را به زبان مقصد ترجمه کنید. در این مرحله، یک پوشه محلی سازی (مانند «locale») در زیر پوشه ریشه (src) ایجاد کنید و سپس با کپی کردن و تغییر نام فایل پیش فرض messages.xlf، فایل ترجمه زبان مقصد را ایجاد کنید. شما باید گره متن منبع را کپی کنید و ترجمه را تحت تگ هدف ارائه دهید.
        
-به عنوان مثال، فایل ترجمه (messages.de.xlf) را برای زبان آلمانی ایجاد کنید
        2. 
+
      2. Edit the generated translation file: متن استخراج شده را به زبان مقصد ترجمه کنید. در این مرحله، یک پوشه محلی سازی (مانند «locale») در زیر پوشه ریشه (src) ایجاد کنید و سپس با کپی کردن و تغییر نام فایل پیش فرض messages.xlf، فایل ترجمه زبان مقصد را ایجاد کنید. شما باید گره متن منبع را کپی کنید و ترجمه را تحت تگ هدف ارائه دهید.
        
+به عنوان مثال، فایل ترجمه (messages.de.xlf) را برای زبان آلمانی ایجاد کنید
        3. 
 
      
 
-
      <trans-unit id="greetingHeader" datatype="html">
+
      <trans-unit id="greetingHeader" datatype="html">
 <source>Hello i18n!</source>
 <target>Hallo i18n !</target>
-<note priority="1" from="description">A welcome header for this sample</note>
-<note priority="1" from="meaning">welcome message</note>
+<note priority="1" from="description">A welcome header for this sample</note>
+<note priority="1" from="meaning">welcome message</note>
 </trans-unit>
 
      
 
        
 
      1. 
-
        Merge the completed translation file into the app: شما باید از دستور ساخت Angular CLI برای کامپایل برنامه، انتخاب یک پیکربندی خاص محلی، یا مشخص کردن گزینه های دستور زیر استفاده کنید.
        
+
        Merge the completed translation file into the app: شما باید از دستور ساخت Angular CLI برای کامپایل برنامه، انتخاب یک پیکربندی خاص محلی، یا مشخص کردن گزینه های دستور زیر استفاده کنید.
        
 
        2. 
 
      2. 
 
        --i18nFile=path to the translation file
        
@@ -12931,248 +4586,248 @@ 
        چهار فازی که برای ترجمه انجام میشه چیا هست
 
        --i18nLocale= locale id
        
 
        3. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      هدف از اتربیوت i18n چیه ؟
      
-
      ویژگی Angular i18n محتوای قابل ترجمه را علامت گذاری می کند. این یک ویژگی سفارشی است که توسط ابزارها و کامپایلرهای Angular شناسایی می شود. کامپایلر پس از ترجمه آن را حذف می کند.
      
-
      Note: به یاد داشته باشید که i18n یک دستورالعمل Angular نیست.
      
-
      فهرست
      
+
      هدف از اتربیوت i18n چیه ؟
      
+
      ویژگی Angular i18n محتوای قابل ترجمه را علامت گذاری می کند. این یک ویژگی سفارشی است که توسط ابزارها و کامپایلرهای Angular شناسایی می شود. کامپایلر پس از ترجمه آن را حذف می کند.
      
+
      Note: به یاد داشته باشید که i18n یک دستورالعمل Angular نیست.
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      هدف از custom id چیه؟
      
-
      هنگامی که متن قابل ترجمه را تغییر می‌دهید، ابزار استخراج Angular یک شناسه جدید برای آن واحد ترجمه ایجاد می‌کند. به دلیل این رفتار، باید هر بار فایل ترجمه را با شناسه جدید به روز کنید.
      
-
      برای مثال، فایل ترجمه «messages.de.xlf.html» برای برخی از پیام‌های متنی زیر واحد انتقال ایجاد کرده است:
      
+
      هدف از custom id چیه؟
      
+
      هنگامی که متن قابل ترجمه را تغییر می‌دهید، ابزار استخراج Angular یک شناسه جدید برای آن واحد ترجمه ایجاد می‌کند. به دلیل این رفتار، باید هر بار فایل ترجمه را با شناسه جدید به روز کنید.
      
+
      برای مثال، فایل ترجمه «messages.de.xlf.html» برای برخی از پیام‌های متنی زیر واحد انتقال ایجاد کرده است:
      
 
-
      <trans-unit id="827wwe104d3d69bf669f823jjde888" datatype="html">
+
      <trans-unit id="827wwe104d3d69bf669f823jjde888" datatype="html">
 
      
-
      می‌توانید با تعیین یک شناسه سفارشی در ویژگی i18n با استفاده از پیشوند @@ از این به‌روزرسانی دستی ویژگی «id» اجتناب کنید.
      
+
      می‌توانید با تعیین یک شناسه سفارشی در ویژگی i18n با استفاده از پیشوند @@ از این به‌روزرسانی دستی ویژگی «id» اجتناب کنید.
      
 
-
      <h1 i18n="@@welcomeHeader">Hello i18n!</h1>
+
      <h1 i18n="@@welcomeHeader">Hello i18n!</h1>
 
      
-
      فهرست
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      اگه یه custom id, unique نباشه چه اتفاقی میوفته؟
      
-
      شما باید شناسه های سفارشی را منحصر به فرد تعریف کنید. اگر از یک شناسه برای دو پیام متنی مختلف استفاده می کنید، فقط اولین مورد استخراج می شود. اما ترجمه آن به جای هر دو پیامک اصلی استفاده می شود.
      
-
      برای مثال، بیایید همان شناسه سفارشی myCustomId را برای دو پیام تعریف کنیم:
      
+
      اگه یه custom id, unique نباشه چه اتفاقی میوفته؟
      
+
      شما باید شناسه های سفارشی را منحصر به فرد تعریف کنید. اگر از یک شناسه برای دو پیام متنی مختلف استفاده می کنید، فقط اولین مورد استخراج می شود. اما ترجمه آن به جای هر دو پیامک اصلی استفاده می شود.
      
+
      برای مثال، بیایید همان شناسه سفارشی myCustomId را برای دو پیام تعریف کنیم:
      
 
-
      <h2 i18n="@@myCustomId">Good morning</h3>
+
      <h2 i18n="@@myCustomId">Good morning</h3>
 <!-- ... -->
-<h2 i18n="@@myCustomId">Good night</p>
+<h2 i18n="@@myCustomId">Good night</p>
 
      
-
      و واحد ترجمه برای اولین متن در زبان آلمانی به عنوان
      
+
      و واحد ترجمه برای اولین متن در زبان آلمانی به عنوان
      
 
-
      <trans-unit id="myId" datatype="html">
+
      <trans-unit id="myId" datatype="html">
   <source>Good morning</source>
-  <target state="new">Guten Morgen</target>
+  <target state="new">Guten Morgen</target>
 </trans-unit>
 
      
-
      از آنجایی که شناسه سفارشی یکسان است، هر دو عنصر در ترجمه حاوی متنی مشابه زیر هستند
      
+
      از آنجایی که شناسه سفارشی یکسان است، هر دو عنصر در ترجمه حاوی متنی مشابه زیر هستند
      
 
-
      <h2>Guten Morgen</h2>
+
      <h2>Guten Morgen</h2>
 <h2>Guten Morgen</h2>
 
      
-
      فهرست
      
+
      فهرست
      
 
      7. 
 
    7. 
-
      میتونم یه متن رو بدون ساخت المنت ترجمه کنم؟
      
-
      بله، می‌توانید با استفاده از ویژگی «» به آن دست پیدا کنید. معمولاً برای ترجمه باید محتوای متنی را با ویژگی i18n بپیچید. اما اگر نمی‌خواهید یک عنصر DOM جدید فقط به خاطر ترجمه ایجاد کنید، می‌توانید متن را در یک عنصر  بپیچید.
      
+
      میتونم یه متن رو بدون ساخت المنت ترجمه کنم؟
      
+
      بله، می‌توانید با استفاده از ویژگی «» به آن دست پیدا کنید. معمولاً برای ترجمه باید محتوای متنی را با ویژگی i18n بپیچید. اما اگر نمی‌خواهید یک عنصر DOM جدید فقط به خاطر ترجمه ایجاد کنید، می‌توانید متن را در یک عنصر  بپیچید.
      
 
-
      <ng-container i18n>I'm not using any DOM element for translation</ng-container>
+
      <ng-container i18n>I'm not using any DOM element for translation</ng-container>
 
      
-
      به یاد داشته باشید که «» به یک نظر html تبدیل می شود
      
-
      فهرست
      
+
      به یاد داشته باشید که «» به یک نظر html تبدیل می شود
      
+
      فهرست
      
 
      8. 
 
    8. 
-
      چطوری میتونم اتربیوت ها رو ترجمه کنم؟
      
-
      می‌توانید ویژگی‌ها را با پیوست کردن ویژگی «i18n-x» ترجمه کنید، جایی که x نام ویژگی برای ترجمه است. به عنوان مثال، می توانید ویژگی عنوان تصویر را به صورت زیر ترجمه کنید.
      
+
      چطوری میتونم اتربیوت ها رو ترجمه کنم؟
      
+
      می‌توانید ویژگی‌ها را با پیوست کردن ویژگی «i18n-x» ترجمه کنید، جایی که x نام ویژگی برای ترجمه است. به عنوان مثال، می توانید ویژگی عنوان تصویر را به صورت زیر ترجمه کنید.
      
 
-
      <img [src]="example" i18n-title title="Internationlization" />
+
      <img [src]="example" i18n-title title="Internationlization" />
 
      
 
      9. 
 
    
-
    به هر حال، شما همچنین می توانید معنی، توضیحات و شناسه را با نحو i18n-x="<meaning>|<description>@@<id>" اختصاص دهید.
+
    به هر حال، شما همچنین می توانید معنی، توضیحات و شناسه را با نحو i18n-x="<meaning>|<description>@@<id>" اختصاص دهید.
 
- **[فهرست](#فهرست)**
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      دسته بندی های pluralization رو لیست کن؟
      
-
      تعدد بسته به زبان دارای دسته های زیر است.
      
+
      دسته بندی های pluralization رو لیست کن؟
      
+
      تعدد بسته به زبان دارای دسته های زیر است.
      
 
        
-
      1. = 0 (یا هر عدد دیگری)
        2. 
-
      2. صفر
        3. 
-
      3. یک
        4. 
-
      4. دو
        5. 
-
      5. تعداد کمی
        6. 
-
      6. بسیاری
        7. 
-
      7. دیگر
        8. 
+
      8. = 0 (یا هر عدد دیگری)
        9. 
+
      9. صفر
        10. 
+
      10. یک
        11. 
+
      11. دو
        12. 
+
      12. تعداد کمی
        13. 
+
      13. بسیاری
        14. 
+
      14. دیگر
        15. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      2. 
 
    2. 
-
      عبارت برای انتخاب ICU چیه؟
      
-
      عبارت ICU شبیه عبارات جمع است با این تفاوت که شما از بین ترجمه های جایگزین بر اساس مقدار رشته به جای عدد انتخاب می کنید. در اینجا شما آن مقادیر رشته را تعریف می کنید.
      
-
      بیایید مؤلفه را با ویژگی «residenceStatus» که دارای مقادیر ممکن «شهروند»، «مقیم دائم» و «خارجی» است، در نظر بگیریم و پیام آن مقادیر را به ترجمه‌های مناسب نگاشت می‌کند.
      
+
      عبارت برای انتخاب ICU چیه؟
      
+
      عبارت ICU شبیه عبارات جمع است با این تفاوت که شما از بین ترجمه های جایگزین بر اساس مقدار رشته به جای عدد انتخاب می کنید. در اینجا شما آن مقادیر رشته را تعریف می کنید.
      
+
      بیایید مؤلفه را با ویژگی «residenceStatus» که دارای مقادیر ممکن «شهروند»، «مقیم دائم» و «خارجی» است، در نظر بگیریم و پیام آن مقادیر را به ترجمه‌های مناسب نگاشت می‌کند.
      
 
-
      <span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>
+
      <span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>
 
      
-
      فهرست
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      چطوری ترجمه های ناقص رو گزارش میکنی؟
      
-
      به‌طور پیش‌فرض، هنگامی که ترجمه وجود ندارد، پیام هشداری مانند «ترجمه از دست رفته برای پیام «somekey» ایجاد می‌کند. اما می توانید با سطح متفاوتی از پیام در کامپایلر Angular به صورت زیر پیکربندی کنید.
      
+
      چطوری ترجمه های ناقص رو گزارش میکنی؟
      
+
      به‌طور پیش‌فرض، هنگامی که ترجمه وجود ندارد، پیام هشداری مانند «ترجمه از دست رفته برای پیام «somekey» ایجاد می‌کند. اما می توانید با سطح متفاوتی از پیام در کامپایلر Angular به صورت زیر پیکربندی کنید.
      
 
        
-
      1. Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود.
        2. 
-
      2. Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان می‌دهد.
        3. 
-
      3. Ignore: هیچ کاری نمی کند.
        4. 
+
      4. Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود.
        5. 
+
      5. Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان می‌دهد.
        6. 
+
      6. Ignore: هیچ کاری نمی کند.
        7. 
 
      
-
      اگر از کامپایلر AOT استفاده می کنید، باید تغییراتی را در بخش پیکربندی فایل پیکربندی Angular CLI خود، angular.json انجام دهید.
      
+
      اگر از کامپایلر AOT استفاده می کنید، باید تغییراتی را در بخش پیکربندی فایل پیکربندی Angular CLI خود، angular.json انجام دهید.
      
 
-
      "configurations": {
+
      "configurations": {
   ...
-  "de": {
+  "de": {
     ...
-    "i18nMissingTranslation": "error"
+    "i18nMissingTranslation": "error"
   }
 }
 
      
-
      اگر از کامپایلر JIT استفاده می کنید، سطح هشدار را در پیکربندی کامپایلر در بوت استرپ با افزودن ویژگی MissingTranslationStrategy به صورت زیر مشخص کنید:
      
+
      اگر از کامپایلر JIT استفاده می کنید، سطح هشدار را در پیکربندی کامپایلر در بوت استرپ با افزودن ویژگی MissingTranslationStrategy به صورت زیر مشخص کنید:
      
 
-
      import { MissingTranslationStrategy } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+
      import { MissingTranslationStrategy } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule, {
-  missingTranslation: MissingTranslationStrategy.Error,
-  providers: [
+  missingTranslation: MissingTranslationStrategy.Error,
+  providers: [
     // ...
   ]
 });
 
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      چطوری برای مناطق مختلف build رو کانفیگ میکنی؟
      
-
      می‌توانید پیکربندی ساخت مانند مسیر فایل ترجمه، نام، قالب و آدرس برنامه را در تنظیمات «پیکربندی» فایل Angular.json ارائه کنید. به عنوان مثال، نسخه آلمانی برنامه شما بیلد را به صورت زیر پیکربندی کرده است:
      
+
      چطوری برای مناطق مختلف build رو کانفیگ میکنی؟
      
+
      می‌توانید پیکربندی ساخت مانند مسیر فایل ترجمه، نام، قالب و آدرس برنامه را در تنظیمات «پیکربندی» فایل Angular.json ارائه کنید. به عنوان مثال، نسخه آلمانی برنامه شما بیلد را به صورت زیر پیکربندی کرده است:
      
 
-
      "configurations": {
-     "de": {
-          "aot": true,
-          "outputPath": "dist/my-project-de/",
-          "baseHref": "/fr/",
-          "i18nFile": "src/locale/messages.de.xlf",
-          "i18nFormat": "xlf",
-          "i18nLocale": "de",
-          "i18nMissingTranslation": "error",
+
      "configurations": {
+     "de": {
+          "aot": true,
+          "outputPath": "dist/my-project-de/",
+          "baseHref": "/fr/",
+          "i18nFile": "src/locale/messages.de.xlf",
+          "i18nFormat": "xlf",
+          "i18nLocale": "de",
+          "i18nMissingTranslation": "error",
      }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      منظور از کتابخونه انگولار چیه؟
      
-
      کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد زیرا نمی تواند به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخانه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنید که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند.
      
-
      Note: شما می توانید کتابخانه شخص ثالث خود را ایجاد کنید و آن را به عنوان بسته npm منتشر کنید تا در یک برنامه استفاده شود.
      
-
      فهرست
      
+
      منظور از کتابخونه انگولار چیه؟
      
+
      کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد زیرا نمی تواند به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، می‌توانید کتابخانه «سرویس‌کار» را به یک برنامه Angular وارد یا اضافه کنید که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل می‌کند.
      
+
      Note: شما می توانید کتابخانه شخص ثالث خود را ایجاد کنید و آن را به عنوان بسته npm منتشر کنید تا در یک برنامه استفاده شود.
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      کامپایلر AOT چیه؟
      
-
      کامپایلر AOT بخشی از یک فرآیند ساخت است که یک بسته برنامه کوچک، سریع و آماده برای اجرا تولید می‌کند، معمولاً برای تولید. این کد Angular HTML و TypeScript شما را در مرحله ساخت قبل از دانلود و اجرای آن کد به کد جاوا اسکریپت کارآمد تبدیل می کند.
      
-
      فهرست
      
+
      کامپایلر AOT چیه؟
      
+
      کامپایلر AOT بخشی از یک فرآیند ساخت است که یک بسته برنامه کوچک، سریع و آماده برای اجرا تولید می‌کند، معمولاً برای تولید. این کد Angular HTML و TypeScript شما را در مرحله ساخت قبل از دانلود و اجرای آن کد به کد جاوا اسکریپت کارآمد تبدیل می کند.
      
+
      فهرست
      
 
      7. 
 
    7. 
-
      چطوری یه المنت رو از توی ساختار کامپوننت انتخاب میکنی؟
      
-
      شما می توانید هر عنصر DOM را از طریق ElementRef با تزریق آن به سازنده کامپوننت خود کنترل کنید. یعنی کامپوننت باید سازنده ای با پارامتر ElementRef داشته باشد،
      
+
      چطوری یه المنت رو از توی ساختار کامپوننت انتخاب میکنی؟
      
+
      شما می توانید هر عنصر DOM را از طریق ElementRef با تزریق آن به سازنده کامپوننت خود کنترل کنید. یعنی کامپوننت باید سازنده ای با پارامتر ElementRef داشته باشد،
      
 
-
      constructor(myElement: ElementRef) {
-   el.nativeElement.style.backgroundColor = 'yellow';
+
      constructor(myElement: ElementRef) {
+   el.nativeElement.style.backgroundColor = 'yellow';
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      8. 
 
    8. 
-
      TestBed چیه؟
      
-
      TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخانه های آن است. حتی با وجود اینکه ما هنوز تست‌های خود را در Jasmine می‌نویسیم و با استفاده از Karma اجرا می‌کنیم، این API راه آسان‌تری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه می‌کند.
      
-
      فهرست
      
+
      TestBed چیه؟
      
+
      TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخانه های آن است. حتی با وجود اینکه ما هنوز تست‌های خود را در Jasmine می‌نویسیم و با استفاده از Karma اجرا می‌کنیم، این API راه آسان‌تری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه می‌کند.
      
+
      فهرست
      
 
      9. 
 
    9. 
-
      protractor چیه؟
      
-
      نقاله یک چارچوب تست سرتاسر برای برنامه های Angular و AngularJS است. این برنامه آزمایش هایی را بر روی برنامه شما که در یک مرورگر واقعی اجرا می شود، اجرا می کند و مانند یک کاربر با آن تعامل دارد.
      
+
      protractor چیه؟
      
+
      نقاله یک چارچوب تست سرتاسر برای برنامه های Angular و AngularJS است. این برنامه آزمایش هایی را بر روی برنامه شما که در یک مرورگر واقعی اجرا می شود، اجرا می کند و مانند یک کاربر با آن تعامل دارد.
      
 
-
      npm install -g protractor
+
      npm install -g protractor
 
      
-
      فهرست
      
+
      فهرست
      
 
      10. 
 
    10. 
-
      منظور زا  collection چیه؟
      
-
      مجموعه مجموعه ای از شماتیک های مرتبط است که در یک بسته npm جمع آوری شده است. به عنوان مثال، مجموعه @schematics/angular در Angular CLI برای اعمال تبدیل به یک پروژه برنامه وب استفاده می شود. شما می توانید مجموعه شماتیک خود را برای سفارشی سازی پروژه های زاویه ای ایجاد کنید.
      
-
      فهرست
      
+
      منظور زا  collection چیه؟
      
+
      مجموعه مجموعه ای از شماتیک های مرتبط است که در یک بسته npm جمع آوری شده است. به عنوان مثال، مجموعه @schematics/angular در Angular CLI برای اعمال تبدیل به یک پروژه برنامه وب استفاده می شود. شما می توانید مجموعه شماتیک خود را برای سفارشی سازی پروژه های زاویه ای ایجاد کنید.
      
+
      فهرست
      
 
      11. 
 
    11. 
-
      How do you create schematics for libraries?
      
-
      شما می توانید مجموعه های شماتیک خود را برای ادغام کتابخانه خود با Angular CLI ایجاد کنید. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی می شوند.
      
+
      How do you create schematics for libraries?
      
+
      شما می توانید مجموعه های شماتیک خود را برای ادغام کتابخانه خود با Angular CLI ایجاد کنید. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی می شوند.
      
 
        
-
      1. Add schematics: این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده می شود.
        
-برای مثال، @angular/material schematic به دستور add دستور نصب و راه اندازی Angular Material و theming را می دهد.
        2. 
-
      2. Generate schematics: این شماتیک ها برای اصلاح پروژه ها، افزودن پیکربندی ها و اسکریپت ها و مصنوعات داربست در کتابخانه با استفاده از دستور "ng generate" استفاده می شوند.
        
-برای مثال، @angular/material schematic شماتیک های تولید را برای اجزای UI فراهم می کند. فرض کنید مولفه جدول با استفاده از "ng generate @angular/material:table" تولید شده است.
        3. 
-
      3. Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده می شود.
        
-به عنوان مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز می کند.
        4. 
+
      4. Add schematics: این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده می شود.
        
+برای مثال، @angular/material schematic به دستور add دستور نصب و راه اندازی Angular Material و theming را می دهد.
        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. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      12. 
 
    12. 
-
      چطوری از Jquery توی انگولار استفاده میکنی؟
      
-
      می توانید با استفاده از 3 مرحله ساده از jquery در Angular استفاده کنید.
      
+
      چطوری از Jquery توی انگولار استفاده میکنی؟
      
+
      می توانید با استفاده از 3 مرحله ساده از jquery در Angular استفاده کنید.
      
 
        
-
      1. Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید
        2. 
+
      2. Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید
        3. 
 
      
 
-
           npm install --save jquery
+
           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": [
-     "node_modules/jquery/dist/jquery.min.js"
+
      "scripts": [
+     "node_modules/jquery/dist/jquery.min.js"
 ]
 
      
 
        
-
      1. Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید.
        2. 
+
      2. Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید.
        3. 
 
      
 
-
      <div id="elementId">
+
      <div id="elementId">
      <h1>JQuery integration</h1>
 </div>
 
      
 
-
      import {Component, OnInit} from '@angular/core';
+
      import {Component, OnInit} from '@angular/core';
 
-declare var $: any; // (or) import * as $ from 'jquery';
+declare var $: any; // (or) import * as $ from 'jquery';
 
 @Component({
-     selector: 'app-root',
-     templateUrl: './app.component.html',
-     styleUrls: ['./app.component.css']
+     selector: 'app-root',
+     templateUrl: './app.component.html',
+     styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
      ngOnInit(): void {
           $(document).ready(() => {
-               $('#elementId').css({'text-color': 'blue', 'font-size': '150%'});
+               $('#elementId').css({'text-color': 'blue', 'font-size': '150%'});
           });
      }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      13. 
 
    13. 
-
      What is the reason for No provider for HTTP exception?
      
-
      این استثنا به دلیل عدم وجود HttpClientModule در ماژول شما است. شما فقط باید در ماژول به صورت زیر وارد کنید:
      
+
      What is the reason for No provider for HTTP exception?
      
+
      این استثنا به دلیل عدم وجود HttpClientModule در ماژول شما است. شما فقط باید در ماژول به صورت زیر وارد کنید:
      
 
-
      import { HttpClientModule } from '@angular/common/http';
+
      import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   imports: [
@@ -13184,305 +4839,305 @@ 
      What is the reason for No provider for HTTP exception?
      
 })
 export class AppModule { }
 
      
-
      فهرست
      
+
      فهرست
      
 
      14. 
 
    14. 
-
      منظور از router state چیه؟
      
-
      RouteState یک رابط است که وضعیت روتر را به عنوان درختی از مسیرهای فعال نشان می دهد.
      
+
      منظور از router state چیه؟
      
+
      RouteState یک رابط است که وضعیت روتر را به عنوان درختی از مسیرهای فعال نشان می دهد.
      
 
-
      interface RouterState extends Tree {
+
      interface RouterState extends Tree {
   snapshot: RouterStateSnapshot
   toString(): string
 }
 
      
-
      با استفاده از سرویس Router و ویژگی routerState می توانید از هر نقطه در برنامه Angular به RouterState فعلی دسترسی داشته باشید.
      
-
      فهرست
      
+
      با استفاده از سرویس Router و ویژگی routerState می توانید از هر نقطه در برنامه Angular به RouterState فعلی دسترسی داشته باشید.
      
+
      فهرست
      
 
      15. 
 
    15. 
-
      چطوری میتونم از SASS توی پروژه انگولار استفاده کنم؟
      
-
      هنگامی که پروژه خود را با cli زاویه ای ایجاد می کنید، می توانید از دستور "ng new" استفاده کنید. تمام اجزای شما را با فایل های sass از پیش تعریف شده تولید می کند.
      
+
      چطوری میتونم از SASS توی پروژه انگولار استفاده کنم؟
      
+
      هنگامی که پروژه خود را با cli زاویه ای ایجاد می کنید، می توانید از دستور "ng new" استفاده کنید. تمام اجزای شما را با فایل های sass از پیش تعریف شده تولید می کند.
      
 
-
      ng new My_New_Project --style=sass
+
      ng new My_New_Project --style=sass
 
      
-
      اما اگر سبک موجود خود را در پروژه خود تغییر می دهید، از دستور ng set استفاده کنید.
      
+
      اما اگر سبک موجود خود را در پروژه خود تغییر می دهید، از دستور ng set استفاده کنید.
      
 
-
      ng set defaults.styleExt scss
+
      ng set defaults.styleExt scss
 
      
-
      فهرست
      
+
      فهرست
      
 
      16. 
 
    16. 
-
      هدف از hidden property چیه؟
      
-
      ویژگی hidden برای نشان دادن یا پنهان کردن عنصر DOM مرتبط بر اساس یک عبارت استفاده می شود. می توان آن را نزدیک به دستورالعمل «ng-show» در AngularJS مقایسه کرد. فرض کنید می خواهید نام کاربری را بر اساس در دسترس بودن کاربر با استفاده از ویژگی "مخفی" نشان دهید.
      
+
      هدف از hidden property چیه؟
      
+
      ویژگی hidden برای نشان دادن یا پنهان کردن عنصر DOM مرتبط بر اساس یک عبارت استفاده می شود. می توان آن را نزدیک به دستورالعمل «ng-show» در AngularJS مقایسه کرد. فرض کنید می خواهید نام کاربری را بر اساس در دسترس بودن کاربر با استفاده از ویژگی "مخفی" نشان دهید.
      
 
-
      <div [hidden]="!user.name">
+
      <div [hidden]="!user.name">
   My name is: {{user.name}}
 </div>
 
      
-
      فهرست
      
+
      فهرست
      
 
      17. 
 
    17. 
-
      فرق بین ngIf و hidden property چیه؟
      
-
      تفاوت اصلی این است که *ngIf عنصر را از DOM حذف می کند، در حالی که [hidden] در واقع با تنظیم «display:none» با سبک CSS بازی می کند. به طور کلی اضافه کردن و حذف موارد از DOM برای اقدامات مکرر گران است.
      
-
      فهرست
      
+
      فرق بین ngIf و hidden property چیه؟
      
+
      تفاوت اصلی این است که *ngIf عنصر را از DOM حذف می کند، در حالی که [hidden] در واقع با تنظیم «display:none» با سبک CSS بازی می کند. به طور کلی اضافه کردن و حذف موارد از DOM برای اقدامات مکرر گران است.
      
+
      فهرست
      
 
      18. 
 
    18. 
-
      slice pipe چیه؟
      
-
      لوله slice برای ایجاد یک آرایه یا رشته جدید حاوی زیرمجموعه (برش) از عناصر استفاده می شود. سینتکس به شکل زیر است:
      
+
      slice pipe چیه؟
      
+
      لوله slice برای ایجاد یک آرایه یا رشته جدید حاوی زیرمجموعه (برش) از عناصر استفاده می شود. سینتکس به شکل زیر است:
      
 
-
      {{ value_expression | slice : start [ : end ] }}
+
      {{ value_expression | slice : start [ : end ] }}
 
      
-
      به عنوان مثال، شما می توانید لیست "hello" را بر اساس یک آرایه تبریک ارائه کنید،
      
+
      به عنوان مثال، شما می توانید لیست "hello" را بر اساس یک آرایه تبریک ارائه کنید،
      
 
-
      @Component({
-  selector: 'list-pipe',
+
      @Component({
+  selector: 'list-pipe',
   template: `<ul>
-    <li *ngFor="let i of greeting | slice:0:5">{{i}}</li>
+    <li *ngFor="let i of greeting | slice:0:5">{{i}}</li>
   </ul>`
 })
 export class PipeListComponent {
-  greeting: string[] = ['h', 'e', 'l', 'l', 'o', 'm','o', 'r', 'n', 'i', 'n', 'g'];
+  greeting: string[] = ['h', 'e', 'l', 'l', 'o', 'm','o', 'r', 'n', 'i', 'n', 'g'];
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      19. 
 
    19. 
-
      What is index property in ngFor directive?
      
+
      What is index property in ngFor directive?
      
 
      20. 
 
    
-
    ویژگی index دستورالعمل NgFor برای برگرداندن شاخص مبتنی بر صفر مورد در هر تکرار استفاده می شود. شما می توانید شاخص را در یک متغیر ورودی الگو گرفته و از آن در قالب استفاده کنید.
+
    ویژگی index دستورالعمل NgFor برای برگرداندن شاخص مبتنی بر صفر مورد در هر تکرار استفاده می شود. شما می توانید شاخص را در یک متغیر ورودی الگو گرفته و از آن در قالب استفاده کنید.
 
- به عنوان مثال، می‌توانید ایندکس را در متغیری به نام indexVar بگیرید و با استفاده از دستور ngFor به صورت زیر آن را با نام todo نمایش دهید.
+ به عنوان مثال، می‌توانید ایندکس را در متغیری به نام indexVar بگیرید و با استفاده از دستور ngFor به صورت زیر آن را با نام todo نمایش دهید.
 
  
- <span dir="ltr" align="left">
+ <span dir="ltr" align="left">
 
  ```cmd
- <div *ngFor="let todo of todos; let i=index">{{i + 1}} - {{todo.name}}</div>
+ <div *ngFor="let todo of todos; let i=index">{{i + 1}} - {{todo.name}}</div>
  ```
  
  </span>
 
- **[فهرست](#فهرست)**
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      هدف از ngFor trackBy چیه؟
      
-
      هدف اصلی استفاده از *ngFor with trackBy بهینه سازی عملکرد است. معمولاً اگر از NgFor با مجموعه داده‌های بزرگ استفاده می‌کنید، یک تغییر کوچک به یک آیتم با حذف یا اضافه کردن یک مورد، می‌تواند باعث ایجاد آبشاری از دستکاری‌های DOM شود. در این مورد، Angular فقط یک لیست تازه از ارجاعات اشیاء جدید و جایگزینی عناصر DOM قدیمی با تمام عناصر DOM جدید را می بیند. می‌توانید با ارائه یک تابع «trackBy» که فهرست و مورد فعلی را به‌عنوان آرگومان می‌گیرد و باید شناسه منحصربه‌فرد این مورد را برگرداند، به Angular کمک کنید تا موارد اضافه یا حذف شده را ردیابی کند.
      
+
      هدف از ngFor trackBy چیه؟
      
+
      هدف اصلی استفاده از *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">
+
      <div *ngFor="let todo of todos; trackBy: trackByTodos">
   ({{todo.id}}) {{todo.name}}
 </div>
 
      
 
      and define the trackByTodos method,
      
 
-
      trackByTodos(index: number, item: Todo): number { return todo.id; }
+
      trackByTodos(index: number, item: Todo): number { return todo.id; }
 
      
-
      فهرست
      
+
      فهرست
      
 
      2. 
 
    2. 
-
      هدف از دایرکتیو ngSwitch  چیه؟
      
-
      دستورالعمل NgSwitch شبیه دستور سوئیچ جاوا اسکریپت است که یک عنصر را از بین چندین عنصر ممکن بر اساس یک شرط سوئیچ نمایش می دهد. در این حالت فقط عنصر انتخاب شده در DOM قرار می گیرد. همراه با دستورات «NgSwitch»، «NgSwitchCase» و «NgSwitchDefault» استفاده شده است.
      
-
      به عنوان مثال، اجازه دهید جزئیات مرورگر را بر اساس مرورگر انتخابی با استفاده از دستورالعمل ngSwitch نمایش دهیم.
      
+
      هدف از دایرکتیو ngSwitch  چیه؟
      
+
      دستورالعمل NgSwitch شبیه دستور سوئیچ جاوا اسکریپت است که یک عنصر را از بین چندین عنصر ممکن بر اساس یک شرط سوئیچ نمایش می دهد. در این حالت فقط عنصر انتخاب شده در DOM قرار می گیرد. همراه با دستورات «NgSwitch»، «NgSwitchCase» و «NgSwitchDefault» استفاده شده است.
      
+
      به عنوان مثال، اجازه دهید جزئیات مرورگر را بر اساس مرورگر انتخابی با استفاده از دستورالعمل ngSwitch نمایش دهیم.
      
 
-
      <div [ngSwitch]="currentBrowser.name">
-     <chrome-browser    *ngSwitchCase="'chrome'"    [item]="currentBrowser"></chrome-browser>
-     <firefox-browser   *ngSwitchCase="'firefox'"     [item]="currentBrowser"></firefox-browser>
-     <opera-browser     *ngSwitchCase="'opera'"  [item]="currentBrowser"></opera-browser>
-     <safari-browser     *ngSwitchCase="'safari'"   [item]="currentBrowser"></safari-browser>
-     <ie-browser  *ngSwitchDefault           [item]="currentItem"></ie-browser>
+
      <div [ngSwitch]="currentBrowser.name">
+     <chrome-browser    *ngSwitchCase="'chrome'"    [item]="currentBrowser"></chrome-browser>
+     <firefox-browser   *ngSwitchCase="'firefox'"     [item]="currentBrowser"></firefox-browser>
+     <opera-browser     *ngSwitchCase="'opera'"  [item]="currentBrowser"></opera-browser>
+     <safari-browser     *ngSwitchCase="'safari'"   [item]="currentBrowser"></safari-browser>
+     <ie-browser  *ngSwitchDefault           [item]="currentItem"></ie-browser>
 </div>
 
      
-
      فهرست
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      Is it possible to do aliasing for inputs and outputs?
      
-
      بله، به دو صورت می توان برای ورودی ها و خروجی ها نام مستعار انجام داد.
      
+
      Is it possible to do aliasing for inputs and outputs?
      
+
      بله، به دو صورت می توان برای ورودی ها و خروجی ها نام مستعار انجام داد.
      
 
        
-
      1. نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود.
        2. 
+
      2. نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود.
        3. 
 
      
 
-
      inputs: ['input1: buyItem'],
-outputs: ['outputEvent1: completedEvent']
+
      inputs: ['input1: buyItem'],
+outputs: ['outputEvent1: completedEvent']
 
      
 
        
-
      1. Aliasing with @Input()/@Output() decorator: نام مستعار را می توان با ارسال نام مستعار به @Input()/@Output() decorator.i.e برای نام دارایی مشخص کرد. به شکل @Input(نام مستعار) یا @Output(نام مستعار) خواهد بود.
        2. 
+
      2. Aliasing with @Input()/@Output() decorator: نام مستعار را می توان با ارسال نام مستعار به @Input()/@Output() decorator.i.e برای نام دارایی مشخص کرد. به شکل @Input(نام مستعار) یا @Output(نام مستعار) خواهد بود.
        3. 
 
      
 
-
      @Input('buyItem') input1: string;
-@Output('completedEvent') outputEvent1 = new EventEmitter<string>();
+
      @Input('buyItem') input1: string;
+@Output('completedEvent') outputEvent1 = new EventEmitter<string>();
 
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      منظور از اپراتور امن safe navigation چیه؟
      
-
      اپراتور navigation  ایمن (؟) (یا به عنوان اپراتور الویس شناخته می شود) برای محافظت در برابر مقادیر null و undefined در مسیرهای ویژگی استفاده می شود، زمانی که شما از وجود یا عدم وجود یک مسیر اطلاع ندارید. یعنی مقدار مسیر شی را در صورت وجود برمی گرداند، در غیر این صورت مقدار null را برمی گرداند.
      
+
      منظور از اپراتور امن safe navigation چیه؟
      
+
      اپراتور 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>
+
      <p>The user firstName is: {{user?.fullName.firstName}}</p>
 
      
 
      Using this safe navigation operator, Angular framework stops evaluating the expression when it hits the first null value and renders the view without any errors.
      
-
      فهرست
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      تنظیمات خاصی برای انگولار 9 نیازه؟
      
-
      شما به پیکربندی خاصی نیاز ندارید. در Angular9، رندر Ivy کامپایلر پیش فرض Angular است. اگرچه Ivy خود Angular8 در دسترس است، باید آن را در فایل tsconfig.json به صورت زیر پیکربندی کنید:
      
+
      تنظیمات خاصی برای انگولار 9 نیازه؟
      
+
      شما به پیکربندی خاصی نیاز ندارید. در Angular9، رندر Ivy کامپایلر پیش فرض Angular است. اگرچه Ivy خود Angular8 در دسترس است، باید آن را در فایل tsconfig.json به صورت زیر پیکربندی کنید:
      
 
-
      "angularCompilerOptions": {    "enableIvy": true  }
+
      "angularCompilerOptions": {    "enableIvy": true  }
 
      
-
      فهرست
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      تغییرات تایپ های امن TestBed API توی انگولار 9 چیا بودن؟
      
-
      Angular 9 با جایگزینی تابع get قدیمی با روش inject جدید، تغییرات ایمن نوع را در تغییرات TestBed API ارائه می‌کند. زیرا روش TestBed.get از نظر نوع ایمن نیست. استفاده به شرح زیر خواهد بود،
      
+
      تغییرات تایپ های امن TestBed API توی انگولار 9 چیا بودن؟
      
+
      Angular 9 با جایگزینی تابع get قدیمی با روش inject جدید، تغییرات ایمن نوع را در تغییرات TestBed API ارائه می‌کند. زیرا روش TestBed.get از نظر نوع ایمن نیست. استفاده به شرح زیر خواهد بود،
      
 
-
      TestBed.get(ChangeDetectorRef) // returns any. It is deprecated now.
+
      TestBed.get(ChangeDetectorRef) // returns any. It is deprecated now.
 
 TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef
 
      
-
      فهرست
      
+
      فهرست
      
 
      7. 
 
    7. 
-
      ارسال فلگ static برای ViewChild اجباریه؟
      
-
      در Angular 8، پرچم استاتیک برای ViewChild مورد نیاز است. در حالی که در Angular9، دیگر نیازی به عبور از این ویژگی ندارید. هنگامی که با استفاده از «ng update» به Angular9 به‌روزرسانی کردید، انتقال اسکریپت { static: false } را در همه جا حذف می‌کند.
      
+
      ارسال فلگ static برای ViewChild اجباریه؟
      
+
      در Angular 8، پرچم استاتیک برای ViewChild مورد نیاز است. در حالی که در Angular9، دیگر نیازی به عبور از این ویژگی ندارید. هنگامی که با استفاده از «ng update» به Angular9 به‌روزرسانی کردید، انتقال اسکریپت { static: false } را در همه جا حذف می‌کند.
      
 
-
      @ViewChild(ChildDirective) child: ChildDirective; // Angular9 usage
+
      @ViewChild(ChildDirective) child: ChildDirective; // Angular9 usage
 @ViewChild(ChildDirective, { static: false }) child: ChildDirective; //Angular8 usage
 
      
-
      فهرست
      
+
      فهرست
      
 
      8. 
 
    8. 
-
      لیست مربوط به اپراتور های template expression چیا هستن؟
      
-
      زبان عبارت الگوی Angular از سه عملگر خاص قالب پشتیبانی می کند.
      
+
      لیست مربوط به اپراتور های template expression چیا هستن؟
      
+
      زبان عبارت الگوی Angular از سه عملگر خاص قالب پشتیبانی می کند.
      
 
        
-
      1. اپراتور لوله
        2. 
-
      2. اپراتور ناوبری ایمن
        3. 
-
      3. عملگر ادعای غیر تهی
        4. 
+
      4. اپراتور لوله
        5. 
+
      5. اپراتور ناوبری ایمن
        6. 
+
      6. عملگر ادعای غیر تهی
        7. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      9. 
 
    9. 
-
      فرق بین pipe و ternary operator ها چیه؟
      
-
      اپراتور لوله نسبت به اپراتور سه تایی (?😃 اولویت بیشتری دارد. به عنوان مثال، عبارت «اول؟ دوم : سوم | چهارم به عنوان «اول؟ دوم : (سوم | چهارم)`.
      
-
      فهرست
      
+
      فرق بین pipe و ternary operator ها چیه؟
      
+
      اپراتور لوله نسبت به اپراتور سه تایی (?😃 اولویت بیشتری دارد. به عنوان مثال، عبارت «اول؟ دوم : سوم | چهارم به عنوان «اول؟ دوم : (سوم | چهارم)`.
      
+
      فهرست
      
 
      10. 
 
    10. 
-
      منظور از entry component چیه؟
      
-
      مؤلفه ورودی هر مؤلفه ای است که Angular به طور ضروری بارگذاری می کند (یعنی عدم ارجاع آن در قالب) بر اساس نوع. به دلیل این رفتار، کامپایلر Angular در طول کامپایل نمی تواند آنها را پیدا کند. این مؤلفه ها به صورت پویا با «ComponentFactoryResolver» ایجاد می شوند.
      
-
      اساساً دو نوع اصلی از مؤلفه های ورودی وجود دارد که به شرح زیر است:
      
+
      منظور از entry component چیه؟
      
+
      مؤلفه ورودی هر مؤلفه ای است که Angular به طور ضروری بارگذاری می کند (یعنی عدم ارجاع آن در قالب) بر اساس نوع. به دلیل این رفتار، کامپایلر Angular در طول کامپایل نمی تواند آنها را پیدا کند. این مؤلفه ها به صورت پویا با «ComponentFactoryResolver» ایجاد می شوند.
      
+
      اساساً دو نوع اصلی از مؤلفه های ورودی وجود دارد که به شرح زیر است:
      
 
        
-
      1. مؤلفه ریشه بوت استرپ
        2. 
-
      2. مؤلفه ای که در مسیر مشخص می کنید
        3. 
+
      3. مؤلفه ریشه بوت استرپ
        4. 
+
      4. مؤلفه ای که در مسیر مشخص می کنید
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      11. 
 
    11. 
-
      منظور از bootstraped component چیه؟
      
-
      کامپوننت بوت استرپ یک جزء ورودی است که Angular در طول فرآیند بوت استرپ یا زمان راه اندازی برنامه در DOM بارگذاری می کند. به طور کلی، این مؤلفه بوت استرپ یا ریشه به عنوان «AppComponent» در ماژول ریشه شما با استفاده از ویژگی «bootstrap» به شرح زیر نامگذاری می شود.
      
+
      منظور از bootstraped component چیه؟
      
+
      کامپوننت بوت استرپ یک جزء ورودی است که Angular در طول فرآیند بوت استرپ یا زمان راه اندازی برنامه در DOM بارگذاری می کند. به طور کلی، این مؤلفه بوت استرپ یا ریشه به عنوان «AppComponent» در ماژول ریشه شما با استفاده از ویژگی «bootstrap» به شرح زیر نامگذاری می شود.
      
 
-
      @NgModule({
-     declarations: [
+
      @NgModule({
+     declarations: [
           AppComponent
      ],
-     imports: [
+     imports: [
           BrowserModule,
           FormsModule,
           HttpClientModule,
           AppRoutingModule
      ],
-     providers: [],
-     bootstrap: [AppComponent] // bootstrapped entry component need to be declared here
+     providers: [],
+     bootstrap: [AppComponent] // bootstrapped entry component need to be declared here
 })
 
      
-
      فهرست
      
+
      فهرست
      
 
      12. 
 
    12. 
-
      چطوری به صورت دستی یه app رو bootstrap میکنی؟
      
-
      می‌توانید به جای استفاده از آرایه بوت استرپ در حاشیه‌نویسی «@NgModule» از هوک «ngDoBootstrap» برای راه‌اندازی دستی برنامه استفاده کنید. این قلاب بخشی از رابط «DoBootstap» است.
      
+
      چطوری به صورت دستی یه app رو bootstrap میکنی؟
      
+
      می‌توانید به جای استفاده از آرایه بوت استرپ در حاشیه‌نویسی «@NgModule» از هوک «ngDoBootstrap» برای راه‌اندازی دستی برنامه استفاده کنید. این قلاب بخشی از رابط «DoBootstap» است.
      
 
-
      interface DoBootstrap {
+
      interface DoBootstrap {
   ngDoBootstrap(appRef: ApplicationRef): void
 }
 
      
-
      ماژول باید رابط فوق را پیاده سازی کند تا از هوک برای بوت استرپینگ استفاده کند.
      
+
      ماژول باید رابط فوق را پیاده سازی کند تا از هوک برای بوت استرپینگ استفاده کند.
      
 
-
      class AppModule implements DoBootstrap {
-  ngDoBootstrap(appRef: ApplicationRef) {
+
      class AppModule implements DoBootstrap {
+  ngDoBootstrap(appRef: ApplicationRef) {
     appRef.bootstrap(AppComponent); // bootstrapped entry component need to be passed
   }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      13. 
 
    13. 
-
      لازمه که یه کامپوننت رو بوت استرپ کنیم که به یه  entry component تبدیل بشه؟
      
-
      بله، کامپوننت بوت استرپ باید جزء ورودی باشد. این به این دلیل است که فرآیند بوت استرپ یک فرآیند ضروری است.
      
-
      فهرست
      
+
      لازمه که یه کامپوننت رو بوت استرپ کنیم که به یه  entry component تبدیل بشه؟
      
+
      بله، کامپوننت بوت استرپ باید جزء ورودی باشد. این به این دلیل است که فرآیند بوت استرپ یک فرآیند ضروری است.
      
+
      فهرست
      
 
      14. 
 
    14. 
-
      منظور از routed entry component چیه؟
      
-
      اجزای مورد اشاره در پیکربندی روتر به عنوان اجزای ورودی مسیریابی نامیده می شوند. این جزء ورودی مسیریابی شده در تعریف مسیر به صورت زیر تعریف شده است:
      
+
      منظور از routed entry component چیه؟
      
+
      اجزای مورد اشاره در پیکربندی روتر به عنوان اجزای ورودی مسیریابی نامیده می شوند. این جزء ورودی مسیریابی شده در تعریف مسیر به صورت زیر تعریف شده است:
      
 
-
      const routes: Routes = [
+
      const routes: Routes = [
   {
-    path: '',
-    component: TodoListComponent // router entry component
+    path: '',
+    component: TodoListComponent // router entry component
   }
 ];
 
      
-
      از آنجایی که تعریف روتر شما را ملزم می کند که کامپوننت را در دو مکان (روتر و ورودی کامپوننت) اضافه کنید، این اجزا همیشه جزء ورودی هستند.
      
-
      توجه: کامپایلرها به اندازه کافی هوشمند هستند که تعریف روتر را تشخیص دهند و به طور خودکار جزء روتر را به "entryComponents" اضافه کنند.
      
-
      فهرست
      
+
      از آنجایی که تعریف روتر شما را ملزم می کند که کامپوننت را در دو مکان (روتر و ورودی کامپوننت) اضافه کنید، این اجزا همیشه جزء ورودی هستند.
      
+
      توجه: کامپایلرها به اندازه کافی هوشمند هستند که تعریف روتر را تشخیص دهند و به طور خودکار جزء روتر را به "entryComponents" اضافه کنند.
      
+
      فهرست
      
 
      15. 
 
    15. 
-
      چرا استفاده از آزایه entry coponenet همیشه اجباری نیست؟
      
-
      اغلب اوقات، برای تنظیم اجزای ورودی در آرایه ورودیComponents ngModule decorator نیازی به صراحت ندارید. زیرا angular کامپوننت‌ها را هم از تعاریف @NgModule.bootstrap و هم مسیر را به‌طور خودکار به اجزای ورودی اضافه می‌کند.
      
-
      فهرست
      
+
      چرا استفاده از آزایه entry coponenet همیشه اجباری نیست؟
      
+
      اغلب اوقات، برای تنظیم اجزای ورودی در آرایه ورودیComponents ngModule decorator نیازی به صراحت ندارید. زیرا angular کامپوننت‌ها را هم از تعاریف @NgModule.bootstrap و هم مسیر را به‌طور خودکار به اجزای ورودی اضافه می‌کند.
      
+
      فهرست
      
 
      16. 
 
    16. 
-
      ما توی انگولار 9 به آرایه entry component نیاز داریم؟
      
-
      خیر. در نسخه‌های زاویه‌ای قبلی، آرایه ورودی Components از ngModule decorator استفاده می‌شود تا به کامپایلر بگوید کدام مؤلفه‌ها ایجاد شده و به‌صورت پویا در view درج می‌شوند. در Angular9، این دیگر با Ivy مورد نیاز نیست.
      
-
      فهرست
      
+
      ما توی انگولار 9 به آرایه entry component نیاز داریم؟
      
+
      خیر. در نسخه‌های زاویه‌ای قبلی، آرایه ورودی Components از ngModule decorator استفاده می‌شود تا به کامپایلر بگوید کدام مؤلفه‌ها ایجاد شده و به‌صورت پویا در view درج می‌شوند. در Angular9، این دیگر با Ivy مورد نیاز نیست.
      
+
      فهرست
      
 
      17. 
 
    17. 
-
      همه ی کامپوننت ها موقع build گرفتن ایحاد میشن؟
      
-
      خیر، فقط اجزای ورودی و اجزای قالب در بیلدهای تولید ظاهر می شوند. اگر یک جزء جزء ورودی نباشد و در یک الگو یافت نشود، تکان دهنده درخت آن را دور می اندازد. به همین دلیل، مطمئن شوید که فقط اجزای ورودی واقعی را برای کاهش اندازه بسته اضافه کنید.
      
-
      فهرست
      
+
      همه ی کامپوننت ها موقع build گرفتن ایحاد میشن؟
      
+
      خیر، فقط اجزای ورودی و اجزای قالب در بیلدهای تولید ظاهر می شوند. اگر یک جزء جزء ورودی نباشد و در یک الگو یافت نشود، تکان دهنده درخت آن را دور می اندازد. به همین دلیل، مطمئن شوید که فقط اجزای ورودی واقعی را برای کاهش اندازه بسته اضافه کنید.
      
+
      فهرست
      
 
      18. 
 
    18. 
-
      منظور از کامپایلر انگولار چیه؟
      
-
      کامپایلر Angular برای تبدیل کد برنامه به کد جاوا اسکریپت استفاده می شود. نشان‌گذاری الگو را می‌خواند، آن را با کد کلاس مؤلفه مربوطه ترکیب می‌کند و کارخانه‌های مؤلفه را منتشر می‌کند که نمایش جاوا اسکریپت مؤلفه را همراه با عناصر فراداده @Component ایجاد می‌کند.
      
-
      فهرست
      
+
      منظور از کامپایلر انگولار چیه؟
      
+
      کامپایلر Angular برای تبدیل کد برنامه به کد جاوا اسکریپت استفاده می شود. نشان‌گذاری الگو را می‌خواند، آن را با کد کلاس مؤلفه مربوطه ترکیب می‌کند و کارخانه‌های مؤلفه را منتشر می‌کند که نمایش جاوا اسکریپت مؤلفه را همراه با عناصر فراداده @Component ایجاد می‌کند.
      
+
      فهرست
      
 
      19. 
 
    19. 
-
      نقش ngModule metadata توی مراحل کامپایل چیه ؟
      
-
      ابرداده @NgModule برای اینکه به کامپایلر Angular بگوید چه اجزایی برای این ماژول کامپایل شود و چگونه این ماژول را با ماژول‌های دیگر پیوند دهد استفاده می‌شود.
      
-
      فهرست
      
+
      نقش ngModule metadata توی مراحل کامپایل چیه ؟
      
+
      ابرداده @NgModule برای اینکه به کامپایلر Angular بگوید چه اجزایی برای این ماژول کامپایل شود و چگونه این ماژول را با ماژول‌های دیگر پیوند دهد استفاده می‌شود.
      
+
      فهرست
      
 
      20. 
 
    20. 
-
      انگولار چطوری کامپوننت ها رو تشخیص میده؟ با directive ها یا pipe ها؟
      
-
      کامپایلر Angular زمانی یک کامپوننت یا دستورالعمل را در قالب پیدا می کند که بتواند با انتخابگر آن کامپوننت یا دستورالعمل در آن الگو مطابقت داشته باشد. در حالی که اگر نام لوله در سینتکس لوله قالب HTML ظاهر شود، یک لوله پیدا می کند.
      
-
      فهرست
      
+
      انگولار چطوری کامپوننت ها رو تشخیص میده؟ با directive ها یا pipe ها؟
      
+
      کامپایلر Angular زمانی یک کامپوننت یا دستورالعمل را در قالب پیدا می کند که بتواند با انتخابگر آن کامپوننت یا دستورالعمل در آن الگو مطابقت داشته باشد. در حالی که اگر نام لوله در سینتکس لوله قالب HTML ظاهر شود، یک لوله پیدا می کند.
      
+
      فهرست
      
 
      21. 
 
    21. 
-
      یه مثال برای  بزن؟NgModules
      
-
      کتابخانه های اصلی زاویه ای و کتابخانه های شخص ثالث به عنوان ngmodules در دسترس هستند.
      
+
      یه مثال برای  بزن؟NgModules
      
+
      کتابخانه های اصلی زاویه ای و کتابخانه های شخص ثالث به عنوان ngmodules در دسترس هستند.
      
 
        
-
      1. کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند.
        2. 
-
      2. بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند.
        3. 
+
      3. کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند.
        4. 
+
      4. بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند.
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      22. 
 
    22. 
-
      feature modul ها چیا هستن؟?
      
-
      ماژول های ویژگی Ngmodules هستند که به منظور سازماندهی کد استفاده می شوند. ماژول ویژگی را می توان با استفاده از دستور زیر در فهرست root با Angular CLI ایجاد کرد ،
      
+
      feature modul ها چیا هستن؟?
      
+
      ماژول های ویژگی Ngmodules هستند که به منظور سازماندهی کد استفاده می شوند. ماژول ویژگی را می توان با استفاده از دستور زیر در فهرست root با Angular CLI ایجاد کرد ،
      
 
-
      ng generate module MyCustomFeature //
+
      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';
+
      import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   imports: [
@@ -13492,496 +5147,333 @@ 
      feature modul ها چیا هستن؟?
      
 })
 export class MyCustomFeature { }
 
      
-
      Note:  پسوند "ماژول" نباید در این نام وجود داشته باشد زیرا CLI آن را ضمیمه می کند.
      
-
      فهرست
      
+
      Note:  پسوند "ماژول" نباید در این نام وجود داشته باشد زیرا CLI آن را ضمیمه می کند.
      
+
      فهرست
      
 
      23. 
 
    23. 
-
      ماژول های import شده داخل CLI ساخته شده توسط feature module ها چیا هستن؟
      
-
      در ماژول ویژگی CLI تولید شده ، دو بیانیه واردات JavaScript در بالای پرونده وجود دارد
      
+
      ماژول های import شده داخل CLI ساخته شده توسط feature module ها چیا هستن؟
      
+
      در ماژول ویژگی CLI تولید شده ، دو بیانیه واردات JavaScript در بالای پرونده وجود دارد
      
 
        
-
      1. NgModule: برای استفاده از دکوراتور `@ngmodule '
        2. 
-
      2. CommonModule: این دستورالعمل های متداول بسیاری مانند "ngif" و "ngfor" را ارائه می دهد.
        3. 
+
      3. NgModule: برای استفاده از دکوراتور `@ngmodule '
        4. 
+
      4. CommonModule: این دستورالعمل های متداول بسیاری مانند "ngif" و "ngfor" را ارائه می دهد.
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      24. 
 
    24. 
-
      تفاوت های بین ngmodule و javascript module چیا هستن؟
      
-
      در زیر تفاوت های اصلی بین Ngmodule زاویه ای و ماژول JavaScript وجود دارد:
      
+
      تفاوت های بین ngmodule و javascript module چیا هستن؟
      
+
      در زیر تفاوت های اصلی بین Ngmodule زاویه ای و ماژول JavaScript وجود دارد:
      
 
-
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
      
 
 
      
 ngmoduleماژول JavaScriptماژول JavaScript
 
      
       
 
 
      فقط کلاسهای قابل اعلام Ngmoduleهیچ کلاس محدودیتی وجود نداردفقط کلاسهای قابل اعلام Ngmoduleهیچ کلاس محدودیتی وجود ندارد
 
      
 
      کلاسهای ماژول را فقط در آرایه اعلامیه ها لیست کنیدمی تواند تمام کلاسهای عضو را در یک پرونده غول پیکر تعریف کندکلاسهای ماژول را فقط در آرایه اعلامیه ها لیست کنیدمی تواند تمام کلاسهای عضو را در یک پرونده غول پیکر تعریف کند
 
      
 
      این فقط کلاسهای قابل اعلام را که متعلق به آن است صادر می کند یا از ماژول های دیگر وارد می کنداین می تواند هر کلاس را صادر کنداین فقط کلاسهای قابل اعلام را که متعلق به آن است صادر می کند یا از ماژول های دیگر وارد می کنداین می تواند هر کلاس را صادر کند
 
      
 
      با افزودن ارائه دهندگان به ارائه آرایهکل برنامه را با خدمات گسترش دهیدبا افزودن ارائه دهندگان به ارائه آرایهکل برنامه را با خدمات گسترش دهید
 
      
       
 
      
-
      فهرست
      
+
      فهرست
      
 
      25. 
 
    25. 
-
      ارور هایی که میتونه با declaration ایجاد بشه چیا هستن؟
      
-
      دو خطای احتمالی متداول با آرایه اعلامیه وجود دارد:
      
+
      ارور هایی که میتونه با declaration ایجاد بشه چیا هستن؟
      
+
      دو خطای احتمالی متداول با آرایه اعلامیه وجود دارد:
      
 
        
-
      1. اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند.
        2. 
-
      2. اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند.
        3. 
+
      3. اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند.
        4. 
+
      4. اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند.
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      26. 
 
    26. 
-
      مراحلی که باید طی بشه  برای اینکه declaration element استفاده کنیم چیا هستن؟
      
-
      در زیر مراحل لازم برای استفاده از عناصر اعلامیه وجود دارد.
      
+
      مراحلی که باید طی بشه  برای اینکه declaration element استفاده کنیم چیا هستن؟
      
+
      در زیر مراحل لازم برای استفاده از عناصر اعلامیه وجود دارد.
      
 
        
-
      1. عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید
        2. 
-
      2. آن را به ماژول مناسب وارد کنید.
        3. 
-
      3. آن را در آرایه اعلامیه ngmodule اعلام کنید.
        4. 
-
      
-
      فهرست
      
-
      27. 
-
    27. 
-
      چه اتفاقی میوفته اگه ما از browserModule داخل feature module استفاده کنیم؟
      
-
      اگر "BrowserModule" را به یک ماژول ویژگی بارگذاری شده تنبل وارد می کنید ، Angular خطایی را برمی گرداند که به شما می گوید در عوض از "CommonModule" استفاده کنید. از آنجا که ارائه دهندگان BrowserModule برای کل برنامه هستند ، بنابراین فقط باید در ماژول ریشه باشد ، نه در ماژول ویژگی. در حالی که ماژول های ویژگی فقط به دستورالعمل های مشترک در Commodule نیاز دارند.
      
-
      ScreenShot
      
-
      فهرست
      
-
      28. 
-
    28. 
-
      تایپ های مربوط به feature module ها چیا هستن؟
      
-
      در زیر پنج دسته ماژول های ویژگی ،
      
+
    29. عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید
      30. 
+
    30. آن را به ماژول مناسب وارد کنید.
      31. 
+
    31. آن را در آرایه اعلامیه ngmodule اعلام کنید.
      32. 
+
    
+
    فهرست
    
+
+
  • 
+
    چه اتفاقی میوفته اگه ما از browserModule داخل feature module استفاده کنیم؟
    
+
    اگر "BrowserModule" را به یک ماژول ویژگی بارگذاری شده تنبل وارد می کنید ، Angular خطایی را برمی گرداند که به شما می گوید در عوض از "CommonModule" استفاده کنید. از آنجا که ارائه دهندگان BrowserModule برای کل برنامه هستند ، بنابراین فقط باید در ماژول ریشه باشد ، نه در ماژول ویژگی. در حالی که ماژول های ویژگی فقط به دستورالعمل های مشترک در Commodule نیاز دارند.
    
+
    ScreenShot
    
+
    فهرست
    
+
    • 
+
  • 
+
    تایپ های مربوط به 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. 
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    منظور از provider چیه؟
    
-
    ارائه دهنده دستورالعمل سیستم تزریق وابستگی در مورد چگونگی به دست آوردن ارزش برای وابستگی (خدمات با نام مستعار ایجاد شده) است. این سرویس را می توان با استفاده از Angular CLI به شرح زیر ارائه داد:
    
+
    منظور از provider چیه؟
    
+
    ارائه دهنده دستورالعمل سیستم تزریق وابستگی در مورد چگونگی به دست آوردن ارزش برای وابستگی (خدمات با نام مستعار ایجاد شده) است. این سرویس را می توان با استفاده از Angular CLI به شرح زیر ارائه داد:
    
 
-
    ng generate service my-service
+
    ng generate service my-service
 
    
-
    سرویس ایجاد شده توسط CLI به شرح زیر خواهد بود:
    
+
    سرویس ایجاد شده توسط CLI به شرح زیر خواهد بود:
    
 
-
    import { Injectable } from '@angular/core';
+
    import { Injectable } from '@angular/core';
 
 @Injectable({
-     providedIn: 'root', //Angular provide the service in root injector
+     providedIn: 'root', //Angular provide the service in root injector
 })
 
 export class MyService {
 }
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    نیازمندی های مروبط به provider scope چیا هستن؟
    
-
    شما همیشه باید خدمات خود را در انژکتور ریشه ارائه دهید مگر اینکه موردی وجود داشته باشد که بخواهید این سرویس فقط در صورت وارد کردن یک ngmodule خاص در دسترس باشد.
    
-
    فهرست
    
+
    نیازمندی های مروبط به provider scope چیا هستن؟
    
+
    شما همیشه باید خدمات خود را در انژکتور ریشه ارائه دهید مگر اینکه موردی وجود داشته باشد که بخواهید این سرویس فقط در صورت وارد کردن یک ngmodule خاص در دسترس باشد.
    
+
    فهرست
    
 
    • 
 
  • 
-
    چطوری یه ماژول رو برای provider scope اجباری میکنی؟
    
-
    به جای آن می توان دامنه ارائه دهنده خدمات را به یک ماژول خاص محدود کرد و به جای آن در دسترس کل برنامه قرار گرفت. دو روش ممکن برای انجام آن وجود دارد.
    
+
    چطوری یه ماژول رو برای provider scope اجباری میکنی؟
    
+
    به جای آن می توان دامنه ارائه دهنده خدمات را به یک ماژول خاص محدود کرد و به جای آن در دسترس کل برنامه قرار گرفت. دو روش ممکن برای انجام آن وجود دارد.
    
 
      
-
    1. Using providedIn in service:
      2. 
+
    2. Using providedIn in service:
      3. 
 
    
 
-
    import { Injectable } from '@angular/core';
-import { SomeModule } from './some.module';
+
    import { Injectable } from '@angular/core';
+import { SomeModule } from './some.module';
 
 @Injectable({
-     providedIn: SomeModule,
+     providedIn: SomeModule,
 })
 export class SomeService {
 }
 
    
 
      
-
    1. Declare provider for the service in module:
      2. 
+
    2. Declare provider for the service in module:
      3. 
 
    
 
-
    import { NgModule } from '@angular/core';
+
    import { NgModule } from '@angular/core';
 
-import { SomeService } from './some.service';
+import { SomeService } from './some.service';
 
 @NgModule({
-     providers: [SomeService],
+     providers: [SomeService],
 })
 export class SomeModule {
 }
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    چطوری یه سرویس singleton رو ایجاد میکنی؟
    
-
    دو روش ممکن برای ارائه یک سرویس مجرد وجود دارد.
    
+
    چطوری یه سرویس singleton رو ایجاد میکنی؟
    
+
    دو روش ممکن برای ارائه یک سرویس مجرد وجود دارد.
    
 
      
-
    1. ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند.
      2. 
+
    2. ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند.
      3. 
 
    
 
-
    import { Injectable } from '@angular/core';
+
    import { Injectable } from '@angular/core';
 
 @Injectable({
-     providedIn: 'root',
+     providedIn: 'root',
 })
 export class MyService {
 }
 
    
 
      
-
    1. سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
      2. 
+
    2. سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
      3. 
 
    
 
-
    @NgModule({
+
    @NgModule({
      // ...
-     providers: [MyService],
+     providers: [MyService],
      // ...
 })
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    روش های مختلف حذف سرویس های تکراری register شده چیه؟
    
-
    اگر یک ماژول تعریف و اعلامیه ها را تعریف کند ، بارگیری ماژول در ماژول های چند ویژگی ، ثبت نام سرویس را کپی می کند. در زیر روشهای مختلفی برای جلوگیری از این رفتار تکراری آورده شده است.
    
+
    روش های مختلف حذف سرویس های تکراری register شده چیه؟
    
+
    اگر یک ماژول تعریف و اعلامیه ها را تعریف کند ، بارگیری ماژول در ماژول های چند ویژگی ، ثبت نام سرویس را کپی می کند. در زیر روشهای مختلفی برای جلوگیری از این رفتار تکراری آورده شده است.
    
 
      
-
    1. به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید.
      2. 
-
    2. خدمات خود را در ماژول خود جدا کنید.
      3. 
-
    3. روشهای Forroot () و Forchild () را در ماژول تعریف کنید.
      4. 
+
    4. به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید.
      5. 
+
    5. خدمات خود را در ماژول خود جدا کنید.
      6. 
+
    6. روشهای Forroot () و Forchild () را در ماژول تعریف کنید.
      7. 
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    چطوری متد forRoot برای جلوگیری از duplicate شدن router instance مناسبه؟
    
-
    اگر ماژول «Routermodule» روش استاتیک Forroot () ندارد ، هر ماژول ویژگی یک نمونه روتر جدید را فوری می کند ، که به دلیل موارد تکراری منجر به کاربرد شکسته می شود. پس از استفاده از روش forroot () ، ماژول برنامه root routermodule.forroot (...) را وارد می کند و روتر می شود و همه ماژول های ویژگی واردات routermodule.forchild (...) که روتر دیگری را فوری نمی کند.
    
-
    فهرست
    
+
    چطوری متد forRoot برای جلوگیری از duplicate شدن router instance مناسبه؟
    
+
    اگر ماژول «Routermodule» روش استاتیک Forroot () ندارد ، هر ماژول ویژگی یک نمونه روتر جدید را فوری می کند ، که به دلیل موارد تکراری منجر به کاربرد شکسته می شود. پس از استفاده از روش forroot () ، ماژول برنامه root routermodule.forroot (...) را وارد می کند و روتر می شود و همه ماژول های ویژگی واردات routermodule.forchild (...) که روتر دیگری را فوری نمی کند.
    
+
    فهرست
    
 
    • 
 
  • 
-
    منظور از shared module چیه؟
    
-
    ماژول مشترک ماژولی است که در آن دستورالعمل ها ، لوله ها و اجزای متداول را در یک ماژول که به اشتراک گذاشته شده است (وارد می کنید) در طول برنامه قرار دهید.
    
-
    به عنوان مثال ، ماژول مشترک زیر واردات متداول ، formsmodule برای دستورالعمل های مشترک و مؤلفه ها ، لوله ها و دستورالعمل ها بر اساس نیاز ،
    
+
    منظور از shared module چیه؟
    
+
    ماژول مشترک ماژولی است که در آن دستورالعمل ها ، لوله ها و اجزای متداول را در یک ماژول که به اشتراک گذاشته شده است (وارد می کنید) در طول برنامه قرار دهید.
    
+
    به عنوان مثال ، ماژول مشترک زیر واردات متداول ، formsmodule برای دستورالعمل های مشترک و مؤلفه ها ، لوله ها و دستورالعمل ها بر اساس نیاز ،
    
 
-
    import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { UserComponent } from './user.component';
-import { NewUserDirective } from './new-user.directive';
-import { OrdersPipe } from './orders.pipe';
+
    import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { UserComponent } from './user.component';
+import { NewUserDirective } from './new-user.directive';
+import { OrdersPipe } from './orders.pipe';
 
 @NgModule({
-     imports:      [ CommonModule ],
-     declarations: [ UserComponent, NewUserDirective, OrdersPipe ],
-     exports:      [ UserComponent, NewUserDirective, OrdersPipe,
+     imports:      [ CommonModule ],
+     declarations: [ UserComponent, NewUserDirective, OrdersPipe ],
+     exports:      [ UserComponent, NewUserDirective, OrdersPipe,
                     CommonModule, FormsModule ]
 })
 export class SharedModule { }
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    میتونیم سرویس هایی رو بر اساس ماژول به اشتراک بذاریم؟
    
-
    نه ، توصیه نمی شود با وارد کردن ماژول خدمات را به اشتراک بگذارید. یعنی ماژول ها را وارد کنید وقتی می خواهید فقط از دستورالعمل ها ، لوله ها و مؤلفه ها استفاده کنید. بهترین روش برای به دست آوردن خدمات مشترک از طریق "تزریق وابستگی زاویه ای" است زیرا وارد کردن یک ماژول منجر به یک نمونه خدمات جدید خواهد شد.
    
-
    فهرست
    
+
    میتونیم سرویس هایی رو بر اساس ماژول به اشتراک بذاریم؟
    
+
    نه ، توصیه نمی شود با وارد کردن ماژول خدمات را به اشتراک بگذارید. یعنی ماژول ها را وارد کنید وقتی می خواهید فقط از دستورالعمل ها ، لوله ها و مؤلفه ها استفاده کنید. بهترین روش برای به دست آوردن خدمات مشترک از طریق "تزریق وابستگی زاویه ای" است زیرا وارد کردن یک ماژول منجر به یک نمونه خدمات جدید خواهد شد.
    
+
    فهرست
    
 
    • 
 
  • 
-
    چطوری direction فعلی رو برای locales بدست میاری؟
    
-
    در زاویه 9.1 ، می توان از روش API "getLocalEdirection" برای به دست آوردن جهت فعلی در برنامه خود استفاده کرد. این روش برای پشتیبانی از مناطق راست به چپ برای برنامه های مبتنی بر بین المللی شما مفید است.
    
+
    چطوری direction فعلی رو برای locales بدست میاری؟
    
+
    در زاویه 9.1 ، می توان از روش API "getLocalEdirection" برای به دست آوردن جهت فعلی در برنامه خود استفاده کرد. این روش برای پشتیبانی از مناطق راست به چپ برای برنامه های مبتنی بر بین المللی شما مفید است.
    
 
-
    import { getLocaleDirection, registerLocaleData } from '@angular/common';
-import { LOCALE_ID } from '@angular/core';
-import localeAr from '@angular/common/locales/ar';
+
    import { getLocaleDirection, registerLocaleData } from '@angular/common';
+import { LOCALE_ID } from '@angular/core';
+import localeAr from '@angular/common/locales/ar';
 
 // ...
 
 constructor(@Inject(LOCALE_ID) locale) {
-    const directionForLocale = getLocaleDirection(locale); // Returns 'rtl' or 'ltr' based on the current locale
-    registerLocaleData(localeAr, 'ar-ae');
-    const direction = getLocaleDirection('ar-ae'); // Returns 'rtl'
+    const directionForLocale = getLocaleDirection(locale); // Returns 'rtl' or 'ltr' based on the current locale
+    registerLocaleData(localeAr, 'ar-ae');
+    const direction = getLocaleDirection('ar-ae'); // Returns 'rtl'
 
     // Current direction is used to provide conditional logic here
 }
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    ngcc چیه؟
    
-
    NGCC (کامپایلر سازگاری زاویه ای) ابزاری است که Node_Module را با NDEDULE با NDIV NGC به قالب سازگار با پیچک ساخته می کند. اسکریپت postinstall از pack.json مطمئن خواهد شد که node_modules شما با رندر پیچک سازگار خواهد بود.
    
+
    ngcc چیه؟
    
+
    NGCC (کامپایلر سازگاری زاویه ای) ابزاری است که Node_Module را با NDEDULE با NDIV NGC به قالب سازگار با پیچک ساخته می کند. اسکریپت postinstall از pack.json مطمئن خواهد شد که node_modules شما با رندر پیچک سازگار خواهد بود.
    
 
-
    "scripts": {
-   "postinstall": "ngcc"
+
    "scripts": {
+   "postinstall": "ngcc"
 }
 
    
 
    Whereas, Ivy compiler (ngtsc), which compiles Ivy-compatible code.
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    کدوم class ها نباید به declaration ها اضافه بشن؟
    
-
    انواع کلاس زیر نباید به اعلامیه ها اضافه شود
    
+
    کدوم class ها نباید به declaration ها اضافه بشن؟
    
+
    انواع کلاس زیر نباید به اعلامیه ها اضافه شود
    
 
      
-
    1. کلاس که قبلاً در هر ماژول دیگری اعلام شده است.
      2. 
-
    2. دستورالعمل های وارد شده از یک ماژول دیگر.
      3. 
-
    3. کلاس های ماژول.
      4. 
-
    4. کلاسهای خدمات.
      5. 
-
    5. کلاس ها و اشیاء غیر حرکتی ، مانند رشته ها ، اعداد ، توابع ، مدل های موجودیت ، تنظیمات ، منطق تجارت و کلاس های یاور.
      6. 
+
    6. کلاس که قبلاً در هر ماژول دیگری اعلام شده است.
      7. 
+
    7. دستورالعمل های وارد شده از یک ماژول دیگر.
      8. 
+
    8. کلاس های ماژول.
      9. 
+
    9. کلاسهای خدمات.
      10. 
+
    10. کلاس ها و اشیاء غیر حرکتی ، مانند رشته ها ، اعداد ، توابع ، مدل های موجودیت ، تنظیمات ، منطق تجارت و کلاس های یاور.
      11. 
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    NgZone چیه؟
    
-
    Angular خدماتی به نام NGZONE را ارائه می دهد که منطقه ای به نام "Angular" ایجاد می کند تا در صورت رضایت از شرایط زیر ، به طور خودکار تشخیص تغییر را ایجاد کند.
    
+
    NgZone چیه؟
    
+
    Angular خدماتی به نام NGZONE را ارائه می دهد که منطقه ای به نام "Angular" ایجاد می کند تا در صورت رضایت از شرایط زیر ، به طور خودکار تشخیص تغییر را ایجاد کند.
    
 
      
-
    1. هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود.
      2. 
-
    2. هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است.
      3. 
+
    3. هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود.
      4. 
+
    4. هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است.
      5. 
 
    
-
    فهرست
    
+
    فهرست
    
 
    • 
 
  • 
-
    NoopZone چیه؟
    
+
    NoopZone چیه؟
    
 
    • 
 
-
    منطقه به طور پیش فرض در برنامه های زاویه ای بارگیری و مورد نیاز است و به زاویه کمک می کند تا بداند چه موقع باعث تشخیص تغییر می شود. به این ترتیب ، این باعث می شود که توسعه دهندگان Sures روی توسعه برنامه و نه اصلی ترین قسمت زاویه ای متمرکز شوند. همچنین می توانید از Angular بدون منطقه استفاده کنید اما تشخیص تغییر باید به تنهایی اجرا شود و «Zone Zone» باید در فرآیند bootstrap پیکربندی شود. 
- بیایید دو مرحله زیر را برای حذف Zone.js دنبال کنیم. 
- 1. واردات Zone.js را از polyfills.ts حذف کنید.    
+
    منطقه به طور پیش فرض در برنامه های زاویه ای بارگیری و مورد نیاز است و به زاویه کمک می کند تا بداند چه موقع باعث تشخیص تغییر می شود. به این ترتیب ، این باعث می شود که توسعه دهندگان Sures روی توسعه برنامه و نه اصلی ترین قسمت زاویه ای متمرکز شوند. همچنین می توانید از Angular بدون منطقه استفاده کنید اما تشخیص تغییر باید به تنهایی اجرا شود و «Zone Zone» باید در فرآیند bootstrap پیکربندی شود. 
+ بیایید دو مرحله زیر را برای حذف Zone.js دنبال کنیم. 
+ 1. واردات Zone.js را از polyfills.ts حذف کنید.    
  
- <span dir="ltr" align="left">
+ <span dir="ltr" align="left">
 
  ```js
  /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
- // import 'zone.js/dist/zone';  // Included with Angular CLI.
+ // import 'zone.js/dist/zone';  // Included with Angular CLI.
  ```
  
  </span>
 
- 2. Bootstrap Angular با منطقه NOOP در SRC/Main.ts.
+ 2. Bootstrap Angular با منطقه NOOP در SRC/Main.ts.
  
- <span dir="ltr" align="left">
+ <span dir="ltr" align="left">
 
  ```js
- platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'})
+ platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'})
       .catch(err => console.error(err));
  ```
  
  </span>
 
- **[فهرست](#فهرست)**
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      چطوری کامپوننت های displayBlock ایجاد میکنی؟
      
-
      به طور پیش فرض ، Angular CLI مؤلفه هایی را در یک حالت نمایش داده شده درون خطی ایجاد می کند (یعنی صفحه نمایش: درون خطی). اما ایجاد مؤلفه هایی با نمایشگر امکان پذیر است: سبک بلوک با استفاده از گزینه "DisplayBlock":
      
+
      چطوری کامپوننت های displayBlock ایجاد میکنی؟
      
+
      به طور پیش فرض ، Angular CLI مؤلفه هایی را در یک حالت نمایش داده شده درون خطی ایجاد می کند (یعنی صفحه نمایش: درون خطی). اما ایجاد مؤلفه هایی با نمایشگر امکان پذیر است: سبک بلوک با استفاده از گزینه "DisplayBlock":
      
 
-
      ng generate component my-component --displayBlock
+
      ng generate component my-component --displayBlock
 
      
 
      (OR) the option can be turned on by default in Angular.json with schematics.@schematics/angular:component.displayBlock key value as true.
      
-
      فهرست
      
+
      فهرست
      
 
      2. 
 
    2. 
-
      حالت هایی که موقع حساسیت به تغییر میتونه ایجاد بشه چیا هستن؟etection?
      
-
      تشخیص تغییر در سناریوهای زیر کار می کند که در آن داده ها برای به روزرسانی برنامه HTML نیاز دارند.
      
+
      حالت هایی که موقع حساسیت به تغییر میتونه ایجاد بشه چیا هستن؟etection?
      
+
      تشخیص تغییر در سناریوهای زیر کار می کند که در آن داده ها برای به روزرسانی برنامه HTML نیاز دارند.
      
 
        
-
      1. ** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود ApplicationRef.tick () برای تماس با تشخیص تغییر و مشاهده.
        2. 
-
      2. ** شنونده رویداد: ** شنونده رویداد DOM می تواند داده ها را در یک مؤلفه زاویه ای به روز کند و باعث تغییر در تغییر نیز شود.
        3. 
+
      3. ** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود ApplicationRef.tick () برای تماس با تشخیص تغییر و مشاهده.
        4. 
+
      4. ** شنونده رویداد: ** شنونده رویداد DOM می تواند داده ها را در یک مؤلفه زاویه ای به روز کند و باعث تغییر در تغییر نیز شود.
        5. 
 
      
 
-
      @Component({
-     selector: 'app-event-listener',
-     template: `
-     <button (click)="onClick()">Click</button>
+
      @Component({
+     selector: 'app-event-listener',
+     template: `
+     <button (click)="onClick()">Click</button>
      {{message}}`
 })
 export class EventListenerComponent {
-     message = '';
+     message = '';
 
      onClick() {
-          this.message = 'data updated';
+          this.message = 'data updated';
      }
 }
 
      
 
        
-
      1. HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
        2. 
+
      2. HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
        3. 
 
      
 
-
      data = 'default value';
-constructor(private httpClient: HttpClient) {}
+
      data = 'default value';
+constructor(private httpClient: HttpClient) {}
 
 ngOnInit() {
      this.httpClient.get(this.serverUrl).subscribe(response => {
@@ -13990,22 +5482,22 @@ 
      چطوری کامپوننت های displayBlock ایجاد میکنی؟
      
 }
 
      
 
        
-
      1. Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
        2. 
+
      2. Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
        3. 
 
      
 
-
      data = 'default value';
+
      data = 'default value';
 
 ngOnInit() {
      setTimeout(() => {
-          this.data = 'data updated'; // Change detection will happen automatically
+          this.data = 'data updated'; // Change detection will happen automatically
      });
 }
 
      
 
        
-
      1. Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید
        2. 
+
      2. Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید
        3. 
 
      
 
-
      data = 'initial value';
+
      data = 'initial value';
 
 ngOnInit() {
      Promise.resolve(1).then(v => {
@@ -14014,15 +5506,15 @@ 
      چطوری کامپوننت های displayBlock ایجاد میکنی؟
      
 }
 
      
 
        
-
      1. Async operations like Web sockets and Canvas: داده ها را می توان به صورت ناهمزمان با استفاده از websocket.onmessage () و canvas.toblob () به روز کرد.
        2. 
+
      2. Async operations like Web sockets and Canvas: داده ها را می توان به صورت ناهمزمان با استفاده از websocket.onmessage () و canvas.toblob () به روز کرد.
        3. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      منظور از zone context چیه؟
      
-
      زمینه اجرای یک مفهوم انتزاعی است که اطلاعات مربوط به محیط را در کد فعلی اجرا می کند. یک منطقه زمینه اعدام را فراهم می کند که در عملیات ناهمزمان ادامه می یابد ، به عنوان زمینه منطقه خوانده می شود. به عنوان مثال ، زمینه منطقه در عملکرد برگشت به تماس در خارج و داخل SettimeOut یکسان خواهد بود ،
      
+
      منظور از zone context چیه؟
      
+
      زمینه اجرای یک مفهوم انتزاعی است که اطلاعات مربوط به محیط را در کد فعلی اجرا می کند. یک منطقه زمینه اعدام را فراهم می کند که در عملیات ناهمزمان ادامه می یابد ، به عنوان زمینه منطقه خوانده می شود. به عنوان مثال ، زمینه منطقه در عملکرد برگشت به تماس در خارج و داخل SettimeOut یکسان خواهد بود ،
      
 
-
      zone.run(() => {
+
      zone.run(() => {
      // outside zone
      expect(zoneThis).toBe(zone);
      setTimeout(function() {
@@ -14032,55 +5524,55 @@ 
      منظور از zone context چیه؟
      
 });
 
      
 
      The current zone is retrieved through Zone.current.
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      هوک های lifecycle مروبوط به یک zone چیا هستن؟
      
-
      چهار قلاب چرخه عمر برای عملیات ناهمزمان از Zone.js. وجود دارد.
      
+
      هوک های lifecycle مروبوط به یک zone چیا هستن؟
      
+
      چهار قلاب چرخه عمر برای عملیات ناهمزمان از Zone.js. وجود دارد.
      
 
        
-
      1. onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید ()
        2. 
+
      2. onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید ()
        3. 
 
      
 
-
      onScheduleTask: function(delegate, curr, target, task) {
-     console.log('new task is scheduled:', task.type, task.source);
+
      onScheduleTask: function(delegate, curr, target, task) {
+     console.log('new task is scheduled:', task.type, task.source);
      return delegate.scheduleTask(target, task);
 }
 
      
 
        
-
      1. onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
        2. 
+
      2. onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
        3. 
 
      
 
-
      onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) {
-     console.log('task will be invoked:', task.type, task.source);
+
      onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) {
+     console.log('task will be invoked:', task.type, task.source);
      return delegate.invokeTask(target, task, applyThis, applyArgs);
 }
 
      
 
        
-
      1. onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند.
        2. 
+
      2. onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند.
        3. 
 
      
 
-
      onHasTask: function(delegate, curr, target, hasTaskState) {
-     console.log('task state changed in the zone:', hasTaskState);
+
      onHasTask: function(delegate, curr, target, hasTaskState) {
+     console.log('task state changed in the zone:', hasTaskState);
      return delegate.hasTask(target, hasTaskState);
 }
 
      
 
        
-
      1. onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود.
        2. 
+
      2. onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود.
        3. 
 
      
 
-
      onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) {
-     console.log('the callback will be invoked:', callback);
+
      onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) {
+     console.log('the callback will be invoked:', callback);
      return delegate.invoke(target, callback, applyThis, applyArgs);
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      چه متد هایی از ngZone برای کنترل حساسیت تغییر استفاده میشه؟
      
-
      سرویس NGZONE یک روش `run () را ارائه می دهد که به شما امکان می دهد عملکردی را در داخل منطقه زاویه ای اجرا کنید. این عملکرد برای اجرای API های شخص ثالث که توسط منطقه اداره نمی شوند و باعث تشخیص تغییر خودکار در زمان صحیح می شوند ، استفاده می شود.
      
+
      چه متد هایی از ngZone برای کنترل حساسیت تغییر استفاده میشه؟
      
+
      سرویس NGZONE یک روش `run () را ارائه می دهد که به شما امکان می دهد عملکردی را در داخل منطقه زاویه ای اجرا کنید. این عملکرد برای اجرای API های شخص ثالث که توسط منطقه اداره نمی شوند و باعث تشخیص تغییر خودکار در زمان صحیح می شوند ، استفاده می شود.
      
 
-
      export class AppComponent implements OnInit {
-  constructor(private ngZone: NgZone) {}
+
      export class AppComponent implements OnInit {
+  constructor(private ngZone: NgZone) {}
   ngOnInit() {
     // use ngZone.run() to make the asynchronous operation in the angular zone
     this.ngZone.run(() => {
@@ -14091,72 +5583,72 @@ 
      چه متد هایی از ngZone برای کنترل حساسیت تغییر
   }
 }
 
      
-
      در حالی که "روش runoutsideangular ()` استفاده می شود وقتی که نمی خواهید تغییر تغییر را ایجاد کنید.
      
+
      در حالی که "روش runoutsideangular ()` استفاده می شود وقتی که نمی خواهید تغییر تغییر را ایجاد کنید.
      
 
-
      export class AppComponent implements OnInit {
-  constructor(private ngZone: NgZone) {}
+
      export class AppComponent implements OnInit {
+  constructor(private ngZone: NgZone) {}
   ngOnInit() {
     // Use this method when you know no data will be updated
     this.ngZone.runOutsideAngular(() => {
       setTimeout(() => {
-        // update component data and don't trigger change detection
+        // update component data and don't trigger change detection
       });
     });
   }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      جطوری تنظیمات مربوط به zonejs رو تغییر میدی؟
      
-
      شما می توانید با پیکربندی آنها در یک پرونده جداگانه ، تنظیمات منطقه را تغییر داده و درست پس از واردات Zonejs وارد کنید.
      
-به عنوان مثال ، شما می توانید Patch Monkey RequestAnimationFrame () را غیرفعال کنید تا از تغییر برای به روزرسانی داده به عنوان یک تنظیم جلوگیری کنید و از وقایع DOM (یک رویداد Mousemove یا Scroll) جلوگیری کنید تا تغییر تغییر را ایجاد کند. بیایید بگوییم پرونده جدید به نام Zone-flags.js ،
      
+
      جطوری تنظیمات مربوط به zonejs رو تغییر میدی؟
      
+
      شما می توانید با پیکربندی آنها در یک پرونده جداگانه ، تنظیمات منطقه را تغییر داده و درست پس از واردات Zonejs وارد کنید.
      
+به عنوان مثال ، شما می توانید Patch Monkey RequestAnimationFrame () را غیرفعال کنید تا از تغییر برای به روزرسانی داده به عنوان یک تنظیم جلوگیری کنید و از وقایع DOM (یک رویداد Mousemove یا Scroll) جلوگیری کنید تا تغییر تغییر را ایجاد کند. بیایید بگوییم پرونده جدید به نام Zone-flags.js ،
      
 
-
      // disable patching requestAnimationFrame
+
      // disable patching requestAnimationFrame
 (window as any).__Zone_disable_requestAnimationFrame = true;
 
 // disable patching specified eventNames
-(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove'];
+(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove'];
 
      
-
      پرونده پیکربندی فوق را می توان در یک پرونده polyfill.ts به شرح زیر وارد کرد:
      
+
      پرونده پیکربندی فوق را می توان در یک پرونده polyfill.ts به شرح زیر وارد کرد:
      
 
-
      /***************************************************************************************************
+
      /***************************************************************************************************
  * Zone JS is required by default for Angular.
  */
 import `./zone-flags`;
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js/dist/zone';  // Included with Angular CLI.
 
      
-
      فهرست
      
+
      فهرست
      
 
      7. 
 
    7. 
-
      چطوری یه انیمیشن رو trigger میکنی؟
      
-
      Angular یک عملکرد "ماشه ()" برای انیمیشن را به منظور جمع آوری حالت ها و انتقال با یک نام انیمیشن خاص فراهم می کند تا بتوانید آن را به عنصر تحریک در الگوی HTML وصل کنید. این عملکرد را برای تغییرات تماشا می کند و هنگام تغییر ، اقدامات را آغاز می کند.
      
-به عنوان مثال ، بیایید Trigger به نام "Updown" ایجاد کنیم و آن را به عنصر دکمه وصل کنیم.
      
+
      چطوری یه انیمیشن رو trigger میکنی؟
      
+
      Angular یک عملکرد "ماشه ()" برای انیمیشن را به منظور جمع آوری حالت ها و انتقال با یک نام انیمیشن خاص فراهم می کند تا بتوانید آن را به عنصر تحریک در الگوی HTML وصل کنید. این عملکرد را برای تغییرات تماشا می کند و هنگام تغییر ، اقدامات را آغاز می کند.
      
+به عنوان مثال ، بیایید Trigger به نام "Updown" ایجاد کنیم و آن را به عنصر دکمه وصل کنیم.
      
 
-
      @Component({
-     selector: 'app-up-down',
-     animations: [
-          trigger('upDown', [
-               state('up', style({
-               height: '200px',
-               opacity: 1,
-               backgroundColor: 'yellow'
+
      @Component({
+     selector: 'app-up-down',
+     animations: [
+          trigger('upDown', [
+               state('up', style({
+               height: '200px',
+               opacity: 1,
+               backgroundColor: 'yellow'
                })),
-               state('down', style({
-               height: '100px',
-               opacity: 0.5,
-               backgroundColor: 'green'
+               state('down', style({
+               height: '100px',
+               opacity: 0.5,
+               backgroundColor: 'green'
                })),
-               transition('up => down', [
-               animate('1s')
+               transition('up => down', [
+               animate('1s')
                ]),
-               transition('down => up', [
-               animate('0.5s')
+               transition('down => up', [
+               animate('0.5s')
                ]),
           ]),
      ],
-     templateUrl: 'up-down.component.html',
-     styleUrls: ['up-down.component.css']
+     templateUrl: 'up-down.component.html',
+     styleUrls: ['up-down.component.css']
 })
 
 export class UpDownComponent {
@@ -14168,114 +5660,114 @@ 
      چطوری یه انیمیشن رو trigger میکنی؟
      
 }
 
 
      
-
      فهرست
      
+
      فهرست
      
 
      8. 
 
    8. 
-
      چطوری injector ها رو با provider ها برای لول های مختلف کانفیگ میکنی؟
      
-
      با تعیین مقدار ابرداده می توانید انژکتورها را با ارائه دهندگان در سطوح مختلف برنامه خود پیکربندی کنید. پیکربندی می تواند در یکی از سه مکان اتفاق بیفتد ،
      
+
      چطوری injector ها رو با provider ها برای لول های مختلف کانفیگ میکنی؟
      
+
      با تعیین مقدار ابرداده می توانید انژکتورها را با ارائه دهندگان در سطوح مختلف برنامه خود پیکربندی کنید. پیکربندی می تواند در یکی از سه مکان اتفاق بیفتد ،
      
 
        
-
      1. In the @Injectable() decorator for the service itself
        2. 
-
      2. In the @NgModule() decorator for an NgModule
        3. 
-
      3. In the @Component() decorator for a component
        4. 
+
      4. In the @Injectable() decorator for the service itself
        5. 
+
      5. In the @NgModule() decorator for an NgModule
        6. 
+
      6. In the @Component() decorator for a component
        7. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      9. 
 
    9. 
-
      آیا استفاده از تزریق در هر کلاس خدمات اجباریه؟
      
-
      نه. اگر کلاس دارای دکوراتورهای زاویه ای دیگری بر روی آن باشد یا هیچ وابستگی نداشته باشد ، دکوراتور injectable () `injectable () لازم نیست. اما نکته مهم در اینجا هر کلاس است که با زاویه تزریق می شود تزئین شده است.
      
-یعنی اگر دکوراتور را اضافه کنیم ، ابرداده "طراحی: پارامترها" اضافه می شود ، و تزریق وابستگی می تواند کار خود را انجام دهد. این دلیل دقیق اضافه کردن دکوراتور injectable () در یک سرویس در صورتی است که این سرویس دارای برخی وابستگی ها باشد.
      
-به عنوان مثال ، بیایید تغییرات مختلف AppService را در یک جزء ریشه مشاهده کنیم ،
      
+
      آیا استفاده از تزریق در هر کلاس خدمات اجباریه؟
      
+
      نه. اگر کلاس دارای دکوراتورهای زاویه ای دیگری بر روی آن باشد یا هیچ وابستگی نداشته باشد ، دکوراتور injectable () `injectable () لازم نیست. اما نکته مهم در اینجا هر کلاس است که با زاویه تزریق می شود تزئین شده است.
      
+یعنی اگر دکوراتور را اضافه کنیم ، ابرداده "طراحی: پارامترها" اضافه می شود ، و تزریق وابستگی می تواند کار خود را انجام دهد. این دلیل دقیق اضافه کردن دکوراتور injectable () در یک سرویس در صورتی است که این سرویس دارای برخی وابستگی ها باشد.
      
+به عنوان مثال ، بیایید تغییرات مختلف AppService را در یک جزء ریشه مشاهده کنیم ،
      
 
        
-
      1. AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد.
        2. 
+
      2. AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد.
        3. 
 
      
 
-
      export class AppService {
+
      export class AppService {
      constructor() {
-     console.log('A new app service');
+     console.log('A new app service');
      }
 }
 
      
 
        
-
      1. AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود.
        2. 
+
      2. AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود.
        3. 
 
      
 
-
      function SomeDummyDecorator() {
-     return (constructor: Function) => console.log(constructor);
+
      function SomeDummyDecorator() {
+     return (constructor: Function) => console.log(constructor);
 }
 
 @SomeDummyDecorator()
 export class AppService {
-     constructor(http: HttpService) {
+     constructor(http: HttpService) {
      console.log(http);
      }
 }
 
      
-
      و کد JavaScript تولید شده از خدمات فوق دارای اطلاعات متا در مورد httpservice است ،
      
+
      و کد JavaScript تولید شده از خدمات فوق دارای اطلاعات متا در مورد httpservice است ،
      
 
-
      var AppService = (function () {
+
      var AppService = (function () {
      function AppService(http) {
           console.log(http);
      }
      AppService = __decorate([
           core_1.Injectable(),
-          __metadata('design:paramtypes', [http_service_1.HttpService])
+          __metadata('design:paramtypes', [http_service_1.HttpService])
      ], AppService);
      return AppService;
 }());
 exports.AppService = AppService;
 
      
 
        
-
      1. AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود.
        2. 
+
      2. AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود.
        3. 
 
      
 
-
      @Injectable({
-     providedIn: 'root',
+
      @Injectable({
+     providedIn: 'root',
 })
 export class AppService {
-     constructor(http: HttpService) {
+     constructor(http: HttpService) {
      console.log(http);
      }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      10. 
 
    10. 
-
      منظور از optional dependency چیه؟
      
-
      وابستگی اختیاری یک دکوراتور پارامتر است که در پارامترهای سازنده مورد استفاده قرار می گیرد ، که این پارامتر را به عنوان یک وابستگی اختیاری نشان می دهد. به همین دلیل ، در صورت عدم یافتن وابستگی ، چارچوب DI تهی را تهی می کند.
      
-به عنوان مثال ، اگر شما یک ارائه دهنده logger را در هیچ کجا ثبت نکنید ، انژکتور مقدار logger (یا سرویس logger) را در کلاس زیر تنظیم می کند.
      
+
      منظور از optional dependency چیه؟
      
+
      وابستگی اختیاری یک دکوراتور پارامتر است که در پارامترهای سازنده مورد استفاده قرار می گیرد ، که این پارامتر را به عنوان یک وابستگی اختیاری نشان می دهد. به همین دلیل ، در صورت عدم یافتن وابستگی ، چارچوب DI تهی را تهی می کند.
      
+به عنوان مثال ، اگر شما یک ارائه دهنده logger را در هیچ کجا ثبت نکنید ، انژکتور مقدار logger (یا سرویس logger) را در کلاس زیر تنظیم می کند.
      
 
-
      import { Optional } from '@angular/core';
+
      import { Optional } from '@angular/core';
 
 constructor(@Optional() private logger?: Logger) {
   if (this.logger) {
-    this.logger.log('This is an optional dependency message');
+    this.logger.log('This is an optional dependency message');
   } else {
-    console.log('The logger is not registered');
+    console.log('The logger is not registered');
   }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      11. 
 
    11. 
-
      تایپ های مربوط به injector هرمی چیا هستن؟
      
+
      تایپ های مربوط به injector هرمی چیا هستن؟
      
 
      There are two types of injector hierarchies in Angular
      
 
        
-
      1. ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند.
        2. 
-
      2. **ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید.
        3. 
+
      3. ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند.
        4. 
+
      4. **ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید.
        5. 
 
      
-
      فهرست
      
+
      فهرست
      
 
      12. 
 
    12. 
-
      reactive form ها چیا هستن؟
      
-
      فرم های واکنشی یک رویکرد مدل محور برای ایجاد فرم ها به سبک واکنشی است (ورودی های فرم با گذشت زمان تغییر می کنند). اینها در اطراف جریانهای قابل مشاهده ساخته شده اند ، جایی که ورودی ها و مقادیر فرم به عنوان جریان مقادیر ورودی ارائه می شوند. بیایید مراحل زیر را برای ایجاد فرم های واکنشی دنبال کنیم ،
      
+
      reactive form ها چیا هستن؟
      
+
      فرم های واکنشی یک رویکرد مدل محور برای ایجاد فرم ها به سبک واکنشی است (ورودی های فرم با گذشت زمان تغییر می کنند). اینها در اطراف جریانهای قابل مشاهده ساخته شده اند ، جایی که ورودی ها و مقادیر فرم به عنوان جریان مقادیر ورودی ارائه می شوند. بیایید مراحل زیر را برای ایجاد فرم های واکنشی دنبال کنیم ،
      
 
        
-
      1. ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند
        2. 
+
      2. ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند
        3. 
 
      
 
-
      import { ReactiveFormsModule } from '@angular/forms';
+
      import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
-     imports: [
+     imports: [
      // other imports ...
      ReactiveFormsModule
      ],
@@ -14283,182 +5775,182 @@ 
      reactive form ها چیا هستن؟
      
 export class AppModule { }
 
      
 
        
-
      1. یک نمونه جدید FormControl ایجاد کنید و آن را در مؤلفه ذخیره کنید.
        2. 
+
      2. یک نمونه جدید FormControl ایجاد کنید و آن را در مؤلفه ذخیره کنید.
        3. 
 
      
 
-
      import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+
      import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
-     selector: 'user-profile',
-     styleUrls: ['./user-profile.component.css']
+     selector: 'user-profile',
+     styleUrls: ['./user-profile.component.css']
 })
 export class UserProfileComponent {
-     userName = new FormControl('');
+     userName = new FormControl('');
 }
 
      
 
        
-
      1. FormControl را در الگوی ثبت کنید.
        2. 
+
      2. FormControl را در الگوی ثبت کنید.
        3. 
 
      
 
-
      <label>
+
      <label>
      User name:
-     <input type="text" [formControl]="userName">
+     <input type="text" [formControl]="userName">
 </label>
 
      
-
      سرانجام ، مؤلفه با کنترل فرم واکنشی به شرح زیر ظاهر می شود:
      
+
      سرانجام ، مؤلفه با کنترل فرم واکنشی به شرح زیر ظاهر می شود:
      
 
-
      import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+
      import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
-     selector: 'user-profile',
-     styleUrls: ['./user-profile.component.css']
-     template: `
+     selector: 'user-profile',
+     styleUrls: ['./user-profile.component.css']
+     template: `
      <label>
           User name:
-          <input type="text" [formControl]="userName">
+          <input type="text" [formControl]="userName">
      </label>
      `
 })
 export class UserProfileComponent {
-     userName = new FormControl('');
+     userName = new FormControl('');
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      13. 
 
    13. 
-
      dynamic form ها چیا هستن؟
      
-
      فرم های پویا الگویی است که در آن ما یک فرم را به صورت پویا بر اساس ابرداده می سازیم که یک مدل شی تجاری را توصیف می کند. می توانید آنها را بر اساس API فرم واکنشی ایجاد کنید.
      
-
      فهرست
      
+
      dynamic form ها چیا هستن؟
      
+
      فرم های پویا الگویی است که در آن ما یک فرم را به صورت پویا بر اساس ابرداده می سازیم که یک مدل شی تجاری را توصیف می کند. می توانید آنها را بر اساس API فرم واکنشی ایجاد کنید.
      
+
      فهرست
      
 
      14. 
 
    14. 
-
      template driven form ها چیا هستن؟
      
-
      فرم های محور الگوی فرم های مدل محور هستند که در آن می نویسید که منطق ، اعتبار سنجی ، کنترل و غیره را در قسمت الگوی کد با استفاده از دستورالعمل ها می نویسید. آنها برای سناریوهای ساده مناسب هستند و از اتصال دو طرفه با نحو [(ngmodel)] استفاده می کنند.
      
-به عنوان مثال ، می توانید با دنبال کردن مراحل ساده زیر ، فرم ثبت را به راحتی ایجاد کنید ،
      
+
      template driven form ها چیا هستن؟
      
+
      فرم های محور الگوی فرم های مدل محور هستند که در آن می نویسید که منطق ، اعتبار سنجی ، کنترل و غیره را در قسمت الگوی کد با استفاده از دستورالعمل ها می نویسید. آنها برای سناریوهای ساده مناسب هستند و از اتصال دو طرفه با نحو [(ngmodel)] استفاده می کنند.
      
+به عنوان مثال ، می توانید با دنبال کردن مراحل ساده زیر ، فرم ثبت را به راحتی ایجاد کنید ،
      
 
        
-
      1. FormsModule را در آرایه واردات ماژول برنامه وارد کنید
        2. 
+
      2. FormsModule را در آرایه واردات ماژول برنامه وارد کنید
        3. 
 
      
 
-
      import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import {FormsModule} from '@angular/forms'
-import { RegisterComponent } from './app.component';
+
      import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import {FormsModule} from '@angular/forms'
+import { RegisterComponent } from './app.component';
 
 @NgModule({
-     declarations: [
+     declarations: [
           RegisterComponent,
      ],
-     imports: [
+     imports: [
           BrowserModule,
           FormsModule
      ],
-     providers: [],
-     bootstrap: [RegisterComponent]
+     providers: [],
+     bootstrap: [RegisterComponent]
 })
 export class AppModule { }
 
      
 
        
-
      1. با استفاده از نحو ngmodel فرم را از الگوی به مؤلفه وصل کنید
        2. 
+
      2. با استفاده از نحو ngmodel فرم را از الگوی به مؤلفه وصل کنید
        3. 
 
      
 
-
      <input type="text" class="form-control" id="name"
+
      <input type="text" class="form-control" id="name"
           required
-          [(ngModel)]="model.name" name="name">
+          [(ngModel)]="model.name" name="name">
 
      
 
        
-
      1. برای ایجاد نمونه های FormControl و ثبت آنها ، دستورالعمل NGFORM را به برچسب 
         وصل کنید
        2. 
+
      2. برای ایجاد نمونه های FormControl و ثبت آنها ، دستورالعمل NGFORM را به برچسب 
         وصل کنید
        3. 
 
      
 
-
      <form #registerForm="ngForm">
+
      <form #registerForm="ngForm">
 
      
 
        
-
      1. پیام اعتبار سنجی را برای کنترل فرم اعمال کنید
        2. 
+
      2. پیام اعتبار سنجی را برای کنترل فرم اعمال کنید
        3. 
 
      
 
-
      <label for="name">Name</label>
-<input type="text" class="form-control" id="name"
+
      <label for="name">Name</label>
+<input type="text" class="form-control" id="name"
           required
-          [(ngModel)]="model.name" name="name"
-          #name="ngModel">
-<div [hidden]="name.valid || name.pristine"
-     class="alert alert-danger">
+          [(ngModel)]="model.name" name="name"
+          #name="ngModel">
+<div [hidden]="name.valid || name.pristine"
+     class="alert alert-danger">
      Please enter your name
 </div>
 
      
 
        
-
      1. بیایید فرم را با دستورالعمل ngsubmit ارسال کنیم و دکمه نوع = "ارسال" را در پایین فرم اضافه کنیم تا فرم ارسال شود.
        2. 
+
      2. بیایید فرم را با دستورالعمل ngsubmit ارسال کنیم و دکمه نوع = "ارسال" را در پایین فرم اضافه کنیم تا فرم ارسال شود.
        3. 
 
      
 
-
      <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
+
      <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
 // Form goes here
-<button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>
+<button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>
 
      
-
      سرانجام ، فرم ثبت نام الگوی محور به شرح زیر ظاهر می شود.
      
+
      سرانجام ، فرم ثبت نام الگوی محور به شرح زیر ظاهر می شود.
      
 
-
      <div class="container">
+
      <div class="container">
      <h1>Registration Form</h1>
-     <form (ngSubmit)="onSubmit()" #registerForm="ngForm">
-          <div class="form-group">
-               <label for="name">Name</label>
-               <input type="text" class="form-control" id="name"
+     <form (ngSubmit)="onSubmit()" #registerForm="ngForm">
+          <div class="form-group">
+               <label for="name">Name</label>
+               <input type="text" class="form-control" id="name"
                     required
-                    [(ngModel)]="model.name" name="name"
-                    #name="ngModel">
-               <div [hidden]="name.valid || name.pristine"
-                    class="alert alert-danger">
+                    [(ngModel)]="model.name" name="name"
+                    #name="ngModel">
+               <div [hidden]="name.valid || name.pristine"
+                    class="alert alert-danger">
                Please enter your name
                </div>
           </div>
-          <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>
+          <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>
      </form>
 </div>
 
      
-
      فهرست
      
+
      فهرست
      
 
      15. 
 
    15. 
-
      فرق بین فرم های ری اکتیو و template driven form ها چیا هستن؟
      
+
      فرق بین فرم های ری اکتیو و template driven form ها چیا هستن؟
      
 
      16. 
 
    
-
    در زیر تفاوت های اصلی بین اشکال واکنشی و فرم های محور الگو وجود دارد 
+
    در زیر تفاوت های اصلی بین اشکال واکنشی و فرم های محور الگو وجود دارد 
 
-  | ویژگی | واکنشی | الگوی محور | 
+  | ویژگی | واکنشی | الگوی محور | 
   | ---- | ---- | --------- | 
-  | تنظیم مدل فرم | ایجاد شده (نمونه formcontrol) در مؤلفه صریح | ایجاد شده توسط بخشنامه ها | 
-  | به روزرسانی داده ها | همزمان | ناهمزمان | 
-  | اعتبار سنجی سفارشی | تعریف شده به عنوان توابع | تعریف شده به عنوان دستورالعمل | 
-  | تست | هیچ تعامل با چرخه تشخیص تغییر | نیاز به دانش در مورد فرآیند تشخیص تغییر | 
-  | جهش پذیری | تغییر ناپذیر (با بازگرداندن مقدار جدید برای نمونه FormControl) | قابل تغییر (خاصیت همیشه به ارزش جدید اصلاح شده) | 
-  | مقیاس پذیری | مقیاس پذیر تر با استفاده از API های سطح پایین | کمتر مقیاس پذیر به دلیل انتزاع در APIS |
-
- **[فهرست](#فهرست)**
+  | تنظیم مدل فرم | ایجاد شده (نمونه formcontrol) در مؤلفه صریح | ایجاد شده توسط بخشنامه ها | 
+  | به روزرسانی داده ها | همزمان | ناهمزمان | 
+  | اعتبار سنجی سفارشی | تعریف شده به عنوان توابع | تعریف شده به عنوان دستورالعمل | 
+  | تست | هیچ تعامل با چرخه تشخیص تغییر | نیاز به دانش در مورد فرآیند تشخیص تغییر | 
+  | جهش پذیری | تغییر ناپذیر (با بازگرداندن مقدار جدید برای نمونه FormControl) | قابل تغییر (خاصیت همیشه به ارزش جدید اصلاح شده) | 
+  | مقیاس پذیری | مقیاس پذیر تر با استفاده از API های سطح پایین | کمتر مقیاس پذیر به دلیل انتزاع در APIS |
+
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      روش هایی که برای group کردن فرم کنترل ها وجود داره چیا هستن؟
      
-
      اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد.
      
+
      روش هایی که برای group کردن فرم کنترل ها وجود داره چیا هستن؟
      
+
      اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد.
      
 
        
-
      1. ** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
        2. 
+
      2. ** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
        3. 
 
      
-
      این فرم گروه می تواند برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.
      
+
      این فرم گروه می تواند برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.
      
 
-
      import { Component } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+
      import { Component } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
 
 @Component({
-     selector: 'user-profile',
-          templateUrl: './user-profile.component.html',
-          styleUrls: ['./user-profile.component.css']
+     selector: 'user-profile',
+          templateUrl: './user-profile.component.html',
+          styleUrls: ['./user-profile.component.css']
      })
      export class UserProfileComponent {
      userProfile = new FormGroup({
-          firstName: new FormControl(''),
-          lastName: new FormControl(''),
-          address: new FormGroup({
-               street: new FormControl(''),
-               city: new FormControl(''),
-               state: new FormControl(''),
-               zip: new FormControl('')
+          firstName: new FormControl(''),
+          lastName: new FormControl(''),
+          address: new FormGroup({
+               street: new FormControl(''),
+               city: new FormControl(''),
+               state: new FormControl(''),
+               zip: new FormControl('')
                })
      });
 
@@ -14468,62 +5960,62 @@ 
      روش هایی که برای group کردن فرم کنترل ها وجود
 }
 
      
 
-
      <form [formGroup]="userProfile" (ngSubmit)="onSubmit()">
+
      <form [formGroup]="userProfile" (ngSubmit)="onSubmit()">
 
 <label>
      First Name:
-     <input type="text" formControlName="firstName">
+     <input type="text" formControlName="firstName">
 </label>
 
 <label>
      Last Name:
-     <input type="text" formControlName="lastName">
+     <input type="text" formControlName="lastName">
 </label>
 
-<div formGroupName="address">
+<div formGroupName="address">
      <h3>Address</h3>
 
      <label>
          Street:
-         <input type="text" formControlName="street">
+         <input type="text" formControlName="street">
      </label>
 
      <label>
          City:
-         <input type="text" formControlName="city">
+         <input type="text" formControlName="city">
      </label>
 
      <label>
          State:
-         <input type="text" formControlName="state">
+         <input type="text" formControlName="state">
      </label>
 
      <label>
          Zip Code:
-         <input type="text" formControlName="zip">
+         <input type="text" formControlName="zip">
      </label>
      </div>
-     <button type="submit" [disabled]="!userProfile.valid">Submit</button>
+     <button type="submit" [disabled]="!userProfile.valid">Submit</button>
 </form>
 
      
 
        
-
      1. ** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
        2. 
+
      2. ** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
        3. 
 
      
 
-
      import { Component } from '@angular/core';
-import { FormArray, FormControl } from '@angular/forms';
+
      import { Component } from '@angular/core';
+import { FormArray, FormControl } from '@angular/forms';
 
 @Component({
-     selector: 'order-form',
-     templateUrl: './order-form.component.html',
-     styleUrls: ['./order-form.component.css']
+     selector: 'order-form',
+     templateUrl: './order-form.component.html',
+     styleUrls: ['./order-form.component.css']
 })
 export class OrderFormComponent {
      constructor () {
           this.orderForm = new FormGroup({
-          firstName: new FormControl('John', Validators.minLength(3)),
-          lastName: new FormControl('Rodson'),
-          items: new FormArray([
+          firstName: new FormControl('John', Validators.minLength(3)),
+          lastName: new FormControl('Rodson'),
+          items: new FormArray([
           new FormControl(null)
           ])
           });
@@ -14539,87 +6031,87 @@ 
      روش هایی که برای group کردن فرم کنترل ها وجود
      }
 
      onRemoveItem (index) {
-          this.orderForm.controls['items'].removeAt(index);
+          this.orderForm.controls['items'].removeAt(index);
      }
 }
 
      
 
-
      <form [formControlName]="orderForm" (ngSubmit)="onSubmit()">
+
      <form [formControlName]="orderForm" (ngSubmit)="onSubmit()">
 
      <label>
           First Name:
-          <input type="text" formControlName="firstName">
+          <input type="text" formControlName="firstName">
      </label>
 
      <label>
           Last Name:
-          <input type="text" formControlName="lastName">
+          <input type="text" formControlName="lastName">
      </label>
 
      <div>
           <p>Add items</p>
-          <ul formArrayName="items">
-               <li *ngFor="let item of orderForm.controls.items.controls; let i = index">
-                    <input type="text" formControlName="{{i}}">
-                    <button type="button" title="Remove Item" (click)="onRemoveItem(i)">Remove</button>
+          <ul formArrayName="items">
+               <li *ngFor="let item of orderForm.controls.items.controls; let i = index">
+                    <input type="text" formControlName="{{i}}">
+                    <button type="button" title="Remove Item" (click)="onRemoveItem(i)">Remove</button>
                </li>
           </ul>
-          <button type="button" (click)="onAddItem">
+          <button type="button" (click)="onAddItem">
                Add an item
           </button>
      </div>
 </form>
 
      
-
      فهرست
      
+
      فهرست
      
 
      2. 
 
    2. 
-
      چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟>
      
-
      برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می توانید از روش `patchValue () استفاده کنید. به عنوان مثال ، می توانید نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.
      
+
      چطوری پراپرتی های یه فرم مدل رو اپدیت میکنی؟>
      
+
      برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می توانید از روش `patchValue () استفاده کنید. به عنوان مثال ، می توانید نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.
      
 
-
      updateProfile() {
+
      updateProfile() {
   this.userProfile.patchValue({
-    firstName: 'John',
-    address: {
-      street: '98 Crescent Street'
+    firstName: 'John',
+    address: {
+      street: '98 Crescent Street'
     }
   });
 }
 
      
 
-
        <button (click)="updateProfile()">Update Profile</button>
+
        <button (click)="updateProfile()">Update Profile</button>
 
      
 
      You can also use setValue method to update properties.
      
 
      Note: Remember to update the properties against the exact model structure.
      
-
      فهرست
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      هدف از FormBuilder چیه؟
      
-
      FormBuilder به عنوان شکر نحوی برای ایجاد آسان نمونه هایی از یک فرمل ، فرم گروه یا فرم آررای استفاده می شود. این برای کاهش میزان دیگ بخار مورد نیاز برای ساخت اشکال واکنشی پیچیده مفید است. این به عنوان یک کلاس یاور تزریقی بسته `@angular/forms" در دسترس است.
      
+
      هدف از FormBuilder چیه؟
      
+
      FormBuilder به عنوان شکر نحوی برای ایجاد آسان نمونه هایی از یک فرمل ، فرم گروه یا فرم آررای استفاده می شود. این برای کاهش میزان دیگ بخار مورد نیاز برای ساخت اشکال واکنشی پیچیده مفید است. این به عنوان یک کلاس یاور تزریقی بسته `@angular/forms" در دسترس است.
      
 
      For example, the user profile component creation becomes easier as shown here.
      
 
-
      export class UserProfileComponent {
+
      export class UserProfileComponent {
      profileForm = this.formBuilder.group({
-          firstName: [''],
-          lastName: [''],
-          address: this.formBuilder.group({
-               street: [''],
-               city: [''],
-               state: [''],
-               zip: ['']
+          firstName: [''],
+          lastName: [''],
+          address: this.formBuilder.group({
+               street: [''],
+               city: [''],
+               state: [''],
+               zip: ['']
           }),
      });
-     constructor(private formBuilder: FormBuilder) { }
+     constructor(private formBuilder: FormBuilder) { }
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟
      
-
      شما می توانید یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.
      
+
      چطوری مدل تغییرات توی فرم رو اعتبار سنجی میکنی؟
      
+
      شما می توانید یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.
      
 
-
      export class UserProfileComponent {
+
      export class UserProfileComponent {
 
-  model = new User('John', 29, 'Writer');
+  model = new User('John', 29, 'Writer');
 
   // TODO: Remove after the verification
   get diagnostic() { return JSON.stringify(this.model); }
@@ -14627,56 +6119,56 @@ 
      چطوری مدل تغییرات توی فرم رو اعتبار سنجی م
 
      
 
      and add diagnostic binding near the top of the form
      
 
-
      {{diagnostic}}
-<div class="form-group">
+
      {{diagnostic}}
+<div class="form-group">
   // FormControls goes here
 </div>
 
      
-
      فهرست
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      کلاس هایی که با  ngModel تامین شدن چیا هستن؟
      
-
      دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS زاویه ای به روز می کند تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،
      
+
      کلاس هایی که با  ngModel تامین شدن چیا هستن؟
      
+
      دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS زاویه ای به روز می کند تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،
      
 
-
-
-
+
+
+
-
+
-
+
-
+
      
 
 
      حالت کنترل فرماگر درستاگر نادرستحالت کنترل فرماگر درستاگر نادرست
 
      
       
 
 
      بازدیدبازدید
 ng-touched
 ng-untouched
 
      
 
      ارزش تغییر کرده استارزش تغییر کرده است
 ng-dirty
 NG-Pristine
 
      
 
      ارزش معتبر استارزش معتبر است
 NG-VILID
 NG-Invalid
 
      
       
 
      
-
      فهرست
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      چطوری یه فرم رو ریست میکنی؟
      
+
      چطوری یه فرم رو ریست میکنی؟
      
 
      7. 
 
    
-
    در یک فرم مدل محور ، می توانید فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. 
-  به عنوان مثال ، می توانید مدل فرم را در ارسال به شرح زیر تنظیم کنید ،
- <span dir="ltr" align="left">
+
    در یک فرم مدل محور ، می توانید فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. 
+  به عنوان مثال ، می توانید مدل فرم را در ارسال به شرح زیر تنظیم کنید ،
+ <span dir="ltr" align="left">
 
  ```js
  onSubmit() {
    if (this.myform.valid) {
-     console.log("Form is submitted");
+     console.log("Form is submitted");
      // Perform business logic here
      this.myform.reset();
    }
@@ -14685,142 +6177,142 @@ 
    چطوری یه فرم رو ریست میکنی؟
    
  
  </span>
 
-اوه ، مدل فرم شما فرم را به حالت بکر اصلی خود بازنشانی می کند.
+اوه ، مدل فرم شما فرم را به حالت بکر اصلی خود بازنشانی می کند.
 
- **[فهرست](#فهرست)**
+ **[فهرست](#فهرست)**
 
    
 
      
 
    1. 
-
      تایپ های مربوط به validator فانکشن چیا هستن؟
      
-
      در اشکال واکنشی ، اعتبار سنج ها می توانند توابع همزمان یا ناهمزمان باشند ،
      
+
      تایپ های مربوط به validator فانکشن چیا هستن؟
      
+
      در اشکال واکنشی ، اعتبار سنج ها می توانند توابع همزمان یا ناهمزمان باشند ،
      
 
        
-
      1. ** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
        2. 
-
      2. ** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
        3. 
+
      3. ** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
        4. 
+
      4. ** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
        5. 
 
      
 
      The representation of these validators looks like below
      
 
-
      this.myForm = formBuilder.group({
-    firstName: ['value'],
-    lastName: ['value', *Some Sync validation function*],
-    email: ['value', *Some validation function*, *Some asynchronous validation function*]
+
      this.myForm = formBuilder.group({
+    firstName: ['value'],
+    lastName: ['value', *Some Sync validation function*],
+    email: ['value', *Some validation function*, *Some asynchronous validation function*]
 });
 
      
-
      فهرست
      
+
      فهرست
      
 
      2. 
 
    2. 
-
      میتونی چن تا مثال از validator های build-in بزنی ؟
      
-
      n فرم های واکنشی ، می توانید از اعتبار سنجی داخلی مانند "مورد نیاز" و "minl طول" در کنترل فرم ورودی خود استفاده کنید. به عنوان مثال ، فرم ثبت نام می تواند این اعتبار سنج ها را در قسمت ورودی نام داشته باشد
      
+
      میتونی چن تا مثال از validator های build-in بزنی ؟
      
+
      n فرم های واکنشی ، می توانید از اعتبار سنجی داخلی مانند "مورد نیاز" و "minl طول" در کنترل فرم ورودی خود استفاده کنید. به عنوان مثال ، فرم ثبت نام می تواند این اعتبار سنج ها را در قسمت ورودی نام داشته باشد
      
 
-
      this.registrationForm = new FormGroup({
-     'name': new FormControl(this.hero.name, [
+
      this.registrationForm = new FormGroup({
+     'name': new FormControl(this.hero.name, [
           Validators.required,
           Validators.minLength(4),
      ])
 });
 
      
-
      در حالی که در فرم های الگوی محور ، هر دو اعتبار سنجی «مورد نیاز» و `minl طول به عنوان ویژگی ها موجود است.
      
-
      فهرست
      
+
      در حالی که در فرم های الگوی محور ، هر دو اعتبار سنجی «مورد نیاز» و `minl طول به عنوان ویژگی ها موجود است.
      
+
      فهرست
      
 
      3. 
 
    3. 
-
      چطوری پرفورمنس validator های async رو بیتشر میکنی؟
      
-
      از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا می شوند ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد می کند. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
      
-استفاده بر اساس انواع فرم متفاوت خواهد بود.
      
+
      چطوری پرفورمنس validator های async رو بیتشر میکنی؟
      
+
      از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا می شوند ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد می کند. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
      
+استفاده بر اساس انواع فرم متفاوت خواهد بود.
      
 
        
-
      1. Template-driven forms: Set the property on ngModelOptions directive
        2. 
+
      2. Template-driven forms: Set the property on ngModelOptions directive
        3. 
 
      
 
-
      <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
+
      <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
 
      
 
        
-
      1. Reactive-forms: Set the property on FormControl instance
        2. 
+
      2. Reactive-forms: Set the property on FormControl instance
        3. 
 
      
 
-
      name = new FormControl('', {updateOn: 'blur'});
+
      name = new FormControl('', {updateOn: 'blur'});
 
      
-
      فهرست
      
+
      فهرست
      
 
      4. 
 
    4. 
-
      چطوری ngfor  و ngIf برای یه المان همزمان تنظیم کنیم؟
      
-
      بعضی اوقات ممکن است شما نیاز به NGFOR و NGIF در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید.
      
+
      چطوری ngfor  و ngIf برای یه المان همزمان تنظیم کنیم؟
      
+
      بعضی اوقات ممکن است شما نیاز به NGFOR و NGIF در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید.
      
 
-
       Template parse errors: Can't have multiple template bindings on one element.
+
       Template parse errors: Can't have multiple template bindings on one element.
 
      
-
      در این حالت ، شما باید از ng-container یا ng-template استفاده کنید.
      
-بیایید بگوییم اگر سعی می کنید موارد را فقط در صورت موجود بودن موارد حلقه کنید ، کد زیر خطایی را در مرورگر پرتاب می کند
      
+
      در این حالت ، شما باید از ng-container یا ng-template استفاده کنید.
      
+بیایید بگوییم اگر سعی می کنید موارد را فقط در صورت موجود بودن موارد حلقه کنید ، کد زیر خطایی را در مرورگر پرتاب می کند
      
 
-
      <ul *ngIf="items" *ngFor="let item of items">
+
      <ul *ngIf="items" *ngFor="let item of items">
      <li></li>
 </ul>
 
      
 
      and it can be fixed by
      
 
-
      <ng-container *ngIf="items">
-     <ul *ngFor="let item of items">
+
      <ng-container *ngIf="items">
+     <ul *ngFor="let item of items">
           <li></li>
      </ul>
 </ng-container>
 
      
-
      فهرست
      
+
      فهرست
      
 
      5. 
 
    5. 
-
      منظور از پراپرتی host توی css چیه؟
      
-
      از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده می شود. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی توانید از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
      
-به عنوان مثال ، شما می توانید یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،
      
+
      منظور از پراپرتی host توی css چیه؟
      
+
      از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده می شود. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی توانید از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
      
+به عنوان مثال ، شما می توانید یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،
      
 
-
      //Other styles for app.component.css
+
      //Other styles for app.component.css
 //...
 :host {
-  display: block;
-  border: 1px solid black;
-  padding: 20px;
+  display: block;
+  border: 1px solid black;
+  padding: 20px;
 }
 
      
-
      فهرست
      
+
      فهرست
      
 
      6. 
 
    6. 
-
      چطوری route فعلی رو بدست میاری؟
      
-
      در Angular ، یک ویژگی url از بسته روتر برای رسیدن به مسیر فعلی وجود دارد. شما باید چند مرحله زیر را دنبال کنید ،
      
+
      چطوری route فعلی رو بدست میاری؟
      
+
      در Angular ، یک ویژگی url از بسته روتر برای رسیدن به مسیر فعلی وجود دارد. شما باید چند مرحله زیر را دنبال کنید ،
      
 
        
-
      1. Import Router from @angular/router
        2. 
+
      2. Import Router from @angular/router
        3. 
 
      
 
-
      import { Router } from '@angular/router';
+
      import { Router } from '@angular/router';
 
      
 
        
-
      1. Inject router inside constructor
        2. 
+
      2. Inject router inside constructor
        3. 
 
      
 
-
      constructor(private router: Router ) {
+
      constructor(private router: Router ) {
 
 }
 
      
 
        
-
      1. Access url parameter
        2. 
+
      2. Access url parameter
        3. 
 
      
 
-
      console.log(this.router.url); //  /routename
+
      console.log(this.router.url); //  /routename
 
      
-
      فهرست
      
+
      فهرست
      
 
      7. 
 
    7. 
-
      مهار تست های کامپوننت چیه؟
      
-
      مهار مؤلفه یک API آزمایش در اطراف یک دستورالعمل یا مؤلفه زاویه ای است تا با مخفی کردن جزئیات اجرای از مجموعه های آزمایش ، تست ها را ساده تر کند. این می تواند بین تست های واحد ، تست های ادغام و تست های پایان به پایان به اشتراک گذاشته شود. ایده برای مهارهای مؤلفه از الگوی ** pageObject ** که معمولاً برای آزمایش ادغام استفاده می شود ، حاصل می شود.
      
-
      فهرست
      
+
      مهار تست های کامپوننت چیه؟
      
+
      مهار مؤلفه یک API آزمایش در اطراف یک دستورالعمل یا مؤلفه زاویه ای است تا با مخفی کردن جزئیات اجرای از مجموعه های آزمایش ، تست ها را ساده تر کند. این می تواند بین تست های واحد ، تست های ادغام و تست های پایان به پایان به اشتراک گذاشته شود. ایده برای مهارهای مؤلفه از الگوی ** pageObject ** که معمولاً برای آزمایش ادغام استفاده می شود ، حاصل می شود.
      
+
      فهرست
      
 
      8. 
 
    8. 
-
      مزایای inlining اتوماتیک چیه؟
      
-
      در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده می کند ، بارگیری و درون خطی می کند. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال می شود.
      
-
      فهرست
      
+
      مزایای inlining اتوماتیک چیه؟
      
+
      در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده می کند ، بارگیری و درون خطی می کند. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال می شود.
      
+
      فهرست
      
 
      9. 
 
    9. 
-
      content projection چیه؟
      
-
      طرح ریزی محتوا الگویی است که در آن شما محتوای مورد نظر خود را در داخل یک مؤلفه دیگر وارد می کنید یا پروژه می کنید.
      
-
      فهرست
      
+
      content projection چیه؟
      
+
      طرح ریزی محتوا الگویی است که در آن شما محتوای مورد نظر خود را در داخل یک مؤلفه دیگر وارد می کنید یا پروژه می کنید.
      
+
      فهرست
      
 
      10. 
 
    10. 
-
      ng-به چی میگن و هدف از اون چیه؟content
      
-
      از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده می شود که به افزایش قابلیت استفاده مجدد مؤلفه کمک می کند.
      
-
      فهرست
      
+
      ng-به چی میگن و هدف از اون چیه؟content
      
+
      از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده می شود که به افزایش قابلیت استفاده مجدد مؤلفه کمک می کند.
      
+
      فهرست
      
 
      11.
    diff --git a/Book.md b/Book.md index b8aecde..4c89f86 100644 --- a/Book.md +++ b/Book.md @@ -114,36 +114,36 @@ puppeteer: |67| [router link ها چیا هستن؟](#router-link-ها-چیا-هستن؟)| |68| [منظور از router link های active جیه؟](#منظور-از-router-link-های-active-جیه؟)| |69| [منظور از router state چیه؟](#منظور-از-router-state-چیه؟)| -|70| [event های مربوط به router چیا هستن؟](#1)| -|71| [منظور از activated route چیه؟](#1)| -|72| [چطوری router های پروژه ات رو تعریف میکنی؟](#1)| -|73| [هدف از Wildcard route چیه؟](#1)| -|74| [ما همیشه به routing module نیاز داریم؟](#1)| -|75| [Angular Universal چیه؟](#1)| -|76| [انگولار به چن روش کامپایل میشه؟](#1)| -|77| [JIT چیه؟](#1)| -|78| [AOT چیه؟](#1)| -|79| [چرا ما به پروسه کامپایل نیاز داریم؟](#1)| -|80| [مزایای استفاده از AOT چیه؟](#1)| -|81| [روش های کنترل کامپایل شدن با AOT چیا هستن؟](#1)| -|82| [محدودیت هایی که روی metadata وجود داره چیا هستن؟](#1)| -|83| [فاز های کامپایل با استفاده از AOT چیا هستن؟](#1)| -|84| [ ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟](#1)| -|85| [هدف از استفاده از فایل های metadata json چیه؟](#1)| -|86| [ توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟](#1)| -|87| [folding چیه؟](#1)| -|88| [macros چیه؟](#1)| -|89| [چن تا مثال از ارور های مربوط به metatdata بزن؟](#1)| -|90| [منظور از metadata rewriting چیه؟](#1)| -|91| [توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟](#1)| -|92| [چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟](#1)| -|93| [چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟](#1)| -|94| [هدف از any type توی cast function چیه؟](#1)| +|70| [event های مربوط به router چیا هستن؟](#event-های-مربوط-به-router-چیا-هستن؟)| +|71| [منظور از activated route چیه؟](#منظور-از-activated-route-چیه؟)| +|72| [چطوری router های پروژه ات رو تعریف میکنی؟](#چطوری-router-های-پروژه-ات-رو-تعریف-میکنی؟)| +|73| [هدف از Wildcard route چیه؟](#هدف-از-Wildcard-route-چیه؟)| +|74| [ما همیشه به routing module نیاز داریم؟](#ما-همیشه-به-routing-module-نیاز-داریم؟)| +|75| [Angular Universal چیه؟](#Angular-Universal-چیه؟)| +|76| [انگولار به چن روش کامپایل میشه؟](#انگولار-به-چن-روش-کامپایل-میشه؟)| +|77| [JIT چیه؟](#JIT-چیه؟)| +|78| [AOT چیه؟](#AOT-چیه؟)| +|79| [چرا ما به پروسه کامپایل نیاز داریم؟](#چرا-ما-به-پروسه-کامپایل-نیاز-داریم؟)| +|80| [مزایای استفاده از AOT چیه؟](#مزایای-استفاده-از-AOT-چیه؟)| +|81| [روش های کنترل کامپایل شدن با AOT چیا هستن؟](#روش-های-کنترل-کامپایل-شدن-با-AOT-چیا-هستن؟)| +|82| [محدودیت هایی که روی metadata وجود داره چیا هستن؟](#محدودیت-هایی-که-روی-metadata-وجود-داره-چیا-هستن؟)| +|83| [فاز های کامپایل با استفاده از AOT چیا هستن؟](#فاز-های-کامپایل-با-استفاده-از-AOT-چیا-هستن؟)| +|84| [ ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟](#-ما-میتونیم-از-arrow-function-ها-توی-AOT-اسنتفاده-کنیم؟)| +|85| [هدف از استفاده از فایل های metadata json چیه؟](#هدف-از-استفاده-از-فایل-های-metadata-json-چیه؟)| +|86| [ توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟](#-توی-حالت-AOTمیتونیم-از-همه-مزایای-جاوااسکریپت-برای-سینتکس-ها-استفاده-کینیم؟)| +|87| [folding چیه؟](#folding-چیه؟)| +|88| [macros چیه؟](#macros-چیه؟)| +|89| [چن تا مثال از ارور های مربوط به metatdata بزن؟](#چن-تا-مثال-از-ارور-های-مربوط-به-metatdata-بزن؟)| +|90| [منظور از metadata rewriting چیه؟](#منظور-از-metadata-rewriting-چیه؟)| +|91| [توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟](#توی-انگولار-چطوری-وراثت-کانفیگ-رو-انجام-میدی؟)| +|92| [چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟](#چطوری-آپشن-های-کامپایلرانگولار-رو-تنظیم-میکنی؟)| +|93| [چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟](#چطوری-اعتبارسنجی-مربوط-به-قسمت-های-بایند-شده-رو-فعال-کنیم؟)| +|94| [هدف از any type توی cast function چیه؟](#هدف-از-any-type-توی-cast-function-چیه؟)| |95| [non null تایپ ](#1)| -|96| [منظور از type narrowing چیه؟](#1)| -|97| [چطوری dependency های مختلف توی انگولار تعریف میکنی؟](#1)| -|98| [zone توی انگولار چیه؟](#1)| -|99| [هدف از ماژول مشترک توی انگولار چیه؟](#1)| +|96| [منظور از type narrowing چیه؟](#منظور-از-type-narrowing-چیه؟)| +|97| [چطوری dependency های مختلف توی انگولار تعریف میکنی؟](#چطوری-dependency-های-مختلف-توی-انگولار-تعریف-میکنی؟)| +|98| [zone توی انگولار چیه؟](#zone-توی-انگولار-چیه؟)| +|99| [هدف از ماژول مشترک توی انگولار چیه؟](#هدف-از-ماژول-مشترک-توی-انگولار-چیه؟)| |100| [codelyzer چیه؟](#1)| |101| [angular animation چیه؟](#1)| |102| [مراحل استفاده از ماژول های animation چیه؟](#1)| @@ -1871,7 +1871,7 @@ puppeteer: **[فهرست](#فهرست)** -event های مربوط به router چیا هستن؟events? +70. ### event های مربوط به router چیا هستن؟ در طول هر ناوبری، روتر رویدادهای ناوبری را از طریق ویژگی Router.events منتشر می کند که به شما امکان می دهد چرخه حیات مسیر را ردیابی کنید.