前情提要：

• Angular2 的模組化
• Angular2 實戰篇(一)

之前提過有很多第三方的 Library 也有開發者協助封裝成 Angular2 的 Module，

所以今天就來練習如何套用Bootstrap這個CSS Framework到專案裡。

我選擇使用的套件是ng-bootstrap

可以透過npm指令安裝

npm install --save @ng-bootstrap/ng-bootstrap

安裝成功後就可以在app.module.ts 引用這個模組

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

然後在AppModule的宣告區塊，加入NgbModule (ng-bootstrap的模組名稱)

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

在ng-bootstrap的網站上有提到，只有根模組AppMoudle在import NgbModule才要加forRoot()，其他專案模組則不需要加。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

於是我們可以在ng-bootstrap的網站上，隨便找一個Component來看看Bootstrap效果有沒有被套用到

<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

它預期的效果會是如下圖

於是我把它放入我的app.component.html裡面，可以發現沒有被套用到Bootstrap

主要的原因在於，ng-bootstrap提供的只是中間轉成易於被Angular2專案套用的模組程式

我們還是必須要安裝bootstrap的主程式，才能真正的使用。

有二種加入bootstrap的主程式到專案的方式

第一種是使用CDN，把要用到css及bootstrap.min.js，還有jquery，加到index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

另一種則是在angular-cli.json，加上用套件管理工具下載好的bootstrap、jquery

// ng-bootstrap tested with 4.0.0-alpha.5
npm install bootstrap@4.0.0-alpha.5 

"styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss",
    "styles.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

其中我們可以直接在styles放入scss的檔案(Bootstrap 4直接就提供scss檔案)

angular-cli在做ng build及ng serve時，

會使用Webpack自動幫我們把styles跟scripts宣告的檔案，

分別打包成styles.bundle.js及scripts.bundle.js，插入index.html

然後重啟server，我們可以發現專案現在可以呈現Bootstrap的效果了。

提供今天的Github專案進度檔案