استفاده از بوت استرپ با Angular
بوت استرپ محبوب ترین فریم ورک HTML، CSS و JavaScript برای توسعه ی front-end وب سایت است. و برای توسعه ی وب سایت های واکنش گرا، و طراحی شده برای گوشیِ همراه، بسیار مناسب است. وب سایت بوت استرپ در آدرس http://getbootstrap.com در دسترس است. و فریم ورک بوت استرپ می تواند همراه با جاوا اسکریپت های مدرنِ وب و فریم ورک های موبایل مانند Angular استفاده شود. در ادامه ی این مقاله، نحوه ی استفاده از چارچوب بوت استرپ در پروژه ی Angular آموزش داده می شود. علاوه بر این، به پروژه ی Ng-Bootstrap نیز نگاهی خواهیم کرد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
راه اندازی یک پروژه ی Angular با Angular CLI
در ابتدا، با ایجاد یک پروژه ی جدید Angular شروع کنیم. ساده ترین راه این است که از رابطِ خطِ فرمان Angular (CLI / Command Line Interface) برای تولید یک پروژه ی جدید استفاده کنید. پروژه ی Angular CLI را می توانید در آدرس https://cli.angular.io پیدا کنید. ابتدا باید مطمئن شوید که CLI Angular در سیستم شما نصب شده است. از آن جایی که CLI Angular به عنوان یک پکیج NPM است، نصب را می توان با استفاده از دستور زیر انجام داد:
1 |
$ npm install -g @angular/cli |
با نصب موفقیت آمیز آن، شما می توانید از CLG Angular برای شروع یک پروژه ی جدید به روش زیر استفاده کنید:
1 |
$ ng new myproject |
اکنون می توانید به دایرکتوری آن بروید و وب سرور را راه اندازی کنید:
1 2 |
$ cd myproject $ ng serve |
نتیجه ی زیر را در مرورگر مشاهده خواهید کرد:
نصب بوت استرپ
اکنون که پروژه ی Angular آماده و در حال اجرا است، می توانیم کار را با افزودن بوت استرپ به پروژه، ادامه دهیم. روش های مختلفی برای اضافه کردن کتابخانه به پروژه وجود دارد. بیایید به گزینه های مختلف نگاهی کنیم:
افزودن بوت استرپ از CDN
برای افزودن Bootstrap به پروژه، باید دو فایل را اضافه کنیم:
- فایل CCS بوت استرپ
- فایل جاوا اسکریپت بوت استرپ
بخش های جاوا اسکریپت بوت استرپ به جی کوئری / jQuery وابسته است. بنابراین به فایل کتابخانه ی جاوا اسکریپت جی کوئری نیز نیاز داریم.
همه این فایل ها را می توان به طور مستقیم از یک (CDN (Content Delivery Network به پروژه اضافه کرد. لینک های CDN برای بوت استرپ را می توان در آدرس http://getbootstrap.com/getting-started پیدا کرد و لینک به jQuery را نیز می توان در https://code.jquery.com یافت.
فایل src / index.html را باز کنید و موارد زیر را در آن قرار دهید:
- عنصر <link> در انتهای بخش head section، برای افزودن فایل Bootstrap CSS.
- عنصر <script> در پایین بخش body section، برای اضافه کردن jQuery.
- عنصر <script> در پایین بخش body section، برای افزودن فایل جاوا اسکریپت بوت استرپ.
حالا فایل index.html باید به صورت زیر باشد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Angular Bootstrap Demo</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <app-root>Loading...</app-root> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> |
اکنون، آماده ی استفاده از بوت استرپ در یکی از قالب های اجزا / component templates هستیم. بیایید آن را با باز کردن فایل src / app / app.component.html و وارد کردن کد قالب HTML، امتحان کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container"> <div class="jumbotron"> <h1>Welcome</h1> <h2>Angular & Bootstrap Demo</h2> </div> <div class="panel panel-primary"> <div class="panel-heading">Status</div> <div class="panel-body"> <h3>{{title}}</h3> </div> </div> </div> |
اکنون، نتیجه در مرورگر به صورت زیر خواهد بود:
همچنین می توانید تم را به یکی دیگر از تم های بوت استرپ (برای مثال Bootswatch https://bootswatch.com). تغییر دهید. در وب سایت، فقط یک تم را انتخاب کنید و بر روی دکمه دانلود کلیک کنید. فایل bootstrap.min.css مربوطه، در پنجره ی دیگری از مرورگر باز می شود، بنابراین می توانید URL را کپی کنید.
به index.html برگردید و رشته ای را که به صفت href عنصر <link> تعلق دارد، با URL جدید جایگزین کنید:
1 |
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css"> |
اکنون خروجی مرورگر بر اساس رنگ تعریف شده توسط تم جدید، به صورت زیر تغییر می کند:
افزودن بوت استرپ از طریق NPM
راه دیگری برای اضافه کردن بوت استرپ به پروژه ی Angular، این است که با استفاده از NPM آن را در پوشه ی پروژه ی خود نصب کنید.
1 |
$ npm install bootstrap@3 jquery --save |
این کد: Bootstrap و jQuery را در پوشه ی node_modules در دایرکتوری پروژه نصب می کند و اطمینان حاصل می کند که هر دو وابسته ها نیز به فایل package.json اضافه شوند.
پس از این که هر دو پکیج با موفقیت نصب شدند، فایل های جی کوئری و بوت استرپ را می توان در دایرکتوری های زیر پیدا کرد:
- node_modules/jquery/dist/jquery.min.js
- node_modules/bootstrap/dist/css/bootstrap.min.css
- node_modules/bootstrap/dist/js/bootstrap.min.js
اضافه کردن این فایل ها به پروژه را می توانید به دو راه زیر انجام دهید:
- با اضافه کردن عناصر متناظر <link> و <script> به index.html (مانند آن چه که قبلا انجام دادیم)
یا
- با اضافه کردن مسیر فایل به آرایه ی استایل و اسکریپت در فایل angular-cli.json:
1 2 3 4 5 6 7 8 |
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], |
استفاده از Ng-Bootstrap
Ng-Bootstrap حاوی مجموعه ای از دستور العمل های Angular است که بر اساس نشانه گذاری بوت استرپ و CSS است. در نتیجه هیچ وابستگی به بوت استرپِ جی کوئری یا جاوا اسکریپت وجود ندارد. Ng-Bootstrap بر پایه ی Bootstrap 4 است و می تواند به پروژه Angular اضافه شود. این کار به روش زیر قابل انجام است:
Ng-Bootstrap به عنوان یک پکیجِ NPM در دسترس است، بنابراین نصب آن را می توان با استفاده از دستور زیر در دایرکتوری پروژه انجام داد:
1 |
npm install --save @ng-bootstrap/ng-bootstrap |
علاوه بر این، Ng-Bootstrap به Bootstrap 4 نیاز دارد تا به پروژه اضافه شود. نصب آن از طریق کد زیر انجام می شود:
1 |
$ npm install bootstrap@4.0.0-alpha.6 |
اکنون، bootstrap.min.css، jquery.min.js و bootstrap.min.js را به فایل .ugular-cli.json اضافه کنید، (مانند آن چه که قبلا انجام دادیم).
پس از نصب، شما باید ماژول اصلی Ng-Bootstrap یعنی NgbModuleرا از پکیج @ng-bootstrap/ng-bootstrap وارد کنید. برای این منظور، عبارت زیر را به app.module.ts اضافه کنید:
1 |
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; |
سپس، باید این ماژول را به آرایه ی import از decorator دکوریتور NgModule اضافه کنیم. اگر می خواهید NgbModule را در ماژول روتِ خود (به عنوان مثال: AppModule)، وارد کنید، به فراخوانی روش کارخانه forRoot ()، نیاز دارید؛ همان طور که در زیر می بینید:
1 2 3 4 5 6 7 |
@NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { } |
اگر میخواهید NgbModule را در سایر ماژول ها (ماژول های فرزندِ ماژول برنامه ی روت) وارد کنید، باید آن را بدون فراخوانی روش forRoot() اضافه کنید:
1 2 3 4 5 6 |
@NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...] }) export class OtherModule { } |
اجزاءِ Ng-Bootstrap
پس از وارد کردن NgbModule در برنامه ی Angular، شما می توانید از اجزای Ng-Bootstrap در قالب های خود استفاده کنید. اجزاء زیر در دسترس هستند:
- Accordion
- Alert
- Buttons
- Carousel
- Collapse
- Datepicker
- Dropdown
- Modal
- Pagination
- Popover
- Progressbar
- Rating
- Tabs
- Timepicker
- Tooltip
- Typeahead
بیایید آن را امتحان کنیم و از برخی از این اجزا در application.component.html استفاده کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="container"> <ngb-tabset> <ngb-tab title="Simple"> <template ngbTabContent> <p>This is the content of the first tab!</p> <ngb-alert [dismissible]="false"> <strong>Warning!</strong> This is an alert! </ngb-alert> </template> </ngb-tab> <ngb-tab> <template ngbTabTitle><b>Fancy</b> title</template> <template ngbTabContent> <p>This is the content of the second tab!</p> <p><ngb-progressbar type="success" [value]="25"></ngb-progressbar></p> <p><ngb-progressbar type="info" [value]="50"></ngb-progressbar></p> <p><ngb-progressbar type="warning" [value]="75"></ngb-progressbar></p> <p><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></p> </template> </ngb-tab> <ngb-tab title="Disabled" [disabled]="true"> <template ngbTabContent> <p>This tab is disabled</p> </template> </ngb-tab> </ngb-tabset> </div> |
و نتیجه ی زیر را می توان مشاهده کرد: