#3 Angular - How to create new Angular project with Bootstrap4

เราจะมาสร้างโปรเจค Angular ใหม่ พร้อมกับเอา Bootstrap4 มาใช้ในโปรเจค จะมาเริ่มกันทีละ step นะ

Step 1: อย่างแรกเช็คก่อนว่าเรา install node มายังนะ (node -v)

$ node -v
v8.11.1

Step 2: install angular cli

$ npm install -g @angular/cli

Step 3: เช็คให้แน่ใจว่าลง angular cli สำเร็จ

$ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.5
Node: 8.11.1
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.5
@angular-devkit/core         0.7.5
@angular-devkit/schematics   0.7.5
@schematics/angular          0.7.5
@schematics/update           0.7.5
rxjs                         6.2.2
typescript                   2.9.2

Step 4: สร้างโปรเจค Angular กันเลย โดยชื่อโปรเจคชื่อว่า angular-bootstrap4 (แล้วแต่จะตั้งชื่อนะ) ใช้ stylesheet เป็น scss และให้ gen file routing มาด้วย 

$ ng new angular-bootstrap4 --style=scss --routing

Step 5: จากนั้นเข้าไปที่โปรเจค angular-bootstrap4 กันเลย

$ cd angular-bootstrap4

Step 6: ลองรันเล่นกันดูเลย (-o จะเปิด web browser ให้เราเลย)

$ ng serve -o

Step 7: ต่อมาครับเราจะลง bootstrap4 กันในที่นี้จะใช้ ngx-bootstrap มาด้วยเพื่อให้ง่ายต่อการเรียกใช้ components ของ bootstrap เช่น dropdown, modal, pagination, calendar เป็นต้น

$ npm install ngx-bootstrap bootstrap --save

Step 8: สร้าง Directory scss ใน src/assets และ สร้างไฟล์ _variables.scss ใน src/assets/scss

Step 9: แก้ไขไฟล์ styles.scss ใน src/

  @import './assets/scss/variables';

  @import '../node_modules/bootstrap/scss/bootstrap';

Step 10: ลองรันใหม่อีกรอบ เราจะได้หน้าตาแบบนี้ ซึ่ง style จะเปลี่ยนไปดูสวยงามขึ้น ถ้าไม่ได้แบบนี้แสดงว่าคุณมาผิดทางครับ ให้ไป U-turn ใหม่

Step 11: เราจะมาลองว่า เราลง ngx-bootstrap รอดไหมมาเริ่มกันเลย

เปิดไฟล์  src/app/app.module.ts  และแก้ไข ตามนี้

  import { BrowserModule } from '@angular/platform-browser';

  import { NgModule } from '@angular/core';

  import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; //เพิ่มบรรทัดนี้

  import { AppRoutingModule } from './app-routing.module';

  import { AppComponent } from './app.component';

  @NgModule({

    declarations: [

      AppComponent

    ],

    imports: [

      BrowserModule,

      BsDropdownModule.forRoot(), // เพิ่มบรรทัดนี้

      AppRoutingModule

    ],

    providers: [],

    bootstrap: [AppComponent]

  })

  export class AppModule { }

เปิดไฟล์  src/app/app.component.html  และแก้ไข ตามนี้

  <div class="btn-group" dropdown>

    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">

      Button dropdown <span class="caret"></span>

    </button>

    <ul *dropdownMenu class="dropdown-menu" role="menu">

      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>

      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>

      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>

      <li class="divider dropdown-divider"></li>

      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>

      </li>

    </ul>

  </div>

ลองรันดูครับเราจะได้ผลแบบนี้เลย

ใครมีข้อสงสัยหรืออยากให้ทำเนื้อหาเรื่องไหนเป็นพิเศษก็คอมเม้นต์ไว้ด้านล่างได้เลยครับ

อย่าลืมกดติดตามนะครับจะได้ไม่พลาดเนื้อหาใหม่ๆ