آموزش انگولار | دوره حرفه ای صفر تا صد Angular

22 رای ثبت شده
آموزش انگولار | دوره حرفه ای صفر تا صد Angular

آموزش انگولار | دوره حرفه ای صفر تا صد Angular

آموزش حرفه ای انگولار از صفر تا صد با پیاده سازی یک وب اپلیکیشن شامل بخش های مختلف مانند سطوح دسترسی ، فرم های ثبت و ویرایش اطلاعات ، کارکردن با فایل ها و بخش های مهم دیگر که به شما کمک می کند در پایان دوره یک برنامه نویس حرفه ای انگولار باشید.

22 رای ثبت شده
مدرس: محسن درم بخت (دارای گروه اختصاصی، برای پشتیبانی و پرسش و پاسخ)
آموزش انگولار | دوره حرفه ای صفر تا صد Angular
850,000 تومان 1,300,000 تومان
  • مدت زمان دوره: 22:38:49
  • امکان دانلود کل دوره به صورت یکجا
  • ویدیوهای آموزشی با کیفیت
  • دسترسی همیشگی به دوره خریداری شده
  • امکان درج پرسش و پاسخ
850,000 تومان 1,300,000 تومان
  • دسترسی به فایل ها و محتوای متنی ضمیمه شده
  • ویدیو های آموزشی با کیفیت
  • امکان اجرا در موبایل و تبلت
  • دسترسی همیشگی به ویدیو خریداری شده
  • امکان درج پرسش و پاسخ

آنچه در آموزش انگولار | دوره حرفه ای صفر تا صد Angular می‌آموزید:

  • نصب و راه اندازی Angular
  • ساختار پروژه در Angular
  • معماری پروژه و نحوه بخش بندی یک پروژه بزرگ
  • کار با Module ها و Routing
  • نوشتن و استفاده از سرویس ها
  • نحوه تعامل کامپوننت ها
  • استفاده و فراخوانی API ها
  • پیاده سازی Authentication و Authorization
  • روش های پیاده سازی Form در انگولار
  • نوشتن Test و استفاده از آن
بیشتر ...
پیش نیازها:
  • تسلط به Html و CSS
  • تسلط نسبی به JavaScript

سرفصل‌های آموزش انگولار | دوره حرفه ای صفر تا صد Angular

زمان برگزار شده: 22:38:00 تعداد دروس: 70

2:20:40 6 بخش
09:16
معرفی دوره
13:41
معرفی انگولار و بررسی ویژگی های آن
11:45
مقایسه انگولار با سایر روش های SPA
25:36
نحوه نصب انگولار و آشنایی با CLI
47:10
ایجاد پروژه جدید و بررسی ساختار پروژه انگولار
33:12
ویژگی های جدید ورژن 13 انگولار

2:23:8 10 بخش
27:6
معرفی و کاربرد TypeScript در انگولار
29:30
معرفی و کار با DataType ها
09:21
تعریف و استفاده از Interface
15:19
تعریف و استفاده از Class ها
13:18
نوشتن توابع و استفاده از آنها
09:46
کاربرد Generic در انگولار
07:56
تعریف و نحوه استفاده از Literal Type ها
07:13
کاربرد namespace در TypeScript
11:40
دستورات شرطی و حلقه ها در TypeScript
11:59
نحوه ارث بری از Class و Interface ها

2:05:15 6 بخش
39:12
نحوه ایجاد کامپوننت با CLI و بررسی فایل های یک کامپوننت
08:23
نحوه استفاده از کامپوننت ها در کامپوننت های دیگر
18:34
تعریف متغیرها و استفاده آن ها در بخش HTML
16:22
تعریف توابع و فراخوانی آن ها در بخش HTML
15:18
روش های تعریف و استفاده از CSS در بخش HTML
27:26
معرفی و کاربرد Module در انگولار

1:38:50 5 بخش
29:46
معرفی Routing و کاربرد آن در انگولار
05:46
نحوه ایجاد Routing و افزودن آن به ماژول مربوطه
25:7
تعریف پارامتر و ارسال و دریافت آنها بین کامپوننت ها
18:50
ارسال و دریافت QueryString بین کامپوننت ها
19:21
کاربرد Nested Routing و Redirect

1:010:6 5 بخش
13:21
نحوه تعریف Input برای ارسال مقادیر به داخل کامپوننت
12:29
کاربرد Output در انگولار و استفاده از آن
18:13
تعریف و استفاده از ViewChild
09:8
کاربرد ViewChildren و ElementRef
16:55
روش های Binding در انگولار

53:35 4 بخش
13:52
کاربرد Service ها و نحوه افزودن سرویس جدید
11:7
آشنایی با مفهوم Dependency Injection و کاربرد آن در سرویس ها
14:26
نحوه فراخوانی API ها در کامپوننت ها
14:10
فراخوانی API ها در Service

1:07:52 3 بخش
42:14
معرفی روش Template Driven در طراحی فرم ها
16:37
کنترل Validation در روش Template Driven
09:1
معرفی و استفاده از روش Reactive Forms در طراحی فرم ها

1:43:41 5 بخش
23:18
ایجاد فرم ثبت اطلاعات از روش Reactive Forms
24:35
اعمال Validation روی فرم ساخته شده
09:16
وضعیت های مختلف یک Reactive Form
34:42
نحوه ایجاد و کنترل فرم های تو در تو
11:50
ایجاد فرم از روش Dynamic Forms

49:47 3 بخش
14:18
نصب و استفاده از Toastr Notification
19:10
نصب و استفاده از UI Loading
16:19
نصب و استفاده از Bootstrap

2:01:32 3 بخش
20:47
معرفی و نصب Material Design
54:30
ایجاد Layout و بخش های مختلف آن با MD
46:15
ایجاد فرم های ثبت و نمایش اطلاعات در پنل ایجاد شده

2:21:37 6 بخش
24:46
کاربرد Pipe و معرفی Pipe ها آماده در انگولار
22:33
نوشتن Custom Pipe و استفاده از آن
13:36
معرفی و کاربرد Directive ها
23:26
نوشتن Directive جدید و استفاده در کامپوننت ها
27:7
آشنایی با مفهوم Interceptor و استفاده از آن
30:9
نحوه پیاده سازی Lazy Loading در انگولار

41:5 3 بخش
07:5
روش های Debug کردن کد در انگولار
12:35
معرفی و نصب افزونه های مرورگر برای انگولار
21:25
نحوه مدیریت خطاها در انگولار

1:33:40 4 بخش
14:6
معرفی Token Authentication و ویژگی های آن
46:4
ایجاد فرم Login و کنترل Login بودن کاربر
22:26
استفاده از Refresh Token در انگولار
11:4
نحوه کنترل دسترسی های کاربر در انگولار

1:19:30 5 بخش
26:28
معرفی انواع Test
15:28
نحوه نوشتن تست در انگولار و اجرای آن
19:20
معرفی سناریوهای مختلف Test در انگولار
09:28
نوشتن Pipe Testing
08:46
نوشتن Directive Testing

28:31 2 بخش
16:28
انواع خروجی در انگولار و نکات مهم و مرتبط با Build
12:3
Build کردن پروژه و بارگذاری روی سرور

با آموزش انگولار | دوره حرفه ای صفر تا صد Angular بیشتر آشنا شوید:

دوره کاربردی و عملی انگولار با تدریس حرفه ای و خوب مهندس محسن درم بخت

دو فصل اول دوره را رایگان مشاهده کنید و در صورت رضایت، دوره را تهیه بفرمایید

برای تبدیل شدن به یک برنامه نویس انگولار باید چه مطالبی را بلد باشیم ؟

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

فریمورک انگولار و زیرسیستم‌های آن

می دانیم که انگولار یکی از فریم ورک های معروف و محبوب در حوزه Single Page Application ها است که در حال حاضر نسخه 15 آن در حال استفاده می باشد. برای کدنویسی با آن باید زبان TypeScript را بدانیم. یادگیری تایپ اسکریپت زیاد سخت نیست و می توان با صرف زمان تسلط خوبی روی TypeScript پیدا کرد. باید بدانیم که هدف TypeScript دادن یک ساختار و اصول روی کدهای JavaScript می باشد که متغیرها و توابع تعریف شده بهتر است Type داشته باشند تا در زمان استفاده و فراخوانی آنها کمتر دچار اشتباه شویم و خطای کمتری در زمان اجرا رخ دهد.

پس نیاز است TypeScript را بلد باشیم. حالا نوبت خود انگولار است که بدانیم باید از کجا و چه سرفصل هایی را باید در انگولار یاد بگیریم.

مطالب مهم و کاربردی در انگولار این موارد می باشند :

  • Module
  • Component
  • Service
  • Pipe
  • Directive
  • Routing
  • Interceptor
  • Forms
  • Material or Bootstrap

مواردی که در بالا به صورت یک لیست مشاهده می کنید مهم ترین مطالب در انجام یک پروژه انگولار است. می خواهیم در این مقاله آشنایی مختصر و مفیدی با این بخش های پروژه انگولار داشته باشیم و کاربرد هریک را بدانیم.

ماژول در انگولار (Module) :

ماژول ویژگی و امکان بسیار خوبی در انگولار است که هدف آن دسته بندی و pack کردن بخش های مرتبط با یکدیگر می باشد. به صورت پیش فرض در پروژه انگولار یک AppModule.ts داریم که ماژول اصلی و پیش فرض است. در ساختار داخلی یک ماژول می توان موارد مهم زیر را نام ببریم :

  • چه کامپوننت های در این ماژول قرار دارند، را مشخص کنیم.
  • چه ماژول هایی دیگری نیاز است در این ماژول افزوده شوند.
  • کامپوننت شروع کننده ماژول کدام کامپوننت خواهد بود.
  • چه Pipe و Directive های سفارشی قرار است در داخل این ماژول استفاده شوند.

ماژول‌ها در انگولار

خوب پس وقتی یک پروژه جدید انگولار ایجاد می کنیم در پوشه app در داخل پوشه src یک فایل AppModule.ts خواهیم داشت که ماژول پیش فرض می باشد. هر فایل ماژول می تواند در کنار خود یک فایل RoutingModule هم داشته باشد که در این فایل Routing یا مسیردهی برای کامپوننت های داخل Module مسیرهایی را تعریف می کنیم. به فرض مثال مسیر products/ به کامپوننت ProductList اشاره می کند. پس عموما کنار هر ماژول فایل Routing آن را خواهیم داشت که در آن مسیرهای دلخواه و مناسب خود را به کامپوننت های موجود در آن ماژول وصل می کنیم.

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

یک دید و آشنایی با Module و Routing به دست آوردیم. حالا نوبت کامپوننت ها می باشد.

کامپوننت ها در انگولار

بعد از ماژول به سراغ کامپوننت ها در انگولار می رویم. مهم ترین بخش انگولار همین کامپوننت ها است. برای ایجاد کامپوننت ها می توانیم از دستور ng g c ComponentName استفاده کنیم. اجرای این دستور باعث ایجاد 4 فایل برای کامپوننت ما خواهد شد :

  • فایل اصلی می شود برای مثال ts که شامل دستورات اصلی یک کامپوننت می باشد. در اصل یک کامپوننت فقط می تواند همین فایل را داشته باشید و سه فایل دیگر را در دل همین فایل داشته باشیم. این فایل دارای یکی بخش دکوراتو می باشد که شامل تنظیمات اصلی کامپوننت می باشد و بخش دیگر داخل کلاس تعریف شده برای کامپوونت می باشد که در آن سازنده کلاس، متغیرها و سایر متدهای یک کامپوننت تعریف می شوند.
  • فایل دوم در کامپوننت فایل Template گفته می شود که کدهای html و خروجی کامپوننت ما در داخل آن قرار می گیرد.برای دسترسی به کدهای انگولار در فایل template می توانیم از نشانه های {{}} استفاده کنیم. این علامت برای دسترسی به متغیرها و توابع تعریف شده در داخل فایل ts یک کامپوننت می باشد.
  • فایل سوم برای css و style مربوط به یک کامپوننت می باشد که می تواند با فرمت هایی مانند css، scss یا less باشد. هر کامپوننت می تواند یک فایل style یا چند فایل style داشته باشد که مخصوص همان کامپوننت و کامپوننت های داخل آن یا به اصطلاح Child Component های آن می باشد.
  • فایل چهارم برای بحث Test و UnitTest نوشتن برای یک کامپوننت می باشد. در داخل این فایل ها که با پسوند ts شناخته می شوند کدهای تست مربوط به هر کامپوننت به صورت جداگانه نوشته و اجرا می شود.

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

کامپوننت‌ها در انگولار

خروجی هر کامپوننت در حالت عادی یک tag به صورت تگ های html است که به اصطلاح به آن selector یک کامپوننت گفته می شود مثل : <app-product-list></app-product-list>

برای نمایش یک کامپوننت در داخل کامپوننت دیگر تگ مربوط به آن را در بخش template کامپوننت دلخواه قرار می دهیم.

خوب تا اینجا با مفهوم ماژول و کامپوننت آشنا شدیم.

حالا به سراغ Service ها می رویم.

سرویس ها در انگولار

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

اول اینکه در داخل خود کامپوننت یک تابع بنویسید که به کمک HttpClient از کتابخانه HttpClientModule بتوانید API خود را فراخوانی کنید. این کار ساده است ولی باعث می شود که اگر جای دیگری نیاز به همان API داشتید مجبور شوید آن قطعه کد را Copy و Paste کنید که این کار زیاد اصولی نیست. مثلا یک API که می خواهد یک DropDown یا لیست کشویی برای شما پر کند، که در اکثر فرم ها نیاز است استفاده شود. پس راه حل اول را بهتر است کمتر استفاده کنیم.

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

سرویس ها در انگولار

نکته ای که در استفاده از سرویس ها وجود دارد بحث Dependency Injection یا تزریق وابستگی ها است. از DI یا همان Dependency Injection فراری نباشید، مفهوم آن ساده است. به طور مثال شما یک کلاس سرویس انگولار با نام ProductService دارید. حالا آن را می خواهید در یک کامپوننت استفاده کنید. باید از کلاس خود نمونه ای بسازید. در انگولار کار نمونه سازی از Service و کنترل طول عمر نمونه ها توسط DI کنترل می شود. یعنی شما به جای new کردن یک کلاس Service آن را از طریق سازنده کلاس کامپوننت خود ایجاد یا به اصطلاح به کلاس خود تزریق می کنید. ما باید همه سرویس های خود را برای استفاده از طریق Constructor کلاس مورد نظر ایجاد کنیم. مانند کد روبرو : constructor(private productService:ProductService) – در این کد یک نمونه از کلاس ProductService ایجاد می شود و در ادامه می شود از نمونه ساخته شده استفاده کرد.

برای ایجاد سرویس ها از دستور ng g s Product استفاده می کنیم. نیازی نیست کلمه Service را در نام خود بیاوریم و خود انگولار کلمه Service را در انتهای نام Product می اندازد.

خوب متوجه شدیم که Service هم چه نقشی در انگولار دارد و چگونه می توانیم از آن استفاده کنیم.

کاربرد Pipe در انگولار

حالا نوبت Pipe می باشد. معنی فارسی کلمه Pipe می شود لوله. حالا در انگولار Pipe چه کاری انجام می دهد؟

ما می توانیم داده های خود را به داخل یک Pipe ارسال کنیم و شکل و فرمت آن در داخل Pipe تغییر کند. مثلا تاریخ ما میلادی است و آن را داخل یک Pipe ارسال می کنیم و کاربر تاریخ را به صورت شمسی مشاهده می کند.

پایپ در انگولار

به صورت پیش فرض در انگولار چند Pipe داریم که البته برای ما فارسی زبان ها زیاد کاربردی ندارد. مانند Date و Currency. عموما ما از CustomPipe ها که خودمان در انگولار می نویسیم بیشتر استفاده می کنیم مانند PersianDate یا CommaSeprator ها که بین اعداد بیاید و یک کاما بیندازد.

نحوه استفاده کردن از Pipe ها در انگولار به صورت data | Pipe می باشد. متغیر data می شود داده ای که می خواهید تغییری روی آن ایجاد کنید و سپس نماد | که بین data و Pipe مورد نظر شما در Angular قرار می گیرد. از pipe های معروف در انگولار می توان json را نام برد که داده ها شما را تبدیل به json.stringify می کند.

برای ایجاد یک pipe جدید می توانیم از دستور ng g p PersianDate استفاده کنیم. با این دستور یک pipe با نام PersianDate ایجاد می شود که می توانیم کدهای داخل آن را تکمیل کرده و از آن در کامپوننت های خود استفاده کنیم.

بعد از Pipe به سراغ Directive ها می رویم. نقش Directive ها در انگولار بسیار پررنگ می باشد و ما خیلی زیاد مخصوصا در بخش Template یک کامپوننت از Directive ها استفاده می کنیم. حالا Directive ها چه کاری انجام می دهند؟

نقش Directive در انگولار

Directive در انگولار

ما به کمک Directive ها می توانیم در کدهای html خود یا همان Template انگولار تغییراتی را ایجاد کنیم. مثلا یک دستور ngFor که باعث تکرار یک تکه کد html در Template کامپوننت انگولار ما می شود در اصل یک Directive می باشد. پس دستوراتی مثل ngIf یا ngFor یا دستورات این مدلی همگی از گروه Directive ها می باشند. به صورت پیش فرض ما تعداد زیادی Directive داریم که می توانیم Custom Directive ها خودمان را نیز بنویسیم. مثلا هر تگی که فلان attribute را داشت یک تغییر css روی آن اعمال شود. اگر درگیر پروژه های انگولار بشوید به مرور نقش Directive هایی که می توانید خودتان بنویسید را کاملا درک می کنید. هدف ما در اینجا آشنایی کلی شما با این مفاهیم در انگولار است.

برای ایجاد یک Directive می توانید از دستور ng g d ChangeBGColor استفاده کنید. نام Directive ای که ایجاد کردیم ChangeBGColorDirective خواهد بود.

نکته مهم این که Component ها، Pipe و Directive ها دارای یک بخش مهم در ابتدای کلاس خود با اسم دکوراتور است که یک ویژگی مهم در این دکوراتور که با @ شروع می شود وجود دارد. نام این ویژگی selector است که نام آنها را برای استفاده در جاهای دیگر مشخص می کند.

Routing در انگولار

حالا باید Routing و نقش آن را در انگولار متوجه شویم. شما یک سری کامپوننت دارید و حالا می خواهید که یک منو ایجاد کنید و کاربر با کلیک روی آیتم های منو بتواند کامپوننت مورد نظر خود را مشاهده کند. برای این کار باید از Routing استفاده کنیم. به صورت پیش فرض هر ماژول می تواند یک Routing فایل داشته باشد که در داخل این Routing فایل، مشخص می کنیم که مثلا آدرس products/ به چه کامپوننتی اشاره کند. نکته خیلی مهم در Routing ها این است که به شکلی ماژول های خود را در انگولار ساخته باشیم که براحتی بتوانیم در تعریف Route های آنها از امکان و ویژگی LazyLoading یا بارگذاری در زمان مورد نیاز استفاده کنیم. پس باید این نکته را همیشه رعایت کنیم که برای هر بخش یک ماژول جدید ایجاد کنیم که در کنار ماژول جدید یا Routing فایل هم داشته باشیم. سپس این ماژول ها را در Routing اصلی یا همان AppRoutingModule به صورت LazyLoad اضافه یا import کنیم تا نسخه اولیه سایت ما سبک تر باشد و اگر کاربر روی منویی کلیک کرد در آن لحظه کد آن بخش از سمت سرور به صورت یک js فایل دریافت شود و به کاربر نمایش داده شود.

Routing در انگولار

ما در Routing مباحث مهمی مانند کنترل دسترسی ها کاربر را داریم که کاربر بتواند چه مسیرهایی را ببینید و به چه مسیرهایی دسترسی نداشته باشد که عموما از کتابخانه NGXPermission استفاده می شود.

ایجاد Interceptor در انگولار

حالا سراغ Interceptor ها در انگولار می رویم. می خواهیم بدانیم نقش آنها در انگولار چیست و اگر ما آنها را بلد باشیم چقدر برخی از کارهای ما ساده می شود.

فکر کنید می خواهیم یک سامانه را به کمک انگولار پیاده سازی کنیم. API ها آن نیز پیاده سازی شده و در اختیار تیم Front قرار داده شده است. خوب این API ها عمومی نیستند که هر کس بتواند داده از آنها دریافت کند. ابتدا باید کاربر با نام کاربری و رمز عبور خود Login کند و در اصل Authenticate شود. در این حالت یک Token یا کلید در سمت سرور ایجاد می شود و در پاسخ Login برای Front ارسال می شود که بشود کلید دسترسی ما به منابع درخواستی مثلا لیست سفارشات جدید.

Interceptor در انگولار

ما باید Token دریافتی را در همه درخواست های API خود از طریق HttpClient و Request Headers به سمت سرور ارسال کنیم تا اینکه سرور پس از چک کردن صحت Token اجازه دسترسی به منبع درخواستی را برای ما صادر کند. خوب تا اینجا Interceptor هیچ نقشی نداشت.

حالا شما فکر کنید باید در همه سرویس های خود بیاید و Token را به درخواست خود اضافه کنید. تیم انگولار برای این مدل کارها Interceptor ها یا همان Middleware را ایجاد کرده است. شما می توانید براحتی یک Interceptor ایجاد کنید و داخل آن مشخص کنید که روی همه HttpRequest ها شما بیاید و یک Request Header با عنوان Authorization با مقدار Token مورد نظر set کرده و سپس درخواست را ارسال کند.

انگار شما یک گیت ورودی یا خروجی دارید که می توانید در آن همه درخواست و پاسخ ها را قبل ارسال یا دریافت چک کنید و تغییری روی آنها اعمال کنید. این نقش را Interceptor بازی می کند و کار ما را استاندارد و ساده می کند.

برای ایجاد یک Interceptor جدید از دستور ng g interceptor MyHttp استفاده می کنیم که من عمدا نام بی ربط MyHttp را برای نام Interceptor خود انتخاب کردم. بهتر است Interceptor های خود را در انگولار در یک پوشه جداگانه ایجاد کنیم که همه Interceptor ها در یک فولدر در پوشه app کنار یکدیگر ساخته شوند.

پیاده سازی فرم ها در انگولار

حالا نوبت نحوه پیاده سازی فرم ها در انگولار است.

ایجاد Form ها همیشه جز مهم ترین مباحث در Front می باشد. ما باید بتوانیم توانایی پیاده سازی فرم های ساده و پیچیده را داشته باشیم. در انگولار برای کار با فرم ها دو روش وجود دارد که می خواهیم با این دو روش آشنا شویم و مزایا و معایب هر یک را بشناسیم.

روش های ایجاد فرم های در انگولار این دو هستند :

  • Template Driven
  • Reactive Forms

ساخت فرم در انگولار

روش Template Driven برای پیاده سازی فرم ها روش ساده ولی پرهزینه ای است. ما می توانیم از امکان Two Way Binding که در انگولار وجود دارد این روش را پیاده سازی کنیم. در این مدل شما با ویژکی [(ngModel)] که برای استفاده از ngModel باید ماژول FormsModule را در ماژول جاری یا AppModule خود import کرده باشید، استفاده می کنیم. این روش ساده است چون با  ngModel به یک متغیر bind می شویم و کاربر هر تغییری مثلا در Textbox ما ایجاد کند ما در سمت فایل ts خود در داخل متغیر این تغییر را خواهیم داشت.

مشکل این روش یا همان پرهزینه بودن آن این است که کاربر با تایپ هر کاراکتر یک update رو کامپوننت رخ می دهد و این در فرم های با المان زیاد می تواند منابع زیادی از سیستم کاربر گرفته و باعث کند یا لخت شدن فرم شود. مثلا کاربر به سرعت در حال تایپ است ولی صحنه آهسته این کار را مشاهده می کند. این یعنی سیستم ما درگیر کارهای اضافه زیادی در زمان تایپ کاربر می شود که یکی از دلایل مهم آن می تواند استفاده نادرست از ngModel باشد.

پس روش Template Driven برای فرم های با تعداد کنترل خیلی کم مانند فرم لاگین می تواند خوب باشد ولی برای فرم های پیچیده و بزرگ اصلا مناسب نیست. ضعف دوم روش Template Driven در انگولار این است که شما نمی توانید یک Validation خوب و جامع روی فرم خود داشته باشید.

با این توضیحات اهمیت و نقش ReactiveForms را متوجه شدیم. این که بهتر است فرم های خود را در انگولار به کمک ReactiveForms پیاده سازی کنیم. امکانات خوب و مناسب این کتابخانه باعث می شود که شما بتوانید یک فرم کامل به همراه Validation های مورد نیاز ایجاد کنید. همچنین شما می توانید فرم های تو در تو و فرم هایی که یک بخش تکرار شونده مانند سوابق شغلی در رزومه یک فرد که می تواند از دیپلم تا دکترا باشد را براحتی ایجاد کنید.

از کلاس های مهم در Reactive Forms انگولار می تواند به کلاس FormGroup اشاره کرد.

شما برای ایجاد یک فرم از FormGroup استفاده می کنید. برای ایجاد کنترل های یک Form انگولار از کلاس FormControl استفاده می شود و از کلاس Validators برای تعریف validation های مورد نیاز مانند اجباری بودن یک فیلد یا فرمت مورد نظر داده ورودی استفاده می شود.

یک کلاس FormBuilder در ReactiveForms انگولار وجود دارد که وظیفه ایجاد FormGroup را دارد و کلاس FormArray که برای ایجاد بخش های تکرار شونده فرم ها مانند سوابق شغلی می باشد.

پس ما مجموعه ای از کلاس مفید و کاربردی را در کتابخانه ReactiveForms داریم که به کمک آنها می توانیم فرم های انگولار خود را به صورت استاندارد پیاده سازی کنیم.

برای پیاده سازی فرم های خود در انگولار متوجه شدیم بهتر است از ReactiveForms استفاده کنیم. حالا می خواهیم درباره این موضوع صحبت کنیم که بهتر است از کدام کتابخانه css ای خود در پیاده سازی UI خود در انگولار استفاده کنیم.

از Material  یا Bootstrap در انگولار استفاده کنیم ؟

Bootstrap or Material

خوب پاسخ من است این است که با هرکدام که تسلط بیشتری به آن دارید و می توانید UI زیبا همراه با UX خوب ایجاد کنید. اگر سال ها تجربه کار با Bootstrap را دارید حتما در شروع کار را Material به مشکل خواهید خورد.

مزیت Material نسبت به انگولار در این است که ظاهری جدیدتر و نزدیک به app های موبایل خواهید داشت و می توانید در پایان وب سایت خود را به صورت PWA رو گوشی های موبایل کاربران خود داشته باشید.

ولی اگر شما با Bootstrap سال ها کار کرده اید بهتر است در یک پروژه بزرگ به سراغ Material نروید. چون مانند Bootstrap هر کاری دلتان بخواهد نمی توانید براحتی انجام دهید و بعضی از تغییرات شما را حتما اذیت خواهند کرد.

این دو کتابخانه هر دو قوی و استاندارد می باشند ولی در انتخاب بین اینها اول Material و سپس Bootstrap قرار دارد. کتابخانه های دیگری هم وجود دارند که می توانند در برخی قسمت ها بهتر از این دو نیز عمل کنند.

در این مقاله هدف آشنایی و یک دید کلی با مفاهیم اصلی انگولار بود که امیدوارم برای شما مفید بوده باشد. ما همه این بخش ها و مطالب را به صورت یک دوره آموزشی مفصل آماده کرده ایم که می توانید در بخش دوره های آموزشی سایت آن را مشاهده کنید و بتوانید یک انگولار کار خوب و حرفه ای شوید.

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

  1. انگولار چیست ؟ انگولار روشی برای پیاده سازی وب اپلیکیشن ها و به اصطلاح سمت فرانت می باشد که توسط گوگل معرفی شده است و یکی از روش های معروف و پرکاربرد در این حوزه می باشد.

  2. یادگیری انگولار چه مزیتی دارد ؟ با یادگیری انگولار شما یک برنامه نویس فرانت خواهید شد و می توانید براحتی سمت فرانت پروژه های خود را پیاده سازی کنید.

  3. زمان مورد نیاز برای یادگیری انگولار چقدر است ؟ برای یادگیری انگولار اگر هفته ای 8 تا 10 ساعت وقت تمرین در نظر بگیرید، می توانید در طول سه ماه یک برنامه نویس انگولار خوب شوید. پس از آن با انجام پروژه های کاری، سطح مهارت خود را افزایش می دهید.

  4. بازار کار انگولار در ایران و خارج از ایران چطور است ؟ به دلیل استفاده بسیار زیاد شرکت ها از روش های SPA برای تولید سمت فرانت، درخواست جذب نیرو در زمینه برنامه نویسی SPA که انگولار را هم شامل می شود بسیار زیاد شده است و این درخواست جذب نیرو هم در شرکت های ایرانی و هم شرکت های غیر ایرانی در حال افزایش می باشد.

  5. با یادگیری این دوره، توانایی انجام پروژه را خواهم داشت؟ سرفصل های دوره به صورت کاملا کاربردی و براساس نیازهای شما در انجام پروژه های کاری آماده شده است. اگر شما همزمان با مشاهده آموزش انگولار وب سایت، یک پروژه برای خودتان در انگولار تعریف و روی آن تمرین کنید، میزان یادگیری شما بسیار بیشتر خواهد شد و توانایی شما در زمینه انگولار بسیار افزایش پیدا خواهد کرد.
محسن درم بخت

استاد دوره: محسن درم بخت

مدیر پروژه، مشاور و مدرس برنامه نویسی
27 دوره
آقای مهندس محسن درم بخت مدیرعامل شرکت سپید آریا، مشاور و مدرس در حوزه تولید نرم افزار می باشند. تجربه ایشان در زمینه تولید نرم افزارهای سازمانی می باشد و از سال 1387 مشغول به فعالیت در حوزه تولید نرم افزار می باشند. مطالب و سرفصل های آموزشی ارائه شده توسط ایشان، همگی منطبق بر نیاز بازار کار و مورد استفاده در پروژه های نرم افزاری می باشد. تجربه پیاده سازی نرم افزارهای متفاوت و همچنین مشاوره در سازمان ها و شرکت های بزرگ باعث شده، تسلط و دانش ایشان در زمینه تولید و توسعه نرم افزارها برای دانشجویان بسیار مفید و کاربردی باشد.
نظرات
علی جمالی 1402/01/03

دم شما گرم. من خیلی راضی بودم تا الان که فصل 7 هستم. هزینه دوره واقعا حلالت

علی جمالی 1402/01/03
محمدرضا قمی 1401/12/27

محمدرضا قمی 1401/12/27
احسان بنیادی 1401/11/16

فوق العاده عالی، دلسوزی مدرس عزیز، در یاد دادن مطالب کاملا مشهود هست ان شاء الله همیشه موفق باشید و شاهد دوره های پروژه محور حرفه ای باشیم من مشتری دوره ای که بک Asp core و فرانت آن Angular باشه هستم و می خوام تمیز کد زدن در فرانت یاد بگیرم.

احسان بنیادی 1401/11/16
maziar mirabi 1401/11/09

maziar mirabi 1401/11/09
منیره مهدیخانلو 1401/03/09

منیره مهدیخانلو 1401/03/09
Teimour Sheidaei 1400/12/18

Teimour Sheidaei 1400/12/18
شیما میری 1400/07/27

شیما میری 1400/07/27
Morteza Azad 1400/04/30

Morteza Azad 1400/04/30
محمد امین عیسی پور 1400/04/04

محمد امین عیسی پور 1400/04/04
mohammad shayestehfar 1399/11/30

mohammad shayestehfar 1399/11/30
متین قربانزاده 1399/11/18

عالی

متین قربانزاده 1399/11/18
بهمن یاورزاده 1399/10/22

3

بهمن یاورزاده 1399/10/22
حمید امینی 1399/10/20

عالی بود

حمید امینی 1399/10/20
Keyvan Jalali 1399/10/09

بسیار مفید بود. سپاسگزارم.

Keyvan Jalali 1399/10/09
ابراهیم مسکین 1399/10/07

ابراهیم مسکین 1399/10/07
رضا ایلکا 1399/08/29

استاد کارش عالیه

رضا ایلکا 1399/08/29
مهدی اس 1399/08/28

دمت گرم خیلی خوبه

مهدی اس 1399/08/28
amir abbas 1399/07/26

عالی و بی نظیر

amir abbas 1399/07/26
saeed moosavi 1399/05/30

بهترین و شیوا ترین آموزش

saeed moosavi 1399/05/30
M.H Louie 1399/05/23

عالی بود

M.H Louie 1399/05/23