Component های Angular و آماده سازی پروژه
شناسه پست: 3883
بازدید: 632

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

ایجاد قسمت سرور (قسمت NET Core Web API.) تنها نیمی از کاری است که می خواهیم انجام دهیم. از این مرحله به بعد، ما قصد داریم وارد بحث در سمت client برنامه شویم تا قسمت Web API را استفاده کرده و با استفاده از component های Angular و بسیاری از ویژگی های دیگر، نتایج را به کاربر نمایش دهیم.

اگر می خواهید تمام آموزشهای لازم و پایه مربوط به آموزش گام به گام Angular را ببینید ، لطفاً روی این لینک کلیک کنید: مقدمه آموزش گام به گام Angular.

نصب Angular CLI و شروع پروژه جدید

ابتدا، ما قصد داریم Angular CLI (Angular Command Line Interface) را نصب کنیم که به طور کلی، به ما در تهیه پروژه Angular و توسعه پروژه Angular کمک می کند.

برای نصب Angular CLI باید Command Prompt را باز کنیم (بهترین گزینه باز کردن آن این است که به عنوان administrator آن را باز کنید) و از دستور install استفاده کنیم:

اگر قبلا Angular CLI را نصب کرده اید، می توانید بررسی کنید که آیا آخرین نسخه را دارید یا خیر:

اگر آخرین نسخه (13 برای این مقاله) را ندارید، می توانید آن را uninstall کنید:

و پس از آن، می توانیم از دستور install (که در بالا ذکر شد) برای نصب مجدد آن استفاده کنیم.

پس از اتمام نصب، می‌خواهیم یک پروژه جدید در همان پنجره فرمان ایجاد کنیم:

اینجا دو سوال پیش می آید. اولین سوال این است که آیا می‌خواهیم پروژه ما routing را ایجاد کند یا خیر، و سوال دوم این است که چه نوع سبک style دهی را در پروژه خود می‌خواهیم داشته باشیم. ما برای سوال اول بله (Y) را انتخاب کرده و برای سوال دوم (CSS – فقط کافیست اینتر را فشار دهید) را پاسخ می دهیم.

حال ایجاد پروژه کمی زمان خواهد برد.

پس از اتمام فرآیند ایجاد، می‌خواهیم پوشه پروژه را در editor خود باز کنیم. ما از Visual Studio Code استفاده خواهیم کرد.

کتابخانه های Third-Party به عنوان قسمتی از آماده سازی پروژه Angular

ما می خواهیم از کتابخانه ngx-bootstrap (angular bootstrap) برای دادن style استفاده کنیم، بنابراین اجازه دهید آن را با استفاده از پنجره ترمینال در VS Code نصب کنیم:

پس از شروع نصب، به ما اطلاع می دهد که در حال نصب بسته ngx-bootstrap@8.0.0 (در پروژه ما) هستیم و اینکه آیا مایلیم ادامه دهیم یا خیر. آن را تأیید کرده و نصب را تمام می کنیم.

با نصب این کتابخانه، ما در حال نصب هر دوی bootstrap و ngx-bootstrap هستیم و همچنین فایل های package.json، angular.json و app.module ما به روز نیز می شوند:

در این مرحله، ما می توانیم برنامه خود را اجرا کنیم:

با این دستور، برنامه خود را اجرا می کنیم و همچنین آن را به صورت خودکار در یک مرورگر باز می کنیم (-0 flag).

اگر اکنون با خطا مواجه شدید (این ممکن است به دلیل نسخه جدید ngx-bootstrap رخ دهد)، تنها کاری که باید انجام دهید این است که فایل angular.json را باز کرده و آرایه style ها را تغییر دهید:

ما باید مسیر ngx-bootstrap را تغییر دهیم زیرا به طور پیش فرض اشتباه است.

پس از این اصلاح، ما می توانیم برنامه خود را اجرا کنیم و پس از چند ثانیه، صفحه اولیه را مشاهده می کنیم:

برنامه اولیه Angular

مرحله بعدی، اضافه کردن component های ما به پروژه است.

ایجاد Component های Angular

اجازه دهید کمی در مورد Angular صحبت کنیم. Angular چارچوبی برای ساخت برنامه های SPA (Single Page Application) است. بنابراین، ما قصد داریم تمام صفحات خود را در یک صفحه تولید کنیم. به همین دلیل است که ما فقط صفحه index.html را در داخل پوشه src داریم. در فایل index.html، تمام محتوا در <app-root></app-root> selector که از فایل app.component.ts می آید، تولید می شود.

با این اوصاف، نگاهی به داخل فایل src/app/app.component.ts بیندازیم:

هر component باید Component را از پکیج import @angular/core کند. ما در صورت نیاز چیزهای بیشتری import خواهیم کرد. همچنین باید به @Component decorator در داخل کد نیز توجه کنیم.

این جایی است که selector خود را ایجاد می کنیم (همان تگ app-root در فایل index.html است). علاوه بر این، ما HTML template این component را با templateUrl و فایل‌های CSS را با استفاده از styleUrls تنظیم میکنیم. StyleUrls آرایه ای از رشته ها است که با کاما از هم جدا میشوند.

در نهایت، ما کلاس exported را برای component داریم.

حالا بیایید نگاهی به فایل app.module.ts بیندازیم که برای آماده سازی پروژه Angular و اصلاً برای توسعه بسیار مهم است:

در این فایل قصد داریم module ها، component ها و service های لازم را import کنیم. ما از آرایه declarations برای import کردن component های خود و از آرایه imports برای import کردن module های خود استفاده می کنیم. همچنین، ما قصد داریم از آرایه providers  برای ثبت service های خود استفاده کنیم.

ایجاد یک کامپوننت Angular جدید

برای ایجاد یک component جدید به نام Home، دستور مورد نیاز زیر را اجرا میکنیم:

با این دستور، کامپوننت Home را با سه فایل (ts, .html, .css) ایجاد می کنیم و فایل app.module را به روز می کنیم:

همچنین با افزودن --skip-tests flag از ایجاد فایل تست جلوگیری می کنیم.

پس از ایجاد، می توانیم کامپوننت Home را بررسی کنیم:

در اینجا اینترفیس OnInit را import می کنیم که تابع ngOnInit را تعریف می کند. این تابع به محض اینکه component مقداردهی اولیه شود، هر logic را در داخل آن اجرا می کند.

ما می توانیم اینجا به constructor نیز دقت کنیم. constructor فقط برای تزریق service به component در نظر گرفته شده است. برای هر action که باید با مقداردهی اولیه component اجرا شود، باید از تابع ngOnInit استفاده کنیم.

در مورد App.Module

اگر فایل app.module.ts را بررسی کنیم، خواهیم دید که component جدید ما با دستور قبلی importe شده است:

بنابراین، همانطور که می بینیم، Angular CLI همه اینها را برای ما ایجاد می کند.

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

چرا؟

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

محتوای اضافی در کامپوننت Home

اجازه دهید فایل home.component.ts را اصلاح کنیم:

سپس یک کلاس جدید به فایل home.component.css اضافه میکنیم:

در ادامه، فایل home.component.html را تغییر می دهیم:

در نهایت، فایل app.component.html را با حذف تمام محتوا و اضافه کردن یک محتوای جدید، فقط برای آزمایش اینکه آیا این کار می کند یا خیر، تغییر میدهیم:

اکنون در ترمینال، دوباره ng serve -o را تایپ میکنیم و منتظر میمانیم تا برنامه کامپایل و اجرا شود. ما باید پیام welcome را از کامپوننت Home روی صفحه ببینیم.

نتیجه گیری

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

در قسمت بعدی این آموزش گام به گام، قصد داریم نحوه ایجاد navigation در پروژه و همچنین نحوه استفاده از routing را به شما نشان دهیم.

نویسنده

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