Ant Design Introducción e instalación para Angular

Ant Design es un patrón de diseño para productos de nivel empresarial que se puede integrar con otros marcos front-end como Angular, React o Vue. La implementación oficial de Ant Design se lanza con React, pero se puede usar con otros marcos de JavaScript. Es una herramienta de código abierto con aproximadamente 50.4K estrellas de GitHub, es la segunda biblioteca React UI más utilizada del mundo. Muchas empresas están utilizando este patrón de diseño como Alibaba, Tencent, Didi, etc.

Características del diseño de hormigas:

• Apoya la internacionalización.
• Interfaz de usuario rica e interactiva.
• Potente personalización de temas.
• Los componentes de alta calidad están presentes.
• Alto rendimiento.

Requisito previo:

• Un editor de código como VSCode, Sublime, Brackets, etc.
• NodeJS debe estar instalado en el sistema

Para ventanas

https://www.geeksforgeeks.org/installation-of-node-js-on-windows/

para linux

https://www.geeksforgeeks.org/installation-of-node-js-on-linux/

• Conocimiento de la configuración de un Proyecto Angular

https://www.geeksforgeeks.org/angular-7-installation/

Instalación de Hormiga Diseño de Angular

• En la terminal, vaya a esa carpeta del proyecto angular que ha creado, luego instale Ant Design of Angular usando el siguiente comando:

npm instalar ng-zorro-antd



• En el archivo «angular.json» , agregue el archivo Ant Design .css en la array de estilos como se indica a continuación:

  {  "$schema":  "./node_modules/@angular/cli/lib/config/schema.json",  "version": 1,  "newProjectRoot": "projects",  "projects": {     "myAntApp": {       "projectType": "application",       "schematics": {         "@schematics/angular:component": {           "style": "scss"         }       },       "root": "",       "sourceRoot": "src",       "prefix": "app",       "architect": {         "build": {           "builder":  "@angular-devkit/build-angular:browser",           "options": {             "outputPath": "dist/myAntApp",             "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/ng-zorro-antd/src/ng-zorro-antd.min.css",               "src/styles.scss"             ],             "scripts": []           },           "configurations": {             "production": {               "fileReplacements": [                 {                   "replace":  "src/environments/environment.ts",                   "with":  "src/environments/environment.prod.ts"                 }               ],               "optimization": true,               "outputHashing": "all",               "sourceMap": false,               "extractCss": true,               "namedChunks": false,               "extractLicenses": true,               "vendorChunk": false,               "buildOptimizer": true,               "budgets": [                 {                   "type": "initial",                   "maximumWarning": "2mb",                   "maximumError": "5mb"                 },                 {                   "type": "anyComponentStyle",                   "maximumWarning": "6kb",                   "maximumError": "10kb"                 }               ]             }           }         },         "serve": {           "builder":  "@angular-devkit/build-angular:dev-server",           "options": {             "browserTarget": "myAntApp:build"           },           "configurations": {             "production": {               "browserTarget": "myAntApp:build:production"             }           }         },         "extract-i18n": {           "builder":  "@angular-devkit/build-angular:extract-i18n",           "options": {             "browserTarget": "myAntApp:build"           }         },         "test": {           "builder": "@angular-devkit/build-angular:karma",           "options": {             "main": "src/test.ts",             "polyfills": "src/polyfills.ts",             "tsConfig": "tsconfig.spec.json",             "karmaConfig": "karma.conf.js",             "assets": [               "src/favicon.ico",               "src/assets"             ],             "styles": [               "src/styles.scss"             ],             "scripts": []           }         },         "lint": {           "builder": "@angular-devkit/build-angular:tslint",           "options": {             "tsConfig": [               "tsconfig.app.json",               "tsconfig.spec.json",               "e2e/tsconfig.json"             ],             "exclude": [               "**/node_modules/**"             ]           }         },         "e2e": {           "builder":  "@angular-devkit/build-angular:protractor",           "options": {             "protractorConfig": "e2e/protractor.conf.js",             "devServerTarget": "myAntApp:serve"           },           "configurations": {             "production": {               "devServerTarget": "myAntApp:serve:production"             }           }         }       }     }},   "defaultProject": "myAntApp" }

• En «app.module.ts», importe el módulo del botón Ant Design, para que podamos acceder a él en el archivo .html como se indica a continuación:

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';    import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NzButtonModule } from 'ng-zorro-antd/button';    @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     NzButtonModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

• En el archivo «app.component.html» , agregue el siguiente código como se indica a continuación:

  <button nz-button nzType="primary">Primary</button> <button nz-button nzType="default">Default</button> <button nz-button nzType="dashed">Dashed</button>

• Agregue algo de CSS en «app.component.scss» para mostrar los botones en el centro como se indica a continuación:

  [nz-button] {   margin-left: 50%;   margin-top: 3%; }

• En la terminal, ejecute la aplicación en el navegador usando el siguiente comando:

  ng serve -o

Producción:



Salida final en el navegador