Primeros pasos con Ignite UI for Angular

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

Ignite UI for Angular se ofrece bajo un modelo de doble licencia, que permite tanto el uso comercial como permisivo de código abierto, dependiendo de los componentes, módulos, directivas y servicios que se utilicen. Para más detalles, consulte los temas Ignite UI Licencias y Código Abierto vs Premium.

Prerequisites

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

DESCARGAR NODO

DESCARGAR VS CÓDIGO

Installing Ignite UI for Angular

Ignite UI for Angular pueden instalarse tanto con la CLI Angular como con la CLI Ignite UI.

Quick Start with the Angular CLI

La CLI Angular proporciona soporte para bibliotecas externas a tu proyecto mediante elng add comando, que instala los paquetes denpm una biblioteca en tu espacio 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

Puedes especificar la extensión de archivo o el preprocesador que usar para los archivos de estilo de tu aplicación con esta--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 instales el paquete Ignite UI for Angular, tu aplicación estará configurada para usar el tema de estilo predeterminado, que luego podrá personalizarse fácilmente para todas o para instancias específicas de componentes.

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

Note

No necesitas instalar eligniteui-theming paquete explícitamente, viene con Ignite UI for Angular.

Note

Ten en cuenta que con el comando anterior instalarás la versión de prueba de cualquier componente de Ignite UI for Angular bajo licencia comercial (por ejemploigxGrid).

Paquetes adicionales

Además, puede que quieras incluir varios componentes Ignite UI en tu proyecto, tales como:

• Grid Lite - Código abierto

El componente Grid Lite está diseñado para ofrecer un conjunto mínimo de funciones bajo licencia MIT que deberían servir a una amplia gama de proyectos que requieren funcionalidad esencial de visualización de datos con una sobrecarga mínima y el rendimiento que los usuarios esperan. Está diseñado para desarrolladores que necesitan una presentación rápida y ligera de datos sin la complejidad de una red empresarial. Su API se asemeja a la comercialIgxGrid, asegurando una ruta de actualización sencilla y directa.

ng add igniteui-grid-lite

• Dock Manager - Premium

El componente Ignite UI Dock Manager proporciona medios para administrar el diseño de su aplicación a través de paneles, lo que permite a sus usuarios finales personalizarlo aún más fijando, redimensionando, moviendo y ocultando paneles.

ng add igniteui-dockmanager

Upgrading from Trial to Licensed

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 seigniteui-cli usa:

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

Quick Start with Angular Schematics & 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

Note

En algún momento durante la ejecución de los pasos te pedirán que inicies sesión en nuestro registro NPM si no estás ya configurado. Esto forma parte de la configuración de la cuenta Trial to License y es aplicable si planeas usar alguno de los componentes bajo licencia comercial.

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

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

Using Ignite UI for Angular

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

Add components automatically

Importar módulos y utilizar componentes.

Ahora podemos añadir nuevos componentes a nuestra aplicación usando elcomponent esquema o eladd comando:

ng g @igniteui/angular-schematics:component

ig add

Note

Ten en cuenta que elig add comando puede usarse si la aplicación se creó usando la CLI Ignite UI o si fue creada usando la CLI Angular con Ignite UI for Angular añadida usando 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

Add components manually

A partir del 19 de Angular, los componentes independientes son la forma predeterminada de construir Angular apps, eliminando la necesidad yNgModules simplificando significativamente el proceso de añadir componentes. Así que usemos esto para añadir un componente igxGrid a nuestra app.

Antes de empezar, ten en cuenta que algunos componentes tienen animaciones que requieren un proveedor como parte de labootstrapApplication 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:

<!-- 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 solicitud que se referencian desde el app.component.ts. Como usamos componentes independientes, simplemente tenemos que añadir laIgxGridComponent clase a las importaciones de nuestra app, junto con cualquier otro componente usado en la plantilla. En nuestro ejemplo, al definir columnas, también tenemos que añadir elIgxColumnComponent al array 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í:

API References

En este artículo hemos aprendido 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 Ignite UI CLI. También aprendimos a añadir Ignite UI for Angular a una aplicación existente usando la Angular CLI. Diseñamos nuestra propia página incluyendo elIgxGridComponent to it, que a su vez ofrece funciones geniales, que puedes consultar consultando el menú de navegación.

• Componente IgxGrid
• Estilos de componentes IgxGrid

Additional Resources

• Interfaz de línea Ignite UI
• Comandos de la interfaz de línea de comandos Ignite UI
• Descripción general de la cuadrícula
• Resumen de Grid Lite

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub