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.

Prerequisites

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

DESCARGAR NODO

DESCARGAR VS CÓDIGO

Installing Ignite UI for Angular

El 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 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
cmd

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
cmd

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
bash

o si usa igniteui-cli:

ig upgrade-packages
bash

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.

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
cmd

or:

npm install -g igniteui-cli 
cmd

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"
cmd

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

ig
cmd

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.

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 agregar nuevos componentes a nuestra aplicación usando el esquema component o el comando add:

ng g @igniteui/angular-schematics:component
cmd

ig add
cmd

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
cmd

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 { }
typescript

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>
html

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';
}
typescript

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
cmd

Si la aplicación se creó mediante la CLI Angular:

ng serve
cmd

El resultado final debería verse así:

API References

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.

Additional Resources

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

Primeros pasos con Ignite UI for Angular

Prerequisites

Installing Ignite UI for Angular

Quick Start with the Angular CLI

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

Quick Start with Angular Schematics & Ignite UI CLI

Using Ignite UI for Angular

Add components automatically

Importar módulos y utilizar componentes.

Ejecutar aplicación

Add components manually

Importar módulos

Usar componentes

Ejecutar aplicación

API References

Additional Resources

Tematización