Comenzando 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 Sketch de bocetos basados en materiales y directivas de soporte para Angular de Infragistics. Permite a los desarrolladores crear aplicaciones HTML5 y JavaScript modernas de alto rendimiento para navegadores de escritorio, experiencias móviles y aplicaciones web progresivas (PWA) dirigidas al marco Angular de Google.

Prerequisites

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

DESCARGAR NODO

DESCARGAR VS CÓDIGO

Installing Ignite UI for Angular

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

Quick Start with the Angular CLI

La CLI Angular brinda soporte para bibliotecas externas a su proyecto a través del comando ng add, que instala los paquetes npm de una biblioteca en su espacio de trabajo y configura el proyecto en el directorio de trabajo actual para usar esa biblioteca.

Para crear una aplicación Angular con Angular CLI, abra su terminal preferida 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 su aplicación con la opción--style. 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 en su proyecto, ejecutando el siguiente comando:

ng add igniteui-angular

Note

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 comenzar a utilizar el paquete Ignite UI for Angular se recomienda encarecidamente seguir la guía de actualización de paquetes con Schematics 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. Dependiendo de la configuración de su proyecto, ejecute el siguiente esquema en su 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 donde el paquete Ignite UI for Angular Trial ya está instalado. Si está realizando una nueva configuración de un proyecto o simplemente está comenzando 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 usar la Ignite UI for Angular, puede usar la 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 usando Ignite UI CLI o Ignite UI for Angular Schematics es la forma más fácil de iniciar una aplicación configurada.

Para activar la guía usando la Ignite UI for Angular Schematics, 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, 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.

Creación de su primera aplicación CLI Ignite UI

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

Using Ignite UI for Angular

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

Add components automatically

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

Note

Tenga en cuenta que el comando ig add se puede usar si la aplicación se creó usando la CLI Ignite UI o si se creó usando la CLI Angular con Ignite UI for Angular agregada 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

Importar módulos

Primero tenemos que importar los módulos respectivos de los componentes que queremos usar en el archivo app.module.ts. ¡Seguiremos adelante y haremos esto para igxGrid! Tenga en cuenta que algunos componentes tienen animaciones que dependen de BrowserAnimationsModule, así que importemos esa también:

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Here we import the IgxGridModule, so we can use the igxGrid!
import { IgxGridModule } from 'igniteui-angular';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IgxGridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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 del grid y el título de nuestra aplicación a los que se hace referencia desde app.component.ts:

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
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ó utilizando Angular CLI:

ng serve

El resultado final debería verse así:

API References

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

• Componente IgxGrid
• Estilos de componentes IgxGrid

Additional Resources

• Ignite UI
• Comandos CLI Ignite UI
• Descripción general de la cuadrícula

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub