Primeros pasos con Ignite UI for Angular

    Ignite UI for Angular es un conjunto completo de widgets de interfaz de usuario, componentes y kits de interfaz de usuario de Sketch basados en materiales y directivas de soporte para Angular por Infragistics. Permite a los desarrolladores crear aplicaciones modernas de alto rendimiento HTML5 y JavaScript para navegadores de escritorio, experiencias móviles y aplicaciones web progresivas (PWA) dirigidas al marco de Angular de Google.

    Requisitos previos

    1. Instale NodeJS.
    2. Instale el código de Visual Studio.

    Instalación de Ignite UI for Angular

    El Ignite UI for Angular se puede instalar con la CLI Angular o con la CLI Ignite UI.

    Inicio rápido con la CLI de Angular

    La CLI de Angular proporciona compatibilidad con bibliotecas externas al proyecto a través del ng add comando, que instala los paquetes de npm una biblioteca en el área de trabajo y configura el proyecto en el directorio de trabajo actual para usar esa biblioteca.

    Para crear una aplicación Angular con la CLI Angular, abra su terminal preferido y escriba el siguiente comando:

    ng new <project name> --style=scss

    Puede especificar la extensión de archivo o el preprocesador que se utilizará para los archivos de estilo de la aplicación con la--style opción. Recomendamos usar SCSS, ya que los estilos de nuestros componentes se basan en la biblioteca de temas Ignite UI for Angular. Más adelante, cuando instale el paquete Ignite UI for Angular, su aplicación se configurará para usar el tema de estilo predeterminado que luego se puede personalizar fácilmente para todas o para instancias de componentes específicas.

    A partir de entonces, puede instalar el paquete Ignite UI for Angular, junto con todas sus dependencias, importaciones de fuentes y referencias de estilos a su proyecto, ejecutando el siguiente comando:

    ng add igniteui-angular
    Nota

    No es necesario instalar el igniteui-theming paquete explícitamente, viene con Ignite UI for Angular. Tenga en cuenta que con el comando anterior instalará la versión de prueba de Ignite UI for Angular.

    Durante el proceso de instalación se le preguntará si desea habilitar polyfills para IE, Edge y Safari. Esto instalará el paquete web-animations-js en su proyecto, que es necesario si usa AnimationBuilder en su aplicación y uno de estos navegadores. También puede optar por agregar una biblioteca CSS para restablecer los estilos de elementos HTML en todos los navegadores y minireset.css se instalará en su aplicación.

    Si desea empezar a utilizar el paquete de Ignite UI for Angular con licencia, se recomienda encarecidamente seguir la guía de actualización de paquetes con esquemas y Ignite UI CLI.​

    A continuación se muestra una descripción general rápida de los pasos que debe realizar para comenzar a usar la versión con licencia de Ignite UI for Angular. En función de la configuración del proyecto, ejecute el siguiente esquema en el proyecto:

    ng g @igniteui/angular-schematics:upgrade-packages

    o si usa igniteui-cli:

    ig upgrade-packages

    El esquema se encargará de cambiar las dependencias del paquete del proyecto y actualizar las referencias fuente. Se le pedirá que inicie sesión en nuestro registro npm si aún no está configurado.

    Inicie sesión en nuestro registro npm con una nueva configuración

    El enfoque descrito anteriormente cubre solo los escenarios en los que ya está instalado Ignite UI for Angular paquete de prueba. Si está realizando una nueva configuración de un proyecto o acaba de comenzar a usar Ignite UI for Angular, siga las instrucciones a continuación.

    Es muy importante realizar una configuración correcta del entorno de alimentación privado de npm, mediante:

    • Garantizar una configuración válida del registro privado.
    • Inicie sesión en nuestra fuente privada utilizando npm especificando una cuenta de usuario y una contraseña que no sean de prueba.

    Los detalles sobre todo el proceso se pueden encontrar aquí.

    Inicio rápido con esquemas Angular y Ignite UI CLI

    Para crear una aplicación desde cero y configurarla para que utilice los componentes Ignite UI for Angular, puede utilizar los esquemas de Ignite UI for Angular o la CLI Ignite UI. El primer paso es instalar el paquete respectivo globalmente de la siguiente manera:

    npm i -g @igniteui/angular-schematics

    or:

    npm install -g igniteui-cli

    Nuestra experiencia guiada con la CLI de Ignite UI o Ignite UI for Angular Schematics es la forma más sencilla de arrancar una aplicación configurada.

    Para activar la guía mediante el Ignite UI for Angular Esquemas, ejecute:

    ng new --collection="@igniteui/angular-schematics"

    o ejecute el siguiente comando en caso de que esté utilizando la herramienta CLI:

    ig
    Nota

    En algún momento durante la ejecución de los pasos, se le pedirá que inicie sesión en nuestro registro npm si aún no está configurado. Esto es parte de la configuración de la cuenta de prueba para obtener licencia.

    Cómo crear su primera aplicación Ignite UI CLI

    Obtenga más información sobre nuestros esquemas Angular y Ignite UI CLI.​

    Uso de Ignite UI for Angular

    ¡Ahora estamos listos para comenzar a usar Ignite UI for Angular componentes!

    Añadir componentes automáticamente

    Importar módulos y utilizar componentes.

    Ahora podemos agregar nuevos componentes a nuestra aplicación usando el esquema component o el comando add:

    ng g @igniteui/angular-schematics:component
    ig add
    Nota

    Tenga en cuenta que el ig add comando se puede usar si la aplicación se creó mediante la CLI de Ignite UI o si se creó mediante la CLI Angular con Ignite UI for Angular se le agregó mediante el comando ng add igniteui-angular.

    Después de revisar las opciones del menú y elegir qué componente queremos agregar a nuestra aplicación, notaremos que tenemos un componente nuevo en nuestro proyecto, que podemos usar en cualquier lugar de nuestra página.

    Ejecutar aplicación

    ¡Ahora ejecutemos nuestra aplicación para ver nuestra increíble página!

    npm start

    Agregar componentes manualmente

    A partir del 19 de Angular, los componentes independientes son la forma predeterminada de crear aplicaciones Angular, lo que NgModules elimina la necesidad y simplifica significativamente el proceso de agregar componentes. Así que usemos esto para agregar un componente igxGrid a nuestra aplicación.

    Sin embargo, antes de comenzar, tenga en cuenta que algunos componentes tienen animaciones que requieren un proveedor como parte de la bootstrapApplication llamada.

    // main.ts

import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

    // app/app.config.ts import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { provideAnimations } from '@angular/platform-browser/animations'; const providers: Provider = [ importProvidersFrom(BrowserModule), provideAnimations() ]; export const appConfig: ApplicationConfig = { providers };

    Usar componentes

    ¡Ahora estamos listos para usar igxGrid en nuestro marcado! Sigamos adelante y definamoslo en nuestro archivo app.component.html:

    


    
  
    
    Welcome to {{title}}!
  
    

    


    
  
    
    
  

    
--><!-- app.component.html --> <div style="text-align:center; margin-bottom: 20px;"> <h1> Welcome to {{title}}! </h1> </div> <div style="text-align: center;"> <igx-grid [data]="localData" width="600px" height="400px" style="margin: auto" [allowFiltering]="true"> <igx-column field="Name" dataType="string"></igx-column> <igx-column field="Age" dataType="number"></igx-column> </igx-grid> </div>

    También definiremos los datos de la cuadrícula y el título de nuestra aplicación a los que se hace referencia desde el app.component.ts. Como estamos usando componentes independientes, simplemente tenemos que agregar la clase a las IgxGridComponent importaciones de nuestra aplicación, junto con cualquier otro componente utilizado en la plantilla. En nuestro ejemplo, como estamos definiendo columnas, también tenemos que agregar el IgxColumnComponent a la matriz de importación.

    // app.component.ts import { Component } from '@angular/core'; import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [IgxGridComponent, IgxColumnComponent] }) export class AppComponent { localData = [ { Name:'John', Age: 29 }, { Name:'Alice', Age: 27 }, { Name:'Jessica', Age: 31 }, ]; title = 'My Ignite UI project'; }

    Ejecutar aplicación

    Finalmente, podemos ejecutar nuestra nueva aplicación usando uno de los siguientes comandos:

    • Si la aplicación se creó mediante la CLI Ignite UI:
    ig start
    • Si la aplicación se creó mediante la CLI Angular:
    ng serve

    El resultado final debería verse así:

    Referencias de API

    En este artículo aprendimos a crear nuestra propia aplicación de Ignite UI for Angular desde cero aprovechando el proceso totalmente automatizado de creación de proyectos de Ignite UI for Angular en la CLI Ignite UI. También aprendimos a agregar Ignite UI for Angular a una aplicación existente mediante la CLI Angular. Diseñamos nuestra propia página incluyendo el botón "IgxGridComponent A ella", que a su vez ofrece algunas características increíbles, que puede echar un vistazo consultando el menú de navegación.

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.