Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Más de 3 formas de agregar Bootstrap 4 a Angular 10/9 con ejemplo y tutorial

 En este tutorial, veremos cómo usar Bootstrap para diseñar aplicaciones creadas con Angular 10.

Veremos cómo integrar Angular con Bootstrap, de varias formas, incluido el uso de paquetes ng-bootstrapngx-bootstrap.

Lea también cómo usar Bootstrap 4 y jQuery con Angular 10 para crear interfaces de usuario profesionales.

Usaremos Angular CLI 10 para generar un nuevo proyecto.

Estos son los pasos de nuestro tutorial:

    Nota: También puede usar los componentes de Ionic UI para crear aplicaciones angulares hermosas y profesionales, lea la interfaz de usuario de interfaz de la aplicación de chat de construcción con JWT Auth usando Ionic 5 / Angular 10

    ¿Qué es Bootstrap?

    Bootstrap es el marco de trabajo HTML y CSS más popular para crear diseños receptivos con facilidad y sin tener un conocimiento profundo de CSS (aún se requiere CSS personalizado para personalizar su diseño y hacerlo diferente de los otros sitios web con estilo Bootstrap a menos que esté usando un BS tema desarrollado específicamente para usted).

    Bootstrap 4 es la última versión de BS que trae muchas características nuevas y poderosas al marco, lo más importante, Flexbox, que ahora es el sistema de visualización predeterminado para el diseño de cuadrícula BS (una de las características más importantes de BS).

    Más de 3 formas de incluir Bootstrap 4 en su proyecto angular

    Esto se puede hacer de varias formas:

    • Incluyendo los archivos Bootstrap CSS y JavaScript en la <head>sección del index.htmlarchivo de su proyecto Angular con etiquetas <link><script>,

    • Importando el archivo CSS Bootstrap en el styles.cssarchivo global de su proyecto Angular con una @importpalabra clave.

    • Agregar los archivos Bootstrap CSS y JavaScript en las matrices stylesscriptsdel angular.jsonarchivo de su proyecto

    Paso 1: instalación de Angular CLI v10

    Comencemos instalando Angular CLI v10 si aún no está instalado en su máquina.

    Dirígete a una nueva interfaz de línea de comandos y ejecuta el siguiente comando para instalar la última versión de Angular CLI:

    $ npm install -g @angular/cli
    

    En el momento de escribir este tutorial, Angular 10 aún se encuentra en versión preliminar, por lo que debemos usar la nextetiqueta para instalarlo. Angular v10.0.0 está instalado.

    Nota : Esto instalará la CLI de Angular 10 globalmente en su sistema, por lo que, dependiendo de su configuración de npm, es posible que deba agregar sudo(para acceso de superusuario) en macOS y Linux o usar un símbolo del sistema con acceso de administrador en Windows.

    Después de la instalación, tendrá a su disposición la utilidad ng . Usémoslo para generar un nuevo proyecto Angular 10.

    $ ng new angular-bootstrap-examples
    

    Se le pedirá un par de preguntas:

    ? Would you like to add Angular routing? Yes
    ? Which stylesheet format would you like to use? (Use arrow keys)
    > CSS
      SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
      Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
      Less   [ http://lesscss.org                                             ]
      Stylus [ http://stylus-lang.com                                         ]
    

    Lo más importante es elegir CSS como formato de hoja de estilo porque usaremos esta versión CSS de Bootstrap en nuestro tutorial.

    El comando generará la estructura del directorio y los archivos necesarios para el proyecto e instalará las dependencias requeridas.

    A continuación, navegue dentro de la carpeta raíz de su proyecto

    $ cd angular-bootstrap-examples
    

    Luego puede servir su aplicación Angular 10 usando el ng servecomando de la siguiente manera:

    $ ng serve
    

    Su aplicación será servida desde http://localhost:4200/

    Paso 2: instalación de Bootstrap 4 en su proyecto de Angular 10

    En este paso, procederemos a agregar Bootstrap 4 a nuestra aplicación Angular 10.

    Hay varias formas que puede utilizar para instalar Bootstrap en su proyecto:

    • Instalando Bootstrap desde npm usando el npm installcomando,
    • Descargando archivos Bootstrap y agregándolos a la src/assetscarpeta de su proyecto Angular,
    • Usando Bootstrap desde un CDN.

    Procedamos con el primer método. Regrese a su interfaz de línea de comandos e instale Bootstrap 4 a través de npm de la siguiente manera:

     $ npm install --save bootstrap
    

    Esto también agregará el paquete bootstrap a package.json.

    En el momento de escribir este tutorial, se instalará bootstrap v4.3.1 .

    Los activos de Bootstrap 4 se instalarán en la node_modules/bootstrapcarpeta. Deberá decirle a Angular dónde buscarlos.

    A continuación, también necesita instalar jQuery usando el siguiente comando:

     $ npm install --save jquery
    

    En el momento de este tutorial se instalará jquery v3.4.1 .

    Paso 3 (Método 1): agregar Bootstrap 4 a Angular 10 usando angular.json

    Abra el angular.jsonarchivo de su proyecto e incluya:

    • node_modules/bootstrap/dist/css/bootstrap.cssen la projects->architect->build->stylesmatriz,
    • node_modules/bootstrap/dist/js/bootstrap.jsen la projects->architect->build->scriptsmatriz,
    • node_modules/bootstrap/dist/js/bootstrap.jsen la projects->architect->build->scriptsmatriz,

    Como sigue:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1, 
      "newProjectRoot": "projects",
      "projects": {
        "angular-bootstrap-examples": {
          "projectType": "application",
          "schematics": {},
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/angular-bootstrap-examples",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "aot": true,
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "./node_modules/bootstrap/dist/css/bootstrap.css",
                  "src/styles.css"              
                ],
                "scripts": [
                  "./node_modules/jquery/dist/jquery.js",
                  "./node_modules/bootstrap/dist/js/bootstrap.js"
                ]
              },
    
    

    Nota: También debe agregar el archivo de biblioteca de JavaScript jQuery.

    Paso 3 (Método 2): agregar Bootstrap 4 a Angular 10 usando index.html

    También puede incluir archivos Bootstrap node_modules/bootstrapusando el index.htmlarchivo.

    Abra el src/index.htmlarchivo y agregue lo siguiente:

    • Una <link>etiqueta para agregar el bootstrap.cssarchivo en la <head>sección,
    • Una <script>etiqueta para agregar el jquery.jsarchivo antes de la </body>etiqueta de cierre ,
    • Una <script>etiqueta para agregar el bootstrap.jsarchivo antes de la </body>etiqueta.
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Angular Bootstrap 4 Examples</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    
    </head>
    <body>
      <app-root></app-root>
      <script src="../node_modules/jquery/dist/jquery.js"></script>
      <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>    
    </body>
    </html>
    

    Paso 3 (Método 3): agregar Bootstrap 4 a Angular 10 usando styles.css

    También podemos usar el styles.cssarchivo para agregar el archivo CSS de Bootstrap a nuestro proyecto.

    Abra el src/styles.cssarchivo de su proyecto Angular e importe el bootstrap.cssarchivo de la siguiente manera:

    @import "~bootstrap/dist/css/bootstrap.css"
    

    Esto reemplaza los métodos anteriores, por lo que no es necesario agregar el archivo a la stylesmatriz del angular.jsonarchivo o al index.htmlarchivo.

    Nota : Los archivos JS se pueden agregar usando la scriptsmatriz o la <script>etiqueta como los métodos anteriores.

    Paso alternativo: agregar Bootstrap 4 usando ng-bootstrapyngx-bootstrap

    Bootstrap depende de las bibliotecas jQuery y Popper.js, y si no las incluye en su proyecto, cualquier componente de Bootstrap que dependa de JavaScript no funcionará.

    ¿Por qué no incluir esas bibliotecas? Para Angular, es mejor evitar el uso de bibliotecas que realizan una manipulación directa del DOM (como jQuery) y dejar que Angular se encargue de eso.

    Ahora, ¿qué pasa si necesita las funciones completas de Bootstrap 4 sin las bibliotecas JS?

    Una mejor manera es usar bibliotecas de componentes creadas con el fin de hacer que Bootstrap funcione a la perfección con Angular como ng-bootstrapongx-bootstrap

    Bootstrap 4 Angular 8

    ¿Debo agregar bootstrap.js o bootstrap.min.js a mi proyecto? No, el objetivo de ng-bootstrap es reemplazar completamente la implementación de JavaScript para los componentes. Tampoco debe incluir otras dependencias como jQuery o popper.js. No es necesario y podría interferir con el código fuente ng-bootstrap

    Entonces, primero deberá instalar la biblioteca desde npm usando el siguiente comando:

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

    Una vez que finalice la instalación, deberá importar el módulo principal.

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

    A continuación, deberá agregar el módulo que importó en el módulo raíz de su aplicación

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
      declarations: [/*...*/],
      imports: [/*...*/, NgbModule.forRoot()],
      /*...*/
    })
    export class AppModule {
    }
    

    Tenga en cuenta que ng-bootstraprequiere que el archivo CSS Bootstrap 4 esté presente.

    Puede agregarlo en la matriz de estilos del angular.jsonarchivo de esa manera:

    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    

    Ahora puede usar Bootstrap 4 en su aplicación Angular.

    Puede encontrar todos los componentes disponibles a través de este enlace .

    También puedes usar la ngx-bootstrapbiblioteca Bootstrap 4 Angular 10

    Simplemente regrese a su terminal, asegúrese de estar dentro de su proyecto Angular y luego ejecute el siguiente comando para instalar ngx-bootstrap

    npm install ngx-bootstrap --save
    

    También necesita los archivos CSS de Bootstrap 4. Agregue la siguiente línea en el <head>de su aplicación Angular que incluye Bootstrap desde un CDN

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    

    También puede instalar bootstrap desde npm y usar la forma anterior para incluir el archivo CSS (a través de la matriz de estilos en el angular-cli.jsonarchivo)

       "styles": [  
       "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
       "styles.css"  
       ],
    

    A continuación, abra src/app/app.module.tsy agregue

    import { BsDropdownModule} from 'ngx-bootstrap/dropdown';
    import { AlertModule } from 'ngx-bootstrap';
    
    /*...*/
    
    @NgModule({
       /*...*/
       imports: [BsDropdownModule.forRoot(),AlertModule.forRoot(), /*...*/ ],
        /*...*/ 
    })
    

    Este es un ejemplo de la importación de dos componentes BsDropdownModule y AlertModule .

    Debe importar el módulo para cada componente que desee utilizar de la misma manera.

    ngx-bootstrapproporciona cada componente de BS en cada módulo para que solo importe los componentes que necesita. De esta manera, su aplicación será más pequeña, ya que incluye solo los componentes que está utilizando.

    Puede encontrar todos los componentes disponibles que puede usar en los documentos

    Agregar Bootstrap 4 a Angular 10

    Gracias al nuevo ng addcomando agregado en Angular 7+, tiene una nueva forma más simple y fácil de agregar Bootstrap sin usar el npm installcomando para instalar las dependencias requeridas o agregar configuraciones.

    Simplemente puede ejecutar el siguiente comando para agregar ng-bootstrap:

    $ ng add @ng-bootstrap/schematics
    

    Eso es. Ahora tiene soporte para los componentes y estilos de Bootstrap sin configuraciones adicionales. Tampoco necesita jQuery ya que estamos usando ng-bootstrap.

    Conclusión

    En este artículo, hemos visto diferentes formas de incluir Bootstrap 4 en las aplicaciones de Angular 10:

    • Usando activos originales de Bootstrap 4 de npm,
    • Usando la ng-bootstrapbiblioteca,
    • Y finalmente usando el ngx-bootstrap

    La diferencia más importante entre ng-bootstrapvs. ngx-bootstrapes que ngx-bootstrapusa módulos separados para componentes para reducir el tamaño final de la aplicación.


    No hay comentarios.:

    Publicar un comentario

    Dejanos tu comentario para seguir mejorando!

    outbrain

    Páginas