یک موضوع RxJS نوع خاصی از Observable است که اجازه میدهد مقادیر برای بسیاری از Observerها چندپخشی شوند. در حالی که مشاهده پذیرهای ساده یکپارچه هستند (هر مشاهده کننده مشترک دارای اجرای مستقل از Observable است)، سوژه ها چندپخشی هستند.
یک موضوع مانند یک مشاهده پذیر است، اما می تواند برای بسیاری از مشاهده کنندگان چندپخش شود. سوژه ها مانند EventEmitters هستند: آنها یک رجیستری از شنوندگان زیادی را نگهداری می کنند.
@@ -3795,10 +3795,10 @@Bazel یک ابزار ساخت قدرتمند است که توسط گوگل توسعه یافته و به طور گسترده مورد استفاده قرار می گیرد و می تواند وابستگی های بین بسته های مختلف و اهداف ساخت را پیگیری کند. در Angular8 می توانید برنامه CLI خود را با Bazel بسازید. @@ -3808,7 +3808,7 @@+
- What are the advantages of Bazel tool?
+مزایای استفاده از ابزار Bazel چیه؟
این امکان را ایجاد می کند که با همان ابزار بک اند و جلویی شما را بسازید
@@ -3824,7 +3824,7 @@
- How do you use Bazel with Angular CLI?
+چطوری از ابزار Bazel توی CLI انگولار استفاده میکنی؟
بسته @angular/bazel سازنده ای را ارائه می دهد که به Angular CLI اجازه می دهد از Bazel به عنوان ابزار ساخت استفاده کند.
- How do you run Bazel directly?
+چطوری ابزار Bazel رو مستقیما اجرا میکنی؟
گاهی اوقات ممکن است بخواهید سازنده Angular CLI را دور بزنید و Bazel را مستقیماً با استفاده از Bazel CLI اجرا کنید. می توانید با استفاده از بسته @bazel/bazel npm آن را به صورت سراسری نصب کنید. یعنی Bazel CLI در بسته @bazel/bazel موجود است. بعد از اینکه بتوانید دستورات رایج زیر را اعمال کنید،
- +bazel build [targets] // Compile the default output artifacts of the given targets. bazel test [targets] // Run the tests with *_test targets found in the pattern. bazel run [target]: Compile the program represented by target and then run it.- What is platform in Angular?
+platform توی انگولار چیه؟
پلتفرم زمینه ای است که یک برنامه Angular در آن اجرا می شود. رایج ترین پلت فرم برای برنامه های Angular یک مرورگر وب است، اما همچنین می تواند یک سیستم عامل برای یک دستگاه تلفن همراه یا یک وب سرور باشد. Runtime-Platform توسط بستههای angular/platform-*@ ارائه میشود و این بستهها به برنامههایی که از «@angular/core» و «@angular/common» استفاده میکنند اجازه میدهند در محیطهای مختلف اجرا شوند.
به عنوان مثال، Angular می تواند به عنوان چارچوب مستقل از پلت فرم در محیط های مختلف استفاده شود، به عنوان مثال،- +
در حین اجرا در مرورگر، از بسته پلتفرم-مرورگر استفاده می کند.
هنگامی که SSR (رندر سمت سرور) استفاده می شود، از بسته «پلتفرم-سرور» برای ارائه اجرای وب سرور استفاده می کند.
- What happens if I import the same module twice?
+اگه یه ماژول رو دوبار import کنیم چه اتفاقی میوفته؟
اگر چندین ماژول یک ماژول را وارد کند، angular آن را فقط یک بار ارزیابی می کند (وقتی اولین بار با ماژول روبرو می شود). از این شرط پیروی می کند حتی ماژول در هر سطحی در سلسله مراتب NgModules وارد شده ظاهر می شود.
- +- How do you select an element with in a component template?
+چطوری یه المنت رو با استفاده از template گامپوننت انتخاب میکنی؟
برای دسترسی مستقیم به عناصر موجود در نما می توانید از دستورالعمل
@ViewChildاستفاده کنید. بیایید عنصر ورودی را با یک مرجع بگیریم،<input #uname> @@ -3881,80 +3881,80 @@فهرست +
- How do you detect route change in Angular?
+چطوری توی انگولار route رو تغییر میدی؟
در Angular7 می توانید برای تشخیص تغییرات در روتر مشترک شوید. اشتراک رویدادهای روتر به شرح زیر خواهد بود:
this.router.events.subscribe((event: Event) => {})بیایید یک جزء ساده برای تشخیص تغییرات روتر در نظر بگیریم
-- + if (event instanceof NavigationError) { + // Hide loading indicator and perform an action + console.log(event.error); // It logs an error for debugging + } + }); + } +} +import { Component } from '@angular/core'; -import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router'; +import { Component } from '@angular/core'; +import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router'; -@Component({ - selector: 'app-root', - template: `<router-outlet></router-outlet>` -}) -export class AppComponent { +@Component({ + selector: 'app-root', + template: `<router-outlet></router-outlet>` +}) +export class AppComponent { - constructor(private router: Router) { + constructor(private router: Router) { - this.router.events.subscribe((event: Event) => { - if (event instanceof NavigationStart) { - // Show loading indicator and perform an action - } + this.router.events.subscribe((event: Event) => { + if (event instanceof NavigationStart) { + // Show loading indicator and perform an action + } - if (event instanceof NavigationEnd) { - // Hide loading indicator and perform an action - } + if (event instanceof NavigationEnd) { + // Hide loading indicator and perform an action + } - if (event instanceof NavigationError) { - // Hide loading indicator and perform an action - console.log(event.error); // It logs an error for debugging - } - }); - } -} -
میتوانید مستقیماً نقشه شی را برای مشتری http ارسال کنید یا کلاس HttpHeaders را برای تهیه هدرها ایجاد کنید.
-constructor(private _http: HttpClient) {}
-this._http.get('someUrl',{
- headers: {'header1':'value1','header2':'value2'}
-});
+constructor(private _http: HttpClient) {}
+this._http.get('someUrl',{
+ headers: {'header1':'value1','header2':'value2'}
+});
-(or)
-let headers = new HttpHeaders().set('header1', headerValue1); // create header object
-headers = headers.append('header2', headerValue2); // add a new header, creating a new object
-headers = headers.append('header3', headerValue3); // add another header
+(or)
+let headers = new HttpHeaders().set('header1', headerValue1); // create header object
+headers = headers.append('header2', headerValue2); // add a new header, creating a new object
+headers = headers.append('header3', headerValue3); // add another header
-let params = new HttpParams().set('param1', value1); // create params object
-params = params.append('param2', value2); // add a new param, creating a new object
-params = params.append('param3', value3); // add another param
+let params = new HttpParams().set('param1', value1); // create params object
+params = params.append('param2', value2); // add a new param, creating a new object
+params = params.append('param3', value3); // add another param
-return this._http.get<any[]>('someUrl', { headers: headers, params: params })
-
از انتشار Angular8 به بعد، برنامهها با استفاده از استراتژی بارگذاری تفاضلی از CLI ساخته میشوند تا دو باندل جداگانه به عنوان بخشی از برنامه مستقر شما بسازند.
اولین ساخت شامل نحو ES2015 است که از مزیت پشتیبانی داخلی در مرورگرهای مدرن بهره میبرد، پلیفیلهای کمتری ارسال میکند و منجر به اندازه بستهای کوچکتر میشود.
ساخت دوم شامل نحو قدیمی ES5 برای پشتیبانی از مرورگرهای قدیمی با تمام پلیفیلهای لازم است. اما این باعث می شود اندازه بسته بزرگتر شود.
نکته: این استراتژی برای پشتیبانی از چندین مرورگر استفاده می شود، اما فقط کد مورد نیاز مرورگر را بارگیری می کند.
- +بله، Angular 8 از واردات پویا در پیکربندی روتر پشتیبانی می کند. به عنوان مثال، میتوانید از دستور import برای بارگذاری تنبل ماژول با استفاده از روش «loadChildren» استفاده کنید و توسط IDEها (VSCode و WebStorm)، بسته وب و غیره قابل درک است.
قبلاً به صورت زیر نوشته شده بودید تا ماژول ویژگی را با تنبلی بارگیری کنید. به اشتباه، اگر در نام ماژول اشتباه تایپی داشته باشید، همچنان رشته را میپذیرد و در طول زمان ساخت، خطا میدهد.
{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};
Lazy loading یکی از کاربردی ترین مفاهیم Angular Routing است. این به ما کمک می کند تا به جای دانلود همه چیز در یک بسته بزرگ، صفحات وب را به صورت تکه ای دانلود کنیم. برای بارگذاری تنبل با بارگیری ناهمزمان ماژول ویژگی برای مسیریابی هر زمان که لازم باشد با استفاده از ویژگی «loadChildren» استفاده می شود. بیایید هر دو ماژول ویژگی «مشتری» و «سفارش» را مانند زیر بارگیری کنیم.
const routes: Routes = [
@@ -3986,10 +3986,10 @@ فهرست
+
نسخه Angular 8.0 API های Workspace را معرفی می کند تا خواندن و اصلاح فایل angular.json را برای توسعه دهندگان به جای تغییر دستی آسان تر کند. در حال حاضر، تنها فرمت Storage3 پشتیبانی شده، فرمت مبتنی بر JSON است که توسط Angular CLI استفاده میشود. میتوانید گزینه بهینهسازی را برای build target به صورت زیر فعال یا اضافه کنید.
import { NodeJsSyncHost } from '@angular-devkit/core/node';
@@ -4016,18 +4016,18 @@ فهرست
+
ارتقای Angular با استفاده از دستور Angular CLI «ng update» همانطور که در زیر ذکر شده است بسیار ساده تر است. به عنوان مثال، اگر از Angular 7 به 8 ارتقا دهید، وارد کردن مسیر لود شده تنبل شما به صورت خودکار به نحو واردات جدید منتقل می شود.
$ ng update @angular/cli @angular/core- +
Angular Material مجموعه ای از اجزای طراحی متریال برای فریم ورک Angular است که از مشخصات طراحی متریال پیروی می کند. با استفاده از Angular Material می توانید Material Design را به راحتی اعمال کنید. نصب را می توان از طریق npm یا نخ انجام داد،
npm install --save @angular/material @angular/cdk @angular/animations @@ -4035,10 +4035,10 @@add @angular/material @angular/cdk @angular/animationsyarn
از دو نسخه اخیر همه مرورگرهای اصلی پشتیبانی می کند. آخرین نسخه متریال Angular 8.1.1 است
- +اگر از سرویس «location» را به سرویس «Location» در Angular میگذارد. بیایید این ماژول را مانند زیر به AppModule اضافه کنیم،
// Other imports ...
@@ -4052,15 +4052,15 @@ فهرست
+
NgUpgrade یک کتابخانه است که توسط تیم Angular گردآوری شده است که می توانید از آن در برنامه های خود برای ترکیب و مطابقت اجزای AngularJS و Angular و پل زدن سیستم های تزریق وابستگی AngularJS و Angular استفاده کنید.
- +Angular CLI همه موارد مورد نیاز را با چارچوب تست Jasmine دانلود و نصب می کند. برای دیدن نتایج آزمون فقط باید «ng test» را اجرا کنید. بهطور پیشفرض، این دستور برنامه را در حالت تماشا میسازد و «Karma test runner» را راهاندازی میکند. خروجی نتایج آزمون به صورت زیر خواهد بود:
10% building modules 1/1 modules 0 active @@ -4071,10 +4071,10 @@.: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)..
نکته: یک مرورگر کروم نیز باز می شود و خروجی تست را در "Jasmine HTML Reporter" نمایش می دهد.
- +Angular CLI به طور رسمی از polyfills پشتیبانی می کند. هنگامی که یک پروژه جدید با دستور ng new ایجاد می کنید، یک فایل پیکربندی src/polyfills.ts به عنوان بخشی از پوشه پروژه شما ایجاد می شود. این فایل شامل اجباری و بسیاری از polyfill های اختیاری به عنوان دستورهای واردات جاوا اسکریپت است. بیایید پلی پرها را دسته بندی کنیم،
Mandatory polyfills: هنگامی که پروژه خود را با دستور ng new و دستورهای import مربوطه فعال در فایل 'src/polyfills.ts' فعال می کنید، اینها به طور خودکار نصب می شوند.
import 'web-animations-js';
میتوانید ApplicationRef یا NgZone یا ChangeDetectorRef را به کامپوننت خود تزریق کنید و از روشهای خاص زیر برای شروع تشخیص تغییر در Angular استفاده کنید. یعنی 3 راه ممکن وجود دارد،
ApplicationRef.tick(): از این روش برای پردازش صریح تشخیص تغییر و عوارض جانبی آن استفاده کنید. درخت کامپوننت کامل را بررسی می کند.
NgZone.run(callback): عملکرد برگشت به تماس را در داخل منطقه Angular ارزیابی می کند.
ChangeDetectorRef.detectChanges(): فقط اجزاء و بچه ها را تشخیص می دهد.
نسخه های مختلفی از فریم ورک Angular وجود دارد. بیایید ویژگی های تمام نسخه های مختلف را ببینیم،
Angular 1 (AngularJS) اولین فریم ورک زاویه ای است که در سال 2010 منتشر شد.
Angular 1 (AngularJS) اولین فریم ورک انگولاری است که در سال 2010 منتشر شد.
AngularJS برای دستگاه های تلفن همراه ساخته نشده است.
بر پایه کنترلرهایی با معماری MVC ساخته شده است.