آموزش Angular (برنامه کامل) با مواد Angular، Angularfire و NgRx

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

شروع شدن Getting Started

• خوش آمدید و معرفی Welcome & Introduction

• داخل دوره چیست؟ What's Inside the Course?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• برنامه ریزی اپلیکیشن Planning the App

بازنگری مختصر زاویه ای (اختیاری) A Brief Angular Refresher (OPTIONAL)

• معرفی ماژول Module Introduction

• Angular چیست؟ What is Angular?

• باید بخوانید: Angular CLI - آخرین نسخه MUST READ: Angular CLI - Latest Version

• راه اندازی پروژه با Angular CLI Project Setup with the Angular CLI

• چگونه یک برنامه Angular شروع و کار می کند How an Angular App Starts and Works

• افزودن کامپوننت ها Adding Components

• نحو الگو Template Syntax

• استفاده از دستورالعمل هایی مانند ngFor و ngIf Using Directives like ngFor and ngIf

• ویژگی سفارشی و صحافی رویداد Custom Property & Event Binding

• تشکیل می دهد Forms

• آشنایی با خدمات و تزریق وابستگی Understanding Services & Dependency Injection

• مسیریابی زاویه ای Angular Routing

• کجا عمیق تر شیرجه بزنیم Where to Dive Deeper

• منابع و لینک های مفید Useful Resources & Links

مواد زاویه ای Angular Material

• معرفی ماژول Module Introduction

• درک اجزای مواد زاویه ای Understanding Angular Material Components

• افزودن متریال زاویه ای به پروژه Adding Angular Material to a Project

• به روز بمانید! Stay Up To Date!

• اولین جزء مواد زاویه ای ما - دکمه Our First Angular Material Component - The Button

• چرا باید همه چیز را جداگانه وارد کنیم؟ Why Do We Have To Import Everything Separately?

• ایجاد ساختار برنامه دوره Creating the Course App Structure

• کار بر روی فرم ثبت نام Working on The Signup Form

• Flexbox - یک تجدید کننده سریع Flexbox - A Quick Refresher

• کنترل Layout با @angular/flex-layout Controlling the Layout with @angular/flex-layout

• افزودن و پیکربندی دکمه ارسال Adding & Configuring the Submit Button

• پیاده سازی نکات و خطاهای اعتبار سنجی (در فرم ها) Implementing Hints and Validation Errors (on Forms)

• اضافه کردن یک Datepicker Adding a Datepicker

• محدود کردن تاریخ های قابل انتخاب Restricting Pickable Dates

• افزودن چک باکس Adding a Checkbox

• تکمیل فرم با سبک Finishing the Form with Style

• زمان برای تمرین - مواد زاویه ای Time to Practice - Angular Material

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

غواصی عمیق تر در مواد زاویه ای Diving Deeper into Angular Material

• معرفی ماژول Module Introduction

• اضافه کردن ناوبری و Sidenav Adding Navigation & a Sidenav

• کار بر روی Sidenav و Toolbar Working on the Sidenav and Toolbar

• یک ظاهر طراحی Sidenav Styling the Sidenav

• ریسپانسیو کردن صفحه Making the Page Responsive

• افزودن موارد ناوبری Adding Navigation Items

• تقسیم ناوبری به اجزا Splitting the Navigation Into Components

• کار بر روی صفحه خوش آمدید Working on the Welcome Screen

• افزودن یک جزء Tabs Adding a Tabs Component

• افزودن چند "کارت" Adding some "Cards"

• اضافه کردن منوی کشویی Adding a Dropdown Menu

• افزودن اسپینر به صفحه آموزش Adding a Spinner to the Training Screen

• اضافه کردن یک تایمر ورزشی خوب Adding a Nice Exercise Timer

• افزودن یک صفحه گفتگوی لغو Adding a Cancel Dialog Screen

• انتقال داده به دیالوگ Passing Data to the Dialog

• افزودن گزینه های «خروج» و «ادامه». Adding "Exit" and "Continue" Options

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کار با داده ها و مواد زاویه ای Working with Data and Angular Material

• معرفی ماژول Module Introduction

• مهم: RxJS 6 Important: RxJS 6

• مهم: rxjs-compat را نصب کنید IMPORTANT: Install rxjs-compat

• کد بدون rxjs-compat Code without rxjs-compat

• پیاده سازی احراز هویت Implementing Authentication

• زمان تمرین - مواد و داده های زاویه ای Time to Practice - Angular Material & Data

• مسیریابی و احراز هویت Routing & Authentication

• حفاظت از مسیر Route Protection

• آماده سازی داده های تمرین Preparing the Exercise Data

• تزریق و استفاده از خدمات آموزشی Injecting & Using the Training Service

• تنظیم یک تمرین فعال Setting an Active Exercise

• کنترل ورزش فعال Controlling the Active Exercise

• افزودن فرم به مؤلفه آموزشی Adding a Form to the Training Component

• مدیریت آموزش فعال از طریق یک سرویس Handling the Active Training via a Service

• به روز رسانی RxJS 6 RxJS 6 Update

• مدیریت رویدادهای "تکمیل" و "لغو". Handling "Complete" and "Cancel" Events

• اضافه کردن جدول داده های مواد زاویه ای Adding the Angular Material Data Table

• اضافه کردن مرتب سازی به جدول داده ها Adding Sorting to the Data Table

• افزودن فیلتر به جدول داده ها Adding Filtering to the Data Table

• فیلتر کردن جدول داده ++ Data Table Filtering++

• افزودن صفحه بندی به جدول داده ها Adding Pagination to the Data Table

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

با استفاده از Angularfire & Firebase Using Angularfire & Firebase

• معرفی ماژول Module Introduction

• Firebase چیست؟ What is Firebase?

• شروع کار با Firebase Getting Started with Firebase

• Angularfire چیست؟ What is Angularfire?

• RxJS Observables Refresher RxJS Observables Refresher

• غواصی در Firebase Diving into Firebase

• گوش دادن به تغییرات ارزش (Firestore) Listening to Value Changes (of Firestore)

• اپراتورها و RxJS 6 Operators & RxJS 6

• گوش دادن به تغییرات Snapshot (Firestore، از جمله متادیتا) Listening to Snapshot Changes (of Firestore, incl. Metadata)

• تجدید ساختار کد Restructuring the Code

• Firebase چگونه اشتراک ها را مدیریت می کند How Firebase Manages Subscriptions

• ذخیره تمرینات تکمیل شده در Firestore Storing Completed Exercises on Firestore

• اتصال جدول داده به Firestore Connecting the Data Table to Firestore

• کار با اسناد Working with Documents

• افزودن احراز هویت واقعی (ثبت نام) Adding Real Authentication (Sign Up)

• افزودن ورود کاربر Adding User Login

• آشنایی با احراز هویت در SPA ها Understanding Authentication in SPAs

• پیکربندی قوانین امنیتی Firestore Configuring Firestore Security Rules

• مدیریت اشتراک های Firestore Managing Firestore Subscriptions

• سازماندهی مجدد کد Reorganizing the Code

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

بهینه سازی برنامه Optimizing the App

• معرفی ماژول Module Introduction

• بهبود سبک و مدیریت خطا Style Improvements & Error Handling

• اضافه کردن اسپینر Adding a Spinner

• زمان تمرین - بهینه سازی ها Time to Practice - Optimizations

• افزودن نوار اسنک با قابلیت استفاده مجدد (اعلان) Adding a Re-Usable Snackbar (Notification)

• بهبود مدیریت خطا Improving Error Handling

• تقسیم برنامه به ماژول Splitting the App Into Modules

• زمان تمرین - ماژول ها Time to Practice - Modules

• بهینه سازی اشتراک ها Optimizing Subscriptions

• ایجاد یک SharedModule Creating a SharedModule

• تقسیم کردن مسیرها Splitting Up Routes

• بارگذاری یک ماژول با تنبلی Loading a Module Lazily

• جابجایی گارد Auth Moving the Auth Guard

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استفاده از NgRx برای مدیریت دولتی Using NgRx for State Management

• معرفی ماژول Module Introduction

• Redux چیست - مروری What is Redux - An Overview

• مفاهیم اصلی NgRx - اولین مثال NgRx Core Concepts - A First Example

• کار با چند کاهش دهنده و اکشن Working with Multiple Reducers & Actions

• ارسال اقدامات و انتخاب برش های حالت Dispatching Actions & Selecting State Slices

• زمان برای تمرین - NgRx Time to Practice - NgRx

• چه خبر با نحو واردات RxJS؟ What's Up with the RxJS Import Syntax?

• افزودن کاهش دهنده تأیید اعتبار (و اقدامات) Adding an Auth Reducer (and Actions)

• اضافه کردن اشتراک های Auth Adding Auth Subscriptions

• افزودن کاهش دهنده آموزشی و اقدامات با بارگذاری Adding the Training Reducer and Actions with Payloads

• حالت لود تنبل Lazy Loaded State

• اعزام اقدامات آموزشی Dispatching Training Actions

• انتخاب وضعیت آموزش Selecting Training State

• انتخاب صحیح مقادیر واحد Selecting Single Values Correctly

• اتصال جدول داده ها Connecting the Data Table

• پاکسازی پروژه Cleaning the Project Up

• اضافه کردن یک رفع اشکال کوچک Adding a small Bugfix

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

استقرار برنامه Deploying the App

• مقدمه و آماده سازی Introduction & Preparation

• استقرار برنامه در میزبانی Firebase Deploying the App to Firebase Hosting

• منابع و لینک های مفید Useful Resources & Links

جایزه: تم های متریال زاویه ای BONUS: Angular Material Themes

• معرفی ماژول Module Introduction

• درک تم های متریال زاویه ای Understanding Angular Material Themes

• اضافه کردن تم با Angular 6 Adding the Theme with Angular 6

• سفارشی کردن یک تم متریال زاویه ای Customising an Angular Material Theme

• منابع و لینک های مفید Useful Resources & Links

گرد کردن Round Up

• خلاصه دوره Course Roundup

• امتیاز: محتوای بیشتر! Bonus: More Content!