آموزش جامع Angular 14 (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)

امروزه همه به دنبال ترندترین‌ها هستند. ترندترین تکنولوژی‌ها، ترندترین مهارت‌ها، ترندترین زبان برنامه‌نویسی و هر چیزی که در دنیا خواهان بیشتری دارد. در این دوره قصد داریم در ارتباط با یکی از ترندترین و جذاب‌ترین مهارت‌ها یعنی تسلط بر فریم ورک‌ کاربردی انگولار و تایپ اسکریپت در طراحی سایت صحبت کنیم.

قیمت: 700,000 تومان

قیمت ارزی (تتر):

X
30 : 10 : 25
115 جلسه
14 فصل
2 سال پشتیبانی

آموزش جامع Angular 14 (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)

امروزه همه به دنبال ترندترین‌ها هستند. ترندترین تکنولوژی‌ها، ترندترین مهارت‌ها، ترندترین زبان برنامه‌نویسی و هر چیزی که در دنیا خواهان بیشتری دارد. در این مطلب قصد داریم در ارتباط با یکی از ترندترین و جذاب‌ترین مهارت‌ها یعنی تسلط بر فریم ورک‌های کاربردی در طراحی سایت صحبت کنیم. اگر تمایل دارید حوزه کاری خود را طراحی سایت انتخاب کنید یا این که به صورت مبتدی در حال یادگیری مبانی توسعه وب هستید، تسلط بر فریم ورک‌ها و آشنایی با آن‌ها در سطح ابتدایی و پیشرفته برای شما الزامی است. اما شاید ندانید که فریم ورک به چه معنا است. باید گفت که فریم ورک در واقع نوعی چهارچوب برای طراحی سایت و وب اپلیکیشن‌ها می‌باشد. در این مطلب با ما همراه باشید تا یکی از کاربردی‌ترین فریم ورک‌ها، یعنی انگولار را، به شما معرفی کنیم.

از نظر شما فرم ورک انگولار به چه معنا است؟

از نظر شما فرم ورک انگولار به چه معنا است؟

معنی واژه angular در فارسی زاویه دار می‌باشد. به نوعی انگولار، یک فریم ورک متن باز تحت وب است که بر مبنای جاوا اسکریپت ارائه شده است. به کمک این فریم ورک می‌توان وب اپلیکیشن‌هایی پویا ساخت. انگولار برای برنامه‌نویسان این شرایط را فراهم می‌کند که html زبان اصلی خود را انتخاب کنند و همچنین برای این که اجزای تشکیل دهنده نرم‌افزار را شفاف‌سازی کنند، به کمک آن می‌توانند سینتکس‌های html را گسترش دهند. html زبانی مخصوص سایت و طراحی اپلیکیشن می‌باشد. به طور کلی فریم ورک angular زبان ساده‌ای است که ضمن پشتیبانی از تمامی نسخه‌های html، به منظور ساخت و توسعه وب اپلیکیشن‌ها و همچنین طراحی نرم‌افزارهای تحت وب در سیستم عامل‌های اندروید و IOS مورد استفاده قرار می‌گیرد.

مهم‌ترین کاربرد angular

مهم‌ترین کاربرد angular

وب سایت ‌های قدیمی و معمولی معمولاً حالت چند صفحه‌ای داشتند که برای انجام هر عملی یک‌بار صفحه مرورگر رفرش می‌شد و همه چیز از نو برای کاربر لود می‌شد. اصطلاحاً به آن‌ها مولتی پیج اپلیکیشن‌ها گفته می‌شود. اما سینگل پیج اپلیکیشن‌ها دقیقا مانند اپلیکیشن موبایل عمل می‌کنند و قطعات و المان‌های تشکیل‌دهنده یک صفحه وب سایت جلوی چشم کاربر بدون رفرش شدن و لود شدن مجدد جابه‌جا می‌شوند. جالب است بدانید که ساخت وب سایت‌های تک صفحه‌ای هزینه و زمان کمتری به نسبت سایت‌های چند صفحه‌ای نیاز دارد. به علاوه کاربران نیز با این نوع وب سایت‌ها خیلی راحت‌تر هستند و تعامل بهتری برقرار می‌کنند. از طرف دیگر سازگاری آن‌ها با گوشی‌های هوشمند خیلی بیشتر است. یکی از بهترین ابزارهایی که می‌توان با آن‌ها وبسایت‌های تک صفحه‌ای ایجاد کرد، فریم ورک انگولار می‌باشد؛ که توسط گوگل ایجاد شده و پشتیبانی می‌گردد.

ویژگی‌های angular

ویژگی‌های angular

در ادامه با ویژگی های فریم ورک محبوب انگولار آشنا خواهیم شد. با ما همراه باشید.

قابل اعتماد بودن و محبوبیت انگولار

انگولار یک فریم ورک بزرگ، مبتنی بر جاوا اسکریپت می‌باشد. اکوسیستم بزرگی پشت این فریم ورک قرار گرفته که از برنامه‌نویسان سراسر دنیا تشکیل شده است. به علاوه جالب است بدانید که بیشتر از ۶۳ هزار ستاره دارد که نشان‌دهنده محبوبیت و قابل اعتماد بودن آن می‌باشد.

برخورداری از TypeScript

اگر چه angular برگرفته شده از جاوا اسکریپت است؛ اما مبنای اصلی این فریم ورک یک ابر مجموعه از جاوا اسکریپت به نام TypeScript می‌باشد. زمانی که برنامه‌نویس برنامه‌ای را ارائه می‌دهد برای دیدن نتیجه کار خود نیاز است که برنامه در همان زمان اجرا گردد. تایپ اسکریپت با کامپیل کردن کد نوشته شده به جاوا اسکریپت، این شرایط را برای برنامه‌نویس فراهم می کند. این ویژگی یک مزیت فوق‌العاده‌ برای توسعه‌دهندگان وب محسوب می‌شود. چرا که در زمان تایپ، تمامی خطاهای آن‌ها را نشان می‌دهد. این ویژگی یکی از برترین تمایزها بین تایپ اسکریپت و جاوا اسکریپت می‌باشد.

پایداری و ثبات انگولار

همان طور که اشاره شد گوگل از انگولار پشتیبانی می‌کند؛ که باعث ثبات و پایداری این فریم ورک می گردد. لازم به ذکر است که تمامی نسخه‌های ۲ به بعد این فریم ورک از ثبات و پایداری خاصی برخوردارند و به راحتی و بدون هیچ گونه تغییر کدی می‌توان پروژه‌های قبلی را به نسخه‌های بالاتر ارتقا داد.

فریم ورکی ماژولار

زمانی که شما برنامه‌ای را به صورت یکپارچه و کامل می‌نویسید، دیگر احتمال تغییر در هر قسمت به سختی امکان پذیر است. طراحی به سبک ماژولار کمک می‌کند یک برنامه با اجزای مختلف، کنار هم قرار بگیرند. در این صورت تغییر و ویرایش در هر قسمت به راحتی انجام می‌شود. این مزیت باعث می‌شود که هم هزینه نگهداری برنامه در آینده کاهش یابد و هم اینکه از ماژول‌ها در پروژه‌های دیگر نیز استفاده کرد. به عبارتی طراحی ماژولار یعنی قابلیت افزودن ابزارهای جانبی بعد از طراحی کامل به برنامه امکان‌پذیر است. ماژول‌های متفاوتی یک انگولار را سازماندهی می‌کنند. به نوعی کدهای شما دارای ماژول‌های مجزایی هستند که هر کدام مسئول توابع خاصی می ‌باشند. شما می‌توانید به راحتی خودتان ماژول طراحی کنید یا از کامپوننت‌های آماده‌ای که توسط طراحان ارائه می‌گردد، استفاده کنید.

سازگاری انگولار با کدهای متفاوت

برنامه‌ها و سایت های ارائه شده به کمک انگولار کامپوننت محور هستند. به نوعی لوگوهای مستقلی کنار یکدیگر قرار می‌گیرند و در نهایت پروژه نهایی را ایجاد می‌کنند. این ویژگی کمک می‌کند تا کدی که در یک پروژه استفاده شده، بارها در پروژه‌های دیگر نیز مورد استفاده قرار گیرد و به طور کلی سازگاری و نگهداری کدها را راحت‌تر می‌کند.

پشتیبانی انگولار از Ionic

،Ionic سکوی توسعه‌ی موبایل، اولین بار توسط انگولار پشتیبانی شد و بستری را فراهم کرد تا برنامه‌های تلفن همراه برای Android و iOS ایجاد شود. لازم به ذکر است که هنوز هم از انگولار به طور گسترده با قالب Ionic به منظور توسعه و گسترش برنامه‌های تلفن همراه استفاده می‌گردد.

بهره‌گیری از معماری MVC

این معماری کمک می‌کند تا داده‌ها به صورت دو طرفه متصل شوند. به نوعی به جای اینکه کد قسمت‌های مختلف به صورت یک جا و کلی نوشته شوند، کدها در سه دسته قرار گرفته و با یکدیگر تعامل دارند. این سه دسته کد شامل سه مورد زیر می باشد.

view:  اطلاعات موجود در model را به کاربر نشان می‌دهند و دستور کاربر را به controller انتقال می‌دهد.

controller: وظیفه controller برقراری ارتباط میان سایر لایه‌ها می‌باشد. همچنین در به روز رسانی model نقش مهمی ایفا می‌کند.

model: داده‌ها را حمل می‌کند و توسط controller تغییرات اعمال شده توسط model را به view اطلاع رسانی می‌کند.

وظایف برنامه‌نویسان انگولار

  •  با کمک Angular JS و TypeScript رابط کاربری را توسعه و طراحی می‌کنند.
  • یک برنامه‌ی فرانت اند را به طور کامل آماده‌سازی می‌کنند.
  • می‌بایست ارتباط نزدیکی با وب سرورهای خارجی داشته باشند.
  • محصولات را به کمک تجزیه و تحلیل کد توسعه‌ می دهند
  • می‌توانند در بخش‌های مختلف و مرتبط دیگر همکاری داشته باشند.
  • بسته به نیاز مجموعه می‌توانند در مرورگر‌های متفاوت کدهای مناسب جاوا اسکریپت، HTML و CSS بنویسند.

بازار کار انگولار

بازار کار انگولار

مزیت‌ها و ویژگی‌های اشاره شده باعث شده تا angular  یکی از محبوب‌ترین زبان‌‎های برنامه‌نویسی شناخته شده در جهان محسوب گردد. این زبان برنامه نویسی در ایران و جهان از وضعیت کاری خوبی برخوردار است. چرا که با توسعه تکنولوژی و افزایش تقاضا برای استخدام برنامه‌نویس انگولار مواجه هستیم. صرفا کافی است سایت‌های کاریابی را بررسی کنید تا به طور اختصاصی آگهی‌های استخدام برنامه‌‌نویس انگولار را ببینید.

در پایان

در این مطلب آموزشی سعی کردیم شما را با یکی از محبوب‌ترین و پرکاربردترین فریم ورک‌های دنیا آشنا کنیم. افزایش تقاضا برای استخدام برنامه نویس انگولار و توسعه تکنولوژی باعث شده تا تعداد شرکت‌هایی که آگهی‌های فرصت شغلی و استخدام برنامه نویس انگولار را ثبت می‌کنند، روز به روز افزایش یافته و بیشتر شوند. بنابراین می‌توان گفت که این زبان برنامه‌نویسی در ایران و جهان از موقعیت کاری خوبی برخوردار است. اگر قصد دارید در این حیطه به طور حرفه‌ای کار کنید و نمی‌دانید چطور شروع کنید، توصیه ما به شما تهیه‌ی دوره‌ی حرفه‌ای و جامع angular و typescript می‌باشد.

 

این تصویر اون چیزی که دنبالشی نیست:) بیشتر بگرد

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

معرفی بیشتر و مقدمات دوره
  • بررسی پروژه های دوره

  • بررسی محبوبیت و مزایای انگیولار در مقابل فریمورک ها و کتابخانه های مشابه (Vue.js , React.js)

  • بررسی بازار کار Angular

  • تایپ اسکریپت چیه و تا چه حد برای دوره اون رو یاد بگیریم ؟

    منتشرشده 00:09:24
  • معرفی چنل دیسکورد و کامیونیتی برنامه نویسان انگولار کدیاد

    منتشرشده 00:05:30
  • آموزش Typescript
  • شروع کار با تایپ اسکریپت و انواع داده ها - Getting Started With Typescript And DataTypes

    منتشرشده 02:28:39
  • کامپایلر تایپ اسکریپت - Typescript Compiler

    منتشرشده 00:48:00
  • کلاس ها و رابط ها - Classes And Interfaces

    منتشرشده 02:37:29
  • تایپ های پیشرفته - Advanced Types

    منتشرشده 00:53:49
  • جنریک ها - Generics

    منتشرشده 01:05:15
  • دکوراتور ها - Decorators

    منتشرشده 01:05:02
  • مفاهیم اصلی Angular بصورت جامع
  • نصب پیشنیاز ها و ایجاد اولین پروژه

    منتشرشده 00:17:35
  • بروزرسانی پروژه های انگولار

    منتشرشده 00:14:08
  • آشنایی بیشتر با دستورات و بررسی اجمالی فایل های Config

    منتشرشده 00:18:33
  • آشنایی با کامپوننت app

    منتشرشده 00:13:32
  • ساخت اواین کامپوننت

    منتشرشده 00:14:28
  • اعلان کامپوننت در app.module

    منتشرشده 00:09:52
  • ساخت کامپوننت با Angular CLI

    منتشرشده 00:10:00
  • نصب Bootstrap و بررسی انواع Component Selectors

    منتشرشده 00:14:18
  • بررسی انواع Styles در کامپوننت ها

    منتشرشده 00:06:52
  • آشنایی با String Interpolation

    منتشرشده 00:10:53
  • آشنایی با Property Binding

    منتشرشده 00:11:02
  • آشنایی با Event Binding

    منتشرشده 00:06:55
  • آشنایی با Event Binding - قسمت 2

    منتشرشده 00:14:59
  • آشنایی با Two-way Data binding

    منتشرشده 00:06:49
  • تمرین

    منتشرشده 00:04:17
  • حل تمرین

    منتشرشده 00:08:48
  • آشنایی با Directives و استفاده از ngIf

    منتشرشده 00:08:43
  • نحوه استفاده از ngStyle

    منتشرشده 00:10:51
  • نحوه استفاده از ngClass

    منتشرشده 00:09:05
  • استفاده از ngFor

    منتشرشده 00:07:45
  • تمرین دوم

    منتشرشده 00:06:08
  • حل تمرین

    منتشرشده 00:16:08
  • دریافت index مقادیر از حلقه ngFor

    منتشرشده 00:05:06
  • مهاجرت و بروزرسانی به نسخه 14 انگولار

  • کامپوننت بندی پروژه

    منتشرشده 00:16:05
  • متصل کردن مقادیر میان کامپوننت ها

    منتشرشده 00:13:03
  • آشنایی با Input Aliases

    منتشرشده 00:03:49
  • آشنایی با مفهوم EventEmitter

    منتشرشده 00:08:43
  • استفاده از EventEmitter و دکوراتور Output

    منتشرشده 00:14:08
  • تنظیم DataTypes و کامل کردن فرایند ها در EventEmitters

    منتشرشده 00:07:23
  • آشنایی با Output Aliases

    منتشرشده 00:02:53
  • آشنایی با مفهوم View Encapsulation

    منتشرشده 00:06:26
  • استفاده از Local Refrences

    منتشرشده 00:06:40
  • آشنایی و استفاده از دکوراتور ViewChild

    منتشرشده 00:07:22
  • آشنایی با Content Projection

    منتشرشده 00:06:05
  • آشنایی با چرخه حیات کامپوننت ها - Component Lifecycle

    منتشرشده 00:12:49
  • آشنایی با چرخه حیات کامپوننت ها - قسمت 2

    منتشرشده 00:17:17
  • آشنایی با چرخه حیات کامپوننت ها - قسمت 3

    منتشرشده 00:16:43
  • آشنایی با چرخه حیات کامپوننت ها - قسمت 4

    منتشرشده 00:16:23
  • بررسی و یادآوری متخصر Directives

    منتشرشده 00:17:05
  • ساخت یک Directive سفارشی

    منتشرشده 00:14:00
  • آشنایی و استفاده از Renderer

    منتشرشده 00:14:12
  • آشنایی و استفاده از HostListener

    منتشرشده 00:07:27
  • آشنایی و استفاده از HostBinding

    منتشرشده 00:06:51
  • استفاده از Property Binding در Directive

    منتشرشده 00:07:46
  • آشنایی با مفهوم Structural Directive

    منتشرشده 00:09:17
  • استفاده از TemplateRef و ViewContainerRef

    منتشرشده 00:11:10
  • Data Binding در Structural Directives

    منتشرشده 00:08:45
  • Data Binding در Structural Directives - قسمت 2

    منتشرشده 00:11:13
  • Data Binding در Structural Directives - قسمت 3

    منتشرشده 00:12:56
  • آشنایی با ngSwitch

    منتشرشده 00:08:09
  • آشنایی با Services

    منتشرشده 00:17:57
  • دریافت داده از API با استفاده از Services

    منتشرشده 00:05:48
  • درک مفهوم وابستگی و Dependency Injection

    منتشرشده 00:10:45
  • استفاده از Hierarchical Injection

    منتشرشده 00:19:10
  • DI در سرویس ها

    منتشرشده 00:13:21
  • آشنایی با Routing

    منتشرشده 00:13:04
  • استفاده از RouterLink و تکمیل مسیر دهی

    منتشرشده 00:06:14
  • آشنایی با Wild Card Route و Redirecting Routes

    منتشرشده 00:18:07
  • آشنایی با Route Parameters

    منتشرشده 00:16:02
  • انجام Navigation با استفاده از Route Params

    منتشرشده 00:15:57
  • استفاده از Optional Parameters

    منتشرشده 00:16:18
  • آشنایی با Relative Navigation

    منتشرشده 00:11:03
  • آشنایی با Child Route

    منتشرشده 00:13:13
  • آشنایی با Observables

    منتشرشده 00:21:18
  • بررسی حالات Complete و Error در Observables

    منتشرشده 00:11:32
  • آشنایی با of و from در rxjs

    منتشرشده 00:21:33
  • آشنایی و نحوه استفاده از operators در Rxjs

    منتشرشده 00:11:21
  • انتقال داده بین کامپوننت ها با استفاده از Service

    منتشرشده 00:13:27
  • انتقال داده بین کامپوننت ها با استفاده از Subject

    منتشرشده 00:08:07
  • استفاده از unsubscribe

    منتشرشده 00:09:31
  • آشنایی با رویکرد های Form Handling و پیکر بندی فرم با رویکرد Template Driven

    منتشرشده 00:24:38
  • آشنایی با Form Statement و اعتبار سنجی ورودی ها

    منتشرشده 00:22:55
  • استفاده از Data Binding در Form Handling

    منتشرشده 00:18:28
  • دسته بندی ورودی ها با ngModelGroup و کنترل مقادیر در Radio Buttons

    منتشرشده 00:16:05
  • استفاده از setValue و patchValue

    منتشرشده 00:11:18
  • دریافت و نمایش داده های فرم

    منتشرشده 00:18:41
  • آغاز کار با Reactive Forms

    منتشرشده 00:13:45
  • بررسی Submit و افزودن Validator

    منتشرشده 00:07:24
  • دسترسی به Control و افزودن متن برای اعتبار سنجی

    منتشرشده 00:08:26
  • ایجاد Form Group و دسته بندی کنترل ها

    منتشرشده 00:10:25
  • آشنایی و استفاده از Form Array

    منتشرشده 00:19:19
  • تغییر و پاک کردن مقادیر پیش فرض فرم

    منتشرشده 00:05:16
  • آشنایی با Pipes

    منتشرشده 00:12:45
  • استفاده از Pipe Chaining

    منتشرشده 00:04:31
  • ساخت و مقدار دهی یک Custom Pipe

    منتشرشده 00:14:46
  • ساخت جستجو روی محصولات با استفاده از pipe

    منتشرشده 00:13:44
  • پارامتر دهی به Pipe و ایجاد جستجوی پویا

    منتشرشده 00:13:02
  • آشنایی با Pipe های Pure و Impure

    منتشرشده 00:07:49
  • آشنایی با Async Pipe

    منتشرشده 00:07:18
  • آشنایی با Http Module و ارسال درخواست از نوع Get

    منتشرشده 00:17:02
  • ارسال درخواست از نوع Post

    منتشرشده 00:14:40
  • آشنایی و استفاده از Patch و Put

    منتشرشده 00:17:15
  • استفاده از Delete

    منتشرشده 00:06:50
  • استفاده از سرویس ها در درخواست های HTTP

    منتشرشده 00:14:22
  • مقدمه Error Handling در HTTP Requests

    منتشرشده 00:13:19
  • پیاده سازی Error Handling

    منتشرشده 00:08:56
  • بهبود و ارتقا Error Handling

    منتشرشده 00:11:53
  • پیاده سازی Bad Request Error Handler

    منتشرشده 00:04:41
  • ایجاد یک Global Error Handler

    منتشرشده 00:12:14
  • ایجاد یک Error Handler Method در Post Service

    منتشرشده 00:09:16
  • ایجاد یک Data Service برای انجام CRUD در همه سرویس ها

    منتشرشده 00:13:41
  • استفاده از Map Operator

    منتشرشده 00:06:48
  • آشنایی با Angular Material
  • آشنایی با Angular Material

  • پروژه اول - اپ تناسب اندام (Fitness Application)
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    آشنایی با Angular Universal برای Server Side Rendering
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    انیمیشن ها در انگولار - Angular Animations
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    پروژه دوم - مینی اپ اطلاعات پرداخت
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    پروژه سوم - Todo Pro Application
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    پروژه چهارم - Movie Show App
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    آشنایی با Webassembly و زبان Rust
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    پروژه پنجم - گیم بین
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    آموزش استفاده از تکنولوژی PWA در Angular
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است
    نقشه راه رسیدن به درآمد از محتوای دوره
    درحال حاضر هیج بخشی برای این فصل منتشر نشده است

    پیشنیاز های دوره چه چیزهایی هستند؟

    • جاوااسکریپت
    • HTML
    • CSS
    • Bootstrap

    نظرات دانشجویان

    مدرس دوره

    محمد هاشمی


    چهار ساله که تو حوزه برنامه نویسی و IT بعنوان مدرس , مشاور و کارشناس فعالیت میکنم … و تخصص اصلیم برنامه نویسی وب مبتنی بر دات نت و حوزه جاوااسکریپت هست

    سوالات متداول

    انگولار (angular ) چیست؟

    انگولار یک فریم ورک متن باز تحت وب است که بر مبنای جاوا اسکریپت ارائه شده و به کمک آن می‌توان وب اپلیکیشن‌های پویا ساخت.

    پیش نیاز انگولار چیست؟

    برای یادگیری انگولار بهتر است پیش تر با Html ،Css و JavaScript آشنایی داشته باشید.

    بازار کار angular  چگونه است؟

    انگولار از محبوب ترین زبان های برنامه نویسی در سراسر جهان است و متقاضیان استخدام برنامه نویسان آشنا با انگولار هر روز بیشتر از قبل می شود.