2016-10-26 73 views
0

作爲n00b角度和Bootstrap,並且相對較新的節點js,我試圖使用webpack入門工具包從這裏設置一個乾淨的基礎(我希望):使用ng-bootstrap正確設置角度2

https://github.com/AngularClass/angular2-webpack-starter

,並從這裏角2官方引導4: https://ng-bootstrap.github.io/#/getting-started

到目前爲止,我只是增加了一些進口webapp的入門套件:

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.9", 
"bootstrap": "^4.0.0-alpha.5", 
"tslint": "^3.15.1", 

現在我的問題是,我完全不知道自己該怎麼用,哪裏放置提到的代碼片段從NG-引導安裝文檔做:

https://ng-bootstrap.github.io/#/getting-started

就是我要問的是:

1)關於這些代碼片段的用途以及將這些東西放在上面鏈接的具體入門套件項目中的解釋(因爲我願意學習,但是對於n00b,該信息有點太短)。

我的意思是,什麼是例如AppComponent?它沒有定義 - 我也不知道它指的是什麼。

2)現在實際上Bootstrap在哪個項目中?

這些可能是愚蠢的問題知道這些事情的人。但作爲一個新手,我現在完全迷失在那裏。

非常感謝您的幫助。

從提到的NG-引導複製安裝文件:

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

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

在應用程序中的其他模塊可以簡單地導入NgbModule

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

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

回答

2

照照app.module文件。你應該看到@NgModule() AppModule。這是您的示例中發佈的AppModule。您應該確保在將NgbModule添加到您調用forRoot的導入時,就像您的示例一樣。

就第二個示例而言,現在只需使用AppModule即可構建整個應用程序。但隨着應用程序的增長,您可能需要將其分解爲更小的模塊,在這種情況下,對於這些其他模塊,您應該將NgbModule添加到imports而不使用forRoot())。只有在添加到根應用程序模塊時纔會調用forRoot()。有關使用模塊的更多信息,您應該查看the documentation on modules

就Bootstrap而言,ng-bootstrap只是組件庫,並且這些組件的樣式基於實際的Bootstrap CSS。您已經安裝了Bootstrap,但您也需要將CSS添加到應用程序中。您可以嘗試關注所有these complicated steps,但如果您想開始使用,也許現在只需使用CDN即可。在你的索引中。HTML只是添加

<link rel="stylesheet" 
     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 
     integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" 
     crossorigin="anonymous"> 

這應該是所有你需要開始