使用ng-bootstrap将Bootstrap包含在AngularJS中

AngularJS可以与Bootstrap的CSS和Javascript集成，可以用来创建创造性的表单、表格、导航条等。

步骤:

确保Angular CLI在你的系统中存在，如果没有，那么在终端运行命令来完成。

npm install -g @angular/cli

通过运行代码ng new project-name，在visual studio code上创建一个新项目。
创建新项目后，在visual studio上打开该项目，并在其终端确保路径在新创建项目的目录中。然后运行以下命令。

    npm install bootstrap@4.0.0-alpha.6 --save
    npm install --save @ng-bootstrap/ng-bootstrap
    npm install jquery --save

在app.module.ts中使用import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’导入NgbModule；同时在import: list中包含它。

   imports: [
        BrowserModule,
        NgbModule.forRoot()
      ],

在angular.json/angular-cli.json中做如下补充，这在visual studio代码中可以找到。

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

angular.json中有两个style[]和scripts[]部分，所以我们必须只在第一部分添加这部分内容。还要确保”./node_modules/bootstrap/dist/css/bootstrap.min.css “写在 “src/styles.css “上面。没有必要包括.js文件，因为原生Angular指令是基于Bootstrap的标记和CSS，而不是基于jQuery或Bootstraps的javascript。

Index.html

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta charset="utf-8">
          
        <title>
            Include Bootstrap in AngularJS
        </title>
          
        <base href="/">
       
        <meta name="viewport" 
                content="width=device-width, initial-scale=1">
          
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
      
    <body>
        <app-root>
            loading...
        </app-root>
    </body>
      
    </html>

这段代码只是为了在app.component.html真正被加载之前显示 “加载中…”。

app.component.html

    <!DOCTYPE html>
    <html>
      
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
        </script>
          
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
        </script>
          
        <script src=
    "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
        </script>
    </head>
      
    <body>
        <div class="container">
            <ngb-tabset>
                <ngb-tab title="Welcome">
                    <ng-template ngbTabContent>
                        Welcome to GeeksforGeeks
                    </ng-template>
                </ngb-tab>
                  
                <ngb-tab>
                    <ng-template ngbTabTitle>
                        Learn <b>Angular</b>
                    </ng-template>
                      
                    <ng-template ngbTabContent>
                        Refer various Angular articles available
                        in GeeksforGeeks.
                    </ng-template>
                </ngb-tab>
              
                <ngb-tab title="Edit" [disabled]="true">
                    <ng-template ngbTabContent>
                        <p>
                            Make various changes in the
                            code and explore
                        </p>
                    </ng-template>
                </ngb-tab>
            </ngb-tabset>
        </div>
    </body>

输出: