-مجموعه سوال و جوابهای انگولار
+مجموعه سوال و جوابهای انگولار
@@ -267,7 +508,7 @@اگه از کتاب خوشتون اومد به گیتهابمون مراجعه کنین و بهمون ⭐️ بدین. اگر هم قصد مشارکت داشتید همونجا میتونین شروع کنین و ما هم خیلی خوشحال میشیم 😃
مجموعه سوال
لینک گیتهاب ما برای مشارکت برای تولید کتابها: https://github.com/mariotek
-نحوه دانلود کتاب به فرمتهای PDF/Epub
+نحوه دانلود کتاب به فرمتهای PDF/Epub
میتونین خیلی راحت نسخه آنلاین کتاب استفاده کنین یا اگه به فایل کتاب میخوایین دسترسی داشته باشین، از بخش ریلیزهای گیتهاب به فرمتهای مختلف آخرین نسخه کتاب رو میتونین دریافت کنین.
@@ -285,83 +526,83 @@
فهر
1
-فریمورک انگولار چیه؟
+فریمورک انگولار چیه؟
2
-فرق بین انگولار و انگولار جی اس چیه؟
+فرق بین انگولار و انگولار جی اس چیه؟
3
-تایپ اسکریپت چیه؟
+تایپ اسکریپت چیه؟
4
-یه دیاگرام تصویری از ساختار انگولار بنویس؟
+یه دیاگرام تصویری از ساختار انگولار بنویس؟
5
-کامپوننت های کلیدی انگولار کدوما هستن؟
+کامپوننت های کلیدی انگولار کدوما هستن؟
6
-directives ها چیا هستن؟
+directives ها چیا هستن؟
7
-کامپوننت ها چیا هستن؟
+کامپوننت ها چیا هستن؟
8
-تفاوت های بین directive و کامپوننت چیه؟
+تفاوت های بین directive و کامپوننت چیه؟
9
-template چیه؟
+template چیه؟
10
-ماژول چیه؟
+ماژول چیه؟
11
-lifecycle های مربوط به انگولار چیا هستن؟
+lifecycle های مربوط به انگولار چیا هستن؟
12
-data binding چیه؟
+data binding چیه؟
13
-metadata چیه؟
+metadata چیه؟
14
-Angular CLI چی هست؟
+Angular CLI چی هست؟
15
-فرق بین constructor و ngOnInit چیه؟
+فرق بین constructor و ngOnInit چیه؟
16
-service چیه؟
+service چیه؟
17
-dependency injection توی انگولار یعنی چی؟
+dependency injection توی انگولار یعنی چی؟
18
-ساختار Dependency توی انگولار چطوری چیده میشه؟
+ساختار Dependency توی انگولار چطوری چیده میشه؟
19
-هدف از AsyncPipe چیه؟
+هدف از AsyncPipe چیه؟
20
-بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
+بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
21
@@ -645,83 +886,83 @@ فهر
91
-How do you provide configuration inheritance?
+توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
92
-How do you specify angular template compiler options?
+چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
93
-How do you enable binding expression validation?
+چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
94
-What is the purpose of any type cast function?
+هدف از any type توی cast function چیه؟
95
-What is Non null type assertion operator?
+non null تایپ
96
-What is type narrowing?
+منظور از type narrowing چیه؟
97
-How do you describe various dependencies in angular application?
+چطوری dependency های مختلف توی انگولار تعریف میکنی؟
98
-What is zone?
+zone توی انگولار چیه؟
99
-What is the purpose of common module?
+هدف از ماژول مشترک توی انگولار چیه؟
100
-What is codelyzer?
+codelyzer چیه؟
101
-What is angular animation?
+angular animation چیه؟
102
-What are the steps to use animation module?
+مراحل استفاده از ماژول های animation چیه؟
103
-What is State function?
+تابع state چیه؟](#1)
104
-What is Style function?
+هدف از تابع style چیه؟
105
-What is the purpose of animate function?
+هدف از تابع animate چیه؟
106
-What is transition function?
+تابع transition چیه؟
107
-How to inject the dynamic script in angular?
+[چطوری کد های dynamاسکریپت های)
108
-What is a service worker and its role in Angular?
+service worker چیه و نقشش توی انگولار چیه؟
109
-What are the design goals of service workers?
+اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
110
-What are the differences between AngularJS and Angular with respect to dependency injection?
+تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟
111
@@ -937,11 +1178,11 @@ فهر
164
-What are the various security contexts in Angular?
+What are the various security contexts in Angular?
165
-What is Sanitization? Is angular supports it?
+What is Sanitization? Is angular supports it?
166
@@ -965,7 +1206,7 @@ فهر
171
-How do you support server side XSS protection in Angular application?
+How do you support server side XSS protection in Angular application?
172
@@ -1125,11 +1366,11 @@ فهر
211
-What are the list of template expression operators?
+What are the list of template expression operators?
212
-What is the precedence between pipe and ternary operators?
+What is the precedence between pipe and ternary operators?
213
@@ -1387,12 +1628,12 @@ فهر
-
-
فریمورک انگولار چیه؟
+فریمورک انگولار چیه؟
Angular یک پلتفرم فرانتاند منبع باز مبتنی بر TypeScript است که ساخت برنامهها را در وب/موبایل/کامپیوتر آسان میکند. از ویژگی های اصلی این فریم ورک مانند قالب های اعلامی، تزریق وابستگی، ابزارهای انتها به انتها و بسیاری ویژگی های دیگر برای سهولت توسعه استفاده می شود.
-
+
-
-
فرق بین انگولار و انگولار جی اس چیه؟
+فرق بین انگولار و انگولار جی اس چیه؟
Angular یک فریم ورک کاملاً احیا شده مبتنی بر مؤلفه است که در آن یک برنامه کاربردی درختی از اجزای جداگانه است.
@@ -1424,10 +1665,10 @@ فرق بین انگو
-
+
-
-
تایپ اسکریپت چیه؟
+تایپ اسکریپت چیه؟
TypeScript یک ابر مجموعه تایپ شده از جاوا اسکریپت است که توسط مایکروسافت ایجاد شده است که انواع اختیاری، کلاس ها، async/wait و بسیاری ویژگی های دیگر را اضافه می کند و به جاوا اسکریپت ساده کامپایل می کند. Angular به طور کامل در TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شود.
شما می توانید آن را به صورت جهانی نصب کنید
@@ -1444,27 +1685,27 @@ تایپ اسکریپb
document.body.innerHTML = greeter(user);
متد greeter فقط نوع رشته را به عنوان آرگومان مجاز می کند.
-
+
-
-
یه دیاگرام تصویری از ساختار انگولار بنویس؟
+یه دیاگرام تصویری از ساختار انگولار بنویس؟
بلوک های ساختمان اصلی یک برنامه Angular در نمودار زیر نشان داده شده است
-
+
-
-
کامپوننت های کلیدی انگولار کدوما هستن؟
+کامپوننت های کلیدی انگولار کدوما هستن؟
-- Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
-- Modules: یک ماژول زاویهای مجموعهای از بلوکهای ساختمانی پایه زاویهای مانند کامپوننت، دستورالعملها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم میشود و هر قطعه کد به عنوان "ماژول" نامیده میشود که یک وظیفه را انجام میدهد.
-- Templates: این نماهای یک برنامه Angular را نشان می دهد.
-- Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
-- Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
+Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
Modules: یک ماژول زاویهای مجموعهای از بلوکهای ساختمانی پایه زاویهای مانند کامپوننت، دستورالعملها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم میشود و هر قطعه کد به عنوان "ماژول" نامیده میشود که یک وظیفه را انجام میدهد.
Templates: این نماهای یک برنامه Angular را نشان می دهد.
Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
-
+
-
-
directives ها چیا هستن؟
+directives ها چیا هستن؟
directives ها رفتاری را به یک عنصر DOM موجود یا یک نمونه جزء موجود اضافه می کنند.
import { Directive, ElementRef, Input } from '@angular/core';
@@ -1480,10 +1721,10 @@ directives ها چیا هستن
<p myHighlight>Highlight me!</p>
-
+
-
-
کامپوننت ها چیا هستن؟
+کامپوننت ها چیا هستن؟
کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستند که درختی از اجزای Angular را تشکیل می دهند. این مؤلفه ها زیر مجموعه دستورالعمل ها هستند. برخلاف دستورات، کامپوننتها همیشه دارای یک الگو هستند و تنها یک جزء را میتوان به ازای هر عنصر در قالب نمونهسازی کرد.
بیایید یک مثال ساده از کامپوننت Angular را ببینیم
@@ -1501,10 +1742,10 @@ کامپوننت ها
title: string = 'Welcome to Angular world';
}
-
+
-
-
تفاوت های بین directive و کامپوننت چیه؟
+تفاوت های بین directive و کامپوننت چیه؟
در یک یادداشت کوتاه، A component(@component) یک دستورالعمل-با-الگو است.
برخی از تفاوت های عمده به صورت جدولی ذکر شده است
@@ -1537,10 +1778,10 @@ تفاوت های بی
-
+
-
-
template چیه؟
+template چیه؟
یک الگو یک نمای HTML است که در آن می توانید داده ها را با اتصال کنترل ها به ویژگی های یک جزء Angular نمایش دهید. می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید با استفاده از ویژگی template آن را به صورت درون خطی تعریف کنید، یا می توانید قالب را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl@Component decorator به آن در ابرداده کامپوننت پیوند دهید.
Using inline template with template syntax,
@@ -1573,10 +1814,10 @@ template چیه؟
title: string = 'Hello World';
}
-
+
-
-
ماژول چیه؟
+ماژول چیه؟
ماژول ها مرزهای منطقی در برنامه شما هستند و برنامه به ماژول های جداگانه تقسیم می شود تا عملکرد برنامه شما را از هم جدا کند.
بیایید مثالی از app.module.ts ماژول ریشه ای را که با دکوراتور @NgModule به شرح زیر اعلام شده است، بیاوریم.
@@ -1594,36 +1835,36 @@ ماژول چیه؟
دکوراتور NgModule پنج گزینه مهم (در میان همه) دارد
-- گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
-- گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
-- گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
-- گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
-- گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
+گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
-
+
-
-
lifecycle های مربوط به انگولار چیا هستن؟
+lifecycle های مربوط به انگولار چیا هستن؟
برنامه Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک چرخه حیات دارد.
نمایش چرخه حیات در نمایش تصویری به شرح زیر است:
-- ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.
-- ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.
-- ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.
-- ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.
-- ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.
-- ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.
-- ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.
-- ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.
+ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.
ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.
ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.
ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.
ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.
ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.
ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.
ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.
-
+
-
-
data binding چیه؟
+data binding چیه؟
Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM را فراهم می کند و تعریف برنامه های تعاملی را بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان می کند. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شود) که در نحوه جریان داده ها متفاوت است.
-- From the Component to the DOM:
+From the Component to the DOM:
Interpolation: {{ value }}: مقدار یک ویژگی را از جزء اضافه می کند
@@ -1648,13 +1889,13 @@ data binding چیه؟
<input type="email" [(ngModel)]="user.email">
-
+
-
-
What is metadata?
+What is metadata?
متادیتا برای تزئین یک کلاس استفاده می شود تا بتواند رفتار مورد انتظار کلاس را پیکربندی کند. ابرداده توسط دکوراتورها نمایش داده می شود
-- Class decorators, به عنوان مثال، @Component و @NgModule
+Class decorators, به عنوان مثال، @Component و @NgModule
import { NgModule, Component } from '@angular/core';
@@ -1681,7 +1922,7 @@ What is metadata?
}
-- Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
+Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
import { Component, Input } from '@angular/core';
@@ -1697,7 +1938,7 @@ What is metadata?
}
-- Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
+Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
import { Component, HostListener } from '@angular/core';
@@ -1714,7 +1955,7 @@ What is metadata?
}
-- Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
+Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
import { Component, Inject } from '@angular/core';
@@ -1730,10 +1971,10 @@ What is metadata?
}
}
-
+
-
-
Angular CLI چی هست؟
+Angular CLI چی هست؟
Angular CLI (** Command Line Interface**) یک رابط خط فرمان برای ساخت داربست و ساخت برنامه های زاویه ای با استفاده از ماژول های سبک nodejs (commonJs) است.
شما باید با استفاده از دستور زیر npm نصب کنید،
@@ -1748,23 +1989,23 @@ Angular CLI چی هست؟
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: یک سرویس به برنامه خود اضافه کنید
-
Running the Project: ng serve
-
+
-فرق بین constructor و ngOnInit چیه؟
+فرق بین constructor و ngOnInit چیه؟
کلاس های TypeScript دارای یک روش پیش فرض به نام سازنده است که معمولاً برای هدف اولیه استفاده می شود. در حالی که روش ngOnInit مختص Angular است، به ویژه برای تعریف اتصالات Angular استفاده می شود. حتی اگر سازنده ابتدا فراخوانی میشود، ترجیح داده میشود همه اتصالات Angular خود را به متد ngOnInit منتقل کنید.
برای استفاده از ngOnInit، باید رابط OnInit را به صورت زیر پیاده سازی کنید.
@@ -1778,10 +2019,10 @@ فرق بین constructor و ngOnInit &#x
}
}
-
+
-service چیه؟
+service چیه؟
یک سرویس زمانی استفاده می شود که یک عملکرد مشترک باید به ماژول های مختلف ارائه شود. سرویسها به شما اجازه میدهند تا نگرانیهای مربوط به برنامه شما را بیشتر از هم جدا کرده و ماژولاریت بهتری داشته باشید، زیرا به شما امکان میدهد عملکردهای مشترک را از اجزا استخراج کنید.
بیایید یک repoService ایجاد کنیم که می تواند در بین اجزاء مورد استفاده قرار گیرد،
@@ -1802,19 +2043,19 @@ service چیه؟
}
سرویس فوق از سرویس Http به عنوان یک وابستگی استفاده می کند.
-
+
-dependency injection توی انگولار یعنی چی؟
+dependency injection توی انگولار یعنی چی؟
تزریق وابستگی (DI)، یک الگوی طراحی برنامه مهم است که در آن یک کلاس به جای ایجاد وابستگی از منابع خارجی درخواست میکند. Angular با چارچوب تزریق وابستگی خود برای حل وابستگی ها (سرویس ها یا اشیایی که یک کلاس برای انجام عملکرد خود به آن نیاز دارد) ارائه می شود. بنابراین می توانید خدمات خود را در سراسر برنامه به سرویس های دیگر وابسته کنید.
-
+
-ساختار Dependency توی انگولار چطوری چیده میشه؟
-
+ساختار Dependency توی انگولار چطوری چیده میشه؟
+
-هدف از AsyncPipe چیه؟
+هدف از AsyncPipe چیه؟
AsyncPipe مشترک یک قابل مشاهده یا قول می شود و آخرین مقداری را که منتشر کرده است برمی گرداند. هنگامی که یک مقدار جدید منتشر می شود، لوله مؤلفه ای را که باید بررسی شود برای تغییرات علامت گذاری می کند.
بیایید یک زمان قابل مشاهده را در نظر بگیریم که به طور مداوم نما را برای هر 2 ثانیه با زمان فعلی به روز می کند.
@@ -1829,19 +2070,19 @@ هدف از AsyncPipe چیه؟<
);
}
-
+
-بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
+بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید آن را به صورت درون خطی با استفاده از ویژگی template تعریف کنید، یا می توانید الگو را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl در decorator @Component به آن در ابرداده کامپوننت پیوند دهید.
انتخاب بین HTML درون خطی و مجزا یک موضوع سلیقه، شرایط و خط مشی سازمان است. اما معمولاً از قالب درون خطی برای بخش کوچکی از کد و از فایل قالب خارجی برای نمایش های بزرگتر استفاده می کنیم. به طور پیش فرض، Angular CLI کامپوننت ها را با یک فایل الگو تولید می کند. اما می توانید با دستور زیر آن را لغو کنید
ng generate component hero -it
-
+
-هدف از directive ngFor چی هستش؟
+هدف از directive ngFor چی هستش؟
ما از دستورالعمل Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. به عنوان مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،
<li *ngFor="let user of users">
@@ -1849,19 +2090,19 @@ هدف از directive ngFor چی ه&
</li>
متغیر کاربر در دستورالعمل ngFor دو نقل قول a استtemplate input variable
-
+
-هدف از directive ngIf چیه؟
+هدف از directive ngIf چیه؟
گاهی اوقات یک برنامه فقط در شرایط خاص نیاز به نمایش یک نما یا بخشی از یک نما دارد. دستورالعمل Angular ngIf یک عنصر را بر اساس شرایط درستی/نادرستی درج یا حذف می کند. اگر سن کاربر بیش از 18 سال باشد، برای نمایش پیام مثالی می زنیم.
<p *ngIf="user.age > 18">You are not eligible for student pass!</p>
Note: Angular پیام را نشان نمی دهد و پنهان نمی کند. در حال افزودن و حذف عنصر پاراگراف از DOM است. که عملکرد را بهبود می بخشد، به خصوص در پروژه های بزرگتر با اتصال داده های زیادی.
-
+
-اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟
+اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟
Angular مقدار را ناامن تشخیص میدهد و بهطور خودکار آن را پاکسازی میکند، که تگ «اسکریپت» را حذف میکند اما محتوای ایمن مانند محتوای متنی برچسب «اسکریپت» را حفظ میکند. به این ترتیب خطر حملات تزریق اسکریپت را از بین می برد. اگر همچنان از آن استفاده می کنید، نادیده گرفته می شود و یک هشدار در کنسول مرورگر ظاهر می شود.
بیایید مثالی از اتصال ویژگی innerHtml که باعث آسیبپذیری XSS میشود، بیاوریم.
@@ -1870,10 +2111,10 @@ اگه از تگ script تو&#x
htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}
-
+
-منظور از interpolation چیه؟
+منظور از interpolation چیه؟
درون یابی یک نحو خاص است که Angular آن را به ویژگی binding تبدیل می کند. این یک جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده می شود. متن بین پرانتزها اغلب نام یک ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کند.
بیایید یک مثال بزنیم،
@@ -1883,10 +2124,10 @@ منظور از interpolation چ
</h3>
در مثال بالا، Angular خصوصیات عنوان و url را ارزیابی می کند و جاهای خالی را پر می کند، ابتدا عنوان برنامه پررنگ و سپس URL نمایش داده می شود.
-
+
-template expressions ها چیا هستن?
+template expressions ها چیا هستن?
یک عبارت الگو مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کند. Angular عبارت را اجرا می کند و آن را به خاصیت یک هدف الزام آور اختصاص می دهد. هدف ممکن است یک عنصر HTML، یک جزء یا یک دستورالعمل باشد. در ویژگی binding، یک عبارت الگو در نقل قول در سمت راست نماد = مانند [property]="expression ظاهر می شود.
در نحو درون یابی، عبارت الگو با پرانتزهای مجعد دوتایی احاطه شده است. به عنوان مثال، در درون یابی زیر، عبارت الگو {{username}} است،
@@ -1894,16 +2135,16 @@ template expressions ها چیا هس
عبارات جاوا اسکریپت زیر در عبارت قالب ممنوع هستند
-- assignments (=، +=، -=، ...)
-- new
-- زنجیره عبارات با ; یا ،
-- عملگرهای افزایش و کاهش (++ و --)
+assignments (=، +=، -=، ...)
new
زنجیره عبارات با ; یا ،
عملگرهای افزایش و کاهش (++ و --)
-
+
-template statements ها چیا هستن؟
+template statements ها چیا هستن؟
یک عبارت الگو به رویدادی پاسخ می دهد که توسط یک هدف الزام آور مانند یک عنصر، مؤلفه یا دستورالعمل ایجاد شده است. عبارات الگو در نقل قول در سمت راست نماد = مانند (رویداد)="statement" ظاهر می شوند.
Let's take an example of button click event's statement
@@ -1911,22 +2152,22 @@ template statements ها چیا هسb
در عبارت بالا، editProfile یک عبارت الگو است. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند.
-- جدید
-- عملگرهای افزایش و کاهش، ++ و --
-- انتساب عملگر، مانند += و -=
-- عملگرهای بیتی | و &
-- عملگرهای عبارت الگو
+جدید
عملگرهای افزایش و کاهش، ++ و --
انتساب عملگر، مانند += و -=
عملگرهای بیتی | و &
عملگرهای عبارت الگو
-
+
-چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟
+چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟
انواع اتصال را می توان به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شوند. آنها به صورت زیر فهرست شده اند،
-- از منبع به مشاهده
-- از دیدگاه به منبع
-- View-to-source-to-view
+از منبع به مشاهده
از دیدگاه به منبع
View-to-source-to-view
نحو ممکن الزام آور را می توان به صورت جدولی در زیر ارائه کرد:
@@ -1955,10 +2196,10 @@ چطوری دیتاهb
-
+
-pipe ها چیا هستن؟
+pipe ها چیا هستن؟
یک لوله داده ها را به عنوان ورودی می گیرد و آن را به خروجی دلخواه تبدیل می کند. به عنوان مثال، اجازه دهید یک لوله را برای تبدیل ویژگی تولد یک جزء به تاریخ دوستداشتنی با استفاده از لوله date در نظر بگیریم.
import { Component } from '@angular/core';
@@ -1971,10 +2212,10 @@ pipe ها چیا هستن؟
birthday = new Date(1987, 6, 18); // June 18, 1987
}
-
+
-یه منظور از pipe پارامتردار شده چیه؟
+یه منظور از pipe پارامتردار شده چیه؟
یک لوله می تواند هر تعداد پارامتر اختیاری را برای تنظیم دقیق خروجی خود بپذیرد. لوله پارامتر شده را می توان با اعلام نام لوله با علامت دو نقطه ( : ) و سپس مقدار پارامتر ایجاد کرد. اگر لوله چندین پارامتر را می پذیرد، مقادیر را با دو نقطه جدا کنید. بیایید یک مثال تولد با یک قالب خاص (dd/MM/yyyy) در نظر بگیریم:
import { Component } from '@angular/core';
@@ -1988,10 +2229,10 @@ یه منظور از pipe g
}
Note: مقدار پارامتر می تواند هر عبارت الگوی معتبری باشد، مانند یک رشته لفظی یا یک ویژگی جزء.
-
+
-چطوری زنجیره ای از pipe ها میسازی؟
+چطوری زنجیره ای از pipe ها میسازی؟
میتوانید لولهها را در ترکیبهای بالقوه مفید بر حسب نیاز به هم زنجیر کنید. بیایید یک ویژگی تولد را در نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و لوله های بزرگ مانند زیر استفاده می کند
import { Component } from '@angular/core';
@@ -2005,10 +2246,10 @@ چطوری زنجیرd
}
-
+
-منظور از pipe سفارشی شده چیه؟
+منظور از pipe سفارشی شده چیه؟
جدا از لوله های داخلی، می توانید لوله سفارشی خود را با ویژگی های کلیدی زیر بنویسید:
- پیپ کلاسی است که با متادیتای لوله @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد میکنید.
@@ -2027,15 +2268,15 @@ منظور از pipe سفا
}
-- دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد.
+دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد.
template: `{{someInputValue | myCustomPipe: someOtherValue}}`
-
+
-
-
یه مثال از pipe سفارشی شده بزن؟
+یه مثال از pipe سفارشی شده بزن؟
شما می توانید لوله های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنید. به عنوان مثال، اجازه دهید یک لوله سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم،
import { Pipe, PipeTransform } from '@angular/core';
@@ -2054,15 +2295,15 @@ یه مثال از pipe سd
<p>Size: {{288966 | customFileSizePipe: 'GB'}}</p>
`
-
+
-
-
فرق بین pure pipe و impure pipe چیه؟
+فرق بین pure pipe و impure pipe چیه؟
یک لوله خالص تنها زمانی فراخوانی می شود که Angular تغییر در مقدار یا پارامترهای ارسال شده به یک لوله را تشخیص دهد. به عنوان مثال، هرگونه تغییر در یک مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یک مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یک لوله ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی می شود. به عنوان مثال، یک لوله ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده می شود.
-
+
-
-
منظور از botstrapping module چیه؟
+منظور از botstrapping module چیه؟
هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده می شود. معمولاً به عنوان AppModule شناخته می شود. ساختار پیش فرض AppModule تولید شده توسط AngularCLI به شرح زیر است:
/* JavaScript imports */
@@ -2088,15 +2329,15 @@ منظور از botstrapping module h
})
export class AppModule { }
-
+
-
-
observable ها چیا هستن؟
+observable ها چیا هستن؟
مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین در برنامه شما پشتیبانی می کنند. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده می شوند. در این مورد، شما تابعی را برای انتشار مقادیر تعریف می کنید، اما تا زمانی که یک مصرف کننده در آن مشترک نشود، اجرا نمی شود. سپس مصرف کننده مشترک تا زمانی که عملکرد کامل شود یا تا زمانی که اشتراک خود را لغو نکند، اعلان ها را دریافت می کند.
-
+
-
-
HttpClient چیه و مزیت های اون چیا هستن؟
+HttpClient چیه و مزیت های اون چیا هستن؟
اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنند. Angular یک API HTTP کلاینت ساده شده به نام HttpClient را ارائه می دهد که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است.
می توانید در ماژول ریشه خود به صورت زیر وارد کنید،
@@ -2104,19 +2345,19 @@ HttpClient چیه و مزیت ه
مزایای اصلی HttpClient را می توان به شرح زیر ذکر کرد:
-- دارای ویژگی های تست پذیری است
-- اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد
-- رهگیری درخواست و پاسخ
-- از API های Observalbe پشتیبانی می کند
-- از مدیریت خطای ساده پشتیبانی می کند
+دارای ویژگی های تست پذیری است
اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد
رهگیری درخواست و پاسخ
از API های Observalbe پشتیبانی می کند
از مدیریت خطای ساده پشتیبانی می کند
-
+
-
-
چطوری از HttpClient استفاده کنیم؟
+چطوری از HttpClient استفاده کنیم؟
در زیر مراحلی که برای استفاده از HttpClient باید طی شود آورده شده است.
-- HttpClient را به ماژول root وارد کنید:
+HttpClient را به ماژول root وارد کنید:
import { HttpClientModule } from '@angular/common/http';
@@ -2164,10 +2405,10 @@ چطوری از HttpClient اس
}
از آنجایی که روش سرویس فوق یک Observable را برمی گرداند که باید در کامپوننت ثبت شود.
-
+
-
-
چطوری response ها رو به صورت کامل بخونیم؟
+چطوری response ها رو به صورت کامل بخونیم؟
ممکن است بدنه پاسخ دادههای پاسخ کامل را برنگرداند زیرا گاهی اوقات سرورها سرصفحهها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمیگردانند. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنید.
getUserResponse(): Observable<HttpResponse<User>> {
@@ -2176,10 +2417,10 @@ چطوری response ها رو &
}
اکنون متد HttpClient.get () یک Observable از HttpResponse تایپ شده را به جای داده های JSON برمی گرداند.
-
+
-
-
چطوری عمل error handling رو انجام میدی؟
+چطوری عمل error handling رو انجام میدی؟
اگر درخواست در سرور ناموفق باشد یا به دلیل مشکلات شبکه به سرور نرسد، HttpClient به جای پاسخ موفقیت آمیز، یک شی خطا را برمی گرداند. در این مورد، باید با ارسال شیء خطا به عنوان متد ()subscribe، کامپوننت را کنترل کنید.
بیایید ببینیم که چگونه می توان آن را در کامپوننت با یک مثال مدیریت کرد،
@@ -2192,20 +2433,20 @@ چطوری عمل error handling &#x
}
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 چیه؟
RxJS کتابخانه ای برای نوشتن کدهای ناهمزمان و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند.
به عنوان مثال، می توانید مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
-
+
-
-
subscribing چیه؟
+subscribing چیه؟
یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر می کند که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد subscribe() از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلانها ارسال کنید.
بیایید نمونهای از ایجاد و اشتراک در یک مشاهدهپذیر ساده، با مشاهدهگری که پیام دریافتشده را در کنسول ثبت میکند، در نظر بگیریم.
@@ -2228,10 +2469,10 @@ subscribing چیه؟
// => Observer got a next value: 5
// => Observer got a complete notification
-
+
-
-
منطور از observable یه چیه؟
+منطور از observable یه چیه؟
Observable یک شی منحصر به فرد شبیه به Promise است که می تواند به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم.
مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد می شوند.
مثال ساده قابل مشاهده را ببینید،
@@ -2244,10 +2485,10 @@ منطور از observable یه
}, 2000);
});
-
+
-
-
observer جیه؟
+observer جیه؟
Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه می شود. دارای ساختار زیر است،
interface Observer<T> {
@@ -2262,10 +2503,10 @@ observer جیه؟
myObservable.subscribe(myObserver);
Note: اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر اعلان های آن نوع را نادیده می گیرد.
-
+
-
-
تفاوت بین pronise و یه oberservable چیه؟
+تفاوت بین pronise و یه oberservable چیه؟
در زیر لیستی از تفاوت های بین وعده و قابل مشاهده است،
@@ -2293,10 +2534,10 @@ تفاوت بین pronise و &#
-
+
-
-
multicasting چیه؟
+multicasting چیه؟
پخش چندگانه، عمل پخش به فهرستی از چند مشترک در یک اجرا است.
بیایید ویژگی چند ریختگی را نشان دهیم،
@@ -2314,10 +2555,10 @@ multicasting چیه؟
// This is, under the hood, `s
-
+
-
-
جطوری روی observevable ها error handling انجام میدی؟
+جطوری روی observevable ها error handling انجام میدی؟
شما میتوانید با تعیین یک بازخوانی خطا روی ناظر به جای تکیه بر try/catch که در محیط ناهمزمان بیاثر هستند، خطاها را مدیریت کنید.
به عنوان مثال، می توانید خطا را به صورت زیر تعریف کنید.
@@ -2326,10 +2567,10 @@ جطوری روی observevable d
error(err) { console.log('Received an errror: ' + err)}
});
-
+
-
-
مختصر شده متصد subscribe چیه؟
+مختصر شده متصد subscribe چیه؟
متد subscribe () میتواند تعاریف تابع برگشتی را بهصورت خطی بپذیرد، برای کنترلکنندههای بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومانهای موقعیتی شناخته میشود.
به عنوان مثال، می توانید متد subscribe را به صورت زیر تعریف کنید.
@@ -2339,25 +2580,25 @@ مختصر شده مت
() => console.log('Observer got a complete notification')
);
-
+
-
-
توابع مفیدی روی RxJS وجود دارن چیا هستن؟
+توابع مفیدی روی RxJS وجود دارن چیا هستن؟
کتابخانه RxJS همچنین توابع کاربردی زیر را برای ایجاد و کار با مشاهده پذیرها ارائه می دهد.
-- تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده
-- تکرار از طریق مقادیر در یک جریان
-- نگاشت مقادیر به انواع مختلف
-- فیلتر کردن جریان ها
-- آهنگسازی چند جریان
+تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده
تکرار از طریق مقادیر در یک جریان
نگاشت مقادیر به انواع مختلف
فیلتر کردن جریان ها
آهنگسازی چند جریان
-
+
-
-
توابع سازنده observable چیا هستن؟
+توابع سازنده observable چیا هستن؟
RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم می کند. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،
-- از قول یک قابل مشاهده ایجاد کنید
+از قول یک قابل مشاهده ایجاد کنید
import { from } from 'rxjs'; // from function
@@ -2369,7 +2610,7 @@ توابع سازندd
});
-- Create an observable that creates an AJAX request
+Create an observable that creates an AJAX request
import { ajax } from 'rxjs/ajax'; // ajax function
@@ -2378,7 +2619,7 @@ توابع سازندd
apiData.subscribe(res => console.log(res.status, res.response));
-- یک قابل مشاهده از یک شمارنده ایجاد کنید
+یک قابل مشاهده از یک شمارنده ایجاد کنید
import { interval } from 'rxjs'; // interval function
@@ -2388,7 +2629,7 @@ توابع سازندd
));
-- یک قابل مشاهده از یک رویداد ایجاد کنید
+یک قابل مشاهده از یک رویداد ایجاد کنید
import { fromEvent } from 'rxjs';
@@ -2398,20 +2639,20 @@ توابع سازندd
console.log(`Coordnitaes of mouse pointer: ${e.clientX} * ${e.clientY}`);
});
-
+
-
-
چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟
+چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟
به طور معمول یک شی ناظر می تواند هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کند. اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر فقط اعلان های آن نوع را نادیده می گیرد.
-
+
-
-
element های انگولار چیا هستن؟
+element های انگولار چیا هستن؟
عناصر زاویهای، اجزای زاویهای هستند که بهعنوان عناصر سفارشی (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بستهبندی شدهاند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد می کند، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر زاویه ای" ارائه می دهد.
-
+
-
-
پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
+پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی می شوند، پشتیبانی مرورگر از عناصر زاویه ای مانند پشتیبانی از عناصر سفارشی است.
این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی میشود و برای مرورگرهای دیگر در انتظار است.
@@ -2444,57 +2685,57 @@ پشتیبانی هاl
-
+
-
-
element های کاستوم شده چیا هستن؟
+element های کاستوم شده چیا هستن؟
عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل می شود، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ می کند، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت می کند. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی میشود و در مرورگرهای دیگر از طریق polyfills در دسترس است.
-
+
-
-
bootstrap کردن element های کاستوم شده لازمه؟
+bootstrap کردن element های کاستوم شده لازمه؟
خیر، عناصر سفارشی هنگامی که به DOM اضافه می شوند به طور خودکار راه اندازی می شوند (یا شروع می شوند) و وقتی از DOM حذف می شوند به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه می شود، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار می کند و به دانش خاصی از Angular نیاز ندارد.
-
+
-
-
ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟
+ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟
در زیر مراحل به ترتیب در مورد عملکرد عناصر سفارشی آمده است،
-- App registers custom element with browser: از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که میتواند در مرورگر به عنوان یک عنصر سفارشی ثبت شود.
-- App adds custom element to DOM: عنصر سفارشی را درست مانند یک عنصر HTML داخلی مستقیماً به DOM اضافه کنید.
-- Browser instantiate component based class: مرورگر یک نمونه از کلاس ثبت شده ایجاد می کند و آن را به DOM اضافه می کند.
+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 ارائه می شود.
نمودار جریان عملکرد عناصر سفارشی به شرح زیر است:
-
+
-
-
چطوری کامپوننت عا رو به custom element تبدیل کنیم؟
+چطوری کامپوننت عا رو به custom element تبدیل کنیم؟
تبدیل اجزا به عناصر سفارشی شامل دو مرحله اصلی است،
-- کلاس عنصر سفارشی بسازید: Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیادهسازی میکند و یک کلاس سازنده ایجاد میکند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده میشود.
-- ** ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده می کند. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو می شود، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده می کند.
+کلاس عنصر سفارشی بسازید: Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیادهسازی میکند و یک کلاس سازنده ایجاد میکند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده میشود.
** ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده می کند. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو می شود، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده می کند.
The detailed structure would be as follows,
-
+
-
-
قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
+قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت می شوند. اجازه دهید آنها را در دو مرحله توصیف کنیم،
-- CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه می کند. به عنوان مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
-- خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال می شوند که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
+CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه می کند. به عنوان مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال می شوند که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
-
+
-
-
چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟
+چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟
میتوانید از انواع «NgElement» و «WithProperties» که از @angular/elements صادر شدهاند استفاده کنید.
بیایید ببینیم که چگونه می توان آن را با مقایسه با کامپوننت Angular اعمال کرد.
-- ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود.
+ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود.
@Component(...)
@@ -2503,7 +2744,7 @@ چطوری تایپ ه
}
-- پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
+پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>;
@@ -2511,33 +2752,33 @@ چطوری تایپ ه
container.message = true; // <-- ERROR: TypeScript knows this should be a string.
container.greet = 'News'; // <-- ERROR: TypeScript knows there is no `greet` property on `container`.
-
+
-
-
کامپوننت های داینامیک چیا هستن؟
+کامپوننت های داینامیک چیا هستن؟
مؤلفههای پویا مؤلفههایی هستند که مکان مؤلفهها در برنامه در زمان ساخت تعریف نشده است، یعنی در هیچ قالب زاویهای استفاده نمیشوند. اما کامپوننت نمونه سازی می شود و در زمان اجرا در برنامه قرار می گیرد.
-
+
-
-
انواع مختلف directive ها کدوما هستن؟
+انواع مختلف directive ها کدوما هستن؟
عمدتاً سه نوع دستورالعمل وجود دارد:
-- ** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند.
-- دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.
-- دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.
+** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند.
دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.
دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.
-
+
-
-
چطوری با استفاده از CLI یه directive درست میکنی؟
+چطوری با استفاده از CLI یه directive درست میکنی؟
میتوانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (src/app/components/directivename.directive.ts)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد می کند و فایل کلاس دستورالعمل را در ماژول ریشه اعلام می کند.
-
+
-
-
یه مثال از استفاده directive با اتریبیوت بزن؟
+یه مثال از استفاده directive با اتریبیوت بزن؟
بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می توانید دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:
-- کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.
+کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.
import { Directive, ElementRef } from '@angular/core';
@@ -2552,51 +2793,51 @@ یه مثال از اس&#x
}
-- دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال،
)
+دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال،
)
<p appHighlight>Highlight me!</p>
-- برای مشاهده رفتار برجسته در عنصر پاراگراف، برنامه را اجرا کنید
+برای مشاهده رفتار برجسته در عنصر پاراگراف، برنامه را اجرا کنید
ng serve
-
+
-
-
Angular Router چیه؟
+Angular Router چیه؟
روتر زاویه ای مکانیزمی است که در آن هنگام انجام وظایف برنامه توسط کاربران، ناوبری از یک نمای به نمای بعدی انجام می شود. مفاهیم یا مدل ناوبری برنامه مرورگر را به عاریت گرفته است.
-
+
-
-
هدف از base href tag چیه؟
+هدف از base href tag چیه؟
برنامه مسیریابی باید عنصر
<base href="/">
-
+
-
-
import های مربوط به router چیه؟
+import های مربوط به router چیه؟
Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخانه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. به عنوان مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم.
import { RouterModule, Routes } from '@angular/router';
-
+
-
-
router outlet چیه؟
+router outlet چیه؟
RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل می کند که نقطه ای را در قالب مشخص می کند که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده می شود،
<router-outlet></router-outlet>
<!-- Routed components go here -->
-
+
-
-
router link ها چیا هستن؟
+router link ها چیا هستن؟
RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می توانید مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.
<h1>Angular Router</h1>
@@ -2606,10 +2847,10 @@ router link ها چیا هستن
</nav>
<router-outlet></router-outlet>
-
+
-
-
منظور از منظور از router state چیه؟
+منظور از منظور از router state چیه؟
RouterLinkActive دستورالعملی است که کلاسهای css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر میدهد. به عنوان مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه می کند و زمانی که پیوند غیر فعال است حذف می کند. به عنوان مثال، می توانید آنها را مانند زیر به RouterLinks اضافه کنید.
<h1>Angular Router</h1>
@@ -2619,10 +2860,10 @@ منظور از منظ
</nav>
<router-outlet></router-outlet>
-
+
-
-
What is router state?
+What is router state?
RouterState درختی از مسیرهای فعال شده است. هر گره در این درخت از بخش های URL "مصرف شده"، پارامترهای استخراج شده و داده های حل شده می داند. با استفاده از «سرویس روتر» و ویژگی «routerState» میتوانید از هر کجای برنامه به RouterState فعلی دسترسی داشته باشید.
@Component({templateUrl:'template.html'})
@@ -2636,7 +2877,7 @@ What is router state?
}
}
-
+
event های مربوط به router چیا هستن؟events?
@@ -2665,7 +2906,7 @@ What is router state?
-
-
منظور از activated route چیه؟
+منظور از activated route چیه؟
ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق می شود. در مثال زیر می توانید به مسیر و پارامترهای مسیر دسترسی داشته باشید.
@Component({...})
@@ -2678,10 +2919,10 @@ منظور از activated route چ&#
}
}
-
+
-
-
چطوری router های پروژه ات رو تعریف میکنی؟
+چطوری router های پروژه ات رو تعریف میکنی؟
یک روتر باید با لیستی از تعاریف مسیر پیکربندی شود. شما روتر را با مسیرها از طریق روش «RouterModule.forRoot()» پیکربندی میکنید و نتیجه را به آرایه «واردات» AppModule اضافه میکنید.
const appRoutes: Routes = [
@@ -2711,103 +2952,103 @@ چطوری router های پ
})
export class AppModule { }
-
+
-
-
هدف از Wildcard route چیه؟
+هدف از Wildcard route چیه؟
اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث می شود روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می توانید از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.
به عنوان مثال، شما می توانید PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید
{ path: '**', component: PageNotFoundComponent }
-
+
-
-
ما همیشه به routing module نیاز داریم؟
+ما همیشه به routing module نیاز داریم؟
نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، میتوانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه می شود که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.
-
+
-
-
Angular Universal چیه؟
+Angular Universal چیه؟
Angular Universal یک ماژول رندر سمت سرور برای برنامه های Angular در سناریوهای مختلف است. این یک پروژه جامعه محور است و در بسته @angular/platform-server موجود است. اخیرا Angular Universal با Angular CLI ادغام شده است.
-
+
-
-
انگولار به چن روش کامپایل میشه؟
+انگولار به چن روش کامپایل میشه؟
Angular دو راه برای کامپایل برنامه شما ارائه می دهد.
-- به موقع (JIT)
-- پیش از زمان (AOT)
+به موقع (JIT)
پیش از زمان (AOT)
-
+
-
-
What is JIT?
+What is JIT?
Just-in-Time (JIT) نوعی کامپایل است که برنامه شما را در زمان اجرا در مرورگر کامپایل می کند. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت محلی) را اجرا می کنید، کامپایل JIT پیش فرض است. به عنوان مثال، دستورات زیر برای کامپایل JIT استفاده می شود،
ng build
ng serve
-
+
-
-
What is AOT?
+What is AOT?
Ahead-of-Time (AOT) نوعی کامپایل است که برنامه شما را در زمان ساخت کامپایل می کند. برای کامپایل AOT، گزینه «--aot» را با دستور ng build یا ng serve به شرح زیر اضافه کنید.
ng build --aot
ng serve --aot
نکته: دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل می شود.
-
+
-
-
چرا ما به پروسه کامپایل نیاز داریم؟
+چرا ما به پروسه کامپایل نیاز داریم؟
کامپوننت ها و قالب های Angular را نمی توان مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتوانند در مرورگر اجرا شوند نیاز به یک فرآیند کامپایل دارند. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت کارآمد تبدیل میشوند.
-
+
-
-
مزایای استفاده از AOT چیه؟
+مزایای استفاده از AOT چیه؟
-- ** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.
-- ** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.
-- اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.
-- تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.
-- امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.
+** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.
** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.
اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.
تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.
امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.
-
+
-
-
روش های کنترل کامپایل شدن با AOT چیا هستن؟
+روش های کنترل کامپایل شدن با AOT چیا هستن؟
شما می توانید کامپایل برنامه خود را به دو روش کنترل کنید،
-- با ارائه گزینه های کامپایلر قالب در فایل
tsconfig.json
-- با پیکربندی فراداده Angular با دکوراتورها
+با ارائه گزینه های کامپایلر قالب در فایل tsconfig.json
با پیکربندی فراداده Angular با دکوراتورها
-
+
-
-
محدودیت هایی که روی metadata وجود داره چیا هستن؟
+محدودیت هایی که روی metadata وجود داره چیا هستن؟
در Angular، شما باید ابرداده را با محدودیت های کلی زیر بنویسید:
-- نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید
-- کامپایلر فقط می تواند به نمادهایی که صادر شده اند ارجاع دهد
-- فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید
-- اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.
+نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید
کامپایلر فقط می تواند به نمادهایی که صادر شده اند ارجاع دهد
فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید
اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.
-
+
-
-
فاز های کامپایل با استفاده از AOT چیا هستن؟
+فاز های کامپایل با استفاده از AOT چیا هستن؟
کامپایلر AOT در سه فاز کار می کند،
-- تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند
-- تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.
-- ** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.
+تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند
تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.
** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.
-
+
-
-
ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
+ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
خیر، توابع پیکان یا توابع لامبدا را نمی توان برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. به عنوان مثال، قطعه زیر نامعتبر است:
@Component({
@@ -2830,20 +3071,20 @@ ما میتونیم ا
اگر همچنان از تابع arrow استفاده می کنید، یک گره خطا به جای تابع ایجاد می کند. وقتی کامپایلر بعداً این گره را تفسیر میکند، یک خطا گزارش میکند تا تابع فلش را به یک تابع صادر شده تبدیل کند.
نکته: از Angular5 به بعد، کامپایلر به طور خودکار این بازنویسی را در حین انتشار فایل js. انجام می دهد.
-
+
-
-
هدف از استفاده از فایل های metadata json چیه؟
+هدف از استفاده از فایل های metadata json چیه؟
فایل metadata.json را میتوان بهعنوان نموداری از ساختار کلی فرادادههای تزئینگر، که بهعنوان یک درخت نحو انتزاعی (AST) نشان داده میشود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمعآورنده AOT ابردادههای ثبتشده در تزئینات Angular را اسکن میکند و اطلاعات فراداده را در فایلهای .metadata.json، یک عدد برای هر فایل .d.ts، خروجی میدهد.
-
+
-
-
توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
+توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کند. اگر عبارتی از نحو پشتیبانی نشده استفاده کند، گردآورنده یک گره خطا در فایل .metadata.json می نویسد. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به آن تکه متادیتا نیاز داشته باشد، خطایی را گزارش میکند.
-
+
-
-
folding چیه؟
+folding چیه؟
کامپایلر فقط می تواند ارجاعات به نمادهای صادر شده در ابرداده را حل کند. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا می شوند. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت را در حین جمع آوری ارزیابی می کند و نتیجه را به جای عبارت اصلی در .metadata.json ثبت می کند.
به عنوان مثال، کامپایلر نمی تواند مرجع انتخابگر را ارجاع دهد زیرا صادر نشده است
@@ -2859,10 +3100,10 @@ folding چیه؟
})
به یاد داشته باشید که کامپایلر نمی تواند همه چیز را تا کند. به عنوان مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
-
+
-
-
macros چیه؟
+macros چیه؟
کامپایلر AOT از ماکروها به شکل توابع یا متدهای ایستا پشتیبانی می کند که عبارتی را در یک عبارت بازگشتی واحد برمی گرداند.
به عنوان مثال، یک تابع ماکرو زیر را در نظر بگیرید،
@@ -2884,10 +3125,10 @@ macros چیه؟
})
export class TypicalModule {}
-
+
-
-
چن تا مثال از ارور های مربوط به metatdata بزن؟
+چن تا مثال از ارور های مربوط به metatdata بزن؟
- فرم عبارت پشتیبانی نمی شود: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های زاویه ای استفاده می شود می توانند این خطا را ایجاد کنند.
بیایید برخی از این نمونه ها را ببینیم،
@@ -2921,7 +3162,7 @@ چن تا مثال از &#
let username = 'John'; // initialized
-- ** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمیتوانید useFactory ارائهدهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
+** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمیتوانید useFactory ارائهدهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
providers: [
@@ -2940,7 +3181,7 @@ چن تا مثال از &#
]
-- متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
+متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
import { user } from './user';
@@ -2962,15 +3203,15 @@ چن تا مثال از &#
{provide: Age, useValue: user.age},
]
-
+
-
-
منظور از metadata rewriting چیه؟
+منظور از metadata rewriting چیه؟
بازنویسی متادیتا فرآیندی است که در آن کامپایلر عبارتی را که فیلدهایی مانند useClass، useValue، useFactory و داده را مقداردهی اولیه می کند، به یک متغیر صادر شده تبدیل می کند که جایگزین عبارت می شود. به یاد داشته باشید که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می دهد اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی دهد.
-
+
-
-
How do you provide configuration inheritance?
+توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.
{
@@ -2986,10 +3227,10 @@ How do you provide configuration inheritance?
}
}
-
+
-
-
How do you specify angular template compiler options?
+چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
گزینه های کامپایلر قالب زاویه ای به عنوان اعضای شی angularCompilerOptions در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.
{
@@ -3004,10 +3245,10 @@ How do you specify angular template compiler options?
}
}
-
+
-
-
How do you enable binding expression validation?
+چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
شما می توانید صریحاً با افزودن گزینه کامپایلر fullTemplateTypeCheck در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.
برای مثال، جزء زیر را در نظر بگیرید:
@@ -3023,10 +3264,10 @@ How do you enable binding expression validation?
my.component.ts.MyComponent.html(1,1): : Property 'contacts' does not exist on type 'User'. Did you mean 'contact'?
-
+
-
-
What is the purpose of any type cast function?
+هدف از any type توی cast function چیه؟
می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
template: '{{ $any(user).contacts.email }}'
@@ -3035,10 +3276,10 @@ What is the purpose of any type cast function?
template: '{{ $any(this).contacts.email }}'
-
+
-
-
What is Non null type assertion operator?
+اپراتور non null assertion چیه؟
برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
@Component({
@@ -3055,10 +3296,10 @@ What is Non null type assertion operator?
}
}
-
+
-
-
What is type narrowing?
+منظور از type narrowing چیه؟
عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
@Component({
@@ -3069,47 +3310,47 @@ What is type narrowing?
user?: User;
}
-
+
-
-
How do you describe various dependencies in angular application?
+چطوری dependency های مختلف توی انگولار تعریف میکنی؟
بخش وابستگی های package.json با در یک برنامه زاویه ای را می توان به صورت زیر تقسیم کرد:
-- ** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.
-- بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.
-- ** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.
+** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.
بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.
** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.
-
+
-
-
What is zone?
+zone توی انگولار چیه؟
Zone یک زمینه اجرایی است که در تمام وظایف ناهمگام باقی می ماند. هنگامی که عملیات جاوا اسکریپت بومی رویدادها را افزایش می دهد، Angular برای اجرای فرآیندهای تشخیص تغییر Angular به zone.js متکی است.
-
+
-
-
What is the purpose of common module?
+هدف از ماژول مشترک توی انگولار چیه؟
خدمات، لولهها و دستورالعملهای مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.
-
+
-
-
What is codelyzer?
+codelyzer چیه؟
Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.
ng new codelyzer
ng lint
-
+
-
-
What is angular animation?
+angular animation چیه؟
سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگیها شامل موقعیتها، اندازهها، تبدیلها، رنگها، حاشیهها و غیره است. ماژولهای Angular برای انیمیشنها @angular/animations و @angular/platform-browser هستند و این وابستگیها به طور خودکار به پروژه شما اضافه میشوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
-
+
-
-
What are the steps to use animation module?
+مراحل استفاده از ماژول های animation چیه؟
برای پیاده سازی انیمیشن در پروژه زاویه ای خود باید مراحل زیر را دنبال کنید.
-- **Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیتهای انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).
+**Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیتهای انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).
import { NgModule } from '@angular/core';
@@ -3127,7 +3368,7 @@ What are the steps to use animation module?
export class AppModule { }
-- Importing animation functions into component files: توابع انیمیشن مورد نیاز را از @angular/animations در فایلهای مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts).
+Importing animation functions into component files: توابع انیمیشن مورد نیاز را از @angular/animations در فایلهای مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts).
import {
@@ -3140,7 +3381,7 @@ What are the steps to use animation module?
} from '@angular/animations';
-- Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
+Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
@Component({
@@ -3152,10 +3393,10 @@ What are the steps to use animation module?
]
})
-
+
-
-
What is State function?
+تابع state چیه؟
تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
به عنوان مثال، می توانید یک تابع حالت باز بنویسید
@@ -3165,10 +3406,10 @@ What is State function?
backgroundColor: 'blue'
})),
-
+
-
-
What is Style function?
+هدف از تابع style چیه؟
تابع style برای تعریف مجموعهای از سبکها برای مرتبط کردن با یک نام وضعیت استفاده میشود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
state('close', style({
@@ -3178,10 +3419,10 @@ What is Style function?
})),
نکته: The style attributes must be in camelCase.
-
+
-
-
What is the purpose of animate function?
+هدف از تابع animate چیه؟
انیمیشنهای Angular روشی قدرتمند برای پیادهسازی انیمیشنهای پیچیده و قانعکننده برای اپلیکیشن وب تک صفحهای Angular شما هستند.
import { Component, OnInit, Input } from '@angular/core';
@@ -3222,10 +3463,10 @@ What is the purpose of animate function?
}
}
-
+
-
-
What is transition function?
+تابع transition چیه؟
تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.
بیایید یک مثال انتقال حالت از باز به بسته با انتقال نیم ثانیه بین حالت ها را در نظر بگیریم.
@@ -3233,10 +3474,10 @@ What is transition function?
animate('500ms')
]),
-
+
-
-
How to inject the dynamic script in angular?
+چطوری اسکریپت های dynamic رو توی کدمون وارد کنیم؟
با استفاده از DomSanitizer میتوانیم Html، Style، Script، Url پویا را تزریق کنیم.
</span>
import { Component, OnInit } from '@angular/core';
@@ -3252,26 +3493,26 @@ How to inject the dynamic script in angular?
htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
}
-
+
-
-
What is a service worker and its role in Angular?
+service worker چیه و نقشش توی انگولار چیه؟
Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
-
+
-
-
What are the design goals of service workers?
+اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
-- یک برنامه را مانند نصب یک برنامه بومی کش می کند
-- یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
-- هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند
-- هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود
-- Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.
+یک برنامه را مانند نصب یک برنامه بومی کش می کند
یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند
هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود
Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.
-
+
-
-
What are the differences between AngularJS and Angular with respect to dependency injection?
+تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟
تزریق وابستگی یک جزء مشترک در AngularJS و Angular است، اما تفاوتهای کلیدی بین این دو فریمورک در نحوه عملکرد واقعی آن وجود دارد.
@@ -3291,19 +3532,19 @@ What are the differences between AngularJS and Angular with respect to depen
-
+
-
-
What is Angular Ivy?
+What is Angular Ivy?
Angular Ivy یک موتور رندر جدید برای Angular است. میتوانید نسخه پیشنمایش Ivy را از نسخه 8 Angular انتخاب کنید.
-- با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید
+با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید
ng new ivy-demo-app --enable-ivy
-- میتوانید با افزودن گزینه «enableIvy» در «angularCompilerOptions» در «tsconfig.app.json» پروژه خود، آن را به یک پروژه موجود اضافه کنید.
+میتوانید با افزودن گزینه «enableIvy» در «angularCompilerOptions» در «tsconfig.app.json» پروژه خود، آن را به یک پروژه موجود اضافه کنید.
{
@@ -3313,21 +3554,21 @@ What is Angular Ivy?
}
}
-
+
-
-
What are the features included in ivy preview?
+What are the features included in ivy preview?
می توانید با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.
-- کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است
-- زمان بازسازی سریعتر
-- بهبود اندازه محموله
-- بررسی نوع قالب بهبود یافته است
+کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است
زمان بازسازی سریعتر
بهبود اندازه محموله
بررسی نوع قالب بهبود یافته است
-
+
-
-
Can I use AOT compilation with Ivy?
+Can I use AOT compilation with Ivy?
بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کند.
{
@@ -3345,15 +3586,15 @@ Can I use AOT compilation with Ivy?
}
}
-
+
-
-
What is Angular Language Service?
+What is Angular Language Service?
سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالبهای Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیهنویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا می کند و سپس تمام خدمات زبان را ارائه می دهد.
-
+
-
-
How do you install angular language service in the project?
+How do you install angular language service in the project?
با دستور npm زیر می توانید Angular Language Service را در پروژه خود نصب کنید.
npm install --save-dev @angular/language-service
@@ -3365,15 +3606,15 @@ How do you install angular language service in the project?
]
نکته: خدمات تکمیل و تشخیص فقط برای فایل های .ts کار می کند. برای پشتیبانی از فایل های HTML باید از افزونه های سفارشی استفاده کنید.
-
+
-
-
Is there any editor support for Angular Language Service?
+Is there any editor support for Angular Language Service?
بله، سرویس زبان Angular در حال حاضر برای Visual Studio Code و WebStorm IDE در دسترس است. شما باید سرویس زبان زاویه ای را با استفاده از افزونه و devDependency نصب کنید. در ویرایشگر sublime، باید تایپ اسکریپتی را نصب کنید که دارای مدل پلاگین سرویس زبان است.
-
+
-
-
Explain the features provided by Angular Language Service?
+Explain the features provided by Angular Language Service?
اساساً 3 ویژگی اصلی توسط Angular Language Service ارائه شده است.
-
@@ -3389,14 +3630,14 @@
Explain the features provided by Angular Language Service?
-
+
-
-
How do you add web workers in your application?
+How do you add web workers in your application?
شما می توانید وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، میتوانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد میکند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد
-- پروژه خود را برای استفاده از Web Workers پیکربندی کنید
-- app.worker.ts را برای دریافت پیام اضافه می کند
+پروژه خود را برای استفاده از Web Workers پیکربندی کنید
app.worker.ts را برای دریافت پیام اضافه می کند
addEventListener('message', ({ data }) => {
@@ -3405,7 +3646,7 @@ How do you add web workers in your application?
});
-- فایل کامپوننت «app.component.ts» با فایل web worker بهروزرسانی شد
+فایل کامپوننت «app.component.ts» با فایل web worker بهروزرسانی شد
if (typeof Worker !== 'undefined') {
@@ -3420,74 +3661,74 @@ How do you add web workers in your application?
}
نکته: ممکن است نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
-
+
-
-
What are the limitations with web workers?
+What are the limitations with web workers?
هنگام استفاده از Web Workers در پروژه های Angular باید دو نکته مهم را به خاطر بسپارید:
1.برخی از محیطها یا پلتفرمها (مانند @angular/platform-server) که در رندر سمت سرور استفاده میشوند، از Web Workers پشتیبانی نمیکنند. در این مورد باید مکانیزم بازگشتی برای انجام محاسبات برای کار در این محیط ها فراهم کنید.
2. اجرای Angular در وبکار با استفاده از «@angular/platform-webworker» هنوز در Angular CLI پشتیبانی نمیشود.
-
+
-
-
What is Angular CLI Builder?
+What is Angular CLI Builder?
در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، میتوانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدام ابزار شخص ثالث توسط یک دستور موجود استفاده میشود، فراهم کنید.
-
+
-
-
What is a builder?
+What is a builder?
یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده می کند. کد سازنده در یک بسته npm تعریف شده است. به عنوان مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا می کند و KarmaBuilder سرور Karma را راه اندازی می کند و یک بسته وب را برای آزمایش های واحد اجرا می کند.
-
+
-
-
How do you invoke a builder?
+How do you invoke a builder?
دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده می شود. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیشفرض برای سازندههای داخلی است.
-
+
-
-
How do you create app shell in Angular?
+How do you create app shell in Angular?
پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر می شود مفید است زیرا مرورگر می تواند HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می توانید با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد می کند، به این هدف برسید.
ng generate appShell [options] (or)
ng g appShell [options]
-
+
-
-
What are the case types in Angular?
+What are the case types in Angular?
Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده می کند. Angular لیستی از انواع موارد زیر را دنبال می کند.
-- camelCase : نمادها، ویژگیها، روشها، نام لولهها، انتخابکنندههای دستورالعمل غیرمولفه، ثابتها از حروف کوچک در حرف اول آیتم استفاده میکنند. به عنوان مثال، "selectedUser"
-- UpperCamelCase (or PascalCase): نام کلاسها، از جمله کلاسهایی که اجزا، رابطها، NgModules، دستورالعملها و لولهها را تعریف میکنند، از حروف بزرگ در حرف اول آیتم استفاده میکنند.
-- dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list".
-- UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS".
+camelCase : نمادها، ویژگیها، روشها، نام لولهها، انتخابکنندههای دستورالعمل غیرمولفه، ثابتها از حروف کوچک در حرف اول آیتم استفاده میکنند. به عنوان مثال، "selectedUser"
UpperCamelCase (or PascalCase): نام کلاسها، از جمله کلاسهایی که اجزا، رابطها، NgModules، دستورالعملها و لولهها را تعریف میکنند، از حروف بزرگ در حرف اول آیتم استفاده میکنند.
dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list".
UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS".
-
+
-
-
What are the class decorators in Angular?
+What are the class decorators in Angular?
دکوراتور کلاس، دکوراتوری است که بلافاصله قبل از تعریف کلاس ظاهر می شود، که کلاس را از نوع معین اعلام می کند و ابرداده مناسب برای نوع را فراهم می کند.
لیست زیر از دکوراتورها در زیر کلاس دکوراتورها آمده است:
-- @Component()
-- @Directive()
-- @Pipe()
-- @Injectable()
-- @NgModule()
+@Component()
@Directive()
@Pipe()
@Injectable()
@NgModule()
-
+
-
-
What are class field decorators?
+What are class field decorators?
دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام می شوند که نوع آن فیلد را مشخص می کند. برخی از نمونه ها عبارتند از: @input و @output،
@Input() myProperty;
@Output() myEvent = new EventEmitter();
-
+
-
-
What is declarable in Angular?
+What is declarable in Angular?
Declarable یک نوع کلاس است که می توانید آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود
declarations: [
@@ -3496,21 +3737,21 @@ What is declarable in Angular?
YourDirective
],
-
+
-
-
What are the restrictions on declarable classes?
+What are the restrictions on declarable classes?
کلاس های زیر نباید تعریف شوند،
-- کلاسی که قبلاً در NgModule دیگری اعلام شده است
-- کلاس های Ngmodule
-- کلاس های خدماتی
-- کلاس های کمکی
+کلاسی که قبلاً در NgModule دیگری اعلام شده است
کلاس های Ngmodule
کلاس های خدماتی
کلاس های کمکی
-
+
-
-
What is a DI token?
+What is a DI token?
توکن DI یک توکن جستجوی مرتبط با ارائه دهنده وابستگی در سیستم تزریق وابستگی است. انژکتور یک نقشه ارائه دهنده توکن داخلی دارد که در صورت درخواست وابستگی به آن ارجاع می دهد و رمز DI کلید نقشه است. بیایید استفاده از DI Token را مثال بزنیم،
const BASE_URL = new InjectionToken<string>('BaseUrl');
@@ -3518,21 +3759,21 @@ What is a DI token?
Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]});
const url = injector.get(BASE_URL);
-
+
-
-
What is Angular DSL?
+What is Angular DSL?
یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه میدهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل می کند که مرورگر بتواند آن را درک کند. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.
اساساً شما 3 نحو اصلی را در Angular DSL خواهید دید.
-(): برای رویدادهای خروجی و DOM استفاده می شود.[]: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.*: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.(): برای رویدادهای خروجی و DOM استفاده می شود.
[]: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.
*: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.
-
+
-
-
what is an rxjs subject in Angular
+what is an rxjs subject in Angular
یک موضوع RxJS نوع خاصی از Observable است که اجازه میدهد مقادیر برای بسیاری از Observerها چندپخشی شوند. در حالی که مشاهده پذیرهای ساده یکپارچه هستند (هر مشاهده کننده مشترک دارای اجرای مستقل از Observable است)، سوژه ها چندپخشی هستند.
یک موضوع مانند یک مشاهده پذیر است، اما می تواند برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.
@@ -3550,10 +3791,10 @@ what is an rxjs subject in Angular
subject.next(1);
subject.next(2);
-
+
-
-
What is Bazel tool?
+What is Bazel tool?
Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تواند وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید.
@@ -3563,7 +3804,7 @@ What is Bazel tool?
-
-
What are the advantages of Bazel tool?
+What are the advantages of Bazel tool?
-
این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
@@ -3579,51 +3820,51 @@ What are the advantages of Bazel tool?
-
-
How do you use Bazel with Angular CLI?
+How do you use Bazel with Angular CLI?
بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
-- Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید
+Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید
ng add @angular/bazel
-- Use in a new application: بسته را نصب کنید و برنامه را با گزینه مجموعه ایجاد کنید
+Use in a new application: بسته را نصب کنید و برنامه را با گزینه مجموعه ایجاد کنید
npm install -g @angular/bazel
ng new --collection=@angular/bazel
وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده می شود و نتایج را در پوشه dist/bin خروجی می دهد.
-
+
-
-
How do you run Bazel directly?
+How do you run Bazel directly?
گاهی اوقات ممکن است بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می توانید با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
bazel build [targets] // Compile the default output artifacts of the given targets.
bazel test [targets] // Run the tests with *_test targets found in the pattern.
bazel run [target]: Compile the program represented by target and then run it.
-
+
-
-
What is platform in Angular?
+What is platform in Angular?
پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تواند یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بستههای angular/platform-*@ ارائه میشود و این بستهها به برنامههایی که از «@angular/core» و «@angular/common» استفاده میکنند اجازه میدهند در محیطهای مختلف اجرا شوند.
به عنوان مثال، Angular می تواند به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،
-- در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
-- هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
+در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
-
+
-
-
What happens if I import the same module twice?
+What happens if I import the same module twice?
اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
-
+
-
-
How do you select an element with in a component template?
+How do you select an element with in a component template?
برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل @ViewChild استفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،
<input #uname>
@@ -3636,10 +3877,10 @@ How do you select an element with in a component template?
console.log(this.input.nativeElement.value);
}
-
+
-
-
How do you detect route change in Angular?
+How do you detect route change in Angular?
در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
this.router.events.subscribe((event: Event) => {})
@@ -3674,10 +3915,10 @@ How do you detect route change in Angular?
}
}
-
+
-
-
How do you pass headers for HTTP client?
+How do you pass headers for HTTP client?
میتوانید مستقیماً نقشه شی را برای مشتری http ارسال کنید یا کلاس HttpHeaders را برای تهیه هدرها ایجاد کنید.
constructor(private _http: HttpClient) {}
@@ -3696,20 +3937,20 @@ How do you pass headers for HTTP client?
return this._http.get<any[]>('someUrl', { headers: headers, params: params })
-
+
-
-
What is the purpose of differential loading in CLI?
+What is the purpose of differential loading in CLI?
از انتشار Angular8 به بعد، برنامهها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته میشوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
-- اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره میبرد، پلیفیلهای کمتری ارسال میکند و منجر به اندازه بستهای کوچکتر میشود.
-- ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلیفیلهای لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
+اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره میبرد، پلیفیلهای کمتری ارسال میکند و منجر به اندازه بستهای کوچکتر میشود.
ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلیفیلهای لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
-
+
-
-
Is Angular supports dynamic imports?
+Is Angular supports dynamic imports?
بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، میتوانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را میپذیرد و در طول زمان ساخت، خطا میدهد.
@@ -3719,10 +3960,10 @@ Is Angular supports dynamic imports?
{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};
-
+
-
-
What is lazy loading?
+What is lazy loading?
Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
const routes: Routes = [
@@ -3741,10 +3982,10 @@ What is lazy loading?
}
];
-
+
-
-
What are workspace APIs?
+What are workspace APIs?
نسخه Angular 8.0 API های Workspace را معرفی می کند تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کند. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده میشود. میتوانید گزینه بهینهسازی را برای build target به صورت زیر فعال یا اضافه کنید.
import { NodeJsSyncHost } from '@angular-devkit/core/node';
@@ -3771,18 +4012,18 @@ What are workspace APIs?
addBuildTargetOption();
-
+
-
-
How do you upgrade angular version?
+How do you upgrade angular version?
ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
$ ng update @angular/cli @angular/core
-
+
-
-
What is Angular Material?
+What is Angular Material?
Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
npm install --save @angular/material @angular/cdk @angular/animations
@@ -3790,10 +4031,10 @@ What is Angular Material?
yarn add @angular/material @angular/cdk @angular/animations
از دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی می کند. آخرین نسخه متریال Angular 8.1.1 است
-
+
-
-
How do you upgrade location service of angularjs?
+How do you upgrade location service of angularjs?
اگر از سرویس «location» را به سرویس «Location» در Angular میگذارد. بیایید این ماژول را مانند زیر به AppModule اضافه کنیم،
// Other imports ...
@@ -3807,15 +4048,15 @@ How do you upgrade location service of angularjs?
})
export class AppModule {}
-
+
-
-
What is NgUpgrade?
+What is NgUpgrade?
NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
-
+
-
-
How do you test Angular application using CLI?
+How do you test Angular application using CLI?
Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. بهطور پیشفرض، این دستور برنامه را در حالت تماشا میسازد و «Karma test runner» را راهاندازی میکند. خروجی نتایج آزمون به صورت زیر خواهد بود:
10% building modules 1/1 modules 0 active
@@ -3826,13 +4067,13 @@ How do you test Angular application using CLI?
Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)
نکته: یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
-
+
-
-
How to use polyfills in Angular application?
+How to use polyfills in Angular application?
Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی src/polyfills.ts به عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
-- Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
+Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
- Optional polyfills: شما باید بسته npm آن را نصب کنید و سپس دستور import را در فایل 'src/polyfills.ts' ایجاد کنید.
به عنوان مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
@@ -3843,134 +4084,134 @@ How to use polyfills in Angular application?
import 'web-animations-js';
-
+
-
-
What are the ways to trigger change detection in Angular?
+What are the ways to trigger change detection in Angular?
میتوانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روشهای خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
-- ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
-- NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
-- ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
+ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
-
+
-
-
What are the differences of various versions of Angular?
+What are the differences of various versions of Angular?
نسخه های مختلفی از فریم ورک Angular وجود دارد. بیایید ویژگی های تمام نسخه های مختلف را ببینیم،
- Angular 1:
-- Angular 1 (AngularJS) اولین فریم ورک زاویه ای است که در سال 2010 منتشر شد.
-- AngularJS برای دستگاه های تلفن همراه ساخته نشده است.
-- بر پایه کنترلرهایی با معماری MVC ساخته شده است.
+Angular 1 (AngularJS) اولین فریم ورک زاویه ای است که در سال 2010 منتشر شد.
AngularJS برای دستگاه های تلفن همراه ساخته نشده است.
بر پایه کنترلرهایی با معماری MVC ساخته شده است.
- 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 مبتنی بر کامپوننت است.
- 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 نادیده گرفته شده است.
- Angular 4:
-- اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است.
-- با Angular 4 اندازه بستههای تولیدی صدها کیلوبایت کاهش مییابد.
-- ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود.
-- پشتیبانی از Typescript 2.1 و 2.2.
-- جهانی زاویه ای
-- HttpClient جدید
+اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است.
با Angular 4 اندازه بستههای تولیدی صدها کیلوبایت کاهش مییابد.
ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود.
پشتیبانی از Typescript 2.1 و 2.2.
جهانی زاویه ای
HttpClient جدید
- Angular 5:
-- Angular 5 زاویه ای را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید.
-- با بهینه ساز ساخت جدید ارسال می شود.
-- پشتیبانی از Typescript 2.5.
-- کارگر خدماتی
+Angular 5 زاویه ای را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید.
با بهینه ساز ساخت جدید ارسال می شود.
پشتیبانی از Typescript 2.5.
کارگر خدماتی
- Angular 6:
-- در ماه می 2018 منتشر شد.
-- شامل رابط خط فرمان زاویه ای (CLI)، کیت توسعه اجزا (CDK)، بسته مواد زاویه ای، عناصر زاویه ای.
-- رفع اشکال سرویس کارگر.
-- i18n
-- حالت آزمایشی برای آیوی.
-- RxJS 6.0
-- لرزش درخت
+در ماه می 2018 منتشر شد.
شامل رابط خط فرمان زاویه ای (CLI)، کیت توسعه اجزا (CDK)، بسته مواد زاویه ای، عناصر زاویه ای.
رفع اشکال سرویس کارگر.
i18n
حالت آزمایشی برای آیوی.
RxJS 6.0
لرزش درخت
- 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 تم و ژستها یا انیمیشنها را میخواهد.
- Angular 8:
-- در ماه می 2019 منتشر شد.
-- TypeScript 3.4
+در ماه می 2019 منتشر شد.
TypeScript 3.4
- Angular 9:
-- در فوریه 2020 منتشر شد.
-- TypeScript 3.7
-- Ivy به طور پیش فرض فعال است
+در فوریه 2020 منتشر شد.
TypeScript 3.7
Ivy به طور پیش فرض فعال است
- Angular 10:
-- در ژوئن 2020 منتشر شد.
-- TypeScript 3.9
-- TSlib 2.0
+در ژوئن 2020 منتشر شد.
TypeScript 3.9
TSlib 2.0
-
+
-
-
What are the security principles in angular?
+What are the security principles in angular?
در زیر لیستی از اصول امنیتی در زاویه ای آورده شده است.
-- باید از استفاده مستقیم از APIهای DOM اجتناب کنید.
-- شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید.
-- باید از کامپایلر قالب آفلاین استفاده کنید.
-- باید از محافظ XSS سمت سرور استفاده کنید.
-- باید از DOM Sanitizer استفاده کنید.
-- شما باید از حملات CSRF یا XSRF جلوگیری کنید.
+باید از استفاده مستقیم از APIهای DOM اجتناب کنید.
شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید.
باید از کامپایلر قالب آفلاین استفاده کنید.
باید از محافظ XSS سمت سرور استفاده کنید.
باید از DOM Sanitizer استفاده کنید.
شما باید از حملات CSRF یا XSRF جلوگیری کنید.
-
+
-
-
What is the reason to deprecate Web Tracing Framework?
+What is the reason to deprecate Web Tracing Framework?
Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمی شود و در اکثر برنامه ها شکسته می شود، در آخرین نسخه منسوخ شده است.
-
+
-
-
What is the reason to deprecate web worker packages?
+What is the reason to deprecate web worker packages?
هر دو «@angular/platform-webworker» و «@angular/platform-webworker-dynamic» رسماً منسوخ شدهاند، تیم Angular متوجه شد که اجرای برنامه Angular روی Web worker عمل خوبی نیست.
-
+
-
-
How do you find angular CLI version?
+How do you find angular CLI version?
Angular CLI نسخه نصب شده خود را با استفاده از روش های مختلف زیر با استفاده از دستور ng ارائه می دهد
ng v
@@ -3986,10 +4227,10 @@ How do you find angular CLI version?
Angular:
...
-
+
-
-
What is the browser support for Angular?
+What is the browser support for Angular?
Angular از جدیدترین مرورگرها پشتیبانی می کند که شامل مرورگرهای دسکتاپ و موبایل می شود.
@@ -4033,64 +4274,64 @@ What is the browser support for Angular?
-
+
-
-
What is schematic?
+What is schematic?
این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف می کند. قوانینی را تعریف می کند که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
-
+
-
-
What is rule in Schematics?
+What is rule in Schematics?
در دنیای شماتیک، این تابعی است که روی درخت فایل برای ایجاد، حذف یا اصلاح فایلها به شیوهای خاص عمل میکند.
-
+
-
-
What is Schematics CLI?
+What is Schematics CLI?
طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه می شوند. برای نصب شماتیک های اجرایی استفاده می شود که می توانید از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می توانید از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می توانید Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
npm install -g @angular-devkit/schematics-cli
-
+
-
-
What are the best practices for security in angular?
+What are the best practices for security in angular?
در زیر بهترین شیوه های امنیتی در زاویه ای آورده شده است.
-- از آخرین نسخه های کتابخانه Angular استفاده کنید
-- کپی Angular خود را تغییر ندهید
-- از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید.
+از آخرین نسخه های کتابخانه Angular استفاده کنید
کپی Angular خود را تغییر ندهید
از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید.
-
+
-
-
What is Angular security model for preventing XSS attacks?
+What is Angular security model for preventing XSS attacks?
Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. به عنوان مثال، Angular پاکسازی میکند و از مقادیر نامعتبر فرار میکند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درونیابی در DOM درج میشود.
-
+
-
-
What is the role of template compiler for prevention of XSS attacks?
+What is the role of template compiler for prevention of XSS attacks?
کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری می کند و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه می شود از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
-
+
-
-
What are the various security contexts in Angular?
+What are the various security contexts in Angular?
Angular زمینه های امنیتی زیر را برای پاکسازی تعریف می کند:
-- HTML: هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده می شود.
-- Style: هنگام اتصال CSS به ویژگی style استفاده می شود.
-- URL: برای ویژگی های URL مانند
<a href> استفاده می شود.
-- Resource URL: این یک URL است که به عنوان کدی مانند
<script src> بارگیری و اجرا می شود.
+HTML: هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده می شود.
Style: هنگام اتصال CSS به ویژگی style استفاده می شود.
URL: برای ویژگی های URL مانند <a href> استفاده می شود.
Resource URL: این یک URL است که به عنوان کدی مانند <script src> بارگیری و اجرا می شود.
-
+
-
-
What is Sanitization? Is angular supports it?
+What is Sanitization? Is angular supports it?
Sanitization بازرسی یک مقدار نامعتبر است که آن را به مقداری تبدیل می کند که برای درج آن در DOM ایمن است. بله، Angular از ضد عفونی کردن پشتیبانی می کند. مقادیر نامعتبر را برای HTML، سبکها و URLها پاکسازی میکند، اما پاکسازی URLهای منبع ممکن نیست زیرا حاوی کد دلخواه هستند.
-
+
-
-
What is the purpose of innerHTML?
+What is the purpose of innerHTML?
innerHtml یکی از ویژگی های HTML-Elements است که به شما امکان می دهد محتوای html آن را به صورت برنامه ریزی شده تنظیم کنید. بیایید قطعه کد html زیر را در تگ «
-
-
What is the difference between interpolated content and innerHTML?
+What is the difference between interpolated content and innerHTML?
تفاوت اصلی بین کد درون یابی شده و کد داخلی در رفتار کد تفسیر شده است. محتوای درونیابی همیشه حذف میشود، یعنی HTML تفسیر نمیشود و مرورگر براکتهای زاویهای را در محتوای متن عنصر نمایش میدهد. در جایی که در innerHTML binding، محتوا تفسیر می شود، یعنی مرورگر کاراکترهای < و > را به عنوان HTMLEntities تبدیل می کند. به عنوان مثال، استفاده در قالب به صورت زیر خواهد بود.
<p>Interpolated value:</p>
@@ -4120,10 +4361,10 @@ What is the difference between interpolated content and innerHTML?
}
حتی با وجود اینکه innerHTML binding شانس حمله XSS را ایجاد می کند، Angular این مقدار را ناامن تشخیص می دهد و به طور خودکار آن را پاکسازی می کند.
-
+
-
-
How do you prevent automatic sanitization?
+How do you prevent automatic sanitization?
گاهی اوقات برنامه ها واقعاً نیاز دارند که کدهای اجرایی مانند نمایش <iframe> را از یک URL داشته باشند. در این مورد، باید با گفتن اینکه یک مقدار را بررسی کرده اید، نحوه تولید آن را بررسی کرده اید و مطمئن شده اید که همیشه ایمن است، از پاکسازی خودکار در Angular جلوگیری کنید. اساساً شامل 2 مرحله است،
-
@@ -4132,11 +4373,11 @@
How do you prevent automatic sanitization?
-
با فراخوانی برخی از روشهای زیر، مقدار قابل اعتماد را علامتگذاری کنید
-- bypassSecurityTrustHtml
-- bypassSecurityTrustScript
-- bypassSecurityTrustStyle
-- bypassSecurityTrustUrl
-- bypassSecurityTrustResourceUrl
+bypassSecurityTrustHtml
bypassSecurityTrustScript
bypassSecurityTrustStyle
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl
@@ -4146,34 +4387,34 @@ How do you prevent automatic sanitization?
this.dangerousUrl = 'javascript:alert("XSS attack")';
this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
-
+
-
-
Is safe to use direct DOM API methods in terms of security?
+Is safe to use direct DOM API methods in terms of security?
خیر، APIها یا روشهای داخلی مرورگر DOM بهطور خودکار از شما در برابر آسیبپذیریهای امنیتی محافظت نمیکنند. در این مورد توصیه می شود به جای تعامل مستقیم با DOM از قالب های Angular استفاده کنید. اگر اجتناب ناپذیر است، از عملکردهای ضدعفونی داخلی Angular استفاده کنید.
-
+
-
-
What is DOM sanitizer?
+What is DOM sanitizer?
«DomSanitizer» برای کمک به جلوگیری از اشکالات امنیتی Cross Site Scripting (XSS) با پاکسازی مقادیر برای ایمن بودن استفاده در زمینههای مختلف DOM استفاده میشود.
-
+
-
-
How do you support server side XSS protection in Angular application?
+How do you support server side XSS protection in Angular application?
حفاظت XSS سمت سرور در یک برنامه زاویه ای با استفاده از زبان قالبی که به طور خودکار از مقادیر برای جلوگیری از آسیب پذیری های XSS در سرور فرار می کند، پشتیبانی می شود. اما از زبان قالب برای تولید الگوهای Angular در سمت سرور استفاده نکنید که خطر زیادی برای معرفی آسیبپذیریهای تزریق قالب ایجاد میکند.
-
+
-
-
Is angular prevents http level vulnerabilities?
+Is angular prevents http level vulnerabilities?
Angular دارای پشتیبانی داخلی برای جلوگیری از آسیبپذیریهای سطح http مانند جعل درخواست بین سایتی (CSRF یا XSRF) و گنجاندن اسکریپت بین سایتی (XSSI) است. حتی اگر این آسیبپذیریها باید در سمت سرور کاهش یابند، Angular کمکهایی را برای آسانتر کردن ادغام در سمت کلاینت ارائه میکند.
-- HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود
-- کتابخانه HttpClient قرارداد پاسخهای JSON پیشوندی را تشخیص میدهد (که js غیرقابل اجرا با نویسههای ")]}'،\n" کد میکند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخهای قبل حذف میکند. تجزیه بیشتر
+HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود
کتابخانه HttpClient قرارداد پاسخهای JSON پیشوندی را تشخیص میدهد (که js غیرقابل اجرا با نویسههای ")]}'،\n" کد میکند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخهای قبل حذف میکند. تجزیه بیشتر
-
+
-
-
What are Http Interceptors?
+What are Http Interceptors?
رهگیرهای Http بخشی از @angular/common/http هستند که درخواستهای HTTP را از برنامه شما به سرور و برعکس در پاسخهای HTTP بررسی و تبدیل میکنند. این رهگیرها می توانند انواع مختلفی از وظایف ضمنی، از احراز هویت گرفته تا ثبت را انجام دهند.
نحو رابط HttpInterceptor مانند زیر است.
@@ -4206,23 +4447,23 @@ What are Http Interceptors?
})
export class AppModule {}
-
+
-
-
What are the applications of HTTP interceptors?
+What are the applications of HTTP interceptors?
رهگیرهای HTTP را می توان برای انواع مختلفی از وظایف استفاده کرد،
-- Authentication
-- Logging
-- Caching
-- Fake backend
-- URL transformation
-- Modifying headers
+Authentication
Logging
Caching
Fake backend
URL transformation
Modifying headers
-
+
-
-
Is multiple interceptors supported in Angular?
+Is multiple interceptors supported in Angular?
بله، Angular از چندین رهگیر در یک زمان پشتیبانی می کند. می توانید چندین رهگیر را در ویژگی ارائه دهندگان تعریف کنید:
providers: [
@@ -4231,10 +4472,10 @@ Is multiple interceptors supported in Angular?
],
رهگیرها به ترتیبی که ارائه شده اند فراخوانی می شوند. i.n، MyFirst Interceptor ابتدا در پیکربندی رهگیرهای بالا فراخوانی می شود.
-
+
-
-
How can I use interceptor for an entire application?
+How can I use interceptor for an entire application?
میتوانید با وارد کردن «HttpClientModule» فقط در AppModule خود، از همان نمونه «HttpInterceptors» برای کل برنامه استفاده کنید، و رهگیرها را به انژکتور برنامه root اضافه کنید.
برای مثال، بیایید کلاسی را تعریف کنیم که در برنامه root قابل تزریق باشد.
@@ -4276,18 +4517,18 @@ How can I use interceptor for an entire application?
-
-
How does Angular simplifies Internationalization?
+How does Angular simplifies Internationalization?
Angular زمینه های بین المللی سازی زیر را ساده می کند:
-- نمایش تاریخ، عدد، درصد و ارز در قالب محلی.
-- آماده سازی متن در قالب های مؤلفه برای ترجمه.
-- رسیدگی به اشکال جمع کلمات.
-- مدیریت متن جایگزین.
+نمایش تاریخ، عدد، درصد و ارز در قالب محلی.
آماده سازی متن در قالب های مؤلفه برای ترجمه.
رسیدگی به اشکال جمع کلمات.
مدیریت متن جایگزین.
-
+
-
-
How do you manually register locale data?
+How do you manually register locale data?
بهطور پیشفرض، Angular فقط حاوی دادههای محلی برای en-US است که انگلیسی است که در ایالات متحده آمریکا صحبت میشود. اما اگر میخواهید روی محلی دیگر تنظیم کنید، باید دادههای محلی را برای آن محلی جدید وارد کنید. پس از آن می توانید با استفاده از روش «registerLocaleData» ثبت نام کنید و نحو این روش به شکل زیر است.
registerLocaleData(data: any, localeId?: any, extraData?: any): void
@@ -4299,19 +4540,19 @@ How do you manually register locale data?
registerLocaleData(localeDe, 'de');
-
+
-
-
What are the four phases of template translation?
+What are the four phases of template translation?
فرآیند ترجمه قالب i18n دارای چهار مرحله است:
-- Mark static text messages in your component templates for translation: می توانید i18n را روی هر تگ عنصری که متن ثابت آن باید ترجمه شود قرار دهید. به عنوان مثال، برای عنوان زیر به ویژگی i18n نیاز دارید.
+Mark static text messages in your component templates for translation: می توانید i18n را روی هر تگ عنصری که متن ثابت آن باید ترجمه شود قرار دهید. به عنوان مثال، برای عنوان زیر به ویژگی i18n نیاز دارید.
<h1 i18n>Hello i18n!</h1>
-- Create a translation file: از دستور Angular CLI xi18n برای استخراج متن علامت گذاری شده در یک فایل منبع ترجمه استاندارد صنعتی استفاده کنید. به عنوان مثال، پنجره ترمینال را در ریشه پروژه برنامه باز کنید و دستور CLI xi18n را اجرا کنید.
+Create a translation file: از دستور Angular CLI xi18n برای استخراج متن علامت گذاری شده در یک فایل منبع ترجمه استاندارد صنعتی استفاده کنید. به عنوان مثال، پنجره ترمینال را در ریشه پروژه برنامه باز کنید و دستور CLI xi18n را اجرا کنید.
```bash
@@ -4347,16 +4588,16 @@ What are the four phases of template translation?
--i18nLocale= locale id
-
+
-
-
What is the purpose of i18n attribute?
+What is the purpose of i18n attribute?
ویژگی Angular i18n محتوای قابل ترجمه را علامت گذاری می کند. این یک ویژگی سفارشی است که توسط ابزارها و کامپایلرهای Angular شناسایی می شود. کامپایلر پس از ترجمه آن را حذف می کند.
Note: به یاد داشته باشید که i18n یک دستورالعمل Angular نیست.
-
+
-
-
What is the purpose of custom id?
+What is the purpose of custom id?
هنگامی که متن قابل ترجمه را تغییر میدهید، ابزار استخراج Angular یک شناسه جدید برای آن واحد ترجمه ایجاد میکند. به دلیل این رفتار، باید هر بار فایل ترجمه را با شناسه جدید به روز کنید.
برای مثال، فایل ترجمه «messages.de.xlf.html» برای برخی از پیامهای متنی زیر واحد انتقال ایجاد کرده است:
@@ -4366,10 +4607,10 @@ What is the purpose of custom id?
<h1 i18n="@@welcomeHeader">Hello i18n!</h1>
-
+
-
-
What happens if the custom id is not unique?
+What happens if the custom id is not unique?
شما باید شناسه های سفارشی را منحصر به فرد تعریف کنید. اگر از یک شناسه برای دو پیام متنی مختلف استفاده می کنید، فقط اولین مورد استخراج می شود. اما ترجمه آن به جای هر دو پیامک اصلی استفاده می شود.
برای مثال، بیایید همان شناسه سفارشی myCustomId را برای دو پیام تعریف کنیم:
@@ -4389,19 +4630,19 @@ What happens if the custom id is not unique?
<h2>Guten Morgen</h2>
<h2>Guten Morgen</h2>
-
+
-
-
Can I translate text without creating an element?
+Can I translate text without creating an element?
بله، میتوانید با استفاده از ویژگی «» به آن دست پیدا کنید. معمولاً برای ترجمه باید محتوای متنی را با ویژگی i18n بپیچید. اما اگر نمیخواهید یک عنصر DOM جدید فقط به خاطر ترجمه ایجاد کنید، میتوانید متن را در یک عنصر بپیچید.
<ng-container i18n>I'm not using any DOM element for translation</ng-container>
به یاد داشته باشید که «» به یک نظر html تبدیل می شود
-
+
-
-
How can I translate attribute?
+How can I translate attribute?
میتوانید ویژگیها را با پیوست کردن ویژگی «i18n-x» ترجمه کنید، جایی که x نام ویژگی برای ترجمه است. به عنوان مثال، می توانید ویژگی عنوان تصویر را به صورت زیر ترجمه کنید.
<img [src]="example" i18n-title title="Internationlization" />
@@ -4414,35 +4655,35 @@ How can I translate attribute?
-
-
List down the pluralization categories?
+List down the pluralization categories?
تعدد بسته به زبان دارای دسته های زیر است.
-- = 0 (یا هر عدد دیگری)
-- صفر
-- یک
-- دو
-- تعداد کمی
-- بسیاری
-- دیگر
+= 0 (یا هر عدد دیگری)
صفر
یک
دو
تعداد کمی
بسیاری
دیگر
-
+
-
-
What is select ICU expression?
+What is select ICU expression?
عبارت ICU شبیه عبارات جمع است با این تفاوت که شما از بین ترجمه های جایگزین بر اساس مقدار رشته به جای عدد انتخاب می کنید. در اینجا شما آن مقادیر رشته را تعریف می کنید.
بیایید مؤلفه را با ویژگی «residenceStatus» که دارای مقادیر ممکن «شهروند»، «مقیم دائم» و «خارجی» است، در نظر بگیریم و پیام آن مقادیر را به ترجمههای مناسب نگاشت میکند.
<span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>
-
+
-
-
How do you report missing translations?
+How do you report missing translations?
بهطور پیشفرض، هنگامی که ترجمه وجود ندارد، پیام هشداری مانند «ترجمه از دست رفته برای پیام «somekey» ایجاد میکند. اما می توانید با سطح متفاوتی از پیام در کامپایلر Angular به صورت زیر پیکربندی کنید.
-- Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود.
-- Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان میدهد.
-- Ignore: هیچ کاری نمی کند.
+Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود.
Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان میدهد.
Ignore: هیچ کاری نمی کند.
اگر از کامپایلر AOT استفاده می کنید، باید تغییراتی را در بخش پیکربندی فایل پیکربندی Angular CLI خود، angular.json انجام دهید.
@@ -4467,10 +4708,10 @@ How do you report missing translations?
]
});
-
+
-
-
How do you provide build configuration for multiple locales?
+How do you provide build configuration for multiple locales?
میتوانید پیکربندی ساخت مانند مسیر فایل ترجمه، نام، قالب و آدرس برنامه را در تنظیمات «پیکربندی» فایل Angular.json ارائه کنید. به عنوان مثال، نسخه آلمانی برنامه شما بیلد را به صورت زیر پیکربندی کرده است:
"configurations": {
@@ -4485,49 +4726,49 @@ How do you provide build configuration for multiple locales?
}
}
-
+
-
-
What is an angular library?
+What is an angular library?
کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد زیرا نمی تواند به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، میتوانید کتابخانه «سرویسکار» را به یک برنامه Angular وارد یا اضافه کنید که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل میکند.
Note: شما می توانید کتابخانه شخص ثالث خود را ایجاد کنید و آن را به عنوان بسته npm منتشر کنید تا در یک برنامه استفاده شود.
-
+
-
-
What is AOT compiler?
+What is AOT compiler?
کامپایلر AOT بخشی از یک فرآیند ساخت است که یک بسته برنامه کوچک، سریع و آماده برای اجرا تولید میکند، معمولاً برای تولید. این کد Angular HTML و TypeScript شما را در مرحله ساخت قبل از دانلود و اجرای آن کد به کد جاوا اسکریپت کارآمد تبدیل می کند.
-
+
-
-
How do you select an element in component template?
+How do you select an element in component template?
شما می توانید هر عنصر DOM را از طریق ElementRef با تزریق آن به سازنده کامپوننت خود کنترل کنید. یعنی کامپوننت باید سازنده ای با پارامتر ElementRef داشته باشد،
constructor(myElement: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
-
+
-
-
What is TestBed?
+What is TestBed?
TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخانه های آن است. حتی با وجود اینکه ما هنوز تستهای خود را در Jasmine مینویسیم و با استفاده از Karma اجرا میکنیم، این API راه آسانتری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه میکند.
-
+
-
-
What is protractor?
+What is protractor?
نقاله یک چارچوب تست سرتاسر برای برنامه های Angular و AngularJS است. این برنامه آزمایش هایی را بر روی برنامه شما که در یک مرورگر واقعی اجرا می شود، اجرا می کند و مانند یک کاربر با آن تعامل دارد.
npm install -g protractor
-
+
-
-
What is collection?
+What is collection?
مجموعه مجموعه ای از شماتیک های مرتبط است که در یک بسته npm جمع آوری شده است. به عنوان مثال، مجموعه @schematics/angular در Angular CLI برای اعمال تبدیل به یک پروژه برنامه وب استفاده می شود. شما می توانید مجموعه شماتیک خود را برای سفارشی سازی پروژه های زاویه ای ایجاد کنید.
-
+
-
-
How do you create schematics for libraries?
+How do you create schematics for libraries?
شما می توانید مجموعه های شماتیک خود را برای ادغام کتابخانه خود با Angular CLI ایجاد کنید. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی می شوند.
- Add schematics: این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده می شود.
@@ -4537,19 +4778,19 @@ How do you create schematics for libraries?
- Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده می شود.
به عنوان مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز می کند.
-
+
-
-
How do you use jquery in Angular?
+How do you use jquery in Angular?
می توانید با استفاده از 3 مرحله ساده از jquery در Angular استفاده کنید.
-- Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید
+Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید
npm install --save jquery
-- Add the jquery script: در پروژه Angular-CLI، مسیر نسبی را به jquery در فایل angular.json اضافه کنید.
+Add the jquery script: در پروژه Angular-CLI، مسیر نسبی را به jquery در فایل angular.json اضافه کنید.
"scripts": [
@@ -4557,7 +4798,7 @@ How do you use jquery in Angular?
]
-- Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید.
+Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید.
<div id="elementId">
@@ -4582,10 +4823,10 @@ How do you use jquery in Angular?
}
}
-
+
-
-
What is the reason for No provider for HTTP exception?
+What is the reason for No provider for HTTP exception?
این استثنا به دلیل عدم وجود HttpClientModule در ماژول شما است. شما فقط باید در ماژول به صورت زیر وارد کنید:
import { HttpClientModule } from '@angular/common/http';
@@ -4600,10 +4841,10 @@ What is the reason for No provider for HTTP exception?
})
export class AppModule { }
-
+
-
-
What is router state?
+What is router state?
RouteState یک رابط است که وضعیت روتر را به عنوان درختی از مسیرهای فعال نشان می دهد.
interface RouterState extends Tree {
@@ -4612,10 +4853,10 @@ What is router state?
}
با استفاده از سرویس Router و ویژگی routerState می توانید از هر نقطه در برنامه Angular به RouterState فعلی دسترسی داشته باشید.
-
+
-
-
How can I use SASS in angular project?
+How can I use SASS in angular project?
هنگامی که پروژه خود را با cli زاویه ای ایجاد می کنید، می توانید از دستور "ng new" استفاده کنید. تمام اجزای شما را با فایل های sass از پیش تعریف شده تولید می کند.
ng new My_New_Project --style=sass
@@ -4624,25 +4865,25 @@ How can I use SASS in angular project?
ng set defaults.styleExt scss
-
+
-
-
What is the purpose of hidden property?
+What is the purpose of hidden property?
ویژگی hidden برای نشان دادن یا پنهان کردن عنصر DOM مرتبط بر اساس یک عبارت استفاده می شود. می توان آن را نزدیک به دستورالعمل «ng-show» در AngularJS مقایسه کرد. فرض کنید می خواهید نام کاربری را بر اساس در دسترس بودن کاربر با استفاده از ویژگی "مخفی" نشان دهید.
<div [hidden]="!user.name">
My name is: {{user.name}}
</div>
-
+
-
-
What is the difference between ngIf and hidden property?
+What is the difference between ngIf and hidden property?
تفاوت اصلی این است که *ngIf عنصر را از DOM حذف می کند، در حالی که [hidden] در واقع با تنظیم «display:none» با سبک CSS بازی می کند. به طور کلی اضافه کردن و حذف موارد از DOM برای اقدامات مکرر گران است.
-
+
-
-
What is slice pipe?
+What is slice pipe?
لوله slice برای ایجاد یک آرایه یا رشته جدید حاوی زیرمجموعه (برش) از عناصر استفاده می شود. سینتکس به شکل زیر است:
{{ value_expression | slice : start [ : end ] }}
@@ -4659,10 +4900,10 @@ What is slice pipe?
greeting: string[] = ['h', 'e', 'l', 'l', 'o', 'm','o', 'r', 'n', 'i', 'n', 'g'];
}
-
+
-
-
What is index property in ngFor directive?
+What is index property in ngFor directive?
ویژگی index دستورالعمل NgFor برای برگرداندن شاخص مبتنی بر صفر مورد در هر تکرار استفاده می شود. شما می توانید شاخص را در یک متغیر ورودی الگو گرفته و از آن در قالب استفاده کنید.
@@ -4682,7 +4923,7 @@ What is index property in ngFor directive?
-
-
What is the purpose of ngFor trackBy?
+What is the purpose of ngFor trackBy?
هدف اصلی استفاده از *ngFor with trackBy بهینه سازی عملکرد است. معمولاً اگر از NgFor با مجموعه دادههای بزرگ استفاده میکنید، یک تغییر کوچک به یک آیتم با حذف یا اضافه کردن یک مورد، میتواند باعث ایجاد آبشاری از دستکاریهای DOM شود. در این مورد، Angular فقط یک لیست تازه از ارجاعات اشیاء جدید و جایگزینی عناصر DOM قدیمی با تمام عناصر DOM جدید را می بیند. میتوانید با ارائه یک تابع «trackBy» که فهرست و مورد فعلی را بهعنوان آرگومان میگیرد و باید شناسه منحصربهفرد این مورد را برگرداند، به Angular کمک کنید تا موارد اضافه یا حذف شده را ردیابی کند.
For example, lets set trackBy to the trackByTodos() method
@@ -4694,10 +4935,10 @@ What is the purpose of ngFor trackBy?
trackByTodos(index: number, item: Todo): number { return todo.id; }
-
+
-
-
What is the purpose of ngSwitch directive?
+What is the purpose of ngSwitch directive?
دستورالعمل NgSwitch شبیه دستور سوئیچ جاوا اسکریپت است که یک عنصر را از بین چندین عنصر ممکن بر اساس یک شرط سوئیچ نمایش می دهد. در این حالت فقط عنصر انتخاب شده در DOM قرار می گیرد. همراه با دستورات «NgSwitch»، «NgSwitchCase» و «NgSwitchDefault» استفاده شده است.
به عنوان مثال، اجازه دهید جزئیات مرورگر را بر اساس مرورگر انتخابی با استفاده از دستورالعمل ngSwitch نمایش دهیم.
@@ -4709,91 +4950,91 @@ What is the purpose of ngSwitch directive?
<ie-browser *ngSwitchDefault [item]="currentItem"></ie-browser>
</div>
-
+
-
-
Is it possible to do aliasing for inputs and outputs?
+Is it possible to do aliasing for inputs and outputs?
بله، به دو صورت می توان برای ورودی ها و خروجی ها نام مستعار انجام داد.
-- نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود.
+نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود.
inputs: ['input1: buyItem'],
outputs: ['outputEvent1: completedEvent']
-- Aliasing with @Input()/@Output() decorator: نام مستعار را می توان با ارسال نام مستعار به @Input()/@Output() decorator.i.e برای نام دارایی مشخص کرد. به شکل @Input(نام مستعار) یا @Output(نام مستعار) خواهد بود.
+Aliasing with @Input()/@Output() decorator: نام مستعار را می توان با ارسال نام مستعار به @Input()/@Output() decorator.i.e برای نام دارایی مشخص کرد. به شکل @Input(نام مستعار) یا @Output(نام مستعار) خواهد بود.
@Input('buyItem') input1: string;
@Output('completedEvent') outputEvent1 = new EventEmitter<string>();
-
+
-
-
What is safe navigation operator?
+What is safe navigation operator?
اپراتور 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>
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.
-
+
-
-
Is any special configuration required for Angular9?
+Is any special configuration required for Angular9?
شما به پیکربندی خاصی نیاز ندارید. در Angular9، رندر Ivy کامپایلر پیش فرض Angular است. اگرچه Ivy خود Angular8 در دسترس است، باید آن را در فایل tsconfig.json به صورت زیر پیکربندی کنید:
"angularCompilerOptions": { "enableIvy": true }
-
+
-
-
What are type safe TestBed API changes in Angular9?
+What are type safe TestBed API changes in Angular9?
Angular 9 با جایگزینی تابع get قدیمی با روش inject جدید، تغییرات ایمن نوع را در تغییرات TestBed API ارائه میکند. زیرا روش TestBed.get از نظر نوع ایمن نیست. استفاده به شرح زیر خواهد بود،
TestBed.get(ChangeDetectorRef) // returns any. It is deprecated now.
TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef
-
+
-
-
Is mandatory to pass static flag for ViewChild?
+Is mandatory to pass static flag for ViewChild?
در Angular 8، پرچم استاتیک برای ViewChild مورد نیاز است. در حالی که در Angular9، دیگر نیازی به عبور از این ویژگی ندارید. هنگامی که با استفاده از «ng update» به Angular9 بهروزرسانی کردید، انتقال اسکریپت { static: false } را در همه جا حذف میکند.
@ViewChild(ChildDirective) child: ChildDirective; // Angular9 usage
@ViewChild(ChildDirective, { static: false }) child: ChildDirective; //Angular8 usage
-
+
-
-
What are the list of template expression operators?
+What are the list of template expression operators?
زبان عبارت الگوی Angular از سه عملگر خاص قالب پشتیبانی می کند.
-- اپراتور لوله
-- اپراتور ناوبری ایمن
-- عملگر ادعای غیر تهی
+اپراتور لوله
اپراتور ناوبری ایمن
عملگر ادعای غیر تهی
-
+
-
-
What is the precedence between pipe and ternary operators?
+What is the precedence between pipe and ternary operators?
اپراتور لوله نسبت به اپراتور سه تایی (?😃 اولویت بیشتری دارد. به عنوان مثال، عبارت «اول؟ دوم : سوم | چهارم به عنوان «اول؟ دوم : (سوم | چهارم)`.
-
+
-
-
What is an entry component?
+What is an entry component?
مؤلفه ورودی هر مؤلفه ای است که Angular به طور ضروری بارگذاری می کند (یعنی عدم ارجاع آن در قالب) بر اساس نوع. به دلیل این رفتار، کامپایلر Angular در طول کامپایل نمی تواند آنها را پیدا کند. این مؤلفه ها به صورت پویا با «ComponentFactoryResolver» ایجاد می شوند.
اساساً دو نوع اصلی از مؤلفه های ورودی وجود دارد که به شرح زیر است:
-- مؤلفه ریشه بوت استرپ
-- مؤلفه ای که در مسیر مشخص می کنید
+مؤلفه ریشه بوت استرپ
مؤلفه ای که در مسیر مشخص می کنید
-
+
-
-
What is a bootstrapped component?
+What is a bootstrapped component?
کامپوننت بوت استرپ یک جزء ورودی است که Angular در طول فرآیند بوت استرپ یا زمان راه اندازی برنامه در DOM بارگذاری می کند. به طور کلی، این مؤلفه بوت استرپ یا ریشه به عنوان «AppComponent» در ماژول ریشه شما با استفاده از ویژگی «bootstrap» به شرح زیر نامگذاری می شود.
@NgModule({
@@ -4810,10 +5051,10 @@ What is a bootstrapped component?
bootstrap: [AppComponent] // bootstrapped entry component need to be declared here
})
-
+
-
-
How do you manually bootstrap an application?
+How do you manually bootstrap an application?
میتوانید به جای استفاده از آرایه بوت استرپ در حاشیهنویسی «@NgModule» از هوک «ngDoBootstrap» برای راهاندازی دستی برنامه استفاده کنید. این قلاب بخشی از رابط «DoBootstap» است.
interface DoBootstrap {
@@ -4828,15 +5069,15 @@ How do you manually bootstrap an application?
}
}
-
+
-
-
Is it necessary for bootstrapped component to be entry component?
+Is it necessary for bootstrapped component to be entry component?
بله، کامپوننت بوت استرپ باید جزء ورودی باشد. این به این دلیل است که فرآیند بوت استرپ یک فرآیند ضروری است.
-
+
-
-
What is a routed entry component?
+What is a routed entry component?
اجزای مورد اشاره در پیکربندی روتر به عنوان اجزای ورودی مسیریابی نامیده می شوند. این جزء ورودی مسیریابی شده در تعریف مسیر به صورت زیر تعریف شده است:
const routes: Routes = [
@@ -4848,49 +5089,49 @@ What is a routed entry component?
از آنجایی که تعریف روتر شما را ملزم می کند که کامپوننت را در دو مکان (روتر و ورودی کامپوننت) اضافه کنید، این اجزا همیشه جزء ورودی هستند.
توجه: کامپایلرها به اندازه کافی هوشمند هستند که تعریف روتر را تشخیص دهند و به طور خودکار جزء روتر را به "entryComponents" اضافه کنند.
-
+
-
-
Why is not necessary to use entryComponents array every time?
+Why is not necessary to use entryComponents array every time?
اغلب اوقات، برای تنظیم اجزای ورودی در آرایه ورودیComponents ngModule decorator نیازی به صراحت ندارید. زیرا angular کامپوننتها را هم از تعاریف @NgModule.bootstrap و هم مسیر را بهطور خودکار به اجزای ورودی اضافه میکند.
-
+
-
-
Do I still need to use entryComponents array in Angular9?
+Do I still need to use entryComponents array in Angular9?
خیر. در نسخههای زاویهای قبلی، آرایه ورودی Components از ngModule decorator استفاده میشود تا به کامپایلر بگوید کدام مؤلفهها ایجاد شده و بهصورت پویا در view درج میشوند. در Angular9، این دیگر با Ivy مورد نیاز نیست.
-
+
-
-
Is it all components generated in production build?
+Is it all components generated in production build?
خیر، فقط اجزای ورودی و اجزای قالب در بیلدهای تولید ظاهر می شوند. اگر یک جزء جزء ورودی نباشد و در یک الگو یافت نشود، تکان دهنده درخت آن را دور می اندازد. به همین دلیل، مطمئن شوید که فقط اجزای ورودی واقعی را برای کاهش اندازه بسته اضافه کنید.
-
+
-
-
What is Angular compiler?
+What is Angular compiler?
کامپایلر Angular برای تبدیل کد برنامه به کد جاوا اسکریپت استفاده می شود. نشانگذاری الگو را میخواند، آن را با کد کلاس مؤلفه مربوطه ترکیب میکند و کارخانههای مؤلفه را منتشر میکند که نمایش جاوا اسکریپت مؤلفه را همراه با عناصر فراداده @Component ایجاد میکند.
-
+
-
-
What is the role of ngModule metadata in compilation process?
+What is the role of ngModule metadata in compilation process?
ابرداده @NgModule برای اینکه به کامپایلر Angular بگوید چه اجزایی برای این ماژول کامپایل شود و چگونه این ماژول را با ماژولهای دیگر پیوند دهد استفاده میشود.
-
+
-
-
How does angular finds components, directives and pipes?
+How does angular finds components, directives and pipes?
کامپایلر Angular زمانی یک کامپوننت یا دستورالعمل را در قالب پیدا می کند که بتواند با انتخابگر آن کامپوننت یا دستورالعمل در آن الگو مطابقت داشته باشد. در حالی که اگر نام لوله در سینتکس لوله قالب HTML ظاهر شود، یک لوله پیدا می کند.
-
+
-
-
Give few examples for NgModules?
+Give few examples for NgModules?
کتابخانه های اصلی زاویه ای و کتابخانه های شخص ثالث به عنوان ngmodules در دسترس هستند.
-- کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند.
-- بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند.
+کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند.
بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند.
-
+
-
-
What are feature modules?
+What are feature modules?
ماژول های ویژگی Ngmodules هستند که به منظور سازماندهی کد استفاده می شوند. ماژول ویژگی را می توان با استفاده از دستور زیر در فهرست root با Angular CLI ایجاد کرد ،
ng generate module MyCustomFeature //
@@ -4909,19 +5150,19 @@ What are feature modules?
export class MyCustomFeature { }
Note: پسوند "ماژول" نباید در این نام وجود داشته باشد زیرا CLI آن را ضمیمه می کند.
-
+
-
-
What are the imported modules in CLI generated feature modules?
+What are the imported modules in CLI generated feature modules?
در ماژول ویژگی CLI تولید شده ، دو بیانیه واردات JavaScript در بالای پرونده وجود دارد
-- NgModule: برای استفاده از دکوراتور `@ngmodule '
-- CommonModule: این دستورالعمل های متداول بسیاری مانند "ngif" و "ngfor" را ارائه می دهد.
+NgModule: برای استفاده از دکوراتور `@ngmodule '
CommonModule: این دستورالعمل های متداول بسیاری مانند "ngif" و "ngfor" را ارائه می دهد.
-
+
-
-
What are the differences between ngmodule and javascript module?
+What are the differences between ngmodule and javascript module?
در زیر تفاوت های اصلی بین Ngmodule زاویه ای و ماژول JavaScript وجود دارد:
@@ -4949,47 +5190,47 @@ What are the differences between ngmodule and javascript module?
-
+
-
-
What are the possible errors with declarations?
+What are the possible errors with declarations?
دو خطای احتمالی متداول با آرایه اعلامیه وجود دارد:
-- اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند.
-- اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند.
+اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند.
اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند.
-
+
-
-
What are the steps to use declaration elements?
+What are the steps to use declaration elements?
در زیر مراحل لازم برای استفاده از عناصر اعلامیه وجود دارد.
-- عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید
-- آن را به ماژول مناسب وارد کنید.
-- آن را در آرایه اعلامیه ngmodule اعلام کنید.
+عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید
آن را به ماژول مناسب وارد کنید.
آن را در آرایه اعلامیه ngmodule اعلام کنید.
-
+
-
-
What happens if browserModule used in feature module?
+What happens if browserModule used in feature module?
اگر "BrowserModule" را به یک ماژول ویژگی بارگذاری شده تنبل وارد می کنید ، Angular خطایی را برمی گرداند که به شما می گوید در عوض از "CommonModule" استفاده کنید. از آنجا که ارائه دهندگان BrowserModule برای کل برنامه هستند ، بنابراین فقط باید در ماژول ریشه باشد ، نه در ماژول ویژگی. در حالی که ماژول های ویژگی فقط به دستورالعمل های مشترک در Commodule نیاز دارند.
-
+
-
-
What are the types of feature modules?
+What are the types of feature modules?
در زیر پنج دسته ماژول های ویژگی ،
-- ** دامنه: ** یک تجربه کاربر اختصاص داده شده به یک دامنه برنامه خاص (به عنوان مثال ، سفارش ، ثبت نام و غیره را قرار دهید)
-- ** مسیریابی: ** اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند.
-- ** مسیریابی: ** پیکربندی مسیریابی را برای ماژول دیگر فراهم می کند.
-- ** سرویس: ** این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (به عنوان مثال ، httpclientmodule)
-- ** ویجت: ** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (به عنوان مثال ، کتابخانه های شخص ثالث مانند UI مواد)
+** دامنه: ** یک تجربه کاربر اختصاص داده شده به یک دامنه برنامه خاص (به عنوان مثال ، سفارش ، ثبت نام و غیره را قرار دهید)
** مسیریابی: ** اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند.
** مسیریابی: ** پیکربندی مسیریابی را برای ماژول دیگر فراهم می کند.
** سرویس: ** این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (به عنوان مثال ، httpclientmodule)
** ویجت: ** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (به عنوان مثال ، کتابخانه های شخص ثالث مانند UI مواد)
-
+
-
-
What is a provider?
+What is a provider?
ارائه دهنده دستورالعمل سیستم تزریق وابستگی در مورد چگونگی به دست آوردن ارزش برای وابستگی (خدمات با نام مستعار ایجاد شده) است. این سرویس را می توان با استفاده از Angular CLI به شرح زیر ارائه داد:
ng generate service my-service
@@ -5005,18 +5246,18 @@ What is a provider?
export class MyService {
}
-
+
-
-
What is the recommendation for provider scope?
+What is the recommendation for provider scope?
شما همیشه باید خدمات خود را در انژکتور ریشه ارائه دهید مگر اینکه موردی وجود داشته باشد که بخواهید این سرویس فقط در صورت وارد کردن یک ngmodule خاص در دسترس باشد.
-
+
-
-
How do you restrict provider scope to a module?
+How do you restrict provider scope to a module?
به جای آن می توان دامنه ارائه دهنده خدمات را به یک ماژول خاص محدود کرد و به جای آن در دسترس کل برنامه قرار گرفت. دو روش ممکن برای انجام آن وجود دارد.
-- Using providedIn in service:
+Using providedIn in service:
import { Injectable } from '@angular/core';
@@ -5029,7 +5270,7 @@ How do you restrict provider scope to a module?
}
-- Declare provider for the service in module:
+Declare provider for the service in module:
import { NgModule } from '@angular/core';
@@ -5042,13 +5283,13 @@ How do you restrict provider scope to a module?
export class SomeModule {
}
-
+
-
-
How do you provide a singleton service?
+How do you provide a singleton service?
دو روش ممکن برای ارائه یک سرویس مجرد وجود دارد.
-- ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند.
+ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند.
import { Injectable } from '@angular/core';
@@ -5060,7 +5301,7 @@ How do you provide a singleton service?
}
-- سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
+سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
@NgModule({
@@ -5069,25 +5310,25 @@ How do you provide a singleton service?
// ...
})
-
+
-
-
What are the different ways to remove duplicate service registration?
+What are the different ways to remove duplicate service registration?
اگر یک ماژول تعریف و اعلامیه ها را تعریف کند ، بارگیری ماژول در ماژول های چند ویژگی ، ثبت نام سرویس را کپی می کند. در زیر روشهای مختلفی برای جلوگیری از این رفتار تکراری آورده شده است.
-- به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید.
-- خدمات خود را در ماژول خود جدا کنید.
-- روشهای Forroot () و Forchild () را در ماژول تعریف کنید.
+به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید.
خدمات خود را در ماژول خود جدا کنید.
روشهای Forroot () و Forchild () را در ماژول تعریف کنید.
-
+
-
-
How does forRoot method helpful to avoid duplicate router instances?
+How does forRoot method helpful to avoid duplicate router instances?
اگر ماژول «Routermodule» روش استاتیک Forroot () ندارد ، هر ماژول ویژگی یک نمونه روتر جدید را فوری می کند ، که به دلیل موارد تکراری منجر به کاربرد شکسته می شود. پس از استفاده از روش forroot () ، ماژول برنامه root routermodule.forroot (...) را وارد می کند و روتر می شود و همه ماژول های ویژگی واردات routermodule.forchild (...) که روتر دیگری را فوری نمی کند.
-
+
-
-
What is a shared module?
+What is a shared module?
ماژول مشترک ماژولی است که در آن دستورالعمل ها ، لوله ها و اجزای متداول را در یک ماژول که به اشتراک گذاشته شده است (وارد می کنید) در طول برنامه قرار دهید.
به عنوان مثال ، ماژول مشترک زیر واردات متداول ، formsmodule برای دستورالعمل های مشترک و مؤلفه ها ، لوله ها و دستورالعمل ها بر اساس نیاز ،
@@ -5106,15 +5347,15 @@ What is a shared module?
})
export class SharedModule { }
-
+
-
-
Can I share services using modules?
+Can I share services using modules?
نه ، توصیه نمی شود با وارد کردن ماژول خدمات را به اشتراک بگذارید. یعنی ماژول ها را وارد کنید وقتی می خواهید فقط از دستورالعمل ها ، لوله ها و مؤلفه ها استفاده کنید. بهترین روش برای به دست آوردن خدمات مشترک از طریق "تزریق وابستگی زاویه ای" است زیرا وارد کردن یک ماژول منجر به یک نمونه خدمات جدید خواهد شد.
-
+
-
-
How do you get current direction for locales?
+How do you get current direction for locales?
در زاویه 9.1 ، می توان از روش API "getLocalEdirection" برای به دست آوردن جهت فعلی در برنامه خود استفاده کرد. این روش برای پشتیبانی از مناطق راست به چپ برای برنامه های مبتنی بر بین المللی شما مفید است.
import { getLocaleDirection, registerLocaleData } from '@angular/common';
@@ -5131,10 +5372,10 @@ How do you get current direction for locales?
// Current direction is used to provide conditional logic here
}
-
+
-
-
What is ngcc?
+What is ngcc?
NGCC (کامپایلر سازگاری زاویه ای) ابزاری است که Node_Module را با NDEDULE با NDIV NGC به قالب سازگار با پیچک ساخته می کند. اسکریپت postinstall از pack.json مطمئن خواهد شد که node_modules شما با رندر پیچک سازگار خواهد بود.
"scripts": {
@@ -5142,31 +5383,31 @@ What is ngcc?
}
Whereas, Ivy compiler (ngtsc), which compiles Ivy-compatible code.
-
+
-
-
What classes should not be added to declarations?
+What classes should not be added to declarations?
انواع کلاس زیر نباید به اعلامیه ها اضافه شود
-- کلاس که قبلاً در هر ماژول دیگری اعلام شده است.
-- دستورالعمل های وارد شده از یک ماژول دیگر.
-- کلاس های ماژول.
-- کلاسهای خدمات.
-- کلاس ها و اشیاء غیر حرکتی ، مانند رشته ها ، اعداد ، توابع ، مدل های موجودیت ، تنظیمات ، منطق تجارت و کلاس های یاور.
+کلاس که قبلاً در هر ماژول دیگری اعلام شده است.
دستورالعمل های وارد شده از یک ماژول دیگر.
کلاس های ماژول.
کلاسهای خدمات.
کلاس ها و اشیاء غیر حرکتی ، مانند رشته ها ، اعداد ، توابع ، مدل های موجودیت ، تنظیمات ، منطق تجارت و کلاس های یاور.
-
+
-
-
What is NgZone?
+What is NgZone?
Angular خدماتی به نام NGZONE را ارائه می دهد که منطقه ای به نام "Angular" ایجاد می کند تا در صورت رضایت از شرایط زیر ، به طور خودکار تشخیص تغییر را ایجاد کند.
-- هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود.
-- هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است.
+هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود.
هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است.
-
+
-
-
What is NoopZone?
+What is NoopZone?
منطقه به طور پیش فرض در برنامه های زاویه ای بارگیری و مورد نیاز است و به زاویه کمک می کند تا بداند چه موقع باعث تشخیص تغییر می شود. به این ترتیب ، این باعث می شود که توسعه دهندگان Sures روی توسعه برنامه و نه اصلی ترین قسمت زاویه ای متمرکز شوند. همچنین می توانید از Angular بدون منطقه استفاده کنید اما تشخیص تغییر باید به تنهایی اجرا شود و «Zone Zone» باید در فرآیند bootstrap پیکربندی شود.
@@ -5199,20 +5440,20 @@ What is NoopZone?
-
-
How do you create displayBlock components?
+How do you create displayBlock components?
به طور پیش فرض ، Angular CLI مؤلفه هایی را در یک حالت نمایش داده شده درون خطی ایجاد می کند (یعنی صفحه نمایش: درون خطی). اما ایجاد مؤلفه هایی با نمایشگر امکان پذیر است: سبک بلوک با استفاده از گزینه "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.
-
+
-
-
What are the possible data update scenarios for change detection?
+What are the possible data update scenarios for change detection?
تشخیص تغییر در سناریوهای زیر کار می کند که در آن داده ها برای به روزرسانی برنامه HTML نیاز دارند.
-- ** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود
ApplicationRef.tick () برای تماس با تشخیص تغییر و مشاهده.
-- ** شنونده رویداد: ** شنونده رویداد DOM می تواند داده ها را در یک مؤلفه زاویه ای به روز کند و باعث تغییر در تغییر نیز شود.
+** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود ApplicationRef.tick () برای تماس با تشخیص تغییر و مشاهده.
** شنونده رویداد: ** شنونده رویداد DOM می تواند داده ها را در یک مؤلفه زاویه ای به روز کند و باعث تغییر در تغییر نیز شود.
@Component({
@@ -5230,7 +5471,7 @@ What are the possible data update scenarios for change detection?
}
-- HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
+HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
data = 'default value';
@@ -5243,7 +5484,7 @@ What are the possible data update scenarios for change detection?
}
-- Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
+Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
data = 'default value';
@@ -5255,7 +5496,7 @@ What are the possible data update scenarios for change detection?
}
-- Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید
+Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید
data = 'initial value';
@@ -5267,12 +5508,12 @@ What are the possible data update scenarios for change detection?
}
-- Async operations like Web sockets and Canvas: داده ها را می توان به صورت ناهمزمان با استفاده از websocket.onmessage () و canvas.toblob () به روز کرد.
+Async operations like Web sockets and Canvas: داده ها را می توان به صورت ناهمزمان با استفاده از websocket.onmessage () و canvas.toblob () به روز کرد.
-
+
-
-
What is a zone context?
+What is a zone context?
زمینه اجرای یک مفهوم انتزاعی است که اطلاعات مربوط به محیط را در کد فعلی اجرا می کند. یک منطقه زمینه اعدام را فراهم می کند که در عملیات ناهمزمان ادامه می یابد ، به عنوان زمینه منطقه خوانده می شود. به عنوان مثال ، زمینه منطقه در عملکرد برگشت به تماس در خارج و داخل SettimeOut یکسان خواهد بود ،
zone.run(() => {
@@ -5285,13 +5526,13 @@ What is a zone context?
});
The current zone is retrieved through Zone.current.
-
+
-
-
What are the lifecycle hooks of a zone?
+What are the lifecycle hooks of a zone?
چهار قلاب چرخه عمر برای عملیات ناهمزمان از Zone.js. وجود دارد.
-- onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید ()
+onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید ()
onScheduleTask: function(delegate, curr, target, task) {
@@ -5300,7 +5541,7 @@ What are the lifecycle hooks of a zone?
}
-- onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
+onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) {
@@ -5309,7 +5550,7 @@ What are the lifecycle hooks of a zone?
}
-- onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند.
+onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند.
onHasTask: function(delegate, curr, target, hasTaskState) {
@@ -5318,7 +5559,7 @@ What are the lifecycle hooks of a zone?
}
-- onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود.
+onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود.
onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) {
@@ -5326,10 +5567,10 @@ What are the lifecycle hooks of a zone?
return delegate.invoke(target, callback, applyThis, applyArgs);
}
-
+
-
-
What are the methods of NgZone used to control change detection?
+What are the methods of NgZone used to control change detection?
سرویس NGZONE یک روش `run () را ارائه می دهد که به شما امکان می دهد عملکردی را در داخل منطقه زاویه ای اجرا کنید. این عملکرد برای اجرای API های شخص ثالث که توسط منطقه اداره نمی شوند و باعث تشخیص تغییر خودکار در زمان صحیح می شوند ، استفاده می شود.
export class AppComponent implements OnInit {
@@ -5358,10 +5599,10 @@ What are the methods of NgZone used to control change detection?
}
}
-
+
-
-
How do you change the settings of zonejs?
+How do you change the settings of zonejs?
شما می توانید با پیکربندی آنها در یک پرونده جداگانه ، تنظیمات منطقه را تغییر داده و درست پس از واردات Zonejs وارد کنید.
به عنوان مثال ، شما می توانید Patch Monkey RequestAnimationFrame () را غیرفعال کنید تا از تغییر برای به روزرسانی داده به عنوان یک تنظیم جلوگیری کنید و از وقایع DOM (یک رویداد Mousemove یا Scroll) جلوگیری کنید تا تغییر تغییر را ایجاد کند. بیایید بگوییم پرونده جدید به نام Zone-flags.js ،
@@ -5379,10 +5620,10 @@ How do you change the settings of zonejs?
import `./zone-flags`;
import 'zone.js/dist/zone'; // Included with Angular CLI.
-
+
-
-
How do you trigger an animation?
+How do you trigger an animation?
Angular یک عملکرد "ماشه ()" برای انیمیشن را به منظور جمع آوری حالت ها و انتقال با یک نام انیمیشن خاص فراهم می کند تا بتوانید آن را به عنصر تحریک در الگوی HTML وصل کنید. این عملکرد را برای تغییرات تماشا می کند و هنگام تغییر ، اقدامات را آغاز می کند.
به عنوان مثال ، بیایید Trigger به نام "Updown" ایجاد کنیم و آن را به عنصر دکمه وصل کنیم.
@@ -5421,25 +5662,25 @@ How do you trigger an animation?
}
-
+
-
-
How do you configure injectors with providers at different levels?
+How do you configure injectors with providers at different levels?
با تعیین مقدار ابرداده می توانید انژکتورها را با ارائه دهندگان در سطوح مختلف برنامه خود پیکربندی کنید. پیکربندی می تواند در یکی از سه مکان اتفاق بیفتد ،
-- In the
@Injectable() decorator for the service itself
-- In the
@NgModule() decorator for an NgModule
-- In the
@Component() decorator for a component
+In the @Injectable() decorator for the service itself
In the @NgModule() decorator for an NgModule
In the @Component() decorator for a component
-
+
-
-
Is it mandatory to use injectable on every service class?
+Is it mandatory to use injectable on every service class?
نه. اگر کلاس دارای دکوراتورهای زاویه ای دیگری بر روی آن باشد یا هیچ وابستگی نداشته باشد ، دکوراتور injectable () `injectable () لازم نیست. اما نکته مهم در اینجا هر کلاس است که با زاویه تزریق می شود تزئین شده است.
یعنی اگر دکوراتور را اضافه کنیم ، ابرداده "طراحی: پارامترها" اضافه می شود ، و تزریق وابستگی می تواند کار خود را انجام دهد. این دلیل دقیق اضافه کردن دکوراتور injectable () در یک سرویس در صورتی است که این سرویس دارای برخی وابستگی ها باشد.
به عنوان مثال ، بیایید تغییرات مختلف AppService را در یک جزء ریشه مشاهده کنیم ،
-- AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد.
+AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد.
export class AppService {
@@ -5449,7 +5690,7 @@ Is it mandatory to use injectable on every service class?
}
-- AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود.
+AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود.
function SomeDummyDecorator() {
@@ -5478,7 +5719,7 @@ Is it mandatory to use injectable on every service class?
exports.AppService = AppService;
-- AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود.
+AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود.
@Injectable({
@@ -5490,10 +5731,10 @@ Is it mandatory to use injectable on every service class?
}
}
-
+
-
-
What is an optional dependency?
+What is an optional dependency?
وابستگی اختیاری یک دکوراتور پارامتر است که در پارامترهای سازنده مورد استفاده قرار می گیرد ، که این پارامتر را به عنوان یک وابستگی اختیاری نشان می دهد. به همین دلیل ، در صورت عدم یافتن وابستگی ، چارچوب DI تهی را تهی می کند.
به عنوان مثال ، اگر شما یک ارائه دهنده logger را در هیچ کجا ثبت نکنید ، انژکتور مقدار logger (یا سرویس logger) را در کلاس زیر تنظیم می کند.
@@ -5507,22 +5748,22 @@ What is an optional dependency?
}
}
-
+
-
-
What are the types of injector hierarchies?
+What are the types of injector hierarchies?
There are two types of injector hierarchies in Angular
-- ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند.
-- **ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید.
+ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند.
**ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید.
-
+
-
-
What are reactive forms?
+What are reactive forms?
فرم های واکنشی یک رویکرد مدل محور برای ایجاد فرم ها به سبک واکنشی است (ورودی های فرم با گذشت زمان تغییر می کنند). اینها در اطراف جریانهای قابل مشاهده ساخته شده اند ، جایی که ورودی ها و مقادیر فرم به عنوان جریان مقادیر ورودی ارائه می شوند. بیایید مراحل زیر را برای ایجاد فرم های واکنشی دنبال کنیم ،
-- ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند
+ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند
import { ReactiveFormsModule } from '@angular/forms';
@@ -5536,7 +5777,7 @@ What are reactive forms?
export class AppModule { }
-- یک نمونه جدید FormControl ایجاد کنید و آن را در مؤلفه ذخیره کنید.
+یک نمونه جدید FormControl ایجاد کنید و آن را در مؤلفه ذخیره کنید.
import { Component } from '@angular/core';
@@ -5551,7 +5792,7 @@ What are reactive forms?
}
-- FormControl را در الگوی ثبت کنید.
+FormControl را در الگوی ثبت کنید.
<label>
@@ -5578,19 +5819,19 @@ What are reactive forms?
userName = new FormControl('');
}
-
+
-
-
What are dynamic forms?
+What are dynamic forms?
فرم های پویا الگویی است که در آن ما یک فرم را به صورت پویا بر اساس ابرداده می سازیم که یک مدل شی تجاری را توصیف می کند. می توانید آنها را بر اساس API فرم واکنشی ایجاد کنید.
-
+
-
-
What are template driven forms?
+What are template driven forms?
فرم های محور الگوی فرم های مدل محور هستند که در آن می نویسید که منطق ، اعتبار سنجی ، کنترل و غیره را در قسمت الگوی کد با استفاده از دستورالعمل ها می نویسید. آنها برای سناریوهای ساده مناسب هستند و از اتصال دو طرفه با نحو [(ngmodel)] استفاده می کنند.
به عنوان مثال ، می توانید با دنبال کردن مراحل ساده زیر ، فرم ثبت را به راحتی ایجاد کنید ،
-- FormsModule را در آرایه واردات ماژول برنامه وارد کنید
+FormsModule را در آرایه واردات ماژول برنامه وارد کنید
import { BrowserModule } from '@angular/platform-browser';
@@ -5612,7 +5853,7 @@ What are template driven forms?
export class AppModule { }
-- با استفاده از نحو ngmodel فرم را از الگوی به مؤلفه وصل کنید
+با استفاده از نحو ngmodel فرم را از الگوی به مؤلفه وصل کنید
<input type="text" class="form-control" id="name"
@@ -5620,13 +5861,13 @@ What are template driven forms?
[(ngModel)]="model.name" name="name">
-- برای ایجاد نمونه های FormControl و ثبت آنها ، دستورالعمل NGFORM را به برچسب
+برای ایجاد نمونه های FormControl و ثبت آنها ، دستورالعمل NGFORM را به برچسب
<form #registerForm="ngForm">
-- پیام اعتبار سنجی را برای کنترل فرم اعمال کنید
+پیام اعتبار سنجی را برای کنترل فرم اعمال کنید
<label for="name">Name</label>
@@ -5640,7 +5881,7 @@ What are template driven forms?
</div>
-- بیایید فرم را با دستورالعمل ngsubmit ارسال کنیم و دکمه نوع = "ارسال" را در پایین فرم اضافه کنیم تا فرم ارسال شود.
+بیایید فرم را با دستورالعمل ngsubmit ارسال کنیم و دکمه نوع = "ارسال" را در پایین فرم اضافه کنیم تا فرم ارسال شود.
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
@@ -5667,10 +5908,10 @@ What are template driven forms?
</form>
</div>
-
+
-
-
What are the differences between reactive forms and template driven forms?
+What are the differences between reactive forms and template driven forms?
در زیر تفاوت های اصلی بین اشکال واکنشی و فرم های محور الگو وجود دارد
@@ -5688,10 +5929,10 @@ What are the differences between reactive forms and template driven forms?
-
-
What are the different ways to group form controls?
+What are the different ways to group form controls?
اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد.
-- ** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
+** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
این فرم گروه می تواند برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.
@@ -5760,7 +6001,7 @@ What are the different ways to group form controls?
</form>
-- ** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
+** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
import { Component } from '@angular/core';
@@ -5823,10 +6064,10 @@ What are the different ways to group form controls?
</div>
</form>
-
+
-
-
How do you update specific properties of a form model?
+How do you update specific properties of a form model?
برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می توانید از روش `patchValue () استفاده کنید. به عنوان مثال ، می توانید نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.
updateProfile() {
@@ -5843,10 +6084,10 @@ How do you update specific properties of a form model?
You can also use setValue method to update properties.
Note: Remember to update the properties against the exact model structure.
-
+
-
-
What is the purpose of FormBuilder?
+What is the purpose of FormBuilder?
FormBuilder به عنوان شکر نحوی برای ایجاد آسان نمونه هایی از یک فرمل ، فرم گروه یا فرم آررای استفاده می شود. این برای کاهش میزان دیگ بخار مورد نیاز برای ساخت اشکال واکنشی پیچیده مفید است. این به عنوان یک کلاس یاور تزریقی بسته `@angular/forms" در دسترس است.
For example, the user profile component creation becomes easier as shown here.
@@ -5864,10 +6105,10 @@ What is the purpose of FormBuilder?
constructor(private formBuilder: FormBuilder) { }
}
-
+
-
-
How do you verify the model changes in forms?
+How do you verify the model changes in forms?
شما می توانید یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.
export class UserProfileComponent {
@@ -5885,10 +6126,10 @@ How do you verify the model changes in forms?
// FormControls goes here
</div>
-
+
-
-
What are the state CSS classes provided by ngModel?
+What are the state CSS classes provided by ngModel?
دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS زاویه ای به روز می کند تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،
@@ -5916,10 +6157,10 @@ What are the state CSS classes provided by ngModel?
-
+
-
-
How do you reset the form?
+How do you reset the form?
در یک فرم مدل محور ، می توانید فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید.
@@ -5944,11 +6185,11 @@ How do you reset the form?
-
-
What are the types of validator functions?
+What are the types of validator functions?
در اشکال واکنشی ، اعتبار سنج ها می توانند توابع همزمان یا ناهمزمان باشند ،
-- ** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
-- ** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
+** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
The representation of these validators looks like below
@@ -5958,10 +6199,10 @@ What are the types of validator functions?
email: ['value', *Some validation function*, *Some asynchronous validation function*]
});
-
+
-
-
Can you give an example of built-in validators?
+Can you give an example of built-in validators?
n فرم های واکنشی ، می توانید از اعتبار سنجی داخلی مانند "مورد نیاز" و "minl طول" در کنترل فرم ورودی خود استفاده کنید. به عنوان مثال ، فرم ثبت نام می تواند این اعتبار سنج ها را در قسمت ورودی نام داشته باشد
this.registrationForm = new FormGroup({
@@ -5972,28 +6213,28 @@ Can you give an example of built-in validators?
});
در حالی که در فرم های الگوی محور ، هر دو اعتبار سنجی «مورد نیاز» و `minl طول به عنوان ویژگی ها موجود است.
-
+
-
-
How do you optimize the performance of async validators?
+How do you optimize the performance of async validators?
از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا می شوند ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد می کند. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
استفاده بر اساس انواع فرم متفاوت خواهد بود.
-- Template-driven forms: Set the property on
ngModelOptions directive
+Template-driven forms: Set the property on ngModelOptions directive
<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
-- Reactive-forms: Set the property on FormControl instance
+Reactive-forms: Set the property on FormControl instance
name = new FormControl('', {updateOn: 'blur'});
-
+
-
-
How to set ngFor and ngIf on the same element?
+How to set ngFor and ngIf on the same element?
بعضی اوقات ممکن است شما نیاز به NGFOR و NGIF در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید.
Template parse errors: Can't have multiple template bindings on one element.
@@ -6013,10 +6254,10 @@ How to set ngFor and ngIf on the same element?
</ul>
</ng-container>
-
+
-
-
What is host property in css?
+What is host property in css?
از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده می شود. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی توانید از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
به عنوان مثال ، شما می توانید یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،
@@ -6028,19 +6269,19 @@ What is host property in css?
padding: 20px;
}
-
+
-
-
How do you get the current route?
+How do you get the current route?
در Angular ، یک ویژگی url از بسته روتر برای رسیدن به مسیر فعلی وجود دارد. شما باید چند مرحله زیر را دنبال کنید ،
-- Import Router from @angular/router
+Import Router from @angular/router
import { Router } from '@angular/router';
-- Inject router inside constructor
+Inject router inside constructor
constructor(private router: Router ) {
@@ -6048,32 +6289,32 @@ How do you get the current route?
}
-- Access url parameter
+Access url parameter
console.log(this.router.url); // /routename
-
+
-
-
What is Component Test Harnesses?
+What is Component Test Harnesses?
مهار مؤلفه یک API آزمایش در اطراف یک دستورالعمل یا مؤلفه زاویه ای است تا با مخفی کردن جزئیات اجرای از مجموعه های آزمایش ، تست ها را ساده تر کند. این می تواند بین تست های واحد ، تست های ادغام و تست های پایان به پایان به اشتراک گذاشته شود. ایده برای مهارهای مؤلفه از الگوی ** pageObject ** که معمولاً برای آزمایش ادغام استفاده می شود ، حاصل می شود.
-
+
-
-
What is the benefit of Automatic Inlining of Fonts?
+What is the benefit of Automatic Inlining of Fonts?
در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده می کند ، بارگیری و درون خطی می کند. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال می شود.
-
+
-
-
What is content projection?
+What is content projection?
طرح ریزی محتوا الگویی است که در آن شما محتوای مورد نظر خود را در داخل یک مؤلفه دیگر وارد می کنید یا پروژه می کنید.
-
+
-
-
What is ng-content and its purpose?
+What is ng-content and its purpose?
از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده می شود که به افزایش قابلیت استفاده مجدد مؤلفه کمک می کند.
-
+
diff --git a/Book.md b/Book.md
index 21a4a7f..6348cc6 100644
--- a/Book.md
+++ b/Book.md
@@ -135,26 +135,26 @@ puppeteer:
|88| [macros چیه؟](#1)|
|89| [چن تا مثال از ارور های مربوط به metatdata بزن؟](#1)|
|90| [منظور از metadata rewriting چیه؟](#1)|
-|91| [How do you provide configuration inheritance?](#1)|
-|92| [How do you specify angular template compiler options?](#1)|
-|93| [How do you enable binding expression validation?](#1)|
-|94| [What is the purpose of any type cast function?](#1)|
-|95| [What is Non null type assertion operator?](#1)|
-|96| [What is type narrowing?](#1)|
-|97| [How do you describe various dependencies in angular application?](#1)|
-|98| [What is zone?](#1)|
-|99| [What is the purpose of common module?](#1)|
-|100| [What is codelyzer?](#1)|
-|101| [What is angular animation?](#1)|
-|102| [What are the steps to use animation module?](#1)|
-|103| [What is State function?](#1)|
-|104| [What is Style function?](#1)|
-|105| [What is the purpose of animate function?](#1)|
-|106| [What is transition function?](#1)|
-|107| [How to inject the dynamic script in angular?](#1)|
-|108| [What is a service worker and its role in Angular?](#1)|
-|109| [What are the design goals of service workers?](#1)|
-|110| [What are the differences between AngularJS and Angular with respect to dependency injection?](#1)|
+|91| [توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟](#1)|
+|92| [چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟](#1)|
+|93| [چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟](#1)|
+|94| [هدف از any type توی cast function چیه؟](#1)|
+|95| [non null تایپ ](#1)|
+|96| [منظور از type narrowing چیه؟](#1)|
+|97| [چطوری dependency های مختلف توی انگولار تعریف میکنی؟](#1)|
+|98| [zone توی انگولار چیه؟](#1)|
+|99| [هدف از ماژول مشترک توی انگولار چیه؟](#1)|
+|100| [codelyzer چیه؟](#1)|
+|101| [angular animation چیه؟](#1)|
+|102| [مراحل استفاده از ماژول های animation چیه؟](#1)|
+|103| تابع state چیه؟](#1)|
+|104| [هدف از تابع style چیه؟](#1)|
+|105| [هدف از تابع animate چیه؟](#1)|
+|106| [تابع transition چیه؟](#1)|
+|107| [چطوری کد های dynamاسکریپت های)| رو توی کدمون وارد کنیم؟
+|108| [service worker چیه و نقشش توی انگولار چیه؟](#1)|
+|109| [اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟](#1)|
+|110| [تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟](#1)|
|111| [What is Angular Ivy?](#1)|
|112| [What are the features included in ivy preview?](#1)|
|113| [Can I use AOT compilation with Ivy?](#1)|
@@ -2319,7 +2319,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-91. ### How do you provide configuration inheritance?
+91. ### توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.
@@ -2344,7 +2344,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-92. ### How do you specify angular template compiler options?
+92. ### چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
گزینه های کامپایلر قالب زاویه ای به عنوان اعضای شی **angularCompilerOptions** در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.
@@ -2368,7 +2368,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-93. ### How do you enable binding expression validation?
+93. ### چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
شما می توانید صریحاً با افزودن گزینه کامپایلر **fullTemplateTypeCheck** در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.
@@ -2401,7 +2401,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-94. ### What is the purpose of any type cast function?
+94. ### هدف از any type توی cast function چیه؟
می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
@@ -2425,7 +2425,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-95. ### What is Non null type assertion operator?
+95. ### اپراتور non null assertion چیه؟
برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
@@ -2452,7 +2452,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-96. ### What is type narrowing?
+96. ### منظور از type narrowing چیه؟
عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
@@ -2473,7 +2473,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-97. ### How do you describe various dependencies in angular application?
+97. ### چطوری dependency های مختلف توی انگولار تعریف میکنی؟
بخش وابستگی های package.json با در یک برنامه زاویه ای را می توان به صورت زیر تقسیم کرد:
@@ -2483,19 +2483,19 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-98. ### What is zone?
+98. ### zone توی انگولار چیه؟
Zone یک زمینه اجرایی است که در تمام وظایف ناهمگام باقی می ماند. هنگامی که عملیات جاوا اسکریپت بومی رویدادها را افزایش می دهد، Angular برای اجرای فرآیندهای تشخیص تغییر Angular به zone.js متکی است.
**[فهرست](#فهرست)**
-99. ### What is the purpose of common module?
+99. ### هدف از ماژول مشترک توی انگولار چیه؟
خدمات، لولهها و دستورالعملهای مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.
**[فهرست](#فهرست)**
-100. ### What is codelyzer?
+100. ### codelyzer چیه؟
Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.
@@ -2510,13 +2510,13 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-101. ### What is angular animation?
+101. ### angular animation چیه؟
سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگیها شامل موقعیتها، اندازهها، تبدیلها، رنگها، حاشیهها و غیره است. ماژولهای Angular برای انیمیشنها **@angular/animations** و **@angular/platform-browser** هستند و این وابستگیها به طور خودکار به پروژه شما اضافه میشوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
**[فهرست](#فهرست)**
-102. ### What are the steps to use animation module?
+102. ### مراحل استفاده از ماژول های animation چیه؟
برای پیاده سازی انیمیشن در پروژه زاویه ای خود باید مراحل زیر را دنبال کنید.
@@ -2581,7 +2581,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-103. ### What is State function?
+103. ### تابع state چیه؟
تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
@@ -2601,7 +2601,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-104. ### What is Style function?
+104. ### هدف از تابع style چیه؟
تابع style برای تعریف مجموعهای از سبکها برای مرتبط کردن با یک نام وضعیت استفاده میشود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
@@ -2623,7 +2623,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-105. ### What is the purpose of animate function?
+105. ### هدف از تابع animate چیه؟
انیمیشنهای Angular روشی قدرتمند برای پیادهسازی انیمیشنهای پیچیده و قانعکننده برای اپلیکیشن وب تک صفحهای Angular شما هستند.
@@ -2673,7 +2673,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-106. ### What is transition function?
+106. ### تابع transition چیه؟
تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.
@@ -2693,7 +2693,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-107. ### How to inject the dynamic script in angular?
+107. ### چطوری اسکریپت های dynamic رو توی کدمون وارد کنیم؟
با استفاده از DomSanitizer میتوانیم Html، Style، Script، Url پویا را تزریق کنیم.
@@ -2718,13 +2718,13 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-108. ### What is a service worker and its role in Angular?
+108. ### service worker چیه و نقشش توی انگولار چیه؟
Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
**[فهرست](#فهرست)**
-109. ### What are the design goals of service workers?
+109. ### اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
1. یک برنامه را مانند نصب یک برنامه بومی کش می کند
2. یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
@@ -2734,7 +2734,7 @@ event های مربوط به router چیا هستن؟events?
**[فهرست](#فهرست)**
-110. ### What are the differences between AngularJS and Angular with respect to dependency injection?
+110. ### تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟
تزریق وابستگی یک جزء مشترک در AngularJS و Angular است، اما تفاوتهای کلیدی بین این دو فریمورک در نحوه عملکرد واقعی آن وجود دارد.
فهر
فهر
فهر
فهر
فهر
-
-
فریمورک انگولار چیه؟
+فریمورک انگولار چیه؟
Angular یک پلتفرم فرانتاند منبع باز مبتنی بر TypeScript است که ساخت برنامهها را در وب/موبایل/کامپیوتر آسان میکند. از ویژگی های اصلی این فریم ورک مانند قالب های اعلامی، تزریق وابستگی، ابزارهای انتها به انتها و بسیاری ویژگی های دیگر برای سهولت توسعه استفاده می شود.
-
+
-
-
فرق بین انگولار و انگولار جی اس چیه؟
+فرق بین انگولار و انگولار جی اس چیه؟
Angular یک فریم ورک کاملاً احیا شده مبتنی بر مؤلفه است که در آن یک برنامه کاربردی درختی از اجزای جداگانه است.
@@ -1424,10 +1665,10 @@ فرق بین انگو
-
+
-
-
تایپ اسکریپت چیه؟
+تایپ اسکریپت چیه؟
TypeScript یک ابر مجموعه تایپ شده از جاوا اسکریپت است که توسط مایکروسافت ایجاد شده است که انواع اختیاری، کلاس ها، async/wait و بسیاری ویژگی های دیگر را اضافه می کند و به جاوا اسکریپت ساده کامپایل می کند. Angular به طور کامل در TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شود.
شما می توانید آن را به صورت جهانی نصب کنید
@@ -1444,27 +1685,27 @@ تایپ اسکریپb
document.body.innerHTML = greeter(user);
متد greeter فقط نوع رشته را به عنوان آرگومان مجاز می کند.
-
+
-
-
یه دیاگرام تصویری از ساختار انگولار بنویس؟
+یه دیاگرام تصویری از ساختار انگولار بنویس؟
بلوک های ساختمان اصلی یک برنامه Angular در نمودار زیر نشان داده شده است
-
+
-
-
کامپوننت های کلیدی انگولار کدوما هستن؟
+کامپوننت های کلیدی انگولار کدوما هستن؟
-- Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
-- Modules: یک ماژول زاویهای مجموعهای از بلوکهای ساختمانی پایه زاویهای مانند کامپوننت، دستورالعملها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم میشود و هر قطعه کد به عنوان "ماژول" نامیده میشود که یک وظیفه را انجام میدهد.
-- Templates: این نماهای یک برنامه Angular را نشان می دهد.
-- Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
-- Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
+Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
Modules: یک ماژول زاویهای مجموعهای از بلوکهای ساختمانی پایه زاویهای مانند کامپوننت، دستورالعملها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم میشود و هر قطعه کد به عنوان "ماژول" نامیده میشود که یک وظیفه را انجام میدهد.
Templates: این نماهای یک برنامه Angular را نشان می دهد.
Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
-
+
-
-
directives ها چیا هستن؟
+directives ها چیا هستن؟
directives ها رفتاری را به یک عنصر DOM موجود یا یک نمونه جزء موجود اضافه می کنند.
import { Directive, ElementRef, Input } from '@angular/core';
@@ -1480,10 +1721,10 @@ directives ها چیا هستن
<p myHighlight>Highlight me!</p>
-
+
-
-
کامپوننت ها چیا هستن؟
+کامپوننت ها چیا هستن؟
کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستند که درختی از اجزای Angular را تشکیل می دهند. این مؤلفه ها زیر مجموعه دستورالعمل ها هستند. برخلاف دستورات، کامپوننتها همیشه دارای یک الگو هستند و تنها یک جزء را میتوان به ازای هر عنصر در قالب نمونهسازی کرد.
بیایید یک مثال ساده از کامپوننت Angular را ببینیم
@@ -1501,10 +1742,10 @@ کامپوننت ها
title: string = 'Welcome to Angular world';
}
-
+
-
-
تفاوت های بین directive و کامپوننت چیه؟
+تفاوت های بین directive و کامپوننت چیه؟
در یک یادداشت کوتاه، A component(@component) یک دستورالعمل-با-الگو است.
برخی از تفاوت های عمده به صورت جدولی ذکر شده است
@@ -1537,10 +1778,10 @@ تفاوت های بی
-
+
-
-
template چیه؟
+template چیه؟
یک الگو یک نمای HTML است که در آن می توانید داده ها را با اتصال کنترل ها به ویژگی های یک جزء Angular نمایش دهید. می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید با استفاده از ویژگی template آن را به صورت درون خطی تعریف کنید، یا می توانید قالب را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl@Component decorator به آن در ابرداده کامپوننت پیوند دهید.
Using inline template with template syntax,
@@ -1573,10 +1814,10 @@ template چیه؟
title: string = 'Hello World';
}
-
+
-
-
ماژول چیه؟
+ماژول چیه؟
ماژول ها مرزهای منطقی در برنامه شما هستند و برنامه به ماژول های جداگانه تقسیم می شود تا عملکرد برنامه شما را از هم جدا کند.
بیایید مثالی از app.module.ts ماژول ریشه ای را که با دکوراتور @NgModule به شرح زیر اعلام شده است، بیاوریم.
@@ -1594,36 +1835,36 @@ ماژول چیه؟
دکوراتور NgModule پنج گزینه مهم (در میان همه) دارد
-- گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
-- گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
-- گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
-- گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
-- گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
+گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
-
+
-
-
lifecycle های مربوط به انگولار چیا هستن؟
+lifecycle های مربوط به انگولار چیا هستن؟
برنامه Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک چرخه حیات دارد.
نمایش چرخه حیات در نمایش تصویری به شرح زیر است:
-- ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.
-- ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.
-- ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.
-- ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.
-- ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.
-- ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.
-- ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.
-- ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.
+ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.
ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.
ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.
ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.
ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.
ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.
ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.
ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.
-
+
-
-
data binding چیه؟
+data binding چیه؟
Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM را فراهم می کند و تعریف برنامه های تعاملی را بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان می کند. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شود) که در نحوه جریان داده ها متفاوت است.
-- From the Component to the DOM:
+From the Component to the DOM:
Interpolation: {{ value }}: مقدار یک ویژگی را از جزء اضافه می کند
@@ -1648,13 +1889,13 @@ data binding چیه؟
<input type="email" [(ngModel)]="user.email">
-
+
-
-
What is metadata?
+What is metadata?
متادیتا برای تزئین یک کلاس استفاده می شود تا بتواند رفتار مورد انتظار کلاس را پیکربندی کند. ابرداده توسط دکوراتورها نمایش داده می شود
-- Class decorators, به عنوان مثال، @Component و @NgModule
+Class decorators, به عنوان مثال، @Component و @NgModule
import { NgModule, Component } from '@angular/core';
@@ -1681,7 +1922,7 @@ What is metadata?
}
-- Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
+Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
import { Component, Input } from '@angular/core';
@@ -1697,7 +1938,7 @@ What is metadata?
}
-- Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
+Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
import { Component, HostListener } from '@angular/core';
@@ -1714,7 +1955,7 @@ What is metadata?
}
-- Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
+Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
import { Component, Inject } from '@angular/core';
@@ -1730,10 +1971,10 @@ What is metadata?
}
}
-
+
-
-
Angular CLI چی هست؟
+Angular CLI چی هست؟
Angular CLI (** Command Line Interface**) یک رابط خط فرمان برای ساخت داربست و ساخت برنامه های زاویه ای با استفاده از ماژول های سبک nodejs (commonJs) است.
شما باید با استفاده از دستور زیر npm نصب کنید،
@@ -1748,23 +1989,23 @@ Angular CLI چی هست؟
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: یک سرویس به برنامه خود اضافه کنید
-
Running the Project: ng serve
-
+
فریمورک انگولار چیه؟
+فریمورک انگولار چیه؟
Angular یک پلتفرم فرانتاند منبع باز مبتنی بر TypeScript است که ساخت برنامهها را در وب/موبایل/کامپیوتر آسان میکند. از ویژگی های اصلی این فریم ورک مانند قالب های اعلامی، تزریق وابستگی، ابزارهای انتها به انتها و بسیاری ویژگی های دیگر برای سهولت توسعه استفاده می شود.
- +فرق بین انگولار و انگولار جی اس چیه؟
+فرق بین انگولار و انگولار جی اس چیه؟
Angular یک فریم ورک کاملاً احیا شده مبتنی بر مؤلفه است که در آن یک برنامه کاربردی درختی از اجزای جداگانه است.
تایپ اسکریپت چیه؟
+تایپ اسکریپت چیه؟
TypeScript یک ابر مجموعه تایپ شده از جاوا اسکریپت است که توسط مایکروسافت ایجاد شده است که انواع اختیاری، کلاس ها، async/wait و بسیاری ویژگی های دیگر را اضافه می کند و به جاوا اسکریپت ساده کامپایل می کند. Angular به طور کامل در TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شود.
شما می توانید آن را به صورت جهانی نصب کنید
تایپ اسکریپb document.body.innerHTML = greeter(user);
متد greeter فقط نوع رشته را به عنوان آرگومان مجاز می کند.
- +یه دیاگرام تصویری از ساختار انگولار بنویس؟
+یه دیاگرام تصویری از ساختار انگولار بنویس؟
بلوک های ساختمان اصلی یک برنامه Angular در نمودار زیر نشان داده شده است
کامپوننت های کلیدی انگولار کدوما هستن؟
+کامپوننت های کلیدی انگولار کدوما هستن؟
-
-
- Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند. -
- Modules: یک ماژول زاویهای مجموعهای از بلوکهای ساختمانی پایه زاویهای مانند کامپوننت، دستورالعملها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم میشود و هر قطعه کد به عنوان "ماژول" نامیده میشود که یک وظیفه را انجام میدهد. -
- Templates: این نماهای یک برنامه Angular را نشان می دهد. -
- Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند. -
- Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود. +
Component: اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
+Modules: یک ماژول زاویهای مجموعهای از بلوکهای ساختمانی پایه زاویهای مانند کامپوننت، دستورالعملها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم میشود و هر قطعه کد به عنوان "ماژول" نامیده میشود که یک وظیفه را انجام میدهد.
+Templates: این نماهای یک برنامه Angular را نشان می دهد.
+Services: برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
+Metadata: این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
directives ها چیا هستن؟
+directives ها چیا هستن؟
directives ها رفتاری را به یک عنصر DOM موجود یا یک نمونه جزء موجود اضافه می کنند.
import { Directive, ElementRef, Input } from '@angular/core'; @@ -1480,10 +1721,10 @@directives ها چیا هستن
+<p myHighlight>Highlight me!</p>-
کامپوننت ها چیا هستن؟
+کامپوننت ها چیا هستن؟
کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستند که درختی از اجزای Angular را تشکیل می دهند. این مؤلفه ها زیر مجموعه دستورالعمل ها هستند. برخلاف دستورات، کامپوننتها همیشه دارای یک الگو هستند و تنها یک جزء را میتوان به ازای هر عنصر در قالب نمونهسازی کرد.
بیایید یک مثال ساده از کامپوننت Angular را ببینیم
کامپوننت ها title: string = 'Welcome to Angular world'; }
- +تفاوت های بین directive و کامپوننت چیه؟
+تفاوت های بین directive و کامپوننت چیه؟
در یک یادداشت کوتاه، A component(@component) یک دستورالعمل-با-الگو است.
برخی از تفاوت های عمده به صورت جدولی ذکر شده است
template چیه؟
+template چیه؟
یک الگو یک نمای HTML است که در آن می توانید داده ها را با اتصال کنترل ها به ویژگی های یک جزء Angular نمایش دهید. می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید با استفاده از ویژگی template آن را به صورت درون خطی تعریف کنید، یا می توانید قالب را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl@Component decorator به آن در ابرداده کامپوننت پیوند دهید.
Using inline template with template syntax,
@@ -1573,10 +1814,10 @@template چیه؟
title: string = 'Hello World'; } - +ماژول چیه؟
+ماژول چیه؟
ماژول ها مرزهای منطقی در برنامه شما هستند و برنامه به ماژول های جداگانه تقسیم می شود تا عملکرد برنامه شما را از هم جدا کند.
بیایید مثالی از app.module.ts ماژول ریشه ای را که با دکوراتور @NgModule به شرح زیر اعلام شده است، بیاوریم.
ماژول چیه؟
دکوراتور NgModule پنج گزینه مهم (در میان همه) دارد
-
-
- گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است -
- گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود -
- گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند -
- گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود. -
- گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند. +
گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
+گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
+گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
+گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
+گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
lifecycle های مربوط به انگولار چیا هستن؟
+lifecycle های مربوط به انگولار چیا هستن؟
برنامه Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک چرخه حیات دارد.
نمایش چرخه حیات در نمایش تصویری به شرح زیر است:
-
-
- ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود. -
- ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود. -
- ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود. -
- ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود. -
- ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود. -
- ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود. -
- ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود. -
- ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است. +
ngOnChanges: هنگامی که مقدار یک ویژگی داده محدود تغییر می کند، این روش فراخوانی می شود.
+ngOnInit: هر زمان که مقداردهی اولیه دستور/کامپوننت پس از نمایش Angular برای اولین بار خصوصیات داده محدود اتفاق بیفتد، فراخوانی می شود.
+ngDoCheck: این برای تشخیص و اعمال تغییراتی است که Angular به تنهایی قادر به تشخیص آنها نیست یا نخواهد بود.
+ngAfterContentInit: پس از اینکه Angular محتوای خارجی را در نمای کامپوننت پروژه می دهد، در پاسخ به این امر فراخوانی می شود.
+ngAfterContentChecked: این در پاسخ پس از بررسی Angular محتوای پیش بینی شده در کامپوننت فراخوانی می شود.
+ngAfterViewInit: پس از اینکه Angular نماهای کامپوننت و نماهای فرزند را مقدار دهی اولیه کرد، در پاسخ فراخوانی می شود.
+ngAfterViewChecked: این در پاسخ پس از بررسی Angular نماهای کامپوننت و نماهای فرزند فراخوانی می شود.
+ngOnDestroy: این مرحله پاکسازی درست قبل از اینکه Angular دستور/کامپوننت را از بین ببرد است.
data binding چیه؟
+data binding چیه؟
Data binding یک مفهوم اصلی در Angular است و امکان تعریف ارتباط بین یک مؤلفه و DOM را فراهم می کند و تعریف برنامه های تعاملی را بدون نگرانی در مورد فشار دادن و کشیدن داده ها بسیار آسان می کند. چهار شکل اتصال داده وجود دارد (به 3 دسته تقسیم می شود) که در نحوه جریان داده ها متفاوت است.
-
-
- From the Component to the DOM: +
From the Component to the DOM:
Interpolation: {{ value }}: مقدار یک ویژگی را از جزء اضافه می کند
@@ -1648,13 +1889,13 @@data binding چیه؟
<input type="email" [(ngModel)]="user.email">
-
+
What is metadata?
+What is metadata?
متادیتا برای تزئین یک کلاس استفاده می شود تا بتواند رفتار مورد انتظار کلاس را پیکربندی کند. ابرداده توسط دکوراتورها نمایش داده می شود
-
-
- Class decorators, به عنوان مثال، @Component و @NgModule +
Class decorators, به عنوان مثال، @Component و @NgModule
import { NgModule, Component } from '@angular/core'; @@ -1681,7 +1922,7 @@What is metadata?
}
-
-
- Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export +
Property decorators برای ویژگی های داخل کلاس ها استفاده می شود، به عنوان مثال. @import و export
import { Component, Input } from '@angular/core'; @@ -1697,7 +1938,7 @@What is metadata?
}
-
-
- Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener +
Method decorators برای متدهای داخل کلاس ها استفاده می شود، به عنوان مثال. @HostListener
import { Component, HostListener } from '@angular/core'; @@ -1714,7 +1955,7 @@What is metadata?
}
-
-
- Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری +
Parameter decorators برای پارامترهای داخل سازنده کلاس استفاده می شود، به عنوان مثال. @Inject، اختیاری
import { Component, Inject } from '@angular/core'; @@ -1730,10 +1971,10 @@- +What is metadata?
} }
Angular CLI چی هست؟
+Angular CLI چی هست؟
Angular CLI (** Command Line Interface**) یک رابط خط فرمان برای ساخت داربست و ساخت برنامه های زاویه ای با استفاده از ماژول های سبک nodejs (commonJs) است.
شما باید با استفاده از دستور زیر npm نصب کنید،
Angular CLI چی هست؟
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: یک سرویس به برنامه خود اضافه کنید
Running the Project: ng serve
فرق بین constructor و ngOnInit چیه؟
+فرق بین constructor و ngOnInit چیه؟
کلاس های TypeScript دارای یک روش پیش فرض به نام سازنده است که معمولاً برای هدف اولیه استفاده می شود. در حالی که روش ngOnInit مختص Angular است، به ویژه برای تعریف اتصالات Angular استفاده می شود. حتی اگر سازنده ابتدا فراخوانی میشود، ترجیح داده میشود همه اتصالات Angular خود را به متد ngOnInit منتقل کنید.
برای استفاده از ngOnInit، باید رابط OnInit را به صورت زیر پیاده سازی کنید.
فرق بین constructor و ngOnInit &#x } }
- +service چیه؟
+service چیه؟
یک سرویس زمانی استفاده می شود که یک عملکرد مشترک باید به ماژول های مختلف ارائه شود. سرویسها به شما اجازه میدهند تا نگرانیهای مربوط به برنامه شما را بیشتر از هم جدا کرده و ماژولاریت بهتری داشته باشید، زیرا به شما امکان میدهد عملکردهای مشترک را از اجزا استخراج کنید.
بیایید یک repoService ایجاد کنیم که می تواند در بین اجزاء مورد استفاده قرار گیرد،
@@ -1802,19 +2043,19 @@service چیه؟
}سرویس فوق از سرویس Http به عنوان یک وابستگی استفاده می کند.
- +dependency injection توی انگولار یعنی چی؟
+dependency injection توی انگولار یعنی چی؟
تزریق وابستگی (DI)، یک الگوی طراحی برنامه مهم است که در آن یک کلاس به جای ایجاد وابستگی از منابع خارجی درخواست میکند. Angular با چارچوب تزریق وابستگی خود برای حل وابستگی ها (سرویس ها یا اشیایی که یک کلاس برای انجام عملکرد خود به آن نیاز دارد) ارائه می شود. بنابراین می توانید خدمات خود را در سراسر برنامه به سرویس های دیگر وابسته کنید.
- +ساختار Dependency توی انگولار چطوری چیده میشه؟
- +ساختار Dependency توی انگولار چطوری چیده میشه؟
+هدف از AsyncPipe چیه؟
+هدف از AsyncPipe چیه؟
AsyncPipe مشترک یک قابل مشاهده یا قول می شود و آخرین مقداری را که منتشر کرده است برمی گرداند. هنگامی که یک مقدار جدید منتشر می شود، لوله مؤلفه ای را که باید بررسی شود برای تغییرات علامت گذاری می کند.
بیایید یک زمان قابل مشاهده را در نظر بگیریم که به طور مداوم نما را برای هر 2 ثانیه با زمان فعلی به روز می کند.
@@ -1829,19 +2070,19 @@هدف از AsyncPipe چیه؟< ); }
- +بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
+بین فایل template داخلی و خارجی کدومو باید انتخاب کرد؟
می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید آن را به صورت درون خطی با استفاده از ویژگی template تعریف کنید، یا می توانید الگو را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl در decorator @Component به آن در ابرداده کامپوننت پیوند دهید.
انتخاب بین HTML درون خطی و مجزا یک موضوع سلیقه، شرایط و خط مشی سازمان است. اما معمولاً از قالب درون خطی برای بخش کوچکی از کد و از فایل قالب خارجی برای نمایش های بزرگتر استفاده می کنیم. به طور پیش فرض، Angular CLI کامپوننت ها را با یک فایل الگو تولید می کند. اما می توانید با دستور زیر آن را لغو کنید
ng generate component hero -it- +
هدف از directive ngFor چی هستش؟
+هدف از directive ngFor چی هستش؟
ما از دستورالعمل Angular ngFor در قالب برای نمایش هر آیتم در لیست استفاده می کنیم. به عنوان مثال، در اینجا ما روی لیست کاربران تکرار می کنیم،
<li *ngFor="let user of users"> @@ -1849,19 +2090,19 @@هدف از directive ngFor چی ه& </li>
متغیر کاربر در دستورالعمل ngFor دو نقل قول a استtemplate input variable
- +هدف از directive ngIf چیه؟
+هدف از directive ngIf چیه؟
گاهی اوقات یک برنامه فقط در شرایط خاص نیاز به نمایش یک نما یا بخشی از یک نما دارد. دستورالعمل Angular ngIf یک عنصر را بر اساس شرایط درستی/نادرستی درج یا حذف می کند. اگر سن کاربر بیش از 18 سال باشد، برای نمایش پیام مثالی می زنیم.
<p *ngIf="user.age > 18">You are not eligible for student pass!</p>
Note: Angular پیام را نشان نمی دهد و پنهان نمی کند. در حال افزودن و حذف عنصر پاراگراف از DOM است. که عملکرد را بهبود می بخشد، به خصوص در پروژه های بزرگتر با اتصال داده های زیادی.
- +اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟
+اگه از تگ script توی یه templete استفاده کنیم چه اتفاقی میوفته؟
Angular مقدار را ناامن تشخیص میدهد و بهطور خودکار آن را پاکسازی میکند، که تگ «اسکریپت» را حذف میکند اما محتوای ایمن مانند محتوای متنی برچسب «اسکریپت» را حفظ میکند. به این ترتیب خطر حملات تزریق اسکریپت را از بین می برد. اگر همچنان از آن استفاده می کنید، نادیده گرفته می شود و یک هشدار در کنسول مرورگر ظاهر می شود.
بیایید مثالی از اتصال ویژگی innerHtml که باعث آسیبپذیری XSS میشود، بیاوریم.
@@ -1870,10 +2111,10 @@اگه از تگ script تو&#x htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>'; }
- +منظور از interpolation چیه؟
+منظور از interpolation چیه؟
درون یابی یک نحو خاص است که Angular آن را به ویژگی binding تبدیل می کند. این یک جایگزین مناسب برای اتصال اموال است. با مهاربندهای دوتایی ({{}}) نشان داده می شود. متن بین پرانتزها اغلب نام یک ویژگی جزء است. Angular آن نام را با مقدار رشته خاصیت جزء مربوطه جایگزین می کند.
بیایید یک مثال بزنیم،
@@ -1883,10 +2124,10 @@منظور از interpolation چ </h3>
در مثال بالا، Angular خصوصیات عنوان و url را ارزیابی می کند و جاهای خالی را پر می کند، ابتدا عنوان برنامه پررنگ و سپس URL نمایش داده می شود.
- +template expressions ها چیا هستن?
+template expressions ها چیا هستن?
یک عبارت الگو مقداری شبیه به هر عبارت جاوا اسکریپت تولید می کند. Angular عبارت را اجرا می کند و آن را به خاصیت یک هدف الزام آور اختصاص می دهد. هدف ممکن است یک عنصر HTML، یک جزء یا یک دستورالعمل باشد. در ویژگی binding، یک عبارت الگو در نقل قول در سمت راست نماد = مانند [property]="expression ظاهر می شود.
در نحو درون یابی، عبارت الگو با پرانتزهای مجعد دوتایی احاطه شده است. به عنوان مثال، در درون یابی زیر، عبارت الگو {{username}} است،
template expressions ها چیا هس
عبارات جاوا اسکریپت زیر در عبارت قالب ممنوع هستند
-
-
- assignments (=، +=، -=، ...) -
- new -
- زنجیره عبارات با ; یا ، -
- عملگرهای افزایش و کاهش (++ و --) +
assignments (=، +=، -=، ...)
+new
+زنجیره عبارات با ; یا ،
+عملگرهای افزایش و کاهش (++ و --)
- +
template statements ها چیا هستن؟
+template statements ها چیا هستن؟
یک عبارت الگو به رویدادی پاسخ می دهد که توسط یک هدف الزام آور مانند یک عنصر، مؤلفه یا دستورالعمل ایجاد شده است. عبارات الگو در نقل قول در سمت راست نماد = مانند (رویداد)="statement" ظاهر می شوند.
Let's take an example of button click event's statement
@@ -1911,22 +2152,22 @@template statements ها چیا هسb
در عبارت بالا، editProfile یک عبارت الگو است. عبارات نحوی جاوا اسکریپت زیر مجاز نیستند.
-
-
- جدید -
- عملگرهای افزایش و کاهش، ++ و -- -
- انتساب عملگر، مانند += و -= -
- عملگرهای بیتی | و & -
- عملگرهای عبارت الگو +
جدید
+عملگرهای افزایش و کاهش، ++ و --
+انتساب عملگر، مانند += و -=
+عملگرهای بیتی | و &
+عملگرهای عبارت الگو
- +
چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟
+چطوری دیتاهایی که bind شدن رو طبقه بندی میکنی؟
انواع اتصال را می توان به سه دسته دسته بندی کرد که با جهت جریان داده ها متمایز می شوند. آنها به صورت زیر فهرست شده اند،
-
-
- از منبع به مشاهده -
- از دیدگاه به منبع -
- View-to-source-to-view +
از منبع به مشاهده
+از دیدگاه به منبع
+View-to-source-to-view
نحو ممکن الزام آور را می توان به صورت جدولی در زیر ارائه کرد:
pipe ها چیا هستن؟
+pipe ها چیا هستن؟
یک لوله داده ها را به عنوان ورودی می گیرد و آن را به خروجی دلخواه تبدیل می کند. به عنوان مثال، اجازه دهید یک لوله را برای تبدیل ویژگی تولد یک جزء به تاریخ دوستداشتنی با استفاده از لوله date در نظر بگیریم.
import { Component } from '@angular/core'; @@ -1971,10 +2212,10 @@- +pipe ها چیا هستن؟ birthday = new Date(1987, 6, 18); // June 18, 1987 }
یه منظور از pipe پارامتردار شده چیه؟
+یه منظور از pipe پارامتردار شده چیه؟
یک لوله می تواند هر تعداد پارامتر اختیاری را برای تنظیم دقیق خروجی خود بپذیرد. لوله پارامتر شده را می توان با اعلام نام لوله با علامت دو نقطه ( : ) و سپس مقدار پارامتر ایجاد کرد. اگر لوله چندین پارامتر را می پذیرد، مقادیر را با دو نقطه جدا کنید. بیایید یک مثال تولد با یک قالب خاص (dd/MM/yyyy) در نظر بگیریم:
import { Component } from '@angular/core'; @@ -1988,10 +2229,10 @@یه منظور از pipe g }
Note: مقدار پارامتر می تواند هر عبارت الگوی معتبری باشد، مانند یک رشته لفظی یا یک ویژگی جزء.
- +چطوری زنجیره ای از pipe ها میسازی؟
+چطوری زنجیره ای از pipe ها میسازی؟
میتوانید لولهها را در ترکیبهای بالقوه مفید بر حسب نیاز به هم زنجیر کنید. بیایید یک ویژگی تولد را در نظر بگیریم که از لوله تاریخ (همراه با پارامتر) و لوله های بزرگ مانند زیر استفاده می کند
import { Component } from '@angular/core'; @@ -2005,10 +2246,10 @@- +چطوری زنجیرd }
منظور از pipe سفارشی شده چیه؟
+منظور از pipe سفارشی شده چیه؟
جدا از لوله های داخلی، می توانید لوله سفارشی خود را با ویژگی های کلیدی زیر بنویسید:
- پیپ کلاسی است که با متادیتای لوله @Pipe تزئین شده است که از کتابخانه هسته انگولار وارد میکنید.
@@ -2027,15 +2268,15 @@منظور از pipe سفا }
+-
-
- دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد. +
دکوراتور @Pipe به شما امکان می دهد نام لوله ای را که در عبارات قالب استفاده می کنید، تعریف کنید. باید یک شناسه جاوا اسکریپت معتبر باشد.
-template: `{{someInputValue | myCustomPipe: someOtherValue}}` -
-
یه مثال از pipe سفارشی شده بزن؟
+یه مثال از pipe سفارشی شده بزن؟
شما می توانید لوله های قابل استفاده مجدد سفارشی برای تغییر ارزش موجود ایجاد کنید. به عنوان مثال، اجازه دهید یک لوله سفارشی برای یافتن اندازه فایل بر اساس پسوند ایجاد کنیم،
import { Pipe, PipeTransform } from '@angular/core'; @@ -2054,15 +2295,15 @@
- +یه مثال از pipe سd <p>Size: {{288966 | customFileSizePipe: 'GB'}}</p> `
-
-
فرق بین pure pipe و impure pipe چیه؟
+فرق بین pure pipe و impure pipe چیه؟
یک لوله خالص تنها زمانی فراخوانی می شود که Angular تغییر در مقدار یا پارامترهای ارسال شده به یک لوله را تشخیص دهد. به عنوان مثال، هرگونه تغییر در یک مقدار ورودی اولیه (رشته، عدد، بولی، نماد) یا یک مرجع شی تغییر یافته (تاریخ، آرایه، تابع، شی). یک لوله ناخالص برای هر چرخه تشخیص تغییر بدون توجه به تغییر مقدار یا پارامترها فراخوانی می شود. به عنوان مثال، یک لوله ناخالص اغلب، به اندازه هر ضربه کلید یا حرکت ماوس، نامیده می شود.
- + -
-
منظور از botstrapping module چیه؟
+منظور از botstrapping module چیه؟
هر برنامه حداقل یک ماژول Angular دارد، ماژول ریشه ای که برای راه اندازی برنامه بوت استرپ می کنید ماژول بوت استرپینگ نامیده می شود. معمولاً به عنوان AppModule شناخته می شود. ساختار پیش فرض AppModule تولید شده توسط AngularCLI به شرح زیر است:
/* JavaScript imports */ @@ -2088,15 +2329,15 @@
- +منظور از botstrapping module h }) export class AppModule { }
-
-
observable ها چیا هستن؟
+observable ها چیا هستن؟
مشاهده پذیرها بیانی هستند که از ارسال پیام بین ناشران و مشترکین در برنامه شما پشتیبانی می کنند. آنها عمدتاً برای مدیریت رویداد، برنامه نویسی ناهمزمان و مدیریت چندین مقدار استفاده می شوند. در این مورد، شما تابعی را برای انتشار مقادیر تعریف می کنید، اما تا زمانی که یک مصرف کننده در آن مشترک نشود، اجرا نمی شود. سپس مصرف کننده مشترک تا زمانی که عملکرد کامل شود یا تا زمانی که اشتراک خود را لغو نکند، اعلان ها را دریافت می کند.
- + -
-
HttpClient چیه و مزیت های اون چیا هستن؟
+HttpClient چیه و مزیت های اون چیا هستن؟
اکثر برنامه های کاربردی Front-end با استفاده از رابط XMLHttpRequest یا fetch() API از طریق پروتکل HTTP با سرویس های پشتیبان ارتباط برقرار می کنند. Angular یک API HTTP کلاینت ساده شده به نام HttpClient را ارائه می دهد که بر پایه رابط XMLHttpRequest است. این سرویس گیرنده از بسته «@angular/common/http» در دسترس است.
@@ -2104,19 +2345,19 @@
می توانید در ماژول ریشه خود به صورت زیر وارد کنید،HttpClient چیه و مزیت ه
مزایای اصلی HttpClient را می توان به شرح زیر ذکر کرد:
-
-
- دارای ویژگی های تست پذیری است -
- اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد -
- رهگیری درخواست و پاسخ -
- از API های Observalbe پشتیبانی می کند -
- از مدیریت خطای ساده پشتیبانی می کند +
دارای ویژگی های تست پذیری است
+اشیاء درخواست و پاسخ تایپ شده را ارائه می دهد
+رهگیری درخواست و پاسخ
+از API های Observalbe پشتیبانی می کند
+از مدیریت خطای ساده پشتیبانی می کند
-
-
چطوری از HttpClient استفاده کنیم؟
+چطوری از HttpClient استفاده کنیم؟
در زیر مراحلی که برای استفاده از HttpClient باید طی شود آورده شده است.
-
-
- HttpClient را به ماژول root وارد کنید: +
HttpClient را به ماژول root وارد کنید:
import { HttpClientModule } from '@angular/common/http'; @@ -2164,10 +2405,10 @@
چطوری از HttpClient اس }
از آنجایی که روش سرویس فوق یک Observable را برمی گرداند که باید در کامپوننت ثبت شود.
- + -
-
چطوری response ها رو به صورت کامل بخونیم؟
+چطوری response ها رو به صورت کامل بخونیم؟
ممکن است بدنه پاسخ دادههای پاسخ کامل را برنگرداند زیرا گاهی اوقات سرورها سرصفحهها یا کد وضعیت خاصی را که برای گردش کار برنامه مهم هستند، برمیگردانند. برای دریافت پاسخ کامل، باید از گزینه Observer از HttpClient استفاده کنید.
getUserResponse(): Observable<HttpResponse<User>> { @@ -2176,10 +2417,10 @@
چطوری response ها رو & }
اکنون متد HttpClient.get () یک Observable از HttpResponse تایپ شده را به جای داده های JSON برمی گرداند.
- + -
-
چطوری عمل error handling رو انجام میدی؟
+چطوری عمل error handling رو انجام میدی؟
اگر درخواست در سرور ناموفق باشد یا به دلیل مشکلات شبکه به سرور نرسد، HttpClient به جای پاسخ موفقیت آمیز، یک شی خطا را برمی گرداند. در این مورد، باید با ارسال شیء خطا به عنوان متد ()subscribe، کامپوننت را کنترل کنید.
بیایید ببینیم که چگونه می توان آن را در کامپوننت با یک مثال مدیریت کرد،
@@ -2192,20 +2433,20 @@چطوری عمل error handling &#x }
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 چیه؟
RxJS کتابخانه ای برای نوشتن کدهای ناهمزمان و مبتنی بر تماس به سبک عملکردی و واکنشی با استفاده از Observables است. بسیاری از APIها مانند HttpClient RxJS Observables را تولید و مصرف می کنند و همچنین از عملگرها برای پردازش مشاهده پذیرها استفاده می کنند.
به عنوان مثال، می توانید مشاهده پذیرها و عملگرها را برای استفاده از HttpClient به صورت زیر وارد کنید.
- +import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators'; -
-
subscribing چیه؟
+subscribing چیه؟
یک نمونه قابل مشاهده تنها زمانی شروع به انتشار مقادیر می کند که شخصی در آن مشترک شود. بنابراین باید با فراخوانی متد subscribe() از نمونه، مشترک شوید و یک شی ناظر را برای دریافت اعلانها ارسال کنید.
بیایید نمونهای از ایجاد و اشتراک در یک مشاهدهپذیر ساده، با مشاهدهگری که پیام دریافتشده را در کنسول ثبت میکند، در نظر بگیریم.
@@ -2228,10 +2469,10 @@subscribing چیه؟
// => Observer got a next value: 5 // => Observer got a complete notification - + -
-
منطور از observable یه چیه؟
+منطور از observable یه چیه؟
Observable یک شی منحصر به فرد شبیه به Promise است که می تواند به مدیریت کدهای همگام کمک کند. Observable ها بخشی از زبان جاوا اسکریپت نیستند، بنابراین باید به یک کتابخانه معروف Observable به نام RxJS تکیه کنیم.
مشاهده پذیرها با استفاده از کلمه کلیدی جدید ایجاد می شوند.مثال ساده قابل مشاهده را ببینید،
@@ -2244,10 +2485,10 @@منطور از observable یه }, 2000); }); -
+ -
-
observer جیه؟
+observer جیه؟
Observer یک رابط برای مصرف کننده اعلان های مبتنی بر فشار است که توسط Observable ارائه می شود. دارای ساختار زیر است،
interface Observer<T> { @@ -2262,10 +2503,10 @@observer جیه؟
myObservable.subscribe(myObserver);Note: اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر اعلان های آن نوع را نادیده می گیرد.
- + -
-
تفاوت بین pronise و یه oberservable چیه؟
+تفاوت بین pronise و یه oberservable چیه؟
در زیر لیستی از تفاوت های بین وعده و قابل مشاهده است،
@@ -2293,10 +2534,10 @@
- +تفاوت بین pronise و &#
-
-
multicasting چیه؟
+multicasting چیه؟
پخش چندگانه، عمل پخش به فهرستی از چند مشترک در یک اجرا است.
بیایید ویژگی چند ریختگی را نشان دهیم،
@@ -2314,10 +2555,10 @@multicasting چیه؟
// This is, under the hood, `s - + -
-
جطوری روی observevable ها error handling انجام میدی؟
+جطوری روی observevable ها error handling انجام میدی؟
شما میتوانید با تعیین یک بازخوانی خطا روی ناظر به جای تکیه بر try/catch که در محیط ناهمزمان بیاثر هستند، خطاها را مدیریت کنید.
به عنوان مثال، می توانید خطا را به صورت زیر تعریف کنید.
@@ -2326,10 +2567,10 @@جطوری روی observevable d error(err) { console.log('Received an errror: ' + err)} });
- + -
-
مختصر شده متصد subscribe چیه؟
+مختصر شده متصد subscribe چیه؟
متد subscribe () میتواند تعاریف تابع برگشتی را بهصورت خطی بپذیرد، برای کنترلکنندههای بعدی، خطا و کامل به عنوان نماد دست کوتاه یا متد Subscribe با آرگومانهای موقعیتی شناخته میشود.
به عنوان مثال، می توانید متد subscribe را به صورت زیر تعریف کنید.
@@ -2339,25 +2580,25 @@مختصر شده مت () => console.log('Observer got a complete notification') );
- + -
-
توابع مفیدی روی RxJS وجود دارن چیا هستن؟
+توابع مفیدی روی RxJS وجود دارن چیا هستن؟
کتابخانه RxJS همچنین توابع کاربردی زیر را برای ایجاد و کار با مشاهده پذیرها ارائه می دهد.
-
-
- تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده -
- تکرار از طریق مقادیر در یک جریان -
- نگاشت مقادیر به انواع مختلف -
- فیلتر کردن جریان ها -
- آهنگسازی چند جریان +
تبدیل کدهای موجود برای عملیات همگام به قابل مشاهده
+تکرار از طریق مقادیر در یک جریان
+نگاشت مقادیر به انواع مختلف
+فیلتر کردن جریان ها
+آهنگسازی چند جریان
-
-
توابع سازنده observable چیا هستن؟
+توابع سازنده observable چیا هستن؟
RxJS توابع ایجاد را برای فرآیند ایجاد قابل مشاهده از چیزهایی مانند وعده ها، رویدادها، تایمرها و درخواست های Ajax فراهم می کند. اجازه دهید هر یک از آنها را با یک مثال توضیح دهیم،
-
-
- از قول یک قابل مشاهده ایجاد کنید +
از قول یک قابل مشاهده ایجاد کنید
import { from } from 'rxjs'; // from function @@ -2369,7 +2610,7 @@
توابع سازندd });
-
-
- Create an observable that creates an AJAX request +
Create an observable that creates an AJAX request
import { ajax } from 'rxjs/ajax'; // ajax function @@ -2378,7 +2619,7 @@
توابع سازندd apiData.subscribe(res => console.log(res.status, res.response));
-
-
- یک قابل مشاهده از یک شمارنده ایجاد کنید +
یک قابل مشاهده از یک شمارنده ایجاد کنید
import { interval } from 'rxjs'; // interval function @@ -2388,7 +2629,7 @@
توابع سازندd ));
-
-
- یک قابل مشاهده از یک رویداد ایجاد کنید +
یک قابل مشاهده از یک رویداد ایجاد کنید
import { fromEvent } from 'rxjs'; @@ -2398,20 +2639,20 @@
- +توابع سازندd console.log(`Coordnitaes of mouse pointer: ${e.clientX} * ${e.clientY}`); });
-
-
چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟
+چیه اتفاقی میوفته اگه ما تابع handler برای observer تعریف نکنیم؟
به طور معمول یک شی ناظر می تواند هر ترکیبی از کنترل کننده های نوع اعلان بعدی، خطا و کامل را تعریف کند. اگر یک کنترل کننده برای یک نوع اعلان ارائه نکنید، ناظر فقط اعلان های آن نوع را نادیده می گیرد.
- + -
-
element های انگولار چیا هستن؟
+element های انگولار چیا هستن؟
عناصر زاویهای، اجزای زاویهای هستند که بهعنوان عناصر سفارشی (یک استاندارد وب برای تعریف عناصر جدید HTML به روشی فریمورک-آگنوستیک) بستهبندی شدهاند. Angular Elements میزبان یک کامپوننت Angular است که پلی بین داده ها و منطق تعریف شده در کامپوننت و APIهای استاندارد DOM ایجاد می کند، بنابراین راهی برای استفاده از مولفه های Angular در "محیط های غیر زاویه ای" ارائه می دهد.
- + -
-
پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
+پشتیبانی های مرورگر ها برای element های انگولار چیا هستن؟
از آنجایی که عناصر Angular به عنوان عناصر سفارشی بسته بندی می شوند، پشتیبانی مرورگر از عناصر زاویه ای مانند پشتیبانی از عناصر سفارشی است.
این ویژگی در حال حاضر به صورت بومی در تعدادی از مرورگرها پشتیبانی میشود و برای مرورگرهای دیگر در انتظار است.
@@ -2444,57 +2685,57 @@
- +پشتیبانی هاl
-
-
element های کاستوم شده چیا هستن؟
+element های کاستوم شده چیا هستن؟
عناصر سفارشی (یا اجزای وب) یک ویژگی پلتفرم وب هستند که HTML را با اجازه دادن به شما برای تعریف برچسبی که محتوای آن توسط کد جاوا اسکریپت ایجاد و کنترل می شود، گسترش می دهد. مرورگر یک «CustomElementRegistry» از عناصر سفارشی تعریف شده را حفظ می کند، که یک کلاس جاوا اسکریپت غیر قابل مشاهده را به یک تگ HTML نگاشت می کند. در حال حاضر این ویژگی توسط کروم، فایرفاکس، اپرا و سافاری پشتیبانی میشود و در مرورگرهای دیگر از طریق polyfills در دسترس است.
- + -
-
bootstrap کردن element های کاستوم شده لازمه؟
+bootstrap کردن element های کاستوم شده لازمه؟
خیر، عناصر سفارشی هنگامی که به DOM اضافه می شوند به طور خودکار راه اندازی می شوند (یا شروع می شوند) و وقتی از DOM حذف می شوند به طور خودکار از بین می روند. هنگامی که یک عنصر سفارشی برای هر صفحه ای به DOM اضافه می شود، مانند هر عنصر HTML دیگری به نظر می رسد و رفتار می کند و به دانش خاصی از Angular نیاز ندارد.
- + -
-
ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟
+ساختار داخلی و نجوه کارکردن element های کاستوم شده چطوریه؟
در زیر مراحل به ترتیب در مورد عملکرد عناصر سفارشی آمده است،
-
-
- App registers custom element with browser: از تابع «createCustomElement()» برای تبدیل یک مؤلفه به کلاسی استفاده کنید که میتواند در مرورگر به عنوان یک عنصر سفارشی ثبت شود. -
- App adds custom element to DOM: عنصر سفارشی را درست مانند یک عنصر HTML داخلی مستقیماً به DOM اضافه کنید. -
- Browser instantiate component based class: مرورگر یک نمونه از کلاس ثبت شده ایجاد می کند و آن را به DOM اضافه می کند. +
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 ارائه می شود.
نمودار جریان عملکرد عناصر سفارشی به شرح زیر است:
- + -
-
چطوری کامپوننت عا رو به custom element تبدیل کنیم؟
+چطوری کامپوننت عا رو به custom element تبدیل کنیم؟
تبدیل اجزا به عناصر سفارشی شامل دو مرحله اصلی است،
-
-
- کلاس عنصر سفارشی بسازید: Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیادهسازی میکند و یک کلاس سازنده ایجاد میکند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده میشود. -
- ** ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده می کند. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو می شود، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده می کند. +
کلاس عنصر سفارشی بسازید: Angular تابع "createCustomElement()" را برای تبدیل یک جزء Angular (همراه با وابستگی های آن) به یک عنصر سفارشی ارائه می دهد. فرآیند تبدیل رابط «NgElementConstructor» را پیادهسازی میکند و یک کلاس سازنده ایجاد میکند که برای تولید یک نمونه self-bootstrapping از مؤلفه Angular استفاده میشود.
+** ثبت کلاس عنصر با مرورگر:** از تابع JS «customElements.define()» برای ثبت سازنده پیکربندی شده و تگ عنصر سفارشی مرتبط با آن با «CustomElementRegistry» مرورگر استفاده می کند. هنگامی که مرورگر با برچسب عنصر ثبت شده روبرو می شود، از سازنده برای ایجاد یک نمونه عنصر سفارشی استفاده می کند.
The detailed structure would be as follows,
- +
-
-
قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
+قوانین مپ کردن بین کامپوننت های انگولار و element های کاستوم چیه؟
ویژگی های Component و منطق مستقیماً به ویژگی های HTML و سیستم رویداد مرورگر نگاشت می شوند. اجازه دهید آنها را در دو مرحله توصیف کنیم،
-
-
- CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه می کند. به عنوان مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد. -
- خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال می شوند که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است. +
CreateCustomElement() API خصوصیات ورودی کامپوننت را با ویژگی های مربوط به عنصر سفارشی تجزیه می کند. به عنوان مثال، جزء @Input('myInputProp') به عنوان ویژگی عنصر سفارشی 'my-input-prop' تبدیل شد.
+خروجی های کامپوننت به صورت رویدادهای سفارشی HTML ارسال می شوند که نام رویداد سفارشی با نام خروجی مطابقت دارد. برای مثال، کامپوننت @Output() valueChanged = New EventEmitter() به عنوان عنصر سفارشی با رویداد اعزام به عنوان "valueChanged" تبدیل شده است.
-
-
چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟
+چطوری تایپ ها رو برای یه element کاستوم تعریف میکنی؟
میتوانید از انواع «NgElement» و «WithProperties» که از @angular/elements صادر شدهاند استفاده کنید.
بیایید ببینیم که چگونه می توان آن را با مقایسه با کامپوننت Angular اعمال کرد.
-
-
- ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود. +
ظرف ساده با ویژگی ورودی به صورت زیر خواهد بود.
@Component(...) @@ -2503,7 +2744,7 @@چطوری تایپ ه }
-
-
- پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند. +
پس از اعمال typescript مقدار ورودی و انواع آنها را تأیید می کند.
- +const container = document.createElement('my-container') as NgElement & WithProperties<{message: string}>; @@ -2511,33 +2752,33 @@چطوری تایپ ه container.message = true; // <-- ERROR: TypeScript knows this should be a string. container.greet = 'News'; // <-- ERROR: TypeScript knows there is no `greet` property on `container`.
-
-
کامپوننت های داینامیک چیا هستن؟
+کامپوننت های داینامیک چیا هستن؟
مؤلفههای پویا مؤلفههایی هستند که مکان مؤلفهها در برنامه در زمان ساخت تعریف نشده است، یعنی در هیچ قالب زاویهای استفاده نمیشوند. اما کامپوننت نمونه سازی می شود و در زمان اجرا در برنامه قرار می گیرد.
- + -
-
انواع مختلف directive ها کدوما هستن؟
+انواع مختلف directive ها کدوما هستن؟
عمدتاً سه نوع دستورالعمل وجود دارد:
-
-
- ** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند. -
- دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند. -
- دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند. +
** مؤلفه ها ** - این دستورالعمل ها دارای یک الگو هستند.
+دستورالعمل های ساختاری — این دستورالعمل ها با افزودن و حذف عناصر DOM، طرح DOM را تغییر می دهند.
+دستورالعمل های ویژگی - این دستورالعمل ها ظاهر یا رفتار یک عنصر، جزء یا دستورالعمل دیگر را تغییر می دهند.
-
-
چطوری با استفاده از CLI یه directive درست میکنی؟
+چطوری با استفاده از CLI یه directive درست میکنی؟
میتوانید از دستور CLI «ng generate directive» برای ایجاد فایل کلاس دستورالعمل استفاده کنید. فایل منبع (
- +src/app/components/directivename.directive.ts)، فایل آزمایشی مربوطه (.spec.ts) را ایجاد می کند و فایل کلاس دستورالعمل را در ماژول ریشه اعلام می کند. -
-
یه مثال از استفاده directive با اتریبیوت بزن؟
+یه مثال از استفاده directive با اتریبیوت بزن؟
بیایید رفتار ساده برجسته کننده را به عنوان یک دستورالعمل مثال برای عنصر DOM در نظر بگیریم. می توانید دستورالعمل ویژگی را با استفاده از مراحل زیر ایجاد و اعمال کنید:
-
-
- کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم. +
کلاس HighlightDirective با نام فایل «src/app/highlight.directive.ts» ایجاد کنید. در این فایل، باید Directive را از کتابخانه هسته وارد کنیم تا متادیتا را اعمال کنیم و ElementRef را در سازنده دستورالعمل برای تزریق یک مرجع به عنصر DOM میزبان وارد کنیم.
import { Directive, ElementRef } from '@angular/core'; @@ -2552,51 +2793,51 @@
یه مثال از اس&#x }
-
-
- دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال،
)
+ دستورالعمل ویژگی را به عنوان یک ویژگی در عنصر میزبان اعمال کنید (به عنوان مثال،
)
<p appHighlight>Highlight me!</p>
-
-
- برای مشاهده رفتار برجسته در عنصر پاراگراف، برنامه را اجرا کنید +
برای مشاهده رفتار برجسته در عنصر پاراگراف، برنامه را اجرا کنید
- +ng serve -
-
Angular Router چیه؟
+Angular Router چیه؟
روتر زاویه ای مکانیزمی است که در آن هنگام انجام وظایف برنامه توسط کاربران، ناوبری از یک نمای به نمای بعدی انجام می شود. مفاهیم یا مدل ناوبری برنامه مرورگر را به عاریت گرفته است.
- + -
-
هدف از base href tag چیه؟
+هدف از base href tag چیه؟
برنامه مسیریابی باید عنصر
را به عنوان اولین فرزند در تگ به index.html اضافه کند تا نحوه نوشتن URL های پیمایش را نشان دهد. اگر پوشه برنامه ریشه برنامه است، می توانید مقدار href را به صورت زیر تنظیم کنید <base href="/">- + -
-
import های مربوط به router چیه؟
+import های مربوط به router چیه؟
Angular Router که نمایانگر یک کامپوننت خاص برای یک URL معین است، بخشی از Angular Core نیست. در کتابخانه ای به نام «@angular/router» برای وارد کردن اجزای مورد نیاز روتر موجود است. به عنوان مثال، ما آنها را در ماژول برنامه مانند زیر وارد می کنیم.
- +import { RouterModule, Routes } from '@angular/router'; -
-
router outlet چیه؟
+router outlet چیه؟
RouterOutlet یک دستورالعمل از کتابخانه روتر است و به عنوان یک مکان نگهدار عمل می کند که نقطه ای را در قالب مشخص می کند که روتر باید اجزای آن خروجی را نمایش دهد. خروجی روتر مانند یک جزء استفاده می شود،
<router-outlet></router-outlet> <!-- Routed components go here -->
- + -
-
router link ها چیا هستن؟
+router link ها چیا هستن؟
RouterLink یک دستورالعمل در تگ های لنگر است که به روتر کنترل آن عناصر را می دهد. از آنجایی که مسیرهای ناوبری ثابت هستند، می توانید مقادیر رشته ای را به دستورالعمل پیوند مسیریاب به صورت زیر اختصاص دهید.
<h1>Angular Router</h1> @@ -2606,10 +2847,10 @@
- +router link ها چیا هستن </nav> <router-outlet></router-outlet>
-
-
منظور از منظور از router state چیه؟
+منظور از منظور از router state چیه؟
RouterLinkActive دستورالعملی است که کلاسهای css را برای اتصالات فعال RouterLink بر اساس RouterState فعلی تغییر میدهد. به عنوان مثال، روتر کلاس های CSS را زمانی که این پیوند فعال است اضافه می کند و زمانی که پیوند غیر فعال است حذف می کند. به عنوان مثال، می توانید آنها را مانند زیر به RouterLinks اضافه کنید.
<h1>Angular Router</h1> @@ -2619,10 +2860,10 @@
- +منظور از منظ </nav> <router-outlet></router-outlet>
-
-
What is router state?
+What is router state?
RouterState درختی از مسیرهای فعال شده است. هر گره در این درخت از بخش های URL "مصرف شده"، پارامترهای استخراج شده و داده های حل شده می داند. با استفاده از «سرویس روتر» و ویژگی «routerState» میتوانید از هر کجای برنامه به RouterState فعلی دسترسی داشته باشید.
- +@Component({templateUrl:'template.html'}) @@ -2636,7 +2877,7 @@What is router state?
} }
event های مربوط به router چیا هستن؟events?
@@ -2665,7 +2906,7 @@What is router state?
-
-
منظور از activated route چیه؟
+منظور از activated route چیه؟
ActivatedRoute حاوی اطلاعاتی در مورد یک مسیر مرتبط با یک جزء بارگذاری شده در یک خروجی است. همچنین می توان از آن برای عبور از درخت حالت روتر استفاده کرد. ActivatedRoute به عنوان یک سرویس روتر برای دسترسی به اطلاعات تزریق می شود. در مثال زیر می توانید به مسیر و پارامترهای مسیر دسترسی داشته باشید.
- +@Component({...}) @@ -2678,10 +2919,10 @@منظور از activated route چ&# } }
-
-
چطوری router های پروژه ات رو تعریف میکنی؟
+چطوری router های پروژه ات رو تعریف میکنی؟
یک روتر باید با لیستی از تعاریف مسیر پیکربندی شود. شما روتر را با مسیرها از طریق روش «RouterModule.forRoot()» پیکربندی میکنید و نتیجه را به آرایه «واردات» AppModule اضافه میکنید.
const appRoutes: Routes = [ @@ -2711,103 +2952,103 @@
- +چطوری router های پ }) export class AppModule { }
-
-
هدف از Wildcard route چیه؟
+هدف از Wildcard route چیه؟
اگر URL با هیچ یک از مسیرهای از پیش تعریف شده مطابقت نداشته باشد، باعث می شود روتر خطایی ایجاد کند و برنامه را خراب کند. در این حالت می توانید از مسیر wildcard استفاده کنید. یک مسیر عام دارای یک مسیر متشکل از دو ستاره برای مطابقت با هر URL است.
به عنوان مثال، شما می توانید PageNotFoundComponent را برای مسیر wildcard به صورت زیر تعریف کنید
- +{ path: '**', component: PageNotFoundComponent } -
-
ما همیشه به routing module نیاز داریم؟
+ما همیشه به routing module نیاز داریم؟
نه، ماژول مسیریابی یک انتخاب طراحی است. وقتی پیکربندی ساده است، میتوانید از ماژول مسیریابی (مثلاً AppRoutingModule) صرفنظر کنید و پیکربندی مسیریابی را مستقیماً در ماژول همراه (مثلاً AppModule) ادغام کنید. اما زمانی توصیه می شود که پیکربندی پیچیده باشد و شامل خدمات تخصصی نگهبان و حل کننده باشد.
- + -
-
Angular Universal چیه؟
+Angular Universal چیه؟
Angular Universal یک ماژول رندر سمت سرور برای برنامه های Angular در سناریوهای مختلف است. این یک پروژه جامعه محور است و در بسته @angular/platform-server موجود است. اخیرا Angular Universal با Angular CLI ادغام شده است.
- + -
-
انگولار به چن روش کامپایل میشه؟
+انگولار به چن روش کامپایل میشه؟
Angular دو راه برای کامپایل برنامه شما ارائه می دهد.
-
-
- به موقع (JIT) -
- پیش از زمان (AOT) +
به موقع (JIT)
+پیش از زمان (AOT)
-
-
What is JIT?
+What is JIT?
Just-in-Time (JIT) نوعی کامپایل است که برنامه شما را در زمان اجرا در مرورگر کامپایل می کند. هنگامی که دستورات CLI ng build (فقط ساخت) یا ng serve (ساخت و ارائه به صورت محلی) را اجرا می کنید، کامپایل JIT پیش فرض است. به عنوان مثال، دستورات زیر برای کامپایل JIT استفاده می شود،
- +ng build ng serve -
-
What is AOT?
+What is AOT?
Ahead-of-Time (AOT) نوعی کامپایل است که برنامه شما را در زمان ساخت کامپایل می کند. برای کامپایل AOT، گزینه «--aot» را با دستور ng build یا ng serve به شرح زیر اضافه کنید.
ng build --aot ng serve --aotنکته: دستور ng build با --prod meta-flag ('ng build --prod') به طور پیش فرض با AOT کامپایل می شود.
- + -
-
چرا ما به پروسه کامپایل نیاز داریم؟
+چرا ما به پروسه کامپایل نیاز داریم؟
کامپوننت ها و قالب های Angular را نمی توان مستقیماً توسط مرورگر درک کرد. به همین دلیل برنامه های Angular قبل از اینکه بتوانند در مرورگر اجرا شوند نیاز به یک فرآیند کامپایل دارند. برای مثال، در کامپایل AOT، هر دو کد Angular HTML و TypeScript در مرحله ساخت قبل از اجرای مرورگر به کد جاوا اسکریپت کارآمد تبدیل میشوند.
- + -
-
مزایای استفاده از AOT چیه؟
+مزایای استفاده از AOT چیه؟
-
-
- ** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند. -
- ** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند. -
- اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد. -
- تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند. -
- امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت. +
** رندر سریعتر: ** مرورگر یک نسخه از پیش کامپایل شده برنامه را دانلود می کند. بنابراین می تواند برنامه را بلافاصله بدون کامپایل کردن برنامه رندر کند.
+** درخواست های ناهمزمان کمتر: ** قالب های HTML خارجی و برگه های سبک CSS را در برنامه جاوا اسکریپت قرار می دهد که درخواست های جداگانه ajax را حذف می کند.
+اندازه دانلود فریمورک Angular کوچکتر: نیازی به دانلود کامپایلر Angular ندارد. از این رو به طور چشمگیری حجم برنامه را کاهش می دهد.
+تشخیص خطاهای قالب زودتر: خطاهای اتصال قالب را در مرحله ساخت خود شناسایی و گزارش می کند.
+امنیت بهتر: قالب ها و اجزای HTML را در جاوا اسکریپت کامپایل می کند. بنابراین هیچ حمله تزریقی وجود نخواهد داشت.
-
-
روش های کنترل کامپایل شدن با AOT چیا هستن؟
+روش های کنترل کامپایل شدن با AOT چیا هستن؟
شما می توانید کامپایل برنامه خود را به دو روش کنترل کنید،
-
-
- با ارائه گزینه های کامپایلر قالب در فایل
tsconfig.json
- - با پیکربندی فراداده Angular با دکوراتورها +
با ارائه گزینه های کامپایلر قالب در فایل
tsconfig.json
+با پیکربندی فراداده Angular با دکوراتورها
- با ارائه گزینه های کامپایلر قالب در فایل
-
-
محدودیت هایی که روی metadata وجود داره چیا هستن؟
+محدودیت هایی که روی metadata وجود داره چیا هستن؟
در Angular، شما باید ابرداده را با محدودیت های کلی زیر بنویسید:
-
-
- نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید -
- کامپایلر فقط می تواند به نمادهایی که صادر شده اند ارجاع دهد -
- فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید -
- اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند. +
نحو عبارت را با در محدوده پشتیبانی شده از ویژگی های جاوا اسکریپت بنویسید
+کامپایلر فقط می تواند به نمادهایی که صادر شده اند ارجاع دهد
+فقط توابع پشتیبانی شده توسط کامپایلر را فراخوانی کنید
+اعضای کلاس تزئین شده و محدود به داده ها باید عمومی باشند.
-
-
فاز های کامپایل با استفاده از AOT چیا هستن؟
+فاز های کامپایل با استفاده از AOT چیا هستن؟
کامپایلر AOT در سه فاز کار می کند،
-
-
- تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند -
- تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند. -
- ** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند. +
تحلیل کد: کامپایلر نمایشی از منبع را ثبت می کند
+تولید کد: تفسیر را کنترل می کند و همچنین محدودیت هایی را در مورد آنچه تفسیر می کند ایجاد می کند.
+** اعتبار سنجی: ** در این مرحله، کامپایلر الگوی Angular از کامپایلر TypeScript برای اعتبارسنجی عبارات الزام آور در قالب ها استفاده می کند.
-
-
ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
+ما میتونیم از arrow function ها توی AOT اسنتفاده کنیم؟
خیر، توابع پیکان یا توابع لامبدا را نمی توان برای تخصیص مقادیر به ویژگی های دکوراتور استفاده کرد. به عنوان مثال، قطعه زیر نامعتبر است:
@Component({ @@ -2830,20 +3071,20 @@ما میتونیم ا
اگر همچنان از تابع arrow استفاده می کنید، یک گره خطا به جای تابع ایجاد می کند. وقتی کامپایلر بعداً این گره را تفسیر میکند، یک خطا گزارش میکند تا تابع فلش را به یک تابع صادر شده تبدیل کند.
- +
نکته: از Angular5 به بعد، کامپایلر به طور خودکار این بازنویسی را در حین انتشار فایل js. انجام می دهد. -
-
هدف از استفاده از فایل های metadata json چیه؟
+هدف از استفاده از فایل های metadata json چیه؟
فایل metadata.json را میتوان بهعنوان نموداری از ساختار کلی فرادادههای تزئینگر، که بهعنوان یک درخت نحو انتزاعی (AST) نشان داده میشود، در نظر گرفت. در طول مرحله تجزیه و تحلیل، جمعآورنده AOT ابردادههای ثبتشده در تزئینات Angular را اسکن میکند و اطلاعات فراداده را در فایلهای .metadata.json، یک عدد برای هر فایل .d.ts، خروجی میدهد.
- + -
-
توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
+توی حالت AOTمیتونیم از همه مزایای جاوااسکریپت برای سینتکس ها استفاده کینیم؟
خیر، گردآورنده AOT زیرمجموعه ای از (یا محدود) ویژگی های جاوا اسکریپت را درک می کند. اگر عبارتی از نحو پشتیبانی نشده استفاده کند، گردآورنده یک گره خطا در فایل .metadata.json می نویسد. بعداً، کامپایلر در صورتی که برای تولید کد برنامه به آن تکه متادیتا نیاز داشته باشد، خطایی را گزارش میکند.
- + -
-
folding چیه؟
+folding چیه؟
کامپایلر فقط می تواند ارجاعات به نمادهای صادر شده در ابرداده را حل کند. جایی که برخی از اعضای غیرصادراتی هنگام تولید کد تا می شوند. i.e Folding فرآیندی است که در آن گردآورنده یک عبارت را در حین جمع آوری ارزیابی می کند و نتیجه را به جای عبارت اصلی در .metadata.json ثبت می کند.
@@ -2859,10 +3100,10 @@
به عنوان مثال، کامپایلر نمی تواند مرجع انتخابگر را ارجاع دهد زیرا صادر نشده استfolding چیه؟
})به یاد داشته باشید که کامپایلر نمی تواند همه چیز را تا کند. به عنوان مثال، عملگر گسترش بر روی آرایه ها، اشیاء ایجاد شده با استفاده از کلمات کلیدی جدید و فراخوانی تابع.
- + -
-
macros چیه؟
+macros چیه؟
کامپایلر AOT از ماکروها به شکل توابع یا متدهای ایستا پشتیبانی می کند که عبارتی را در یک عبارت بازگشتی واحد برمی گرداند.
@@ -2884,10 +3125,10 @@
به عنوان مثال، یک تابع ماکرو زیر را در نظر بگیرید،macros چیه؟
}) export class TypicalModule {} - + -
-
چن تا مثال از ارور های مربوط به metatdata بزن؟
+چن تا مثال از ارور های مربوط به metatdata بزن؟
- فرم عبارت پشتیبانی نمی شود: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های زاویه ای استفاده می شود می توانند این خطا را ایجاد کنند.
بیایید برخی از این نمونه ها را ببینیم،
@@ -2921,7 +3162,7 @@ - ** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمیتوانید useFactory ارائهدهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید. +
** فراخوانی تابع پشتیبانی نمی شود: ** کامپایلر در حال حاضر از عبارات تابع یا توابع لامبدا پشتیبانی نمی کند. برای مثال، نمیتوانید useFactory ارائهدهنده را روی یک تابع ناشناس یا تابع فلش مانند زیر تنظیم کنید.
- متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید: +
متغیر تخریب شده یا ثابت پشتیبانی نمی شود: کامپایلر ارجاع به متغیرهای اختصاص داده شده توسط ساختارشکنی را پشتیبانی نمی کند. به عنوان مثال، شما نمی توانید چیزی شبیه به این بنویسید:
چن تا مثال از &# let username = 'John'; // initialized
+-
-
providers: [ @@ -2940,7 +3181,7 @@
چن تا مثال از &# ]
-
-
import { user } from './user'; @@ -2962,15 +3203,15 @@
-چن تا مثال از &# {provide: Age, useValue: user.age}, ]
- فرم عبارت پشتیبانی نمی شود: برخی از ویژگی های زبان خارج از نحو بیان محدود کامپایلر که در فراداده های زاویه ای استفاده می شود می توانند این خطا را ایجاد کنند.
-
-
منظور از metadata rewriting چیه؟
+منظور از metadata rewriting چیه؟
بازنویسی متادیتا فرآیندی است که در آن کامپایلر عبارتی را که فیلدهایی مانند useClass، useValue، useFactory و داده را مقداردهی اولیه می کند، به یک متغیر صادر شده تبدیل می کند که جایگزین عبارت می شود. به یاد داشته باشید که کامپایلر این بازنویسی را در حین انتشار فایل js انجام می دهد اما در فایل های تعریف (فایل .d.ts) این کار را انجام نمی دهد.
- + -
-
How do you provide configuration inheritance?
+توی انگولار چطوری وراثت کانفیگ رو انجام میدی؟
Angular Compiler از وراثت پیکربندی از طریق Extend در tsconfig.json در angularCompilerOptions پشتیبانی می کند. به عنوان مثال، پیکربندی از فایل پایه (به عنوان مثال، tsconfig.base.json) ابتدا بارگیری می شود، سپس توسط آنهایی که در فایل پیکربندی ارثی هستند، لغو می شوند.
{ @@ -2986,10 +3227,10 @@
- +How do you provide configuration inheritance?
} } -
-
How do you specify angular template compiler options?
+چطوری آپشن های کامپایلرانگولار رو تنظیم میکنی؟
گزینه های کامپایلر قالب زاویه ای به عنوان اعضای شی angularCompilerOptions در فایل tsconfig.json مشخص شده اند. این گزینه ها در مجاورت گزینه های کامپایلر typescript مشخص می شوند.
{ @@ -3004,10 +3245,10 @@
- +How do you specify angular template compiler options?
} } -
-
How do you enable binding expression validation?
+چطوری اعتبارسنجی مربوط به قسمت های بایند شده رو فعال کنیم؟
شما می توانید صریحاً با افزودن گزینه کامپایلر fullTemplateTypeCheck در "angularCompilerOptions" tsconfig.json پروژه، اعتبار سنجی عبارت binding را فعال کنید. هنگامی که یک خطای نوع در عبارت اتصال الگو تشخیص داده می شود، پیام های خطا تولید می کند.
برای مثال، جزء زیر را در نظر بگیرید:
@@ -3023,10 +3264,10 @@How do you enable binding expression validation?
- +my.component.ts.MyComponent.html(1,1): : Property 'contacts' does not exist on type 'User'. Did you mean 'contact'? -
-
What is the purpose of any type cast function?
+هدف از any type توی cast function چیه؟
می توانید بررسی نوع عبارت binding را با استفاده از تابع cast نوع $any() غیرفعال کنید (با احاطه کردن عبارت). در مثال زیر، خطای Property contacts does not exist با فرستادن کاربر به هر نوع سرکوب شده است.
template: '{{ $any(user).contacts.email }}' @@ -3035,10 +3276,10 @@
What is the purpose of any type cast function?
template: '{{ $any(this).contacts.email }}'
- + -
-
What is Non null type assertion operator?
+اپراتور non null assertion چیه؟
برای سرکوب خطای Object is assibly 'undefined' می توانید از عملگر اظهاری نوع غیر تهی استفاده کنید. در مثال زیر، ویژگی های کاربر و مخاطب همیشه با هم تنظیم می شوند، به این معنی که اگر کاربر غیر تهی باشد، مخاطب همیشه غیر تهی است. خطا در مثال با استفاده از contact!.email سرکوب شده است.
@Component({ @@ -3055,10 +3296,10 @@
- +What is Non null type assertion operator?
} } -
-
What is type narrowing?
+منظور از type narrowing چیه؟
عبارت مورد استفاده در یک دستورالعمل ngIf برای محدود کردن اتحادیه های نوع در کامپایلر الگوی Angular مشابه عبارت if در تایپ اسکریپت استفاده می شود. بنابراین *ngIf به کامپایلر typeScript اجازه می دهد استنباط کند که داده های مورد استفاده در عبارت binding هرگز تعریف نشده نخواهد بود.
@Component({ @@ -3069,47 +3310,47 @@
- +What is type narrowing?
user?: User; } -
-
How do you describe various dependencies in angular application?
+چطوری dependency های مختلف توی انگولار تعریف میکنی؟
بخش وابستگی های package.json با در یک برنامه زاویه ای را می توان به صورت زیر تقسیم کرد:
-
-
- ** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود. -
- بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند. -
- ** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند. +
** بسته های زاویه ای: ** هسته زاویه ای و ماژول های اختیاری. نام بسته آنها @angular/ شروع می شود.
+بسته های پشتیبانی: کتابخانه های شخص ثالثی که برای اجرای برنامه های Angular باید وجود داشته باشند.
+** بسته های Polyfill: ** Polyfill شکاف ها را در پیاده سازی جاوا اسکریپت مرورگر وصل می کند.
-
-
What is zone?
+zone توی انگولار چیه؟
Zone یک زمینه اجرایی است که در تمام وظایف ناهمگام باقی می ماند. هنگامی که عملیات جاوا اسکریپت بومی رویدادها را افزایش می دهد، Angular برای اجرای فرآیندهای تشخیص تغییر Angular به zone.js متکی است.
- + -
-
What is the purpose of common module?
+هدف از ماژول مشترک توی انگولار چیه؟
خدمات، لولهها و دستورالعملهای مورد نیاز معمولاً توسط ماژول @angular/common ارائه شده است. جدا از این HttpClientModule در زیر angular/common/http@ موجود است.
- + -
-
What is codelyzer?
+codelyzer چیه؟
Codelyzer مجموعه ای از قوانین tslint را برای تجزیه و تحلیل کد استاتیک پروژه های Angular TypeScript ارائه می دهد. می توانید تحلیلگر کد استاتیک را روی برنامه های وب، NativeScript، Ionic و غیره اجرا کنید. Angular CLI از این پشتیبانی می کند و می توان از آن به صورت زیر استفاده کرد.
ng new codelyzer ng lint
- + -
-
What is angular animation?
+angular animation چیه؟
سیستم انیمیشن Angular بر اساس عملکرد CSS ساخته شده است تا هر خاصیتی را که مرورگر آن را قابل انیمیشن می داند، متحرک کند. این ویژگیها شامل موقعیتها، اندازهها، تبدیلها، رنگها، حاشیهها و غیره است. ماژولهای Angular برای انیمیشنها @angular/animations و @angular/platform-browser هستند و این وابستگیها به طور خودکار به پروژه شما اضافه میشوند. شما یک پروژه با استفاده از Angular CLI ایجاد می کنید.
- + -
-
What are the steps to use animation module?
+مراحل استفاده از ماژول های animation چیه؟
برای پیاده سازی انیمیشن در پروژه زاویه ای خود باید مراحل زیر را دنبال کنید.
-
-
- **Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیتهای انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts). +
**Enabling the animations module:**BrowserAnimationsModule را وارد کنید تا قابلیتهای انیمیشن را به ماژول برنامه Angular root خود اضافه کنید (به عنوان مثال، src/app/app.module.ts).
import { NgModule } from '@angular/core'; @@ -3127,7 +3368,7 @@
What are the steps to use animation module?
export class AppModule { }-
-
- Importing animation functions into component files: توابع انیمیشن مورد نیاز را از @angular/animations در فایلهای مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts). +
Importing animation functions into component files: توابع انیمیشن مورد نیاز را از @angular/animations در فایلهای مؤلفه وارد کنید (به عنوان مثال، src/app/app.component.ts).
import { @@ -3140,7 +3381,7 @@
What are the steps to use animation module?
} from '@angular/animations';-
-
- Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts) +
Adding the animation metadata property: یک ویژگی ابرداده به نام animations اضافه کنید: در دکوراتور @Component() در فایل های کامپوننت (به عنوان مثال src/app/app.component.ts)
- +@Component({ @@ -3152,10 +3393,10 @@What are the steps to use animation module?
] }) -
-
What is State function?
+تابع state چیه؟
تابع state() Angular برای تعریف حالت های مختلف برای فراخوانی در پایان هر انتقال استفاده می شود. این تابع دو آرگومان می گیرد: یک نام منحصر به فرد مانند open یا بسته و یک تابع style().
به عنوان مثال، می توانید یک تابع حالت باز بنویسید
@@ -3165,10 +3406,10 @@What is State function?
backgroundColor: 'blue' })), - + -
-
What is Style function?
+هدف از تابع style چیه؟
تابع style برای تعریف مجموعهای از سبکها برای مرتبط کردن با یک نام وضعیت استفاده میشود. برای تنظیم ویژگی های سبک CSS باید از آن به همراه تابع state() استفاده کنید. به عنوان مثال، در حالت بسته، دکمه دارای ارتفاع 100 پیکسل، کدورت 0.8 و رنگ زمینه سبز است.
state('close', style({ @@ -3178,10 +3419,10 @@What is Style function?
})),نکته: The style attributes must be in camelCase.
- + -
-
What is the purpose of animate function?
+هدف از تابع animate چیه؟
انیمیشنهای Angular روشی قدرتمند برای پیادهسازی انیمیشنهای پیچیده و قانعکننده برای اپلیکیشن وب تک صفحهای Angular شما هستند.
- +import { Component, OnInit, Input } from '@angular/core'; @@ -3222,10 +3463,10 @@What is the purpose of animate function?
} } -
-
What is transition function?
+تابع transition چیه؟
تابع انتقال انیمیشن برای تعیین تغییراتی که بین یک حالت و حالت دیگر در یک دوره زمانی رخ می دهد استفاده می شود. دو آرگومان را می پذیرد: آرگومان اول عبارتی را می پذیرد که جهت بین دو حالت گذار را مشخص می کند و آرگومان دوم تابع animate() را می پذیرد.
بیایید یک مثال انتقال حالت از باز به بسته با انتقال نیم ثانیه بین حالت ها را در نظر بگیریم.
@@ -3233,10 +3474,10 @@What is transition function?
animate('500ms') ]), - + -
-
How to inject the dynamic script in angular?
+چطوری اسکریپت های dynamic رو توی کدمون وارد کنیم؟
با استفاده از DomSanitizer میتوانیم Html، Style، Script، Url پویا را تزریق کنیم.
- +</span> import { Component, OnInit } from '@angular/core'; @@ -3252,26 +3493,26 @@How to inject the dynamic script in angular?
htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>"); } -
-
What is a service worker and its role in Angular?
+service worker چیه و نقشش توی انگولار چیه؟
Service Worker یک اسکریپت است که در مرورگر وب اجرا می شود و حافظه پنهان یک برنامه را مدیریت می کند. با شروع از نسخه 5.0.0، Angular با یک سرویس کارگر ارائه می شود. Angular service worker برای بهینه سازی تجربه کاربر نهایی از استفاده از یک برنامه کاربردی از طریق اتصال شبکه کند یا غیرقابل اعتماد طراحی شده است، در حالی که خطرات ارائه محتوای قدیمی را نیز به حداقل می رساند.
- + -
-
What are the design goals of service workers?
+اهدافی که ما با استفاده از service worker دنبال اونا هستیم چیان؟
-
-
- یک برنامه را مانند نصب یک برنامه بومی کش می کند -
- یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد -
- هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند -
- هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود -
- Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند. +
یک برنامه را مانند نصب یک برنامه بومی کش می کند
+یک برنامه در حال اجرا با همان نسخه از همه فایل ها بدون هیچ فایل ناسازگاری به کار خود ادامه می دهد
+هنگامی که برنامه را به روز می کنید، آخرین نسخه کاملاً کش شده را بارگیری می کند
+هنگامی که تغییرات منتشر می شود، بلافاصله در پس زمینه به روز می شود
+Service Workers پهنای باند را با بارگیری منابع صرفه جویی می کند که فقط زمانی که آنها تغییر کرده اند.
-
-
What are the differences between AngularJS and Angular with respect to dependency injection?
+تفاوت های بین angularJs و Angular درمورد dependency injection چیا هستن؟
تزریق وابستگی یک جزء مشترک در AngularJS و Angular است، اما تفاوتهای کلیدی بین این دو فریمورک در نحوه عملکرد واقعی آن وجود دارد.
@@ -3291,19 +3532,19 @@
- +What are the differences between AngularJS and Angular with respect to depen
-
-
What is Angular Ivy?
+What is Angular Ivy?
Angular Ivy یک موتور رندر جدید برای Angular است. میتوانید نسخه پیشنمایش Ivy را از نسخه 8 Angular انتخاب کنید.
-
-
- با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید +
با استفاده از پرچم --enable-ivy با دستور ng new می توانید ivy را در یک پروژه جدید فعال کنید
ng new ivy-demo-app --enable-ivy
-
-
- میتوانید با افزودن گزینه «enableIvy» در «angularCompilerOptions» در «tsconfig.app.json» پروژه خود، آن را به یک پروژه موجود اضافه کنید. +
میتوانید با افزودن گزینه «enableIvy» در «angularCompilerOptions» در «tsconfig.app.json» پروژه خود، آن را به یک پروژه موجود اضافه کنید.
{ @@ -3313,21 +3554,21 @@
- +What is Angular Ivy?
} } -
-
What are the features included in ivy preview?
+What are the features included in ivy preview?
می توانید با پیش نمایش Ivy انتظار ویژگی های زیر را داشته باشید.
-
-
- کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است -
- زمان بازسازی سریعتر -
- بهبود اندازه محموله -
- بررسی نوع قالب بهبود یافته است +
کد تولید شده که خواندن و اشکال زدایی آن در زمان اجرا آسان تر است
+زمان بازسازی سریعتر
+بهبود اندازه محموله
+بررسی نوع قالب بهبود یافته است
-
-
Can I use AOT compilation with Ivy?
+Can I use AOT compilation with Ivy?
بله، این یک پیکربندی توصیه شده است. همچنین، کامپایل AOT با Ivy سریعتر است. بنابراین باید گزینه های ساخت پیش فرض (با در angular.json) را برای پروژه خود تنظیم کنید تا همیشه از کامپایل AOT استفاده کند.
- +{ @@ -3345,15 +3586,15 @@Can I use AOT compilation with Ivy?
} } -
-
What is Angular Language Service?
+What is Angular Language Service?
سرویس زبان Angular راهی برای دریافت تکمیل، خطا، نکات و پیمایش در قالبهای Angular شما است، چه خارجی در یک فایل HTML باشند و چه در حاشیهنویسی/تزیینات در یک رشته تعبیه شده باشند. این قابلیت را دارد که به طور خودکار تشخیص دهد که شما در حال باز کردن یک فایل Angular هستید، فایل tsconfig.json شما را می خواند، تمام الگوهایی را که در برنامه خود دارید پیدا می کند و سپس تمام خدمات زبان را ارائه می دهد.
- + -
-
How do you install angular language service in the project?
+How do you install angular language service in the project?
با دستور npm زیر می توانید Angular Language Service را در پروژه خود نصب کنید.
npm install --save-dev @angular/language-service @@ -3365,15 +3606,15 @@How do you install angular language service in the project?
]نکته: خدمات تکمیل و تشخیص فقط برای فایل های .ts کار می کند. برای پشتیبانی از فایل های HTML باید از افزونه های سفارشی استفاده کنید.
- + -
-
Is there any editor support for Angular Language Service?
+Is there any editor support for Angular Language Service?
بله، سرویس زبان Angular در حال حاضر برای Visual Studio Code و WebStorm IDE در دسترس است. شما باید سرویس زبان زاویه ای را با استفاده از افزونه و devDependency نصب کنید. در ویرایشگر sublime، باید تایپ اسکریپتی را نصب کنید که دارای مدل پلاگین سرویس زبان است.
- + -
-
Explain the features provided by Angular Language Service?
+Explain the features provided by Angular Language Service?
اساساً 3 ویژگی اصلی توسط Angular Language Service ارائه شده است.
-
@@ -3389,14 +3630,14 @@
Explain the features provided by Angular Language Service?
-
@@ -3389,14 +3630,14 @@
-
-
How do you add web workers in your application?
+How do you add web workers in your application?
شما می توانید وب کارگر را در هر جایی از برنامه خود اضافه کنید. برای مثال، اگر فایل حاوی محاسبات گران قیمت شما «src/app/app.component.ts» است، میتوانید با استفاده از دستور «ng generate web-worker app» یک Web Worker اضافه کنید که «src/app/app» را ایجاد میکند. فایل کارگر وب worker.ts. این دستور اقدامات زیر را انجام می دهد
-
-
- پروژه خود را برای استفاده از Web Workers پیکربندی کنید -
- app.worker.ts را برای دریافت پیام اضافه می کند +
پروژه خود را برای استفاده از Web Workers پیکربندی کنید
+app.worker.ts را برای دریافت پیام اضافه می کند
addEventListener('message', ({ data }) => { @@ -3405,7 +3646,7 @@How do you add web workers in your application?
});-
-
- فایل کامپوننت «app.component.ts» با فایل web worker بهروزرسانی شد +
فایل کامپوننت «app.component.ts» با فایل web worker بهروزرسانی شد
if (typeof Worker !== 'undefined') { @@ -3420,74 +3661,74 @@
How do you add web workers in your application?
}نکته: ممکن است نیاز داشته باشید که کد اولیه web worker داربست خود را برای ارسال پیام به و از آن تغییر دهید.
- + -
-
What are the limitations with web workers?
+What are the limitations with web workers?
هنگام استفاده از Web Workers در پروژه های Angular باید دو نکته مهم را به خاطر بسپارید:
1.برخی از محیطها یا پلتفرمها (مانند @angular/platform-server) که در رندر سمت سرور استفاده میشوند، از Web Workers پشتیبانی نمیکنند. در این مورد باید مکانیزم بازگشتی برای انجام محاسبات برای کار در این محیط ها فراهم کنید.
- +
2. اجرای Angular در وبکار با استفاده از «@angular/platform-webworker» هنوز در Angular CLI پشتیبانی نمیشود. -
-
What is Angular CLI Builder?
+What is Angular CLI Builder?
در Angular8، CLI Builder API پایدار است و در دسترس توسعه دهندگانی است که می خواهند «Angular CLI» را با افزودن یا تغییر دستورات سفارشی کنند. برای مثال، میتوانید یک سازنده را برای انجام یک کار کاملاً جدید یا تغییر اینکه کدام ابزار شخص ثالث توسط یک دستور موجود استفاده میشود، فراهم کنید.
- + -
-
What is a builder?
+What is a builder?
یک تابع سازنده یعنی تابعی که از "API Architect" برای انجام یک فرآیند پیچیده مانند "build" یا "test" استفاده می کند. کد سازنده در یک بسته npm تعریف شده است. به عنوان مثال، BrowserBuilder یک ساخت بسته وب را برای یک هدف مرورگر اجرا می کند و KarmaBuilder سرور Karma را راه اندازی می کند و یک بسته وب را برای آزمایش های واحد اجرا می کند.
- + -
-
How do you invoke a builder?
+How do you invoke a builder?
دستور Angular CLI «ng run» برای فراخوانی سازنده ای با پیکربندی هدف خاص استفاده می شود. فایل پیکربندی فضای کاری، «angular.json»، حاوی تنظیمات پیشفرض برای سازندههای داخلی است.
- + -
-
How do you create app shell in Angular?
+How do you create app shell in Angular?
پوسته برنامه راهی برای ارائه بخشی از برنامه شما از طریق یک مسیر در زمان ساخت است. این برای اولین بار رنگ آمیزی برنامه شما که به سرعت ظاهر می شود مفید است زیرا مرورگر می تواند HTML و CSS ایستا را بدون نیاز به مقداردهی اولیه جاوا اسکریپت ارائه دهد. شما می توانید با استفاده از Angular CLI که یک پوسته برنامه برای اجرای سمت سرور برنامه شما ایجاد می کند، به این هدف برسید.
- +ng generate appShell [options] (or) ng g appShell [options] -
-
What are the case types in Angular?
+What are the case types in Angular?
Angular از قراردادهای بزرگ برای تشخیص نام انواع مختلف استفاده می کند. Angular لیستی از انواع موارد زیر را دنبال می کند.
-
-
- camelCase : نمادها، ویژگیها، روشها، نام لولهها، انتخابکنندههای دستورالعمل غیرمولفه، ثابتها از حروف کوچک در حرف اول آیتم استفاده میکنند. به عنوان مثال، "selectedUser" -
- UpperCamelCase (or PascalCase): نام کلاسها، از جمله کلاسهایی که اجزا، رابطها، NgModules، دستورالعملها و لولهها را تعریف میکنند، از حروف بزرگ در حرف اول آیتم استفاده میکنند. -
- dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list". -
- UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS". +
camelCase : نمادها، ویژگیها، روشها، نام لولهها، انتخابکنندههای دستورالعمل غیرمولفه، ثابتها از حروف کوچک در حرف اول آیتم استفاده میکنند. به عنوان مثال، "selectedUser"
+UpperCamelCase (or PascalCase): نام کلاسها، از جمله کلاسهایی که اجزا، رابطها، NgModules، دستورالعملها و لولهها را تعریف میکنند، از حروف بزرگ در حرف اول آیتم استفاده میکنند.
+dash-case (or "kebab-case"): در قسمت توصیفی نام فایل ها، انتخابگرهای مؤلفه از خط تیره بین کلمات استفاده می شود. به عنوان مثال، "app-user-list".
+UPPER_UNDERSCORE_CASE: همه ثابت ها از حروف بزرگ مرتبط با خط زیر استفاده می کنند. به عنوان مثال، "NUMBER_OF_USERS".
-
-
What are the class decorators in Angular?
+What are the class decorators in Angular?
دکوراتور کلاس، دکوراتوری است که بلافاصله قبل از تعریف کلاس ظاهر می شود، که کلاس را از نوع معین اعلام می کند و ابرداده مناسب برای نوع را فراهم می کند.
لیست زیر از دکوراتورها در زیر کلاس دکوراتورها آمده است:
-
-
- @Component() -
- @Directive() -
- @Pipe() -
- @Injectable() -
- @NgModule() +
@Component()
+@Directive()
+@Pipe()
+@Injectable()
+@NgModule()
-
-
What are class field decorators?
+What are class field decorators?
دکوراتورهای فیلد کلاس عباراتی هستند که بلافاصله قبل از یک فیلد در تعریف کلاس اعلام می شوند که نوع آن فیلد را مشخص می کند. برخی از نمونه ها عبارتند از: @input و @output،
- +@Input() myProperty; @Output() myEvent = new EventEmitter(); -
-
What is declarable in Angular?
+What is declarable in Angular?
Declarable یک نوع کلاس است که می توانید آن را به لیست اعلانات یک NgModule اضافه کنید. انواع کلاس ها مانند کامپوننت ها، دستورالعمل ها و لوله ها را می توان در ماژول اعلام کرد. ساختار اعلامیه ها به این صورت خواهد بود
- +declarations: [ @@ -3496,21 +3737,21 @@What is declarable in Angular?
YourDirective ], -
-
What are the restrictions on declarable classes?
+What are the restrictions on declarable classes?
کلاس های زیر نباید تعریف شوند،
-
-
- کلاسی که قبلاً در NgModule دیگری اعلام شده است -
- کلاس های Ngmodule -
- کلاس های خدماتی -
- کلاس های کمکی +
کلاسی که قبلاً در NgModule دیگری اعلام شده است
+کلاس های Ngmodule
+کلاس های خدماتی
+کلاس های کمکی
-
-
What is a DI token?
+What is a DI token?
توکن DI یک توکن جستجوی مرتبط با ارائه دهنده وابستگی در سیستم تزریق وابستگی است. انژکتور یک نقشه ارائه دهنده توکن داخلی دارد که در صورت درخواست وابستگی به آن ارجاع می دهد و رمز DI کلید نقشه است. بیایید استفاده از DI Token را مثال بزنیم،
- +const BASE_URL = new InjectionToken<string>('BaseUrl'); @@ -3518,21 +3759,21 @@What is a DI token?
Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]}); const url = injector.get(BASE_URL); -
-
What is Angular DSL?
+What is Angular DSL?
یک زبان دامنه خاص (DSL) یک زبان کامپیوتری است که برای یک دامنه کاربردی خاص تخصصی شده است. Angular زبان مخصوص دامنه (DSL) خود را دارد که به ما اجازه میدهد تا سینتکس html مانند خاص Angular را در بالای html معمولی بنویسیم. این کامپایلر خود را دارد که این نحو را به html کامپایل می کند که مرورگر بتواند آن را درک کند. این DSL در NgModules مانند انیمیشن ها، فرم ها و مسیریابی و ناوبری تعریف شده است.
اساساً شما 3 نحو اصلی را در Angular DSL خواهید دید.
-
-
(): برای رویدادهای خروجی و DOM استفاده می شود.
-[]: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.
-*: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.
+(): برای رویدادهای خروجی و DOM استفاده می شود.
+[]: برای ورودی و ویژگی های خاص عنصر DOM استفاده می شود.
+*: دستورالعمل های ساختاری (*ngFor یا *ngIf) ساختار DOM را تحت تاثیر قرار می دهد/تغییر می دهد.
-
-
what is an rxjs subject in Angular
+what is an rxjs subject in Angular
یک موضوع RxJS نوع خاصی از Observable است که اجازه میدهد مقادیر برای بسیاری از Observerها چندپخشی شوند. در حالی که مشاهده پذیرهای ساده یکپارچه هستند (هر مشاهده کننده مشترک دارای اجرای مستقل از Observable است)، سوژه ها چندپخشی هستند.
یک موضوع مانند یک مشاهده پذیر است، اما می تواند برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.
@@ -3550,10 +3791,10 @@what is an rxjs subject in Angular
subject.next(1); subject.next(2); - + -
-
What is Bazel tool?
+What is Bazel tool?
Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تواند وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید. @@ -3563,7 +3804,7 @@What is Bazel tool?
-
-
What are the advantages of Bazel tool?
+What are the advantages of Bazel tool?
-
این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
@@ -3579,51 +3820,51 @@What are the advantages of Bazel tool?
-
-
How do you use Bazel with Angular CLI?
+How do you use Bazel with Angular CLI?
بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
-
-
- Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید +
Use in an existing applciation: @angular/bazel را با استفاده از CLI اضافه کنید
ng add @angular/bazel-
-
- Use in a new application: بسته را نصب کنید و برنامه را با گزینه مجموعه ایجاد کنید +
Use in a new application: بسته را نصب کنید و برنامه را با گزینه مجموعه ایجاد کنید
وقتی از دستورات ng build و ng serve استفاده می کنید، Bazel در پشت صحنه استفاده می شود و نتایج را در پوشه dist/bin خروجی می دهد. - +npm install -g @angular/bazel ng new --collection=@angular/bazel -
-
How do you run Bazel directly?
+How do you run Bazel directly?
گاهی اوقات ممکن است بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می توانید با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
- +bazel build [targets] // Compile the default output artifacts of the given targets. bazel test [targets] // Run the tests with *_test targets found in the pattern. bazel run [target]: Compile the program represented by target and then run it. -
-
What is platform in Angular?
+What is platform in Angular?
پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تواند یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بستههای angular/platform-*@ ارائه میشود و این بستهها به برنامههایی که از «@angular/core» و «@angular/common» استفاده میکنند اجازه میدهند در محیطهای مختلف اجرا شوند.
به عنوان مثال، Angular می تواند به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،-
-
- در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند. -
- هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند. +
در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
+هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
-
-
What happens if I import the same module twice?
+What happens if I import the same module twice?
اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
- + -
-
How do you select an element with in a component template?
+How do you select an element with in a component template?
برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل
@ViewChildاستفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،<input #uname> @@ -3636,10 +3877,10 @@
- +How do you select an element with in a component template?
console.log(this.input.nativeElement.value); } -
-
How do you detect route change in Angular?
+How do you detect route change in Angular?
در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
- +this.router.events.subscribe((event: Event) => {}) @@ -3674,10 +3915,10 @@How do you detect route change in Angular?
} } -
-
How do you pass headers for HTTP client?
+How do you pass headers for HTTP client?
میتوانید مستقیماً نقشه شی را برای مشتری http ارسال کنید یا کلاس HttpHeaders را برای تهیه هدرها ایجاد کنید.
- +constructor(private _http: HttpClient) {} @@ -3696,20 +3937,20 @@How do you pass headers for HTTP client?
return this._http.get<any[]>('someUrl', { headers: headers, params: params }) -
-
What is the purpose of differential loading in CLI?
+What is the purpose of differential loading in CLI?
از انتشار Angular8 به بعد، برنامهها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته میشوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
-
-
- اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره میبرد، پلیفیلهای کمتری ارسال میکند و منجر به اندازه بستهای کوچکتر میشود. -
- ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلیفیلهای لازم است. اما این باعث می شود اندازه بسته بزرگتر شود. +
اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره میبرد، پلیفیلهای کمتری ارسال میکند و منجر به اندازه بستهای کوچکتر میشود.
+ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلیفیلهای لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
- + -
-
Is Angular supports dynamic imports?
+Is Angular supports dynamic imports?
بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، میتوانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
@@ -3719,10 +3960,10 @@
قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را میپذیرد و در طول زمان ساخت، خطا میدهد.Is Angular supports dynamic imports?
- +{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)}; -
-
What is lazy loading?
+What is lazy loading?
Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
- +const routes: Routes = [ @@ -3741,10 +3982,10 @@What is lazy loading?
} ]; -
-
What are workspace APIs?
+What are workspace APIs?
نسخه Angular 8.0 API های Workspace را معرفی می کند تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کند. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده میشود. میتوانید گزینه بهینهسازی را برای build target به صورت زیر فعال یا اضافه کنید.
- +import { NodeJsSyncHost } from '@angular-devkit/core/node'; @@ -3771,18 +4012,18 @@What are workspace APIs?
addBuildTargetOption(); -
-
How do you upgrade angular version?
+How do you upgrade angular version?
ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
$ ng update @angular/cli @angular/core
- + -
-
What is Angular Material?
+What is Angular Material?
Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
npm install --save @angular/material @angular/cdk @angular/animations @@ -3790,10 +4031,10 @@
What is Angular Material?
yarn add @angular/material @angular/cdk @angular/animationsاز دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی می کند. آخرین نسخه متریال Angular 8.1.1 است
- + -
-
How do you upgrade location service of angularjs?
+How do you upgrade location service of angularjs?
اگر از سرویس «location» را به سرویس «Location» در Angular میگذارد. بیایید این ماژول را مانند زیر به AppModule اضافه کنیم،
- +// Other imports ... @@ -3807,15 +4048,15 @@How do you upgrade location service of angularjs?
}) export class AppModule {} -
-
What is NgUpgrade?
+What is NgUpgrade?
NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
- + -
-
How do you test Angular application using CLI?
+How do you test Angular application using CLI?
Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. بهطور پیشفرض، این دستور برنامه را در حالت تماشا میسازد و «Karma test runner» را راهاندازی میکند. خروجی نتایج آزمون به صورت زیر خواهد بود:
10% building modules 1/1 modules 0 active @@ -3826,13 +4067,13 @@
How do you test Angular application using CLI?
Chrome ...: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)نکته: یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
- + -
-
How to use polyfills in Angular application?
+How to use polyfills in Angular application?
Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی
src/polyfills.tsبه عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،-
-
- Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند. +
Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
- Optional polyfills: شما باید بسته npm آن را نصب کنید و سپس دستور import را در فایل 'src/polyfills.ts' ایجاد کنید.
به عنوان مثال، ابتدا باید بسته زیر npm را برای افزودن انیمیشن های وب (اختیاری) polyfill نصب کنید.
How to use polyfills in Angular application?
- +import 'web-animations-js'; -
-
What are the ways to trigger change detection in Angular?
+What are the ways to trigger change detection in Angular?
میتوانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روشهای خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
-
-
- ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند. -
- NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند. -
- ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد. +
ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
+NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
+ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
-
-
What are the differences of various versions of Angular?
+What are the differences of various versions of Angular?
نسخه های مختلفی از فریم ورک Angular وجود دارد. بیایید ویژگی های تمام نسخه های مختلف را ببینیم،
- Angular 1:
-
-
- Angular 1 (AngularJS) اولین فریم ورک زاویه ای است که در سال 2010 منتشر شد. -
- AngularJS برای دستگاه های تلفن همراه ساخته نشده است. -
- بر پایه کنترلرهایی با معماری MVC ساخته شده است. +
Angular 1 (AngularJS) اولین فریم ورک زاویه ای است که در سال 2010 منتشر شد.
+AngularJS برای دستگاه های تلفن همراه ساخته نشده است.
+بر پایه کنترلرهایی با معماری MVC ساخته شده است.
- 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 مبتنی بر کامپوننت است.
- 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 نادیده گرفته شده است.
- Angular 4:
-
-
- اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است. -
- با Angular 4 اندازه بستههای تولیدی صدها کیلوبایت کاهش مییابد. -
- ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود. -
- پشتیبانی از Typescript 2.1 و 2.2. -
- جهانی زاویه ای -
- HttpClient جدید +
اندازه فایل کد تولید شده توسط کامپایلر در حالت AOT بسیار کاهش یافته است.
+با Angular 4 اندازه بستههای تولیدی صدها کیلوبایت کاهش مییابد.
+ویژگی های انیمیشن از angular/core حذف شده و به عنوان یک بسته جداگانه تشکیل می شود.
+پشتیبانی از Typescript 2.1 و 2.2.
+جهانی زاویه ای
+HttpClient جدید
- Angular 5:
-
-
- Angular 5 زاویه ای را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید. -
- با بهینه ساز ساخت جدید ارسال می شود. -
- پشتیبانی از Typescript 2.5. -
- کارگر خدماتی +
Angular 5 زاویه ای را سریعتر می کند. زمان بارگذاری و زمان اجرا را بهبود بخشید.
+با بهینه ساز ساخت جدید ارسال می شود.
+پشتیبانی از Typescript 2.5.
+کارگر خدماتی
- Angular 6:
-
-
- در ماه می 2018 منتشر شد. -
- شامل رابط خط فرمان زاویه ای (CLI)، کیت توسعه اجزا (CDK)، بسته مواد زاویه ای، عناصر زاویه ای. -
- رفع اشکال سرویس کارگر. -
- i18n -
- حالت آزمایشی برای آیوی. -
- RxJS 6.0 -
- لرزش درخت +
در ماه می 2018 منتشر شد.
+شامل رابط خط فرمان زاویه ای (CLI)، کیت توسعه اجزا (CDK)، بسته مواد زاویه ای، عناصر زاویه ای.
+رفع اشکال سرویس کارگر.
+i18n
+حالت آزمایشی برای آیوی.
+RxJS 6.0
+لرزش درخت
- 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 تم و ژستها یا انیمیشنها را میخواهد.
- Angular 8:
-
-
- در ماه می 2019 منتشر شد. -
- TypeScript 3.4 +
در ماه می 2019 منتشر شد.
+TypeScript 3.4
- Angular 9:
-
-
- در فوریه 2020 منتشر شد. -
- TypeScript 3.7 -
- Ivy به طور پیش فرض فعال است +
در فوریه 2020 منتشر شد.
+TypeScript 3.7
+Ivy به طور پیش فرض فعال است
- Angular 10:
-
-
- در ژوئن 2020 منتشر شد. -
- TypeScript 3.9 -
- TSlib 2.0 +
در ژوئن 2020 منتشر شد.
+TypeScript 3.9
+TSlib 2.0
- Angular 1:
-
-
What are the security principles in angular?
+What are the security principles in angular?
در زیر لیستی از اصول امنیتی در زاویه ای آورده شده است.
-
-
- باید از استفاده مستقیم از APIهای DOM اجتناب کنید. -
- شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید. -
- باید از کامپایلر قالب آفلاین استفاده کنید. -
- باید از محافظ XSS سمت سرور استفاده کنید. -
- باید از DOM Sanitizer استفاده کنید. -
- شما باید از حملات CSRF یا XSRF جلوگیری کنید. +
باید از استفاده مستقیم از APIهای DOM اجتناب کنید.
+شما باید Content Security Policy (CSP) را فعال کرده و وب سرور خود را برای بازگرداندن هدرهای مناسب CSP HTTP پیکربندی کنید.
+باید از کامپایلر قالب آفلاین استفاده کنید.
+باید از محافظ XSS سمت سرور استفاده کنید.
+باید از DOM Sanitizer استفاده کنید.
+شما باید از حملات CSRF یا XSRF جلوگیری کنید.
-
-
What is the reason to deprecate Web Tracing Framework?
+What is the reason to deprecate Web Tracing Framework?
Angular از ادغام با Web Tracing Framework (WTF) به منظور اجرای عملیات پشتیبانی شده است. از آنجایی که به خوبی نگهداری نمی شود و در اکثر برنامه ها شکسته می شود، در آخرین نسخه منسوخ شده است.
- + -
-
What is the reason to deprecate web worker packages?
+What is the reason to deprecate web worker packages?
هر دو «@angular/platform-webworker» و «@angular/platform-webworker-dynamic» رسماً منسوخ شدهاند، تیم Angular متوجه شد که اجرای برنامه Angular روی Web worker عمل خوبی نیست.
- + -
-
How do you find angular CLI version?
+How do you find angular CLI version?
Angular CLI نسخه نصب شده خود را با استفاده از روش های مختلف زیر با استفاده از دستور ng ارائه می دهد
ng v @@ -3986,10 +4227,10 @@
- +How do you find angular CLI version?
Angular: ... -
-
What is the browser support for Angular?
+What is the browser support for Angular?
Angular از جدیدترین مرورگرها پشتیبانی می کند که شامل مرورگرهای دسکتاپ و موبایل می شود.
@@ -4033,64 +4274,64 @@
- +What is the browser support for Angular?
-
-
What is schematic?
+What is schematic?
این یک کتابخانه داربستی است که نحوه تولید یا تبدیل یک پروژه برنامه نویسی را با ایجاد، اصلاح، تغییر شکل یا جابجایی فایل ها و کد تعریف می کند. قوانینی را تعریف می کند که بر روی یک فایل سیستم مجازی به نام درخت عمل می کنند.
- + -
-
What is rule in Schematics?
+What is rule in Schematics?
در دنیای شماتیک، این تابعی است که روی درخت فایل برای ایجاد، حذف یا اصلاح فایلها به شیوهای خاص عمل میکند.
- + -
-
What is Schematics CLI?
+What is Schematics CLI?
طرحواره ها با ابزار خط فرمان خود به نام Schematics CLI عرضه می شوند. برای نصب شماتیک های اجرایی استفاده می شود که می توانید از آن برای ایجاد یک مجموعه شماتیک جدید با نام اولیه شماتیک استفاده کنید. پوشه مجموعه یک فضای کاری برای شماتیک ها است. همچنین می توانید از دستور schematics برای اضافه کردن یک شماتیک جدید به مجموعه موجود یا گسترش یک شماتیک موجود استفاده کنید. شما می توانید Schematic CLI را بصورت سراسری به صورت زیر نصب کنید.
npm install -g @angular-devkit/schematics-cli
- + -
-
What are the best practices for security in angular?
+What are the best practices for security in angular?
در زیر بهترین شیوه های امنیتی در زاویه ای آورده شده است.
-
-
- از آخرین نسخه های کتابخانه Angular استفاده کنید -
- کپی Angular خود را تغییر ندهید -
- از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید. +
از آخرین نسخه های کتابخانه Angular استفاده کنید
+کپی Angular خود را تغییر ندهید
+از API های Angular که در مستندات به عنوان "ریسک امنیتی" علامت گذاری شده اند، خودداری کنید.
-
-
What is Angular security model for preventing XSS attacks?
+What is Angular security model for preventing XSS attacks?
Angular به طور پیش فرض همه مقادیر را غیرقابل اعتماد می داند. به عنوان مثال، Angular پاکسازی میکند و از مقادیر نامعتبر فرار میکند وقتی یک مقدار از یک الگو، از طریق ویژگی، ویژگی، سبک، کلاس اتصال یا درونیابی در DOM درج میشود.
- + -
-
What is the role of template compiler for prevention of XSS attacks?
+What is the role of template compiler for prevention of XSS attacks?
کامپایلر قالب آفلاین از آسیب پذیری های ناشی از تزریق قالب جلوگیری می کند و عملکرد برنامه را تا حد زیادی بهبود می بخشد. بنابراین توصیه می شود از کامپایلر قالب آفلاین در استقرار تولید بدون ایجاد پویا هیچ قالبی استفاده کنید.
- + -
-
What are the various security contexts in Angular?
+What are the various security contexts in Angular?
Angular زمینه های امنیتی زیر را برای پاکسازی تعریف می کند:
-
-
- HTML: هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده می شود. -
- Style: هنگام اتصال CSS به ویژگی style استفاده می شود. -
- URL: برای ویژگی های URL مانند
<a href>استفاده می شود.
- - Resource URL: این یک URL است که به عنوان کدی مانند
<script src>بارگیری و اجرا می شود.
+ HTML: هنگام تفسیر یک مقدار به عنوان HTML مانند اتصال به innerHtml استفاده می شود.
+Style: هنگام اتصال CSS به ویژگی style استفاده می شود.
+URL: برای ویژگی های URL مانند
<a href>استفاده می شود.
+Resource URL: این یک URL است که به عنوان کدی مانند
<script src>بارگیری و اجرا می شود.
-
-
What is Sanitization? Is angular supports it?
+What is Sanitization? Is angular supports it?
Sanitization بازرسی یک مقدار نامعتبر است که آن را به مقداری تبدیل می کند که برای درج آن در DOM ایمن است. بله، Angular از ضد عفونی کردن پشتیبانی می کند. مقادیر نامعتبر را برای HTML، سبکها و URLها پاکسازی میکند، اما پاکسازی URLهای منبع ممکن نیست زیرا حاوی کد دلخواه هستند.
- + -
-
What is the purpose of innerHTML?
+What is the purpose of innerHTML?
innerHtml یکی از ویژگی های HTML-Elements است که به شما امکان می دهد محتوای html آن را به صورت برنامه ریزی شده تنظیم کنید. بیایید قطعه کد html زیر را در تگ «
-
-
What is the difference between interpolated content and innerHTML?
+What is the difference between interpolated content and innerHTML?
تفاوت اصلی بین کد درون یابی شده و کد داخلی در رفتار کد تفسیر شده است. محتوای درونیابی همیشه حذف میشود، یعنی HTML تفسیر نمیشود و مرورگر براکتهای زاویهای را در محتوای متن عنصر نمایش میدهد. در جایی که در innerHTML binding، محتوا تفسیر می شود، یعنی مرورگر کاراکترهای < و > را به عنوان HTMLEntities تبدیل می کند. به عنوان مثال، استفاده در قالب به صورت زیر خواهد بود.
<p>Interpolated value:</p> @@ -4120,10 +4361,10 @@
What is the difference between interpolated content and innerHTML?
}حتی با وجود اینکه innerHTML binding شانس حمله XSS را ایجاد می کند، Angular این مقدار را ناامن تشخیص می دهد و به طور خودکار آن را پاکسازی می کند.
- + -
-
How do you prevent automatic sanitization?
+How do you prevent automatic sanitization?
گاهی اوقات برنامه ها واقعاً نیاز دارند که کدهای اجرایی مانند نمایش
<iframe>را از یک URL داشته باشند. در این مورد، باید با گفتن اینکه یک مقدار را بررسی کرده اید، نحوه تولید آن را بررسی کرده اید و مطمئن شده اید که همیشه ایمن است، از پاکسازی خودکار در Angular جلوگیری کنید. اساساً شامل 2 مرحله است،-
@@ -4132,11 +4373,11 @@
How do you prevent automatic sanitization?
-
با فراخوانی برخی از روشهای زیر، مقدار قابل اعتماد را علامتگذاری کنید
-
-
- bypassSecurityTrustHtml -
- bypassSecurityTrustScript -
- bypassSecurityTrustStyle -
- bypassSecurityTrustUrl -
- bypassSecurityTrustResourceUrl +
bypassSecurityTrustHtml
+bypassSecurityTrustScript
+bypassSecurityTrustStyle
+bypassSecurityTrustUrl
+bypassSecurityTrustResourceUrl
How do you prevent automatic sanitization?
this.dangerousUrl = 'javascript:alert("XSS attack")'; this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl); - + -
@@ -4132,11 +4373,11 @@
-
-
Is safe to use direct DOM API methods in terms of security?
+Is safe to use direct DOM API methods in terms of security?
خیر، APIها یا روشهای داخلی مرورگر DOM بهطور خودکار از شما در برابر آسیبپذیریهای امنیتی محافظت نمیکنند. در این مورد توصیه می شود به جای تعامل مستقیم با DOM از قالب های Angular استفاده کنید. اگر اجتناب ناپذیر است، از عملکردهای ضدعفونی داخلی Angular استفاده کنید.
- + -
-
What is DOM sanitizer?
+What is DOM sanitizer?
«DomSanitizer» برای کمک به جلوگیری از اشکالات امنیتی Cross Site Scripting (XSS) با پاکسازی مقادیر برای ایمن بودن استفاده در زمینههای مختلف DOM استفاده میشود.
- + -
-
How do you support server side XSS protection in Angular application?
+How do you support server side XSS protection in Angular application?
حفاظت XSS سمت سرور در یک برنامه زاویه ای با استفاده از زبان قالبی که به طور خودکار از مقادیر برای جلوگیری از آسیب پذیری های XSS در سرور فرار می کند، پشتیبانی می شود. اما از زبان قالب برای تولید الگوهای Angular در سمت سرور استفاده نکنید که خطر زیادی برای معرفی آسیبپذیریهای تزریق قالب ایجاد میکند.
- + -
-
Is angular prevents http level vulnerabilities?
+Is angular prevents http level vulnerabilities?
Angular دارای پشتیبانی داخلی برای جلوگیری از آسیبپذیریهای سطح http مانند جعل درخواست بین سایتی (CSRF یا XSRF) و گنجاندن اسکریپت بین سایتی (XSSI) است. حتی اگر این آسیبپذیریها باید در سمت سرور کاهش یابند، Angular کمکهایی را برای آسانتر کردن ادغام در سمت کلاینت ارائه میکند.
-
-
- HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود -
- کتابخانه HttpClient قرارداد پاسخهای JSON پیشوندی را تشخیص میدهد (که js غیرقابل اجرا با نویسههای ")]}'،\n" کد میکند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخهای قبل حذف میکند. تجزیه بیشتر +
HttpClient از مکانیزم نشانه ای پشتیبانی می کند که برای جلوگیری از حملات XSRF استفاده می شود
+کتابخانه HttpClient قرارداد پاسخهای JSON پیشوندی را تشخیص میدهد (که js غیرقابل اجرا با نویسههای ")]}'،\n" کد میکند) و به طور خودکار رشته ")]}'،\n" را از همه پاسخهای قبل حذف میکند. تجزیه بیشتر
-
-
What are Http Interceptors?
+What are Http Interceptors?
رهگیرهای Http بخشی از @angular/common/http هستند که درخواستهای HTTP را از برنامه شما به سرور و برعکس در پاسخهای HTTP بررسی و تبدیل میکنند. این رهگیرها می توانند انواع مختلفی از وظایف ضمنی، از احراز هویت گرفته تا ثبت را انجام دهند.
نحو رابط HttpInterceptor مانند زیر است.
@@ -4206,23 +4447,23 @@What are Http Interceptors?
}) export class AppModule {} - + -
-
What are the applications of HTTP interceptors?
+What are the applications of HTTP interceptors?
رهگیرهای HTTP را می توان برای انواع مختلفی از وظایف استفاده کرد،
-
-
- Authentication -
- Logging -
- Caching -
- Fake backend -
- URL transformation -
- Modifying headers +
Authentication
+Logging
+Caching
+Fake backend
+URL transformation
+Modifying headers
-
-
Is multiple interceptors supported in Angular?
+Is multiple interceptors supported in Angular?
بله، Angular از چندین رهگیر در یک زمان پشتیبانی می کند. می توانید چندین رهگیر را در ویژگی ارائه دهندگان تعریف کنید:
providers: [ @@ -4231,10 +4472,10 @@
Is multiple interceptors supported in Angular?
],رهگیرها به ترتیبی که ارائه شده اند فراخوانی می شوند. i.n، MyFirst Interceptor ابتدا در پیکربندی رهگیرهای بالا فراخوانی می شود.
- + -
-
How can I use interceptor for an entire application?
+How can I use interceptor for an entire application?
میتوانید با وارد کردن «HttpClientModule» فقط در AppModule خود، از همان نمونه «HttpInterceptors» برای کل برنامه استفاده کنید، و رهگیرها را به انژکتور برنامه root اضافه کنید.
@@ -4276,18 +4517,18 @@
برای مثال، بیایید کلاسی را تعریف کنیم که در برنامه root قابل تزریق باشد.How can I use interceptor for an entire application?
-
-
How does Angular simplifies Internationalization?
+How does Angular simplifies Internationalization?
Angular زمینه های بین المللی سازی زیر را ساده می کند:
-
-
- نمایش تاریخ، عدد، درصد و ارز در قالب محلی. -
- آماده سازی متن در قالب های مؤلفه برای ترجمه. -
- رسیدگی به اشکال جمع کلمات. -
- مدیریت متن جایگزین. +
نمایش تاریخ، عدد، درصد و ارز در قالب محلی.
+آماده سازی متن در قالب های مؤلفه برای ترجمه.
+رسیدگی به اشکال جمع کلمات.
+مدیریت متن جایگزین.
-
-
How do you manually register locale data?
+How do you manually register locale data?
بهطور پیشفرض، Angular فقط حاوی دادههای محلی برای en-US است که انگلیسی است که در ایالات متحده آمریکا صحبت میشود. اما اگر میخواهید روی محلی دیگر تنظیم کنید، باید دادههای محلی را برای آن محلی جدید وارد کنید. پس از آن می توانید با استفاده از روش «registerLocaleData» ثبت نام کنید و نحو این روش به شکل زیر است.
- +registerLocaleData(data: any, localeId?: any, extraData?: any): void @@ -4299,19 +4540,19 @@How do you manually register locale data?
registerLocaleData(localeDe, 'de'); -
-
What are the four phases of template translation?
+What are the four phases of template translation?
فرآیند ترجمه قالب i18n دارای چهار مرحله است:
-
-
- Mark static text messages in your component templates for translation: می توانید i18n را روی هر تگ عنصری که متن ثابت آن باید ترجمه شود قرار دهید. به عنوان مثال، برای عنوان زیر به ویژگی i18n نیاز دارید. +
Mark static text messages in your component templates for translation: می توانید i18n را روی هر تگ عنصری که متن ثابت آن باید ترجمه شود قرار دهید. به عنوان مثال، برای عنوان زیر به ویژگی i18n نیاز دارید.
<h1 i18n>Hello i18n!</h1>
-
-
- Create a translation file: از دستور Angular CLI xi18n برای استخراج متن علامت گذاری شده در یک فایل منبع ترجمه استاندارد صنعتی استفاده کنید. به عنوان مثال، پنجره ترمینال را در ریشه پروژه برنامه باز کنید و دستور CLI xi18n را اجرا کنید. +
Create a translation file: از دستور Angular CLI xi18n برای استخراج متن علامت گذاری شده در یک فایل منبع ترجمه استاندارد صنعتی استفاده کنید. به عنوان مثال، پنجره ترمینال را در ریشه پروژه برنامه باز کنید و دستور CLI xi18n را اجرا کنید.
```bash @@ -4347,16 +4588,16 @@
What are the four phases of template translation?
--i18nLocale= locale id
-
-
-
-
What is the purpose of i18n attribute?
+What is the purpose of i18n attribute?
ویژگی Angular i18n محتوای قابل ترجمه را علامت گذاری می کند. این یک ویژگی سفارشی است که توسط ابزارها و کامپایلرهای Angular شناسایی می شود. کامپایلر پس از ترجمه آن را حذف می کند.
Note: به یاد داشته باشید که i18n یک دستورالعمل Angular نیست.
- + -
-
What is the purpose of custom id?
+What is the purpose of custom id?
هنگامی که متن قابل ترجمه را تغییر میدهید، ابزار استخراج Angular یک شناسه جدید برای آن واحد ترجمه ایجاد میکند. به دلیل این رفتار، باید هر بار فایل ترجمه را با شناسه جدید به روز کنید.
برای مثال، فایل ترجمه «messages.de.xlf.html» برای برخی از پیامهای متنی زیر واحد انتقال ایجاد کرده است:
@@ -4366,10 +4607,10 @@What is the purpose of custom id?
<h1 i18n="@@welcomeHeader">Hello i18n!</h1>
- + -
-
What happens if the custom id is not unique?
+What happens if the custom id is not unique?
شما باید شناسه های سفارشی را منحصر به فرد تعریف کنید. اگر از یک شناسه برای دو پیام متنی مختلف استفاده می کنید، فقط اولین مورد استخراج می شود. اما ترجمه آن به جای هر دو پیامک اصلی استفاده می شود.
برای مثال، بیایید همان شناسه سفارشی myCustomId را برای دو پیام تعریف کنیم:
@@ -4389,19 +4630,19 @@What happens if the custom id is not unique?
<h2>Guten Morgen</h2> <h2>Guten Morgen</h2>
- + -
-
Can I translate text without creating an element?
+Can I translate text without creating an element?
بله، میتوانید با استفاده از ویژگی «
» به آن دست پیدا کنید. معمولاً برای ترجمه باید محتوای متنی را با ویژگی i18n بپیچید. اما اگر نمیخواهید یک عنصر DOM جدید فقط به خاطر ترجمه ایجاد کنید، میتوانید متن را در یک عنصر بپیچید. <ng-container i18n>I'm not using any DOM element for translation</ng-container>
به یاد داشته باشید که «
- +» به یک نظر html تبدیل می شود -
-
How can I translate attribute?
+How can I translate attribute?
میتوانید ویژگیها را با پیوست کردن ویژگی «i18n-x» ترجمه کنید، جایی که x نام ویژگی برای ترجمه است. به عنوان مثال، می توانید ویژگی عنوان تصویر را به صورت زیر ترجمه کنید.
<img [src]="example" i18n-title title="Internationlization" /> @@ -4414,35 +4655,35 @@
How can I translate attribute?
-
-
List down the pluralization categories?
+List down the pluralization categories?
تعدد بسته به زبان دارای دسته های زیر است.
-
-
- = 0 (یا هر عدد دیگری) -
- صفر -
- یک -
- دو -
- تعداد کمی -
- بسیاری -
- دیگر +
= 0 (یا هر عدد دیگری)
+صفر
+یک
+دو
+تعداد کمی
+بسیاری
+دیگر
-
-
What is select ICU expression?
+What is select ICU expression?
عبارت ICU شبیه عبارات جمع است با این تفاوت که شما از بین ترجمه های جایگزین بر اساس مقدار رشته به جای عدد انتخاب می کنید. در اینجا شما آن مقادیر رشته را تعریف می کنید.
بیایید مؤلفه را با ویژگی «residenceStatus» که دارای مقادیر ممکن «شهروند»، «مقیم دائم» و «خارجی» است، در نظر بگیریم و پیام آن مقادیر را به ترجمههای مناسب نگاشت میکند.
<span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>
- + -
-
How do you report missing translations?
+How do you report missing translations?
بهطور پیشفرض، هنگامی که ترجمه وجود ندارد، پیام هشداری مانند «ترجمه از دست رفته برای پیام «somekey» ایجاد میکند. اما می توانید با سطح متفاوتی از پیام در کامپایلر Angular به صورت زیر پیکربندی کنید.
-
-
- Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود. -
- Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان میدهد. -
- Ignore: هیچ کاری نمی کند. +
Error: خطا میده اگر از کامپایل AOT استفاده می کنید، بیلد با شکست مواجه می شود. اما اگر از کامپایل JIT استفاده می کنید، برنامه بارگذاری نمی شود.
+Warning (default): این یک اخطار «مفقود ترجمه» را در کنسول یا پوسته نشان میدهد.
+Ignore: هیچ کاری نمی کند.
اگر از کامپایلر AOT استفاده می کنید، باید تغییراتی را در بخش پیکربندی فایل پیکربندی Angular CLI خود، angular.json انجام دهید.
@@ -4467,10 +4708,10 @@How do you report missing translations?
] }); - + -
-
How do you provide build configuration for multiple locales?
+How do you provide build configuration for multiple locales?
میتوانید پیکربندی ساخت مانند مسیر فایل ترجمه، نام، قالب و آدرس برنامه را در تنظیمات «پیکربندی» فایل Angular.json ارائه کنید. به عنوان مثال، نسخه آلمانی برنامه شما بیلد را به صورت زیر پیکربندی کرده است:
- +"configurations": { @@ -4485,49 +4726,49 @@How do you provide build configuration for multiple locales?
} } -
-
What is an angular library?
+What is an angular library?
کتابخانه Angular یک پروژه Angular است که با یک برنامه تفاوت دارد زیرا نمی تواند به تنهایی اجرا شود. باید وارد شده و در یک برنامه استفاده شود. برای مثال، میتوانید کتابخانه «سرویسکار» را به یک برنامه Angular وارد یا اضافه کنید که یک برنامه کاربردی را به یک برنامه وب پیشرو (PWA) تبدیل میکند.
Note: شما می توانید کتابخانه شخص ثالث خود را ایجاد کنید و آن را به عنوان بسته npm منتشر کنید تا در یک برنامه استفاده شود.
- + -
-
What is AOT compiler?
+What is AOT compiler?
کامپایلر AOT بخشی از یک فرآیند ساخت است که یک بسته برنامه کوچک، سریع و آماده برای اجرا تولید میکند، معمولاً برای تولید. این کد Angular HTML و TypeScript شما را در مرحله ساخت قبل از دانلود و اجرای آن کد به کد جاوا اسکریپت کارآمد تبدیل می کند.
- + -
-
How do you select an element in component template?
+How do you select an element in component template?
شما می توانید هر عنصر DOM را از طریق ElementRef با تزریق آن به سازنده کامپوننت خود کنترل کنید. یعنی کامپوننت باید سازنده ای با پارامتر ElementRef داشته باشد،
- +constructor(myElement: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } -
-
What is TestBed?
+What is TestBed?
TestBed یک api برای نوشتن تست های واحد برای برنامه های Angular و کتابخانه های آن است. حتی با وجود اینکه ما هنوز تستهای خود را در Jasmine مینویسیم و با استفاده از Karma اجرا میکنیم، این API راه آسانتری برای ایجاد اجزا، مدیریت تزریق، آزمایش رفتار ناهمزمان و تعامل با برنامه ما ارائه میکند.
- + -
-
What is protractor?
+What is protractor?
نقاله یک چارچوب تست سرتاسر برای برنامه های Angular و AngularJS است. این برنامه آزمایش هایی را بر روی برنامه شما که در یک مرورگر واقعی اجرا می شود، اجرا می کند و مانند یک کاربر با آن تعامل دارد.
- +npm install -g protractor -
-
What is collection?
+What is collection?
مجموعه مجموعه ای از شماتیک های مرتبط است که در یک بسته npm جمع آوری شده است. به عنوان مثال، مجموعه
- +@schematics/angularدر Angular CLI برای اعمال تبدیل به یک پروژه برنامه وب استفاده می شود. شما می توانید مجموعه شماتیک خود را برای سفارشی سازی پروژه های زاویه ای ایجاد کنید. -
-
How do you create schematics for libraries?
+How do you create schematics for libraries?
شما می توانید مجموعه های شماتیک خود را برای ادغام کتابخانه خود با Angular CLI ایجاد کنید. این مجموعه ها به عنوان 3 شماتیک اصلی طبقه بندی می شوند.
- Add schematics: این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده می شود.
@@ -4537,19 +4778,19 @@How do you create schematics for libraries?
- Update schematics: این شماتیک ها برای به روز رسانی وابستگی های کتابخانه و تنظیم برای شکستن تغییرات در نسخه جدید کتابخانه با استفاده از دستور "ng update" استفاده می شود.
به عنوان مثال، @angular/material به روز رسانی شماتیک مواد و وابستگی های cdk را با استفاده از دستور ng update @angular/material به روز می کند.
- Add schematics: این شماتیک ها برای نصب کتابخانه در یک فضای کاری Angular با استفاده از دستور "ng add" استفاده می شود.
-
-
How do you use jquery in Angular?
+How do you use jquery in Angular?
می توانید با استفاده از 3 مرحله ساده از jquery در Angular استفاده کنید.
-
-
- Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید +
Install the dependency: ابتدا وابستگی jquery را با استفاده از npm نصب کنید
npm install --save jquery-
-
- Add the jquery script: در پروژه Angular-CLI، مسیر نسبی را به jquery در فایل angular.json اضافه کنید. +
Add the jquery script: در پروژه Angular-CLI، مسیر نسبی را به jquery در فایل angular.json اضافه کنید.
"scripts": [ @@ -4557,7 +4798,7 @@How do you use jquery in Angular?
]-
-
- Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید. +
Start using jquery: عنصر را در قالب تعریف کنید. در حالی که متغیر jquery را اعلام کرده و کلاس های CSS را روی عنصر اعمال کنید.
<div id="elementId"> @@ -4582,10 +4823,10 @@
- +How do you use jquery in Angular?
} } -
-
What is the reason for No provider for HTTP exception?
+What is the reason for No provider for HTTP exception?
این استثنا به دلیل عدم وجود HttpClientModule در ماژول شما است. شما فقط باید در ماژول به صورت زیر وارد کنید:
- +import { HttpClientModule } from '@angular/common/http'; @@ -4600,10 +4841,10 @@What is the reason for No provider for HTTP exception?
}) export class AppModule { } -
-
What is router state?
+What is router state?
RouteState یک رابط است که وضعیت روتر را به عنوان درختی از مسیرهای فعال نشان می دهد.
interface RouterState extends Tree { @@ -4612,10 +4853,10 @@What is router state?
}با استفاده از سرویس Router و ویژگی routerState می توانید از هر نقطه در برنامه Angular به RouterState فعلی دسترسی داشته باشید.
- + -
-
How can I use SASS in angular project?
+How can I use SASS in angular project?
هنگامی که پروژه خود را با cli زاویه ای ایجاد می کنید، می توانید از دستور "ng new" استفاده کنید. تمام اجزای شما را با فایل های sass از پیش تعریف شده تولید می کند.
ng new My_New_Project --style=sass @@ -4624,25 +4865,25 @@How can I use SASS in angular project?
- +ng set defaults.styleExt scss -
-
What is the purpose of hidden property?
+What is the purpose of hidden property?
ویژگی hidden برای نشان دادن یا پنهان کردن عنصر DOM مرتبط بر اساس یک عبارت استفاده می شود. می توان آن را نزدیک به دستورالعمل «ng-show» در AngularJS مقایسه کرد. فرض کنید می خواهید نام کاربری را بر اساس در دسترس بودن کاربر با استفاده از ویژگی "مخفی" نشان دهید.
- +<div [hidden]="!user.name"> My name is: {{user.name}} </div> -
-
What is the difference between ngIf and hidden property?
+What is the difference between ngIf and hidden property?
تفاوت اصلی این است که *ngIf عنصر را از DOM حذف می کند، در حالی که [hidden] در واقع با تنظیم «display:none» با سبک CSS بازی می کند. به طور کلی اضافه کردن و حذف موارد از DOM برای اقدامات مکرر گران است.
- + -
-
What is slice pipe?
+What is slice pipe?
لوله slice برای ایجاد یک آرایه یا رشته جدید حاوی زیرمجموعه (برش) از عناصر استفاده می شود. سینتکس به شکل زیر است:
- +{{ value_expression | slice : start [ : end ] }} @@ -4659,10 +4900,10 @@What is slice pipe?
greeting: string[] = ['h', 'e', 'l', 'l', 'o', 'm','o', 'r', 'n', 'i', 'n', 'g']; } -
-
What is index property in ngFor directive?
+What is index property in ngFor directive?
ویژگی index دستورالعمل NgFor برای برگرداندن شاخص مبتنی بر صفر مورد در هر تکرار استفاده می شود. شما می توانید شاخص را در یک متغیر ورودی الگو گرفته و از آن در قالب استفاده کنید. @@ -4682,7 +4923,7 @@
What is index property in ngFor directive?
-
-
What is the purpose of ngFor trackBy?
+What is the purpose of ngFor trackBy?
هدف اصلی استفاده از *ngFor with trackBy بهینه سازی عملکرد است. معمولاً اگر از NgFor با مجموعه دادههای بزرگ استفاده میکنید، یک تغییر کوچک به یک آیتم با حذف یا اضافه کردن یک مورد، میتواند باعث ایجاد آبشاری از دستکاریهای DOM شود. در این مورد، Angular فقط یک لیست تازه از ارجاعات اشیاء جدید و جایگزینی عناصر DOM قدیمی با تمام عناصر DOM جدید را می بیند. میتوانید با ارائه یک تابع «trackBy» که فهرست و مورد فعلی را بهعنوان آرگومان میگیرد و باید شناسه منحصربهفرد این مورد را برگرداند، به Angular کمک کنید تا موارد اضافه یا حذف شده را ردیابی کند.
For example, lets set trackBy to the trackByTodos() method
@@ -4694,10 +4935,10 @@What is the purpose of ngFor trackBy?
- +trackByTodos(index: number, item: Todo): number { return todo.id; } -
-
What is the purpose of ngSwitch directive?
+What is the purpose of ngSwitch directive?
دستورالعمل NgSwitch شبیه دستور سوئیچ جاوا اسکریپت است که یک عنصر را از بین چندین عنصر ممکن بر اساس یک شرط سوئیچ نمایش می دهد. در این حالت فقط عنصر انتخاب شده در DOM قرار می گیرد. همراه با دستورات «NgSwitch»، «NgSwitchCase» و «NgSwitchDefault» استفاده شده است.
به عنوان مثال، اجازه دهید جزئیات مرورگر را بر اساس مرورگر انتخابی با استفاده از دستورالعمل ngSwitch نمایش دهیم.
@@ -4709,91 +4950,91 @@What is the purpose of ngSwitch directive?
<ie-browser *ngSwitchDefault [item]="currentItem"></ie-browser> </div> - + -
-
Is it possible to do aliasing for inputs and outputs?
+Is it possible to do aliasing for inputs and outputs?
بله، به دو صورت می توان برای ورودی ها و خروجی ها نام مستعار انجام داد.
-
-
- نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود. +
نام مستعار در ابرداده: ورودی ها و خروجی ها در فراداده با استفاده از یک رشته (😃 با نقطه مشخص (😃 با نام ویژگی دستوری در سمت چپ و نام مستعار عمومی در سمت راست نام مستعار می شوند. یعنی در قالب ویژگی Name:alias خواهد بود.
inputs: ['input1: buyItem'], outputs: ['outputEvent1: completedEvent']-
-
- Aliasing with @Input()/@Output() decorator: نام مستعار را می توان با ارسال نام مستعار به @Input()/@Output() decorator.i.e برای نام دارایی مشخص کرد. به شکل @Input(نام مستعار) یا @Output(نام مستعار) خواهد بود. +
Aliasing with @Input()/@Output() decorator: نام مستعار را می توان با ارسال نام مستعار به @Input()/@Output() decorator.i.e برای نام دارایی مشخص کرد. به شکل @Input(نام مستعار) یا @Output(نام مستعار) خواهد بود.
- +@Input('buyItem') input1: string; @Output('completedEvent') outputEvent1 = new EventEmitter<string>(); -
-
What is safe navigation operator?
+What is safe navigation operator?
اپراتور 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>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.
- + -
-
Is any special configuration required for Angular9?
+Is any special configuration required for Angular9?
شما به پیکربندی خاصی نیاز ندارید. در Angular9، رندر Ivy کامپایلر پیش فرض Angular است. اگرچه Ivy خود Angular8 در دسترس است، باید آن را در فایل tsconfig.json به صورت زیر پیکربندی کنید:
- +"angularCompilerOptions": { "enableIvy": true } -
-
What are type safe TestBed API changes in Angular9?
+What are type safe TestBed API changes in Angular9?
Angular 9 با جایگزینی تابع get قدیمی با روش inject جدید، تغییرات ایمن نوع را در تغییرات TestBed API ارائه میکند. زیرا روش TestBed.get از نظر نوع ایمن نیست. استفاده به شرح زیر خواهد بود،
- +TestBed.get(ChangeDetectorRef) // returns any. It is deprecated now. TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef -
-
Is mandatory to pass static flag for ViewChild?
+Is mandatory to pass static flag for ViewChild?
در Angular 8، پرچم استاتیک برای ViewChild مورد نیاز است. در حالی که در Angular9، دیگر نیازی به عبور از این ویژگی ندارید. هنگامی که با استفاده از «ng update» به Angular9 بهروزرسانی کردید، انتقال اسکریپت { static: false } را در همه جا حذف میکند.
- +@ViewChild(ChildDirective) child: ChildDirective; // Angular9 usage @ViewChild(ChildDirective, { static: false }) child: ChildDirective; //Angular8 usage -
-
What are the list of template expression operators?
+What are the list of template expression operators?
زبان عبارت الگوی Angular از سه عملگر خاص قالب پشتیبانی می کند.
-
-
- اپراتور لوله -
- اپراتور ناوبری ایمن -
- عملگر ادعای غیر تهی +
اپراتور لوله
+اپراتور ناوبری ایمن
+عملگر ادعای غیر تهی
-
-
What is the precedence between pipe and ternary operators?
+What is the precedence between pipe and ternary operators?
اپراتور لوله نسبت به اپراتور سه تایی (?😃 اولویت بیشتری دارد. به عنوان مثال، عبارت «اول؟ دوم : سوم | چهارم به عنوان «اول؟ دوم : (سوم | چهارم)`.
- + -
-
What is an entry component?
+What is an entry component?
مؤلفه ورودی هر مؤلفه ای است که Angular به طور ضروری بارگذاری می کند (یعنی عدم ارجاع آن در قالب) بر اساس نوع. به دلیل این رفتار، کامپایلر Angular در طول کامپایل نمی تواند آنها را پیدا کند. این مؤلفه ها به صورت پویا با «ComponentFactoryResolver» ایجاد می شوند.
اساساً دو نوع اصلی از مؤلفه های ورودی وجود دارد که به شرح زیر است:
-
-
- مؤلفه ریشه بوت استرپ -
- مؤلفه ای که در مسیر مشخص می کنید +
مؤلفه ریشه بوت استرپ
+مؤلفه ای که در مسیر مشخص می کنید
-
-
What is a bootstrapped component?
+What is a bootstrapped component?
کامپوننت بوت استرپ یک جزء ورودی است که Angular در طول فرآیند بوت استرپ یا زمان راه اندازی برنامه در DOM بارگذاری می کند. به طور کلی، این مؤلفه بوت استرپ یا ریشه به عنوان «AppComponent» در ماژول ریشه شما با استفاده از ویژگی «bootstrap» به شرح زیر نامگذاری می شود.
@NgModule({ @@ -4810,10 +5051,10 @@
- +What is a bootstrapped component?
bootstrap: [AppComponent] // bootstrapped entry component need to be declared here }) -
-
How do you manually bootstrap an application?
+How do you manually bootstrap an application?
میتوانید به جای استفاده از آرایه بوت استرپ در حاشیهنویسی «@NgModule» از هوک «ngDoBootstrap» برای راهاندازی دستی برنامه استفاده کنید. این قلاب بخشی از رابط «DoBootstap» است.
interface DoBootstrap { @@ -4828,15 +5069,15 @@
- +How do you manually bootstrap an application?
} } -
-
Is it necessary for bootstrapped component to be entry component?
+Is it necessary for bootstrapped component to be entry component?
بله، کامپوننت بوت استرپ باید جزء ورودی باشد. این به این دلیل است که فرآیند بوت استرپ یک فرآیند ضروری است.
- + -
-
What is a routed entry component?
+What is a routed entry component?
اجزای مورد اشاره در پیکربندی روتر به عنوان اجزای ورودی مسیریابی نامیده می شوند. این جزء ورودی مسیریابی شده در تعریف مسیر به صورت زیر تعریف شده است:
const routes: Routes = [ @@ -4848,49 +5089,49 @@
What is a routed entry component?
از آنجایی که تعریف روتر شما را ملزم می کند که کامپوننت را در دو مکان (روتر و ورودی کامپوننت) اضافه کنید، این اجزا همیشه جزء ورودی هستند.
توجه: کامپایلرها به اندازه کافی هوشمند هستند که تعریف روتر را تشخیص دهند و به طور خودکار جزء روتر را به "entryComponents" اضافه کنند.
- + -
-
Why is not necessary to use entryComponents array every time?
+Why is not necessary to use entryComponents array every time?
اغلب اوقات، برای تنظیم اجزای ورودی در آرایه ورودیComponents ngModule decorator نیازی به صراحت ندارید. زیرا angular کامپوننتها را هم از تعاریف @NgModule.bootstrap و هم مسیر را بهطور خودکار به اجزای ورودی اضافه میکند.
- + -
-
Do I still need to use entryComponents array in Angular9?
+Do I still need to use entryComponents array in Angular9?
خیر. در نسخههای زاویهای قبلی، آرایه ورودی Components از ngModule decorator استفاده میشود تا به کامپایلر بگوید کدام مؤلفهها ایجاد شده و بهصورت پویا در view درج میشوند. در Angular9، این دیگر با Ivy مورد نیاز نیست.
- + -
-
Is it all components generated in production build?
+Is it all components generated in production build?
خیر، فقط اجزای ورودی و اجزای قالب در بیلدهای تولید ظاهر می شوند. اگر یک جزء جزء ورودی نباشد و در یک الگو یافت نشود، تکان دهنده درخت آن را دور می اندازد. به همین دلیل، مطمئن شوید که فقط اجزای ورودی واقعی را برای کاهش اندازه بسته اضافه کنید.
- + -
-
What is Angular compiler?
+What is Angular compiler?
کامپایلر Angular برای تبدیل کد برنامه به کد جاوا اسکریپت استفاده می شود. نشانگذاری الگو را میخواند، آن را با کد کلاس مؤلفه مربوطه ترکیب میکند و کارخانههای مؤلفه را منتشر میکند که نمایش جاوا اسکریپت مؤلفه را همراه با عناصر فراداده @Component ایجاد میکند.
- + -
-
What is the role of ngModule metadata in compilation process?
+What is the role of ngModule metadata in compilation process?
ابرداده
- +@NgModuleبرای اینکه به کامپایلر Angular بگوید چه اجزایی برای این ماژول کامپایل شود و چگونه این ماژول را با ماژولهای دیگر پیوند دهد استفاده میشود. -
-
How does angular finds components, directives and pipes?
+How does angular finds components, directives and pipes?
کامپایلر Angular زمانی یک کامپوننت یا دستورالعمل را در قالب پیدا می کند که بتواند با انتخابگر آن کامپوننت یا دستورالعمل در آن الگو مطابقت داشته باشد. در حالی که اگر نام لوله در سینتکس لوله قالب HTML ظاهر شود، یک لوله پیدا می کند.
- + -
-
Give few examples for NgModules?
+Give few examples for NgModules?
کتابخانه های اصلی زاویه ای و کتابخانه های شخص ثالث به عنوان ngmodules در دسترس هستند.
-
-
- کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند. -
- بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند. +
کتابخانه های زاویه ای مانند FormsModule ، HttpclientModule و Routermodule Ngmodules هستند.
+بسیاری از کتابخانه های شخص ثالث مانند طراحی مواد ، یونی و AngularFire2 Ngmodules هستند.
-
-
What are feature modules?
+What are feature modules?
ماژول های ویژگی Ngmodules هستند که به منظور سازماندهی کد استفاده می شوند. ماژول ویژگی را می توان با استفاده از دستور زیر در فهرست root با Angular CLI ایجاد کرد ،
ng generate module MyCustomFeature // @@ -4909,19 +5150,19 @@What are feature modules?
export class MyCustomFeature { }Note: پسوند "ماژول" نباید در این نام وجود داشته باشد زیرا CLI آن را ضمیمه می کند.
- + -
-
What are the imported modules in CLI generated feature modules?
+What are the imported modules in CLI generated feature modules?
در ماژول ویژگی CLI تولید شده ، دو بیانیه واردات JavaScript در بالای پرونده وجود دارد
-
-
- NgModule: برای استفاده از دکوراتور `@ngmodule ' -
- CommonModule: این دستورالعمل های متداول بسیاری مانند "ngif" و "ngfor" را ارائه می دهد. +
NgModule: برای استفاده از دکوراتور `@ngmodule '
+CommonModule: این دستورالعمل های متداول بسیاری مانند "ngif" و "ngfor" را ارائه می دهد.
-
-
What are the differences between ngmodule and javascript module?
+What are the differences between ngmodule and javascript module?
در زیر تفاوت های اصلی بین Ngmodule زاویه ای و ماژول JavaScript وجود دارد:
@@ -4949,47 +5190,47 @@
- +What are the differences between ngmodule and javascript module?
-
-
What are the possible errors with declarations?
+What are the possible errors with declarations?
دو خطای احتمالی متداول با آرایه اعلامیه وجود دارد:
-
-
- اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند. -
- اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند. +
اگر از یک مؤلفه بدون اعلام آن استفاده می کنید ، Angular یک پیام خطا را برمی گرداند.
+اگر سعی می کنید در بیش از یک ماژول همان کلاس را اعلام کنید ، کامپایلر خطایی را منتشر می کند.
-
-
What are the steps to use declaration elements?
+What are the steps to use declaration elements?
در زیر مراحل لازم برای استفاده از عناصر اعلامیه وجود دارد.
-
-
- عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید -
- آن را به ماژول مناسب وارد کنید. -
- آن را در آرایه اعلامیه ngmodule اعلام کنید. +
عنصر (مؤلفه ، دستورالعمل و لوله) را ایجاد کنید و آن را از پرونده ای که در آن نوشتید صادر کنید
+آن را به ماژول مناسب وارد کنید.
+آن را در آرایه اعلامیه ngmodule اعلام کنید.
-
-
What happens if browserModule used in feature module?
+What happens if browserModule used in feature module?
اگر "BrowserModule" را به یک ماژول ویژگی بارگذاری شده تنبل وارد می کنید ، Angular خطایی را برمی گرداند که به شما می گوید در عوض از "CommonModule" استفاده کنید. از آنجا که ارائه دهندگان BrowserModule برای کل برنامه هستند ، بنابراین فقط باید در ماژول ریشه باشد ، نه در ماژول ویژگی. در حالی که ماژول های ویژگی فقط به دستورالعمل های مشترک در Commodule نیاز دارند.
- + -
-
What are the types of feature modules?
+What are the types of feature modules?
در زیر پنج دسته ماژول های ویژگی ،
-
-
- ** دامنه: ** یک تجربه کاربر اختصاص داده شده به یک دامنه برنامه خاص (به عنوان مثال ، سفارش ، ثبت نام و غیره را قرار دهید) -
- ** مسیریابی: ** اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند. -
- ** مسیریابی: ** پیکربندی مسیریابی را برای ماژول دیگر فراهم می کند. -
- ** سرویس: ** این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (به عنوان مثال ، httpclientmodule) -
- ** ویجت: ** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (به عنوان مثال ، کتابخانه های شخص ثالث مانند UI مواد) +
** دامنه: ** یک تجربه کاربر اختصاص داده شده به یک دامنه برنامه خاص (به عنوان مثال ، سفارش ، ثبت نام و غیره را قرار دهید)
+** مسیریابی: ** اینها ماژول های ویژگی دامنه هستند که اجزای برتر آنها اهداف مسیرهای ناوبری روتر هستند.
+** مسیریابی: ** پیکربندی مسیریابی را برای ماژول دیگر فراهم می کند.
+** سرویس: ** این سرویس های نرم افزاری مانند دسترسی به داده ها و پیام رسانی را ارائه می دهد (به عنوان مثال ، httpclientmodule)
+** ویجت: ** این مؤلفه ها ، دستورالعمل ها و لوله ها را در دسترس ماژول های خارجی قرار می دهد (به عنوان مثال ، کتابخانه های شخص ثالث مانند UI مواد)
-
-
What is a provider?
+What is a provider?
ارائه دهنده دستورالعمل سیستم تزریق وابستگی در مورد چگونگی به دست آوردن ارزش برای وابستگی (خدمات با نام مستعار ایجاد شده) است. این سرویس را می توان با استفاده از Angular CLI به شرح زیر ارائه داد:
- +ng generate service my-service @@ -5005,18 +5246,18 @@What is a provider?
export class MyService { } -
-
What is the recommendation for provider scope?
+What is the recommendation for provider scope?
شما همیشه باید خدمات خود را در انژکتور ریشه ارائه دهید مگر اینکه موردی وجود داشته باشد که بخواهید این سرویس فقط در صورت وارد کردن یک ngmodule خاص در دسترس باشد.
- + -
-
How do you restrict provider scope to a module?
+How do you restrict provider scope to a module?
به جای آن می توان دامنه ارائه دهنده خدمات را به یک ماژول خاص محدود کرد و به جای آن در دسترس کل برنامه قرار گرفت. دو روش ممکن برای انجام آن وجود دارد.
-
-
- Using providedIn in service: +
Using providedIn in service:
import { Injectable } from '@angular/core'; @@ -5029,7 +5270,7 @@
How do you restrict provider scope to a module?
}-
-
- Declare provider for the service in module: +
Declare provider for the service in module:
import { NgModule } from '@angular/core'; @@ -5042,13 +5283,13 @@
- +How do you restrict provider scope to a module?
export class SomeModule { } -
-
How do you provide a singleton service?
+How do you provide a singleton service?
دو روش ممکن برای ارائه یک سرویس مجرد وجود دارد.
-
-
- ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند. +
ویژگی ارائه شده از injectable () را روی "ریشه" تنظیم کنید. این روش ارجح (شروع از Angular 6.0) از ایجاد یک سرویس Singleton است زیرا خدمات شما را لرزان می کند.
import { Injectable } from '@angular/core'; @@ -5060,7 +5301,7 @@
How do you provide a singleton service?
}-
-
- سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است. +
سرویس را در ماژول root یا در یک ماژول که فقط توسط ماژول ریشه وارد می شود ، وارد کنید. از آن برای ثبت خدمات قبل از Angular 6.0 استفاده شده است.
@NgModule({ @@ -5069,25 +5310,25 @@
- +How do you provide a singleton service?
// ... }) -
-
What are the different ways to remove duplicate service registration?
+What are the different ways to remove duplicate service registration?
اگر یک ماژول تعریف و اعلامیه ها را تعریف کند ، بارگیری ماژول در ماژول های چند ویژگی ، ثبت نام سرویس را کپی می کند. در زیر روشهای مختلفی برای جلوگیری از این رفتار تکراری آورده شده است.
-
-
- به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید. -
- خدمات خود را در ماژول خود جدا کنید. -
- روشهای Forroot () و Forchild () را در ماژول تعریف کنید. +
به جای ثبت سرویس در ماژول ، از نحو ارائه شده استفاده کنید.
+خدمات خود را در ماژول خود جدا کنید.
+روشهای Forroot () و Forchild () را در ماژول تعریف کنید.
-
-
How does forRoot method helpful to avoid duplicate router instances?
+How does forRoot method helpful to avoid duplicate router instances?
اگر ماژول «Routermodule» روش استاتیک Forroot () ندارد ، هر ماژول ویژگی یک نمونه روتر جدید را فوری می کند ، که به دلیل موارد تکراری منجر به کاربرد شکسته می شود. پس از استفاده از روش forroot () ، ماژول برنامه root
- +routermodule.forroot (...)را وارد می کند و روتر می شود و همه ماژول های ویژگی وارداتroutermodule.forchild (...)که روتر دیگری را فوری نمی کند. -
-
What is a shared module?
+What is a shared module?
ماژول مشترک ماژولی است که در آن دستورالعمل ها ، لوله ها و اجزای متداول را در یک ماژول که به اشتراک گذاشته شده است (وارد می کنید) در طول برنامه قرار دهید.
به عنوان مثال ، ماژول مشترک زیر واردات متداول ، formsmodule برای دستورالعمل های مشترک و مؤلفه ها ، لوله ها و دستورالعمل ها بر اساس نیاز ،
@@ -5106,15 +5347,15 @@What is a shared module?
}) export class SharedModule { } - + -
-
Can I share services using modules?
+Can I share services using modules?
نه ، توصیه نمی شود با وارد کردن ماژول خدمات را به اشتراک بگذارید. یعنی ماژول ها را وارد کنید وقتی می خواهید فقط از دستورالعمل ها ، لوله ها و مؤلفه ها استفاده کنید. بهترین روش برای به دست آوردن خدمات مشترک از طریق "تزریق وابستگی زاویه ای" است زیرا وارد کردن یک ماژول منجر به یک نمونه خدمات جدید خواهد شد.
- + -
-
How do you get current direction for locales?
+How do you get current direction for locales?
در زاویه 9.1 ، می توان از روش API "getLocalEdirection" برای به دست آوردن جهت فعلی در برنامه خود استفاده کرد. این روش برای پشتیبانی از مناطق راست به چپ برای برنامه های مبتنی بر بین المللی شما مفید است.
import { getLocaleDirection, registerLocaleData } from '@angular/common'; @@ -5131,10 +5372,10 @@
- +How do you get current direction for locales?
// Current direction is used to provide conditional logic here } -
-
What is ngcc?
+What is ngcc?
NGCC (کامپایلر سازگاری زاویه ای) ابزاری است که Node_Module را با NDEDULE با NDIV NGC به قالب سازگار با پیچک ساخته می کند. اسکریپت
postinstallاز pack.json مطمئن خواهد شد که node_modules شما با رندر پیچک سازگار خواهد بود."scripts": { @@ -5142,31 +5383,31 @@
What is ngcc?
}Whereas, Ivy compiler (ngtsc), which compiles Ivy-compatible code.
- + -
-
What classes should not be added to declarations?
+What classes should not be added to declarations?
انواع کلاس زیر نباید به اعلامیه ها اضافه شود
-
-
- کلاس که قبلاً در هر ماژول دیگری اعلام شده است. -
- دستورالعمل های وارد شده از یک ماژول دیگر. -
- کلاس های ماژول. -
- کلاسهای خدمات. -
- کلاس ها و اشیاء غیر حرکتی ، مانند رشته ها ، اعداد ، توابع ، مدل های موجودیت ، تنظیمات ، منطق تجارت و کلاس های یاور. +
کلاس که قبلاً در هر ماژول دیگری اعلام شده است.
+دستورالعمل های وارد شده از یک ماژول دیگر.
+کلاس های ماژول.
+کلاسهای خدمات.
+کلاس ها و اشیاء غیر حرکتی ، مانند رشته ها ، اعداد ، توابع ، مدل های موجودیت ، تنظیمات ، منطق تجارت و کلاس های یاور.
-
-
What is NgZone?
+What is NgZone?
Angular خدماتی به نام NGZONE را ارائه می دهد که منطقه ای به نام "Angular" ایجاد می کند تا در صورت رضایت از شرایط زیر ، به طور خودکار تشخیص تغییر را ایجاد کند.
-
-
- هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود. -
- هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است. +
هنگامی که یک عملکرد همگام سازی یا ASYNC اجرا می شود.
+هنگامی که هیچ برنامه ریزی میکروتاسکی برنامه ریزی نشده است.
-
-
What is NoopZone?
+What is NoopZone?
منطقه به طور پیش فرض در برنامه های زاویه ای بارگیری و مورد نیاز است و به زاویه کمک می کند تا بداند چه موقع باعث تشخیص تغییر می شود. به این ترتیب ، این باعث می شود که توسعه دهندگان Sures روی توسعه برنامه و نه اصلی ترین قسمت زاویه ای متمرکز شوند. همچنین می توانید از Angular بدون منطقه استفاده کنید اما تشخیص تغییر باید به تنهایی اجرا شود و «Zone Zone» باید در فرآیند bootstrap پیکربندی شود. @@ -5199,20 +5440,20 @@
What is NoopZone?
-
-
How do you create displayBlock components?
+How do you create displayBlock components?
به طور پیش فرض ، Angular CLI مؤلفه هایی را در یک حالت نمایش داده شده درون خطی ایجاد می کند (یعنی صفحه نمایش: درون خطی). اما ایجاد مؤلفه هایی با نمایشگر امکان پذیر است: سبک بلوک با استفاده از گزینه "DisplayBlock":
ng generate component my-component --displayBlock
(OR) the option can be turned on by default in Angular.json with
- +schematics.@schematics/angular:component.displayBlockkey value as true. -
-
What are the possible data update scenarios for change detection?
+What are the possible data update scenarios for change detection?
تشخیص تغییر در سناریوهای زیر کار می کند که در آن داده ها برای به روزرسانی برنامه HTML نیاز دارند.
-
-
- ** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود
ApplicationRef.tick ()برای تماس با تشخیص تغییر و مشاهده.
- - ** شنونده رویداد: ** شنونده رویداد DOM می تواند داده ها را در یک مؤلفه زاویه ای به روز کند و باعث تغییر در تغییر نیز شود. +
** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود
ApplicationRef.tick ()برای تماس با تشخیص تغییر و مشاهده.
+** شنونده رویداد: ** شنونده رویداد DOM می تواند داده ها را در یک مؤلفه زاویه ای به روز کند و باعث تغییر در تغییر نیز شود.
@Component({ @@ -5230,7 +5471,7 @@
What are the possible data update scenarios for change detection?
}-
-
- HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید +
HTTP Data Request: می توانید از طریق درخواست HTTP داده ها را از یک سرور دریافت کنید
data = 'default value'; @@ -5243,7 +5484,7 @@
What are the possible data update scenarios for change detection?
}-
-
- Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید +
Macro tasks setTimeout() or setInterval(): می توانید داده ها را در عملکرد پاسخ به تماس SettimeOut یا SetInterval به روز کنید
data = 'default value'; @@ -5255,7 +5496,7 @@
What are the possible data update scenarios for change detection?
}-
-
- Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید +
Micro tasks Promises: شما می توانید داده ها را در عملکرد پاسخ به قول وعده به روز کنید
data = 'initial value'; @@ -5267,12 +5508,12 @@
What are the possible data update scenarios for change detection?
}-
-
- Async operations like Web sockets and Canvas: داده ها را می توان به صورت ناهمزمان با استفاده از websocket.onmessage () و canvas.toblob () به روز کرد. +
Async operations like Web sockets and Canvas: داده ها را می توان به صورت ناهمزمان با استفاده از websocket.onmessage () و canvas.toblob () به روز کرد.
- ** اولیه سازی مؤلفه: ** در حالی که راه اندازی کاربرد زاویه ای ، زاویه ای باعث می شود
-
-
What is a zone context?
+What is a zone context?
زمینه اجرای یک مفهوم انتزاعی است که اطلاعات مربوط به محیط را در کد فعلی اجرا می کند. یک منطقه زمینه اعدام را فراهم می کند که در عملیات ناهمزمان ادامه می یابد ، به عنوان زمینه منطقه خوانده می شود. به عنوان مثال ، زمینه منطقه در عملکرد برگشت به تماس در خارج و داخل SettimeOut یکسان خواهد بود ،
zone.run(() => { @@ -5285,13 +5526,13 @@
What is a zone context?
});The current zone is retrieved through
- +Zone.current. -
-
What are the lifecycle hooks of a zone?
+What are the lifecycle hooks of a zone?
چهار قلاب چرخه عمر برای عملیات ناهمزمان از Zone.js. وجود دارد.
-
-
- onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید () +
onScheduleTask: این قلاب هنگام برنامه ریزی یک کار ناهمزمان جدید ایجاد می شود. به عنوان مثال ، وقتی با SetTimeOut تماس می گیرید ()
onScheduleTask: function(delegate, curr, target, task) { @@ -5300,7 +5541,7 @@
What are the lifecycle hooks of a zone?
}-
-
- onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است. +
onInvokeTask: این قلاب هنگامی که یک کار ناهمزمان در حال انجام است ، ایجاد می کند. به عنوان مثال ، هنگامی که پاسخ به تماس SettimeOut () در حال اجرا است.
onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) { @@ -5309,7 +5550,7 @@
What are the lifecycle hooks of a zone?
}-
-
- onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند. +
onHasTask: این قلاب هنگامی که وضعیت یک نوع کار در داخل یک منطقه از پایدار (بدون کار در منطقه) به ناپایدار تغییر می کند (یک کار جدید در منطقه برنامه ریزی شده است) یا از ناپایدار تا پایدار تغییر می کند.
onHasTask: function(delegate, curr, target, hasTaskState) { @@ -5318,7 +5559,7 @@
What are the lifecycle hooks of a zone?
}-
-
- onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود. +
onInvoke: این قلاب هنگامی که یک عملکرد همزمان در منطقه اجرا می شود ، ایجاد می شود.
onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) { @@ -5326,10 +5567,10 @@
- +What are the lifecycle hooks of a zone?
return delegate.invoke(target, callback, applyThis, applyArgs); } -
-
What are the methods of NgZone used to control change detection?
+What are the methods of NgZone used to control change detection?
سرویس NGZONE یک روش `run () را ارائه می دهد که به شما امکان می دهد عملکردی را در داخل منطقه زاویه ای اجرا کنید. این عملکرد برای اجرای API های شخص ثالث که توسط منطقه اداره نمی شوند و باعث تشخیص تغییر خودکار در زمان صحیح می شوند ، استفاده می شود.
export class AppComponent implements OnInit { @@ -5358,10 +5599,10 @@
- +What are the methods of NgZone used to control change detection?
} } -
-
How do you change the settings of zonejs?
+How do you change the settings of zonejs?
شما می توانید با پیکربندی آنها در یک پرونده جداگانه ، تنظیمات منطقه را تغییر داده و درست پس از واردات Zonejs وارد کنید.
@@ -5379,10 +5620,10 @@
به عنوان مثال ، شما می توانید Patch Monkey RequestAnimationFrame () را غیرفعال کنید تا از تغییر برای به روزرسانی داده به عنوان یک تنظیم جلوگیری کنید و از وقایع DOM (یک رویداد Mousemove یا Scroll) جلوگیری کنید تا تغییر تغییر را ایجاد کند. بیایید بگوییم پرونده جدید به نام Zone-flags.js ،How do you change the settings of zonejs?
import `./zone-flags`; import 'zone.js/dist/zone'; // Included with Angular CLI. - + -
-
How do you trigger an animation?
+How do you trigger an animation?
Angular یک عملکرد "ماشه ()" برای انیمیشن را به منظور جمع آوری حالت ها و انتقال با یک نام انیمیشن خاص فراهم می کند تا بتوانید آن را به عنصر تحریک در الگوی HTML وصل کنید. این عملکرد را برای تغییرات تماشا می کند و هنگام تغییر ، اقدامات را آغاز می کند.
@@ -5421,25 +5662,25 @@
به عنوان مثال ، بیایید Trigger به نام "Updown" ایجاد کنیم و آن را به عنصر دکمه وصل کنیم.How do you trigger an animation?
} - + -
-
How do you configure injectors with providers at different levels?
+How do you configure injectors with providers at different levels?
با تعیین مقدار ابرداده می توانید انژکتورها را با ارائه دهندگان در سطوح مختلف برنامه خود پیکربندی کنید. پیکربندی می تواند در یکی از سه مکان اتفاق بیفتد ،
-
-
- In the
@Injectable()decorator for the service itself
- - In the
@NgModule()decorator for an NgModule
- - In the
@Component()decorator for a component
+ In the
@Injectable()decorator for the service itself
+In the
@NgModule()decorator for an NgModule
+In the
@Component()decorator for a component
- In the
-
-
Is it mandatory to use injectable on every service class?
+Is it mandatory to use injectable on every service class?
نه. اگر کلاس دارای دکوراتورهای زاویه ای دیگری بر روی آن باشد یا هیچ وابستگی نداشته باشد ، دکوراتور
injectable ()`injectable () لازم نیست. اما نکته مهم در اینجا هر کلاس است که با زاویه تزریق می شود تزئین شده است.
یعنی اگر دکوراتور را اضافه کنیم ، ابرداده "طراحی: پارامترها" اضافه می شود ، و تزریق وابستگی می تواند کار خود را انجام دهد. این دلیل دقیق اضافه کردن دکوراتور injectable () در یک سرویس در صورتی است که این سرویس دارای برخی وابستگی ها باشد.
به عنوان مثال ، بیایید تغییرات مختلف AppService را در یک جزء ریشه مشاهده کنیم ،-
-
- AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد. +
AppService زیر را می توان بدون هیچ مشکلی در AppComponent تزریق کرد. این امر به این دلیل است که هیچ سرویس وابستگی در AppService وجود ندارد.
export class AppService { @@ -5449,7 +5690,7 @@
Is it mandatory to use injectable on every service class?
}-
-
- AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود. +
AppService زیر با دکوراتور ساختگی و Httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با دکوراتور ساختگی تولید می شود.
function SomeDummyDecorator() { @@ -5478,7 +5719,7 @@
Is it mandatory to use injectable on every service class?
exports.AppService = AppService;-
-
- AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود. +
AppService زیر با تزئینات injectable و httpservice می تواند بدون هیچ مشکلی در AppComponent تزریق شود. این امر به این دلیل است که اطلاعات متا با تزئینات تزریقی تولید می شود.
@Injectable({ @@ -5490,10 +5731,10 @@
- +Is it mandatory to use injectable on every service class?
} } -
-
What is an optional dependency?
+What is an optional dependency?
وابستگی اختیاری یک دکوراتور پارامتر است که در پارامترهای سازنده مورد استفاده قرار می گیرد ، که این پارامتر را به عنوان یک وابستگی اختیاری نشان می دهد. به همین دلیل ، در صورت عدم یافتن وابستگی ، چارچوب DI تهی را تهی می کند.
@@ -5507,22 +5748,22 @@
به عنوان مثال ، اگر شما یک ارائه دهنده logger را در هیچ کجا ثبت نکنید ، انژکتور مقدار logger (یا سرویس logger) را در کلاس زیر تنظیم می کند.What is an optional dependency?
} } - + -
-
What are the types of injector hierarchies?
+What are the types of injector hierarchies?
There are two types of injector hierarchies in Angular
-
-
- ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند. -
- **ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید. +
ModuleInjector hierarchy: آن را با استفاده از حاشیه نویسی ngmodule () یا injectable () در سطح ماژول پیکربندی می کند.
+**ElementInjector hierarchy:**این به طور ضمنی در هر عنصر DOM ایجاد کرد. همچنین به طور پیش فرض خالی است ، مگر اینکه آن را در ویژگی ارائه دهندگان در Directive () یا component () پیکربندی کنید.
-
-
What are reactive forms?
+What are reactive forms?
فرم های واکنشی یک رویکرد مدل محور برای ایجاد فرم ها به سبک واکنشی است (ورودی های فرم با گذشت زمان تغییر می کنند). اینها در اطراف جریانهای قابل مشاهده ساخته شده اند ، جایی که ورودی ها و مقادیر فرم به عنوان جریان مقادیر ورودی ارائه می شوند. بیایید مراحل زیر را برای ایجاد فرم های واکنشی دنبال کنیم ،
-
-
- ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند +
ماژول فرم های واکنشی را ثبت کنید که دستورالعمل های واکنش پذیر را در برنامه شما اعلام می کند
import { ReactiveFormsModule } from '@angular/forms'; @@ -5536,7 +5777,7 @@
What are reactive forms?
export class AppModule { }-
-
- یک نمونه جدید FormControl ایجاد کنید و آن را در مؤلفه ذخیره کنید. +
یک نمونه جدید FormControl ایجاد کنید و آن را در مؤلفه ذخیره کنید.
import { Component } from '@angular/core'; @@ -5551,7 +5792,7 @@
What are reactive forms?
}-
-
- FormControl را در الگوی ثبت کنید. +
FormControl را در الگوی ثبت کنید.
<label> @@ -5578,19 +5819,19 @@
- +What are reactive forms?
userName = new FormControl(''); } -
-
What are dynamic forms?
+What are dynamic forms?
فرم های پویا الگویی است که در آن ما یک فرم را به صورت پویا بر اساس ابرداده می سازیم که یک مدل شی تجاری را توصیف می کند. می توانید آنها را بر اساس API فرم واکنشی ایجاد کنید.
- + -
-
What are template driven forms?
+What are template driven forms?
فرم های محور الگوی فرم های مدل محور هستند که در آن می نویسید که منطق ، اعتبار سنجی ، کنترل و غیره را در قسمت الگوی کد با استفاده از دستورالعمل ها می نویسید. آنها برای سناریوهای ساده مناسب هستند و از اتصال دو طرفه با نحو [(ngmodel)] استفاده می کنند.
به عنوان مثال ، می توانید با دنبال کردن مراحل ساده زیر ، فرم ثبت را به راحتی ایجاد کنید ،-
-
- FormsModule را در آرایه واردات ماژول برنامه وارد کنید +
FormsModule را در آرایه واردات ماژول برنامه وارد کنید
import { BrowserModule } from '@angular/platform-browser'; @@ -5612,7 +5853,7 @@
What are template driven forms?
export class AppModule { }-
-
- با استفاده از نحو ngmodel فرم را از الگوی به مؤلفه وصل کنید +
با استفاده از نحو ngmodel فرم را از الگوی به مؤلفه وصل کنید
<input type="text" class="form-control" id="name" @@ -5620,13 +5861,13 @@What are template driven forms?
[(ngModel)]="model.name" name="name">-
-
- برای ایجاد نمونه های FormControl و ثبت آنها ، دستورالعمل NGFORM را به برچسب +
برای ایجاد نمونه های FormControl و ثبت آنها ، دستورالعمل NGFORM را به برچسب
<form #registerForm="ngForm">
-
-
- پیام اعتبار سنجی را برای کنترل فرم اعمال کنید +
پیام اعتبار سنجی را برای کنترل فرم اعمال کنید
<label for="name">Name</label> @@ -5640,7 +5881,7 @@
What are template driven forms?
</div>-
-
- بیایید فرم را با دستورالعمل ngsubmit ارسال کنیم و دکمه نوع = "ارسال" را در پایین فرم اضافه کنیم تا فرم ارسال شود. +
بیایید فرم را با دستورالعمل ngsubmit ارسال کنیم و دکمه نوع = "ارسال" را در پایین فرم اضافه کنیم تا فرم ارسال شود.
<form (ngSubmit)="onSubmit()" #heroForm="ngForm"> @@ -5667,10 +5908,10 @@
- +What are template driven forms?
</form> </div> -
-
What are the differences between reactive forms and template driven forms?
+What are the differences between reactive forms and template driven forms?
در زیر تفاوت های اصلی بین اشکال واکنشی و فرم های محور الگو وجود دارد @@ -5688,10 +5929,10 @@
What are the differences between reactive forms and template driven forms?
-
-
What are the different ways to group form controls?
+What are the different ways to group form controls?
اشکال واکنشی دو روش برای گروه بندی چندین کنترل مرتبط را ارائه می دهد.
-
-
- ** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است. +
** FormGroup **: یک فرم را با مجموعه ای از کنترل های ثابت تعریف می کند که می توانند در یک شیء با هم مدیریت شوند. این ویژگی ها و روش های مشابه مشابه با یک نمونه FormControl است.
این فرم گروه می تواند برای ایجاد اشکال پیچیده مانند شکل زیر توخالی شود.
@@ -5760,7 +6001,7 @@What are the different ways to group form controls?
</form>
-
-
- ** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت. +
** FormArray:** یک فرم پویا را در قالب آرایه تعریف می کند ، جایی که می توانید کنترل ها را در زمان اجرا اضافه و حذف کنید. این امر برای اشکال پویا مفید است وقتی نمی دانید چه تعداد کنترل در گروه وجود خواهد داشت.
import { Component } from '@angular/core'; @@ -5823,10 +6064,10 @@
- +What are the different ways to group form controls?
</div> </form> -
-
-
-
How do you update specific properties of a form model?
+How do you update specific properties of a form model?
برای به روزرسانی خصوصیات خاص تعریف شده در مدل فرم می توانید از روش `patchValue () استفاده کنید. به عنوان مثال ، می توانید نام و خیابان مشخصات خاص را با کلیک بر روی دکمه Update همانطور که در زیر آمده است ، به روز کنید.
updateProfile() { @@ -5843,10 +6084,10 @@
How do you update specific properties of a form model?
You can also use
setValuemethod to update properties.Note: Remember to update the properties against the exact model structure.
- + -
-
What is the purpose of FormBuilder?
+What is the purpose of FormBuilder?
FormBuilder به عنوان شکر نحوی برای ایجاد آسان نمونه هایی از یک فرمل ، فرم گروه یا فرم آررای استفاده می شود. این برای کاهش میزان دیگ بخار مورد نیاز برای ساخت اشکال واکنشی پیچیده مفید است. این به عنوان یک کلاس یاور تزریقی بسته `@angular/forms" در دسترس است.
For example, the user profile component creation becomes easier as shown here.
@@ -5864,10 +6105,10 @@What is the purpose of FormBuilder?
constructor(private formBuilder: FormBuilder) { } } - + -
-
How do you verify the model changes in forms?
+How do you verify the model changes in forms?
شما می توانید یک ویژگی دریافت کننده (بیایید بگوییم ، تشخیصی) را در داخل مؤلفه اضافه کنید تا یک نمایش JSON از مدل را در طول توسعه بازگرداند. این برای تأیید اینکه آیا مقادیر واقعاً از جعبه ورودی به مدل جریان دارند و برعکس یا خیر ، مفید است.
export class UserProfileComponent { @@ -5885,10 +6126,10 @@
- +How do you verify the model changes in forms?
// FormControls goes here </div> -
-
What are the state CSS classes provided by ngModel?
+What are the state CSS classes provided by ngModel?
دستورالعمل NGMODEL کنترل فرم را با کلاسهای ویژه CSS زاویه ای به روز می کند تا وضعیت آن را منعکس کند. بیایید لیست کلاس ها را با فرمت جدولی پیدا کنیم ،
@@ -5916,10 +6157,10 @@
- +What are the state CSS classes provided by ngModel?
-
-
How do you reset the form?
+How do you reset the form?
در یک فرم مدل محور ، می توانید فرم را فقط با فراخوانی تابع "تنظیم مجدد ()" در مدل فرم ما تنظیم کنید. @@ -5944,11 +6185,11 @@
How do you reset the form?
-
-
What are the types of validator functions?
+What are the types of validator functions?
در اشکال واکنشی ، اعتبار سنج ها می توانند توابع همزمان یا ناهمزمان باشند ،
-
-
- ** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد. -
- ** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است. +
** اعتبار سنجی همگام سازی: ** این توابع همزمان هستند که نمونه کنترل را می گیرند و بلافاصله مجموعه ای از خطاهای اعتبار سنجی یا تهی را برمی گردانند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، چک های ساده ای هستند مانند اینکه آیا یک میدان خالی است ، خواه از حداکثر طول و غیره باشد.
+** اعتبار سنج های Async: ** این توابع ناهمزمان هستند که نمونه کنترل را می گیرند و یک وعده یا قابل مشاهده را باز می گردانند که بعداً مجموعه ای از خطاهای اعتبار سنجی یا تهی را منتشر می کند. همچنین ، این توابع ضمن فوری کنترل فرم ، به عنوان آرگومان دوم تصویب شدند. موارد اصلی استفاده ، اعتبارسنجی پیچیده مانند ضربه زدن به سرور برای بررسی در دسترس بودن نام کاربری یا ایمیل است.
The representation of these validators looks like below
@@ -5958,10 +6199,10 @@What are the types of validator functions?
email: ['value', *Some validation function*, *Some asynchronous validation function*] }); - + -
-
Can you give an example of built-in validators?
+Can you give an example of built-in validators?
n فرم های واکنشی ، می توانید از اعتبار سنجی داخلی مانند "مورد نیاز" و "minl طول" در کنترل فرم ورودی خود استفاده کنید. به عنوان مثال ، فرم ثبت نام می تواند این اعتبار سنج ها را در قسمت ورودی نام داشته باشد
this.registrationForm = new FormGroup({ @@ -5972,28 +6213,28 @@
Can you give an example of built-in validators?
});در حالی که در فرم های الگوی محور ، هر دو اعتبار سنجی «مورد نیاز» و `minl طول به عنوان ویژگی ها موجود است.
- + -
-
How do you optimize the performance of async validators?
+How do you optimize the performance of async validators?
از آنجا که همه اعتبار سنج ها پس از هر تغییر ارزش فرم اجرا می شوند ، با ضربه زدن به API خارجی در هر کلید ، تأثیر عمده ای بر عملکرد با اعتبار سنج های ASYNC ایجاد می کند. این وضعیت را می توان با تأخیر در اعتبار فرم با تغییر ویژگی UpdateON از تغییر (پیش فرض) برای ارسال یا تاری ، از آن جلوگیری کرد.
استفاده بر اساس انواع فرم متفاوت خواهد بود.-
-
- Template-driven forms: Set the property on
ngModelOptionsdirective
+ Template-driven forms: Set the property on
ngModelOptionsdirective
<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">-
-
- Reactive-forms: Set the property on FormControl instance +
Reactive-forms: Set the property on FormControl instance
name = new FormControl('', {updateOn: 'blur'});
- + - Template-driven forms: Set the property on
-
-
How to set ngFor and ngIf on the same element?
+How to set ngFor and ngIf on the same element?
بعضی اوقات ممکن است شما نیاز به NGFOR و NGIF در همان عنصر داشته باشید اما متأسفانه قصد دارید در زیر خطای الگو با آن روبرو شوید.
- +Template parse errors: Can't have multiple template bindings on one element. @@ -6013,10 +6254,10 @@How to set ngFor and ngIf on the same element?
</ul> </ng-container> -
-
What is host property in css?
+What is host property in css?
از انتخاب کننده شبه کلاس "میزبان" برای هدف قرار دادن سبک های موجود در عنصری که میزبان مؤلفه است استفاده می شود. از آنجا که عنصر میزبان در الگوی مؤلفه والدین قرار دارد ، شما نمی توانید از طریق سایر مؤلفه ها به وسیله دیگر به عنصر میزبان برسید.
@@ -6028,19 +6269,19 @@
به عنوان مثال ، شما می توانید یک مرز برای عنصر والدین ایجاد کنید ، همانطور که در زیر وجود دارد ،What is host property in css?
padding: 20px; } - + -
-
How do you get the current route?
+How do you get the current route?
در Angular ، یک ویژگی url از بسته روتر برای رسیدن به مسیر فعلی وجود دارد. شما باید چند مرحله زیر را دنبال کنید ،
-
-
- Import Router from @angular/router +
Import Router from @angular/router
import { Router } from '@angular/router';
-
-
- Inject router inside constructor +
Inject router inside constructor
constructor(private router: Router ) { @@ -6048,32 +6289,32 @@
How do you get the current route?
}-
-
- Access url parameter +
Access url parameter
console.log(this.router.url); // /routename
- + -
-
What is Component Test Harnesses?
+What is Component Test Harnesses?
مهار مؤلفه یک API آزمایش در اطراف یک دستورالعمل یا مؤلفه زاویه ای است تا با مخفی کردن جزئیات اجرای از مجموعه های آزمایش ، تست ها را ساده تر کند. این می تواند بین تست های واحد ، تست های ادغام و تست های پایان به پایان به اشتراک گذاشته شود. ایده برای مهارهای مؤلفه از الگوی ** pageObject ** که معمولاً برای آزمایش ادغام استفاده می شود ، حاصل می شود.
- + -
-
What is the benefit of Automatic Inlining of Fonts?
+What is the benefit of Automatic Inlining of Fonts?
در طول زمان کامپایل ، Angular CLI فونت هایی را که برنامه شما از آن استفاده می کند ، بارگیری و درون خطی می کند. این به روزرسانی عملکرد اولین رنگ محتوا (FCP) را سرعت می بخشد و این ویژگی به طور پیش فرض در برنامه های ساخته شده با نسخه 11 فعال می شود.
- + -
-
What is content projection?
+What is content projection?
طرح ریزی محتوا الگویی است که در آن شما محتوای مورد نظر خود را در داخل یک مؤلفه دیگر وارد می کنید یا پروژه می کنید.
- + -
-
What is ng-content and its purpose?
+What is ng-content and its purpose?
از Content NG برای وارد کردن محتوا به صورت پویا در مؤلفه استفاده می شود که به افزایش قابلیت استفاده مجدد مؤلفه کمک می کند.
- +
-
-