همونطور که انگولار یه فریمورک خوب برای جاوا اسکریپت حساب میشه، بوت استرپ ها یه فریمورک خوب و کار آمد هست که هم کار css و هم کار جاوا اسکریپت رو تا حدودی راحت کنه، ولی استفاده از ویژگی های jquery در انگولار اصلا توصیه نمیشه، چون که انگولار کارایی که jquery انجام میده رو به روش بهتر هندل میکنه پس ما تمام حرف هامون در رابطه با موارد css در بوت استرپ هست نه js. همچنین برای زیبایی کار fontawesome هم به کار خواهیم برد. برای نصب بوت استرپ و fontawesome از دستور زیر استفاده کنید:

 

اگه مراحل نصب به خوبی پیش رفتند میتونیم الان ازشون استفاده کنیم. در فایل src/styles.css  میتونیم استایل های سراسری رو ایمپورت کنیم، چون ما به این دو تا بصورت سراسری میخایم دسترسی داشته باشیم اونها رو توی این فایل ایمپورت میکنیم:

به همین راحتی تونستیم بوت استرپ و فونت آوسام رو به پروژه انگولارمون اضافه کنیم…

ساخت طرح کلی برنامه انگولار با بوت استرپ

خب حالا میخایم یه طرح کلی برای صفحه هامون در انگولار طراحی کنیم، یک ماژول بصورت زیر ایجاد میکنیم:

بعد میتونیم کامپوننت هایی که لازم داریم رو اضافه کنیم، فرض کنید به سه کامپوننت هدر فوتر و دربرگیرنده نیاز داریم :

فایل src/app/ui/layout/layout.component.html  رو به صورت زیر ادیت کنید که دو تا کامپوننت هدر و فوتر توی اون باشه:

و ماژولی که ساختیم رو بصورت زیر اصلاح کنید:

حالا میتونید فایل src/app/app.component.html  رو اصلاح کرده و در واقع قسمت اصلی که بدنه صفحه هست رو بهش اضافه کنید.

و فایل src/app/ui/header/header.component.html  رو بصورت زیر اصلاح کنید:

و نهایتا  src/app/ui/header/header.component.html  رو بصورت زیر اصلاح کنید:

 

حالا اگه پروژه رو سرو کنید باید یچیزی مثل اسکرین شات بالا رو ببینید، موفق باشید


حمید

حمید حق دوست هستم، توسعه دهنده وب و علاقمند به خیلی چیزا که آمارش دست خودمم نیست! لاراول رو دوست دارم ولی دلیل نمیشه که از علاقم به جاوا اسکریپت کم کنه و سعی میکنم جفتشونو داشته باشم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *