Incluya Bootstrap en AngularJS usando ng-bootstrap

AngularJS se puede integrar con Bootstrap CSS y Javascript y se puede usar para crear formularios creativos, tablas, barras de navegación, etc.

Pasos:

  • Asegúrese de que Angular CLI esté presente en su sistema; de lo contrario, ejecute el comando en la terminal para hacerlo.
    npm install -g @angular/cli
  • Cree un nuevo proyecto en el código de Visual Studio ejecutando el código ng new project-name .
  • Después de crear un nuevo proyecto, abra ese proyecto en Visual Studio y su terminal, asegúrese de que la ruta esté en el directorio del nuevo proyecto creado. Luego ejecute los siguientes comandos.
    npm install bootstrap@4.0.0-alpha.6 --save
    npm install --save @ng-bootstrap/ng-bootstrap
    npm install jquery --save
  • Importe NgbModule en app.module.ts usando import { NgbModule } from ‘@ng-bootstrap/ng-bootstrap’; y también incluirlo en las importaciones: lista.
    imports: [
        BrowserModule,
        NgbModule.forRoot()
      ],
  • Realice las siguientes adiciones en angular.json/angular-cli.json, que está disponible en el código de 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"        
    ],
    

    Hay dos secciones de estilos [] y scripts [] en angular.json, por lo que debemos agregar esta parte solo en la primera sección. También asegúrese de que «./node_modules/bootstrap/dist/css/bootstrap.min.css» esté escrito arriba de «src/styles.css» . No es necesario incluir archivos .js porque las directivas angulares nativas se basan en el marcado y CSS de Bootstrap y no en jQuery o Bootstraps javascript.

  • índice.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>

    Este código es solo para mostrar «cargando…» antes de que app.component.html realmente se cargue.

    aplicación.componente.html

    <!DOCTYPE html>
    <html>
      
    <head>
        </script>
          
        <script src=
        </script>
          
        <script src=
        </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>

    Producción:

    • Seleccionando la pestaña de Bienvenida :
      ng-bootstrapexample
    • Seleccionando la pestaña Aprender Angular :
      ngb2
    • La pestaña Editar no se puede seleccionar porque se ha deshabilitado.

Publicación traducida automáticamente

Artículo escrito por janice_shah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *