آموزش دوره Crash Angular با Node و Java Backend

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

معرفی Introduction

• معرفی دوره و مدرس Course and Instructor Introduction

• چگونه از این دوره به بهترین شکل ممکن استفاده کنیم How to make the best of this course

• اپلیکیشن های تک صفحه ای چیست؟ What are Single Page Applications

• چیست و چرا Angular What and why Angular

معرفی Introduction

راه اندازی نرم افزار Software Setup

• Angular را نصب کنید Install Angular

• نخ را نصب کنید Install Yarn

• کد ویژوال استودیو را نصب کنید Install Visual Studio Code

• میز کار MySql و MySql را نصب کنید Install MySql and MySql workbench

• MySql Workbench را اجرا کنید Launch MySql Workbench

• فقط ویندوز - Mysql را نصب کنید Windows Only -Install Mysql

• فقط ویندوز - Mysql Workbench را نصب کنید Windows Only - Install Mysql Workbench

• پروژه های انجام شده را دانلود کنید Download the completed projects

راه اندازی نرم افزار Software Setup

اجزاء Components

• اجزاء Components

• پروژه را ایجاد کنید Create the project

• فایل ها و پوشه های پروژه مهم Important Project Files and Folders

• اولین کامپوننت را ایجاد کنید Create the First Component

• NgModules NgModules

• کامپوننت اول را بوت استرپ کرده و اجرا کنید Bootstrap and run the first component

• استفاده از کامپوننت جدید به عنوان مولفه ریشه Using the new component as the root component

• یک جزء فروشنده ایجاد کنید Create a Seller Component

• استفاده از Arrays of data و ngFor Directive Using Arrays of data and ngFor directive

• از تابع استفاده کنید Use the function

• اتصال ویژگی ورودی Input property binding

• اتصال رویداد خروجی Output Event Binding

• اجزاء Components

• اجزاء Components

اجزاء Components

بخشنامه ها Directives

• معرفی Introduction

• ngIf ngIf

• استفاده از ngIf به صورت پویا Using ngIf dynamically

• ngIf ngIf

• با استفاده از ngSwitch Using ngSwitch

• با استفاده از ngSwitchDefault Using ngSwitchDefault

• ngSwitch ngSwitch

• با استفاده از ngFor Using ngFor

• استفاده از ngFor با اشیا Using ngFor with objects

• ngFor ngFor

• با استفاده از ngNonBindable Using ngNonBindable

• NgStyle NgStyle

• استایل پویا با ngStyle Dynamic Styling with ngStyle

• با استفاده از NgClass Using NgClass

• دینامیک NGClass Dynamic NGClass

• بخشنامه ها Directives

بخشنامه ها Directives

خدمات Services

• تزریق وابستگی Dependency Injection

• مورد استفاده Usecase

• پیوند به خدمات استراحت Links to rest services

• پروژه و سرویس را ایجاد کنید Create the project and service

• بررسی کد خدمات و واردات Service code walkthrough and imports

• سرویس را پیاده سازی کنید Implement the service

• کامپوننت را ایجاد کنید Create the component

• رسیدگی به خطاها Handle Errors

• HTML را پیاده سازی کنید Implement HTML

• پیکربندی را به روز کنید Update configuration

• خدمات در عمل Services in action

• اضافه کردن سبک ها Add styles

• خدمات Services

خدمات Services

ارسال داده ها Posting Data

• معرفی Introduction

• پروژه را ایجاد کنید Create the project

• سرویس را پیاده سازی کنید Implement the Service

• کامپوننت را پیاده سازی کنید Implement the Component

• HTML را پیاده سازی کنید Implement the HTML

• برنامه را بوت استرپ کنید Bootstrap the applicaiton

• ارتقا دهید Upgrade

• برنامه را اجرا کنید Run the application

ارسال داده ها Posting Data

استفاده از چندین سرویس Using Multiple Services

• معرفی Introduction

• پروژه را ایجاد کنید Create the project

• خدمات را پیاده سازی کنید Implement the Services

• از خدمات استفاده کنید Use the Services

• HTML را پیاده سازی کنید Implement the HTML

• برنامه را پیکربندی کنید Configure the app

• برنامه را اجرا کنید Run the application

• از forkJoin استفاده کنید Use forkJoin

استفاده از چندین سرویس Using Multiple Services

REST API با استفاده از ExpressJS REST API Using ExpressJS

• معرفی Introduction

• جدول Product را ایجاد کنید Create the Product table

• پروژه را ایجاد کنید Create the project

• اتصال DB را ایجاد کنید Create the DB Connection

• یک کنترلر ایجاد کنید Create a controller

• نقطه پایانی READ را پیاده سازی کنید Implement the READ endpoint

• برنامه REST را راه اندازی کنید Initialize REST application

• تست READ Test READ

• دریافت محصول واحد Get single Product

• ايجاد كردن Create

• ارتقا - تجزیه کننده بدن را حذف کنید Upgrade - Remove body-parser

• تست و عیب یابی Create Test and Troubleshoot Create

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

• حذف Delete

• REST API ها با استفاده از ExpressJS REST APIs using ExpressJS

• REST API با استفاده از ExpressJS REST API Using ExpressJS

REST API با استفاده از ExpressJS REST API Using ExpressJS

Angular Client و Routing Angular Client and Routing

• معرفی Introduction

• پروژه را ایجاد کنید Create the project

• روش Get Products Service را ایجاد و پیاده سازی کنید Create and implement Get Products Service method

• کامپوننت و مشاهده را ایجاد کنید Create the component and view

• به روز رسانی پیکربندی Update Configuration

• روش های دیگر را اجرا کنید Implement the Other Methods

• پیاده سازی روش های کامپوننت Implement Component Methods

• HTML را پیاده سازی کنید Implement HTML

• به روز رسانی واکشی و حذف HTML Update Fetch and Delete HTML

• مسیریابی Routing

• Usecase و Refactoring Usecase and Refactoring

• اجزای Refactor Refactor Components

• Refactor HTML Refactor HTML

• FormsModule را اضافه کنید Add FormsModule

• مراحل مسیریابی Routing Steps

• ماژول مسیریابی را ایجاد کنید Create the Routing Module

• مسیرها را اضافه کنید Add the Routes

• ویژگی pathmatch The pathmatch property

• ماژول مسیریابی را پیکربندی کنید Configure the routing module

• از مسیرها در HTML استفاده کنید Use routes in HTML

• ارتقا زاویه ای Angular Upgrade

• پشتیبانی CORS را در پروژه API پیکربندی کنید Configure CORS Support on the API Project

• مسیریابی در عمل Routing in Action

• مسیریابی Routing

• Angular Client Angular Client

• مسیریابی Routing

Angular Client و Routing Angular Client and Routing

لوله های Pipes

• معرفی Introduction

• لوله های متن text pipes

• تاریخ date

• واحد پول currency

• json json

• عدد number

• درصد percent

• تکه slice

• استفاده از slice in for Using slice in for

• یک وعده ایجاد کنید create a promise

• از لوله ناهمگام استفاده کنید use async pipe

• یک لوله سفارشی ایجاد کنید Create a Custom Pipe

• لوله های Pipes

• لوله های Pipes

لوله های Pipes

فرم های واکنشی Reactive Forms

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

• مورد استفاده و پروژه Usecase and Project

• bootstrap css را اضافه کنید Add bootstrap css

• مدل را ایجاد کنید Create the model

• نمای فرم را ایجاد کنید Create the form view

• یک زیر گروه آدرس اضافه کنید Add a Address sub group

• افزودن دکمه ارسال Add submit button

• onSubmit را بررسی کنید Handle onSubmit

• تست و خلاصه Test and Summary

• مقادیر و اعتبارسنجی پیش فرض Default Values and Validations

• رسیدگی به خطاهای اعتبارسنجی Handling Validation Errors

• کشورها را به صورت پویا دریافت کنید Get countries dynamically

• فرم های واکنشی Reactive Forms

• فرم های واکنشی Reactive Forms

فرم های واکنشی Reactive Forms

قالب‌های مبتنی بر الگو Template Driven Forms

• قالب‌های مبتنی بر الگو Template Driven Forms

• پروژه را ایجاد کنید Create the project

• قالب و فرم را ایجاد کنید Create the template and form

• فیلدهای فرعی FormGroup را اضافه کنید Add sub FormGroup fields

• رسیدگی به ارسال Handle Submit

• تست Test

• صحافی دو طرفه Two-Way Binding

• قالب‌های مبتنی بر الگو Template Driven Forms

• قالب‌های مبتنی بر الگو Template Driven Forms

قالب‌های مبتنی بر الگو Template Driven Forms

دستورالعمل های سفارشی Custom Directives

• یک دستورالعمل ساختاری سفارشی ایجاد کنید Create a custom structural directive

• منطق شرطی را پیاده کنید Implement the conditional logic

• از *myIf استفاده کنید Use *myIf

• دستور حلقه ایجاد کنید Create loop directive

• یک دستورالعمل ویژگی ایجاد کنید Create a Attribute Directive

• ورودی های عبور Pass Inputs

• رسیدگی به رویدادها Handle Events

• دستورالعمل های سفارشی Custom Directives

دستورالعمل های سفارشی Custom Directives

مورد استفاده پروژه Project Usecase

• معرفی Introduction

• مورد استفاده رزرو پرواز Flight Reservation Usecase

• Flight CheckIn Usecase Flight CheckIn Usecase

مورد استفاده پروژه Project Usecase

پس زمینه جاوا را ایجاد کنید Create the Java Backend

• طرح DB را ایجاد کنید Create the DB Schema

• جاوا را نصب کنید Install Java

• STS را نصب کنید Install STS

• برنامه اجرایی جاوا را دانلود کنید Download the executable java application

• کد منبع تکمیل شده را دانلود کنید Download the completed source code

• پروژه را ایجاد کنید Create the project

• موجودیت ها را ایجاد کنید Create the Entities

• آنها را با حاشیه نویسی JPA علامت گذاری کنید Mark them with JPA Annotations

• روابط را تعریف کنید Define relationships

• مخازن را ایجاد کنید Create the Repositories

• findFlights API findFlights API

• saveReservation API saveReservation API

• SaveReservation را پیاده سازی کنید Implement saveReservation

• پیدا کردن رزرو findReservation

• updateReservation updateReservation

• منبع داده را پیکربندی کرده و اجرا کنید Configure The Data Source and Run

• پروازها را اضافه کنید Add Flights

• پروازها را فیلتر کنید Filter Flights

• با استفاده از Postman پروازها را فیلتر کنید Test Filter Flights using Postman

• تست ذخیره و یافتن رزرو Test Save and Find Reservation

• به روز رسانی تست Test Update

• FindFlight را ایجاد و آزمایش کنید Create and Test FindFlight

• پشتیبانی Cross Site Origin را اضافه کنید Add Cross Site Origin Support

پس زمینه جاوا را ایجاد کنید Create the Java Backend

برنامه رزرو پرواز را ایجاد کنید Create the Flight Reservation APP

• مورد استفاده Usecase

• پروژه را ایجاد کنید Create the project

• HTML و Model را دانلود کنید Download HTML and Model

• خدمات رزرو قسمت 1 Reservation Service Part 1

• خدمات رزرواسیون - قسمت 2 Reservation Service - part 2

• مسیریابی را پیکربندی کنید Configure Routing

• پروازها را پیدا کنید Find Flights

• برنامه را بوت استرپ کنید Bootstrap the application

• FindFlights را تست کنید Test findFlights

• نمایش پروازها Display Flights

• جزئیات مسافر قسمت 1 Passenger Details Part 1

• به روز رسانی - پارامترهای مسیر Update - Route Params

• جزئیات مسافر قسمت 2 Passenger Details Part 2

• تایید و تست پایان به پایان Confirm and Test End To End

برنامه رزرو پرواز را ایجاد کنید Create the Flight Reservation APP

برنامه Flight CheckIn را توسعه دهید Develop Flight CheckIn App

• ایجاد پروژه Create Project

• سرویس را پیاده سازی کنید Implement the Service

• HTML ها را دانلود کنید Download HTMLs

• پیکربندی مسیرها Configure Routes

• Start CheckIn را پیاده سازی کنید Implement Start CheckIn

• بوت استرپ و تست Bootstrap and Test

• اجرای CheckIn Implement CheckIn

برنامه Flight CheckIn را توسعه دهید Develop Flight CheckIn App

بسته شدن Wrap Up

• امتحان نهایی Final Quiz

• سخنرانی پاداش Bonus Lecture

بسته شدن Wrap Up