آموزش جامع Angular 14 (انگولار) و TypeScript (پروژه محور و ورود به بازار کار)
امروزه همه به دنبال ترندترینها هستند. ترندترین تکنولوژیها، ترندترین مهارتها، ترندترین زبان برنامهنویسی و هر چیزی که در دنیا خواهان بیشتری دارد. در این مطلب قصد داریم در ارتباط با یکی از ترندترین و جذابترین مهارتها یعنی تسلط بر فریم ورکهای کاربردی در طراحی سایت صحبت کنیم. اگر تمایل دارید حوزه کاری خود را طراحی سایت انتخاب کنید یا این که به صورت مبتدی در حال یادگیری مبانی توسعه وب هستید، تسلط بر فریم ورکها و آشنایی با آنها در سطح ابتدایی و پیشرفته برای شما الزامی است. اما شاید ندانید که فریم ورک به چه معنا است. باید گفت که فریم ورک در واقع نوعی چهارچوب برای طراحی سایت و وب اپلیکیشنها میباشد. در این مطلب با ما همراه باشید تا یکی از کاربردیترین فریم ورکها، یعنی انگولار را، به شما معرفی کنیم.
از نظر شما فرم ورک انگولار به چه معنا است؟
معنی واژه angular در فارسی زاویه دار میباشد. به نوعی انگولار، یک فریم ورک متن باز تحت وب است که بر مبنای جاوا اسکریپت ارائه شده است. به کمک این فریم ورک میتوان وب اپلیکیشنهایی پویا ساخت. انگولار برای برنامهنویسان این شرایط را فراهم میکند که html زبان اصلی خود را انتخاب کنند و همچنین برای این که اجزای تشکیل دهنده نرمافزار را شفافسازی کنند، به کمک آن میتوانند سینتکسهای html را گسترش دهند. html زبانی مخصوص سایت و طراحی اپلیکیشن میباشد. به طور کلی فریم ورک angular زبان سادهای است که ضمن پشتیبانی از تمامی نسخههای html، به منظور ساخت و توسعه وب اپلیکیشنها و همچنین طراحی نرمافزارهای تحت وب در سیستم عاملهای اندروید و IOS مورد استفاده قرار میگیرد.
مهمترین کاربرد 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
تایپ اسکریپت چیه و تا چه حد برای دوره اون رو یاد بگیریم ؟
معرفی چنل دیسکورد و کامیونیتی برنامه نویسان انگولار کدیاد
شروع کار با تایپ اسکریپت و انواع داده ها - Getting Started With Typescript And DataTypes
کامپایلر تایپ اسکریپت - Typescript Compiler
کلاس ها و رابط ها - Classes And Interfaces
تایپ های پیشرفته - Advanced Types
جنریک ها - Generics
دکوراتور ها - Decorators
نصب پیشنیاز ها و ایجاد اولین پروژه
بروزرسانی پروژه های انگولار
آشنایی بیشتر با دستورات و بررسی اجمالی فایل های Config
آشنایی با کامپوننت app
ساخت اواین کامپوننت
اعلان کامپوننت در app.module
ساخت کامپوننت با Angular CLI
نصب Bootstrap و بررسی انواع Component Selectors
بررسی انواع Styles در کامپوننت ها
آشنایی با String Interpolation
آشنایی با Property Binding
آشنایی با Event Binding
آشنایی با Event Binding - قسمت 2
آشنایی با Two-way Data binding
تمرین
حل تمرین
آشنایی با Directives و استفاده از ngIf
نحوه استفاده از ngStyle
نحوه استفاده از ngClass
استفاده از ngFor
تمرین دوم
حل تمرین
دریافت index مقادیر از حلقه ngFor
مهاجرت و بروزرسانی به نسخه 14 انگولار
کامپوننت بندی پروژه
متصل کردن مقادیر میان کامپوننت ها
آشنایی با Input Aliases
آشنایی با مفهوم EventEmitter
استفاده از EventEmitter و دکوراتور Output
تنظیم DataTypes و کامل کردن فرایند ها در EventEmitters
آشنایی با Output Aliases
آشنایی با مفهوم View Encapsulation
استفاده از Local Refrences
آشنایی و استفاده از دکوراتور ViewChild
آشنایی با Content Projection
آشنایی با چرخه حیات کامپوننت ها - Component Lifecycle
آشنایی با چرخه حیات کامپوننت ها - قسمت 2
آشنایی با چرخه حیات کامپوننت ها - قسمت 3
آشنایی با چرخه حیات کامپوننت ها - قسمت 4
بررسی و یادآوری متخصر Directives
ساخت یک Directive سفارشی
آشنایی و استفاده از Renderer
آشنایی و استفاده از HostListener
آشنایی و استفاده از HostBinding
استفاده از Property Binding در Directive
آشنایی با مفهوم Structural Directive
استفاده از TemplateRef و ViewContainerRef
Data Binding در Structural Directives
Data Binding در Structural Directives - قسمت 2
Data Binding در Structural Directives - قسمت 3
آشنایی با ngSwitch
آشنایی با Services
دریافت داده از API با استفاده از Services
درک مفهوم وابستگی و Dependency Injection
استفاده از Hierarchical Injection
DI در سرویس ها
آشنایی با Routing
استفاده از RouterLink و تکمیل مسیر دهی
آشنایی با Wild Card Route و Redirecting Routes
آشنایی با Route Parameters
انجام Navigation با استفاده از Route Params
استفاده از Optional Parameters
آشنایی با Relative Navigation
آشنایی با Child Route
آشنایی با Observables
بررسی حالات Complete و Error در Observables
آشنایی با of و from در rxjs
آشنایی و نحوه استفاده از operators در Rxjs
انتقال داده بین کامپوننت ها با استفاده از Service
انتقال داده بین کامپوننت ها با استفاده از Subject
استفاده از unsubscribe
آشنایی با رویکرد های Form Handling و پیکر بندی فرم با رویکرد Template Driven
آشنایی با Form Statement و اعتبار سنجی ورودی ها
استفاده از Data Binding در Form Handling
دسته بندی ورودی ها با ngModelGroup و کنترل مقادیر در Radio Buttons
استفاده از setValue و patchValue
دریافت و نمایش داده های فرم
آغاز کار با Reactive Forms
بررسی Submit و افزودن Validator
دسترسی به Control و افزودن متن برای اعتبار سنجی
ایجاد Form Group و دسته بندی کنترل ها
آشنایی و استفاده از Form Array
تغییر و پاک کردن مقادیر پیش فرض فرم
آشنایی با Pipes
استفاده از Pipe Chaining
ساخت و مقدار دهی یک Custom Pipe
ساخت جستجو روی محصولات با استفاده از pipe
پارامتر دهی به Pipe و ایجاد جستجوی پویا
آشنایی با Pipe های Pure و Impure
آشنایی با Async Pipe
آشنایی با Http Module و ارسال درخواست از نوع Get
ارسال درخواست از نوع Post
آشنایی و استفاده از Patch و Put
استفاده از Delete
استفاده از سرویس ها در درخواست های HTTP
مقدمه Error Handling در HTTP Requests
پیاده سازی Error Handling
بهبود و ارتقا Error Handling
پیاده سازی Bad Request Error Handler
ایجاد یک Global Error Handler
ایجاد یک Error Handler Method در Post Service
ایجاد یک Data Service برای انجام CRUD در همه سرویس ها
استفاده از Map Operator
آشنایی با Angular Material
پیشنیاز های دوره چه چیزهایی هستند؟
- جاوااسکریپت
- HTML
- CSS
- Bootstrap
نظرات دانشجویان
مدرس دوره

محمد هاشمی
چهار ساله که تو حوزه برنامه نویسی و IT بعنوان مدرس , مشاور و کارشناس فعالیت میکنم … و تخصص اصلیم برنامه نویسی وب مبتنی بر دات نت و حوزه جاوااسکریپت هست
سوالات متداول
انگولار یک فریم ورک متن باز تحت وب است که بر مبنای جاوا اسکریپت ارائه شده و به کمک آن میتوان وب اپلیکیشنهای پویا ساخت.
برای یادگیری انگولار بهتر است پیش تر با Html ،Css و JavaScript آشنایی داشته باشید.
انگولار از محبوب ترین زبان های برنامه نویسی در سراسر جهان است و متقاضیان استخدام برنامه نویسان آشنا با انگولار هر روز بیشتر از قبل می شود.