آموزش اجزای زاویه ای - مانند یک حرفه ای! (Angular 2/4/5/6/7+)

سرفصل ها و درس ها

مقدمه Intro

• معرفی Introduction

• کد منبع و فرآیند نصب Source code and install process

سطح پایه Basic Level

• دکوراتور @کامپوننت @Component decorator

• ساخت یک جزء جدید Building a new component

• جزء نوار پیشرفت: سبک های مؤلفه (:host) Progress bar component: Component styles (:host)

• @Input decorator & bindings @Input decorator & property bindings

• جزء شمارش معکوس: قلاب چرخه عمر ngOnInit Countdown component: ngOnInit lifecycle hook

• @Output decorator، EventEmitter و اتصالات رویداد @Output decorator, EventEmitter & event bindings

• استفاده از متدهای جزء فرزند از طریق متغیر مرجع الگو Using child component methods via Template Reference Variable

• قلاب چرخه حیات: ngOnChange و ngOnDestroy Lifecycle hooks: ngOnChange & ngOnDestroy

سطح متوسط Intermediate Level

• مولفه های Stateful در مقابل بدون تابعیت Stateful VS Stateless Components

• کد منبع و فرآیند نصب Source code & install process

• اجزای نمایشی (بدون تابعیت) Presentational Components (stateless)

• ظروف (اجزای حالت دار) Containers (stateful components)

• انتقال منطق به یک سرویس (اصل مسئولیت واحد) Moving logic to a service (Single Responsibility Principle)

• ارائه دهندگان در سطوح یک جزء و ماژول Providers at a component and module levels

• Observables & Subjects: انتشار رویدادها از یک سرویس Observables & Subjects: Emitting events from a service

• BehaviourSubject و AsyncPipe BehaviourSubject & AsyncPipe

• شیوه های خوب - دریافت کننده ها یا نحوه اجتناب از منطق درون قالب ها Good practices - Getters or how to avoid logic inside templates

• استراتژی تشخیص تغییر پیش فرض Default change detection strategy

• استراتژی تشخیص تغییر OnPush OnPush change detection strategy

• کپسوله‌سازی سبک‌های مؤلفه (DOM سایه) Component styles encapsulation (shadow DOM)

سطح پیشرفته Advanced Level

• نمایش محتوا با ng-content Content projection with ng-content

• اسلات های ng-content و projection ng-content and projection slots

• استراتژی های ng-content & Don't Repeat Yourself (DRY). ng-content & Don't Repeat Yourself (DRY) strategies

• از کد به مؤلفه والد دسترسی پیدا کنید Access parent component from code

• @ContentChild: به محتوای پیش بینی شده دسترسی پیدا کنید @ContentChild: access the projected content

• @ContentChildren & QueryList: به محتوای پیش بینی شده دسترسی پیدا کنید @ContentChildren & QueryList: access the projected content

• @ViewChild: به مؤلفه فرزند دسترسی پیدا کنید @ViewChild: access child component

• @ViewChildren & QueryList: به اجزای کودک دسترسی داشته باشید @ViewChildren & QueryList: access children components

• ElementRef و NativeElement ElementRef and NativeElement

• Renderer: Platform Agnostic Render Renderer: Platform Agnostic Render

• ng-container - گروه بندی عناصر بدون لفاف ng-container - grouping elements without a wrapper

• ng-template - تکرار محتوا در DOM ng-template - repeating content into the DOM

• ایجاد اجزای پویا Creating Dynamic Components

• اجزای دینامیک: ورودی ها و خروجی ها Dynamic Components: Inputs and Outputs

• اجزای پویا: ایجاد و تخریب Dynamic Components: Creation and Destruction

• افکار نهایی Final thoughts