Introdução ao Ignite UI for Angular
Ignite UI for Angularé um conjunto completo de Widgets de UI baseados em Material, kits de Componentes e Sketch UI e diretrizes de suporte para Angular por Infragistics. Ele permite que desenvolvedores criem aplicativos modernos de alto desempenho em HTML5 e JavaScript para navegadores desktop, experiências móveis e aplicativos web progressivos (PWAs) voltados para o framework Angular do Google.
Ignite UI for Angular é oferecido sob um modelo de licença dupla, que permite tanto o uso comercial quanto o permissivo de código aberto, dependendo dos componentes, módulos, diretivas e serviços utilizados. Para mais detalhes, consulte os tópicos Ignite UI Licenciamento e Open Source vs Premium.
Prerequisites
- Instale o NodeJS.
- Instale o Visual Studio Code.
Installing Ignite UI for Angular
Ignite UI for Angular podem ser instalados tanto com a CLI Angular quanto com a CLI Ignite UI.
Quick Start with the Angular CLI
A CLI Angular oferece suporte para bibliotecas externas ao seu projeto por meio dong add comando, que instala os pacotes danpm biblioteca no seu workspace e configura o projeto no diretório de trabalho atual para usar essa biblioteca.
Para criar um aplicativo Angular com a CLI do Angular, abra seu terminal preferido e digite o seguinte comando:
ng new <project name> --style=scss
Você pode especificar a extensão de arquivo ou o pré-processador a usar para os arquivos de estilo do seu aplicativo com essa--style opção. Recomendamos usar o SCSS, pois os estilos dos nossos componentes são baseados na biblioteca de temas Ignite UI for Angular. Mais tarde, quando você instalar o pacote Ignite UI for Angular, seu aplicativo será configurado para usar o tema de estilo padrão, que pode ser facilmente personalizado para todas ou para instâncias específicas de componentes.
Depois disso, você pode instalar o pacote Ignite UI for Angular, juntamente com todas as suas dependências, importações de fontes e referências de estilos ao seu projeto, executando o seguinte comando:
ng add igniteui-angular
Note
Você não precisa instalar oigniteui-theming pacote explicitamente, ele vem com Ignite UI for Angular.
Note
Lembre-se de que, com o comando acima, você vai instalar a versão de teste de qualquer componente Ignite UI for Angular sob licença comercial (como por exemploigxGrid).
Pacotes adicionais
Além disso, você pode querer incluir vários componentes Ignite UI ao seu projeto, tais como:
- Grid Lite - Código Aberto
O componente Grid Lite foi projetado para fornecer um conjunto mínimo de recursos sob licença do MIT que deve atender a uma ampla gama de projetos que precisam de funcionalidades essenciais de exibição de dados com sobrecarga mínima e o desempenho que os usuários esperam. Ele foi projetado para desenvolvedores que precisam de uma apresentação de dados rápida e leve, sem a complexidade de uma grade corporativa. Sua API se assemelha à do comercialIgxGrid, garantindo um caminho de atualização simples e direto.
ng add igniteui-grid-lite
- Dock Manager - Premium
O componente Ignite UI Dock Manager fornece meios para gerenciar o layout do seu aplicativo por meio de painéis, permitindo que seus usuários finais o personalizem ainda mais fixando, redimensionando, movendo e ocultando painéis.
ng add igniteui-dockmanager
Upgrading from Trial to Licensed
Se você quiser começar a usar o pacote Licensed Ignite UI for Angular, é altamente recomendável seguir o guia Upgrading packages with Schematics e Ignite UI CLI.
A seguir está uma rápida visão geral das etapas que você precisa executar para começar a usar a versão licenciada do Ignite UI for Angular. Dependendo da configuração do projeto, execute o seguinte esquema em seu projeto:
ng g @igniteui/angular-schematics:upgrade-packages
ou se usarigniteui-cli:
ig upgrade-packages
O esquema se encarregará de alternar as dependências do pacote do projeto e atualizar as referências de origem. Você será solicitado a fazer login em nosso registro npm, caso ainda não esteja configurado.
Faça login em nosso registro npm com uma nova configuração
A abordagem descrita acima abrange apenas os cenários em que Ignite UI for Angular pacote de avaliação já está instalado. Se você estiver executando uma nova configuração de um projeto ou apenas começando a usar Ignite UI for Angular, siga as orientações abaixo.
É muito importante realizar uma configuração correta do ambiente de feed npm privado, ao:
- Garantir uma configuração válida do registro privado.
- Faça login em nosso feed privado usando o npm especificando uma conta de usuário e senha que não sejam de avaliação.
Detalhes sobre todo o processo podem ser encontrados aqui.
Quick Start with Angular Schematics & Ignite UI CLI
Para criar um aplicativo do zero e configurá-lo para usar os componentes Ignite UI for Angular, você pode usar o Ignite UI for Angular Schematics ou a CLI do Ignite UI. A primeira etapa é instalar o respectivo pacote globalmente da seguinte maneira:
npm i -g @igniteui/angular-schematics
or:
npm install -g igniteui-cli
Nossa experiência guiada usando a CLI do Ignite UI ou o Ignite UI for Angular Schematics é a maneira mais fácil de inicializar um aplicativo configurado.
Para ativar a guia usando o Ignite UI for Angular Esquemas, execute:
ng new --collection="@igniteui/angular-schematics"
ou execute o seguinte comando caso esteja usando a ferramenta CLI:
ig
Note
Em algum momento durante a execução das etapas, você será solicitado a fazer login no nosso registro NPM, caso ainda não esteja configurado. Isso faz parte da configuração da conta Trial to License e é aplicável se você planeja usar algum dos componentes sob licença comercial.
Criando seu primeiro aplicativo CLI do Ignite UI
Saiba mais sobre nossos Angular Esquemas e Ignite UI CLI.
Using Ignite UI for Angular
Agora estamos prontos para começar a usar Ignite UI for Angular componentes!
Add components automatically
Importar módulos e usar componentes
Agora podemos adicionar novos componentes à nossa aplicação usando tanto ocomponent esquema quanto oadd comando:
ng g @igniteui/angular-schematics:component
ig add
Note
Por favor, note que oig add comando pode ser usado se a aplicação foi criada usando a CLI Ignite UI ou se foi criada usando a CLI Angular com Ignite UI for Angular adicionada usando o comando ng add igniteui-angular.
Depois de percorrer as opções do menu e escolher qual componente queremos adicionar ao nosso aplicativo, notaremos que temos um novo componente em nosso projeto, que podemos usar em qualquer lugar da nossa página!
Executar aplicativo
Agora vamos executar nosso aplicativo para ver nossa página incrível!
npm start
Add components manually
A partir de 19 de Angular, componentes independentes são a forma padrão de construir Angular apps, eliminando a necessidade eNgModules simplificando significativamente o processo de adição de componentes. Vamos usar isso para adicionar um componente igxGrid ao nosso app.
Antes de começarmos, por favor, note que alguns componentes têm animações que exigem um provedor como parte dabootstrapApplication chamada.
// 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
Agora estamos prontos para usar o igxGrid em nossa marcação! Vamos defini-lo em nosso arquivo 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>
Também definiremos os dados da grade e o título da nossa aplicação que serão referenciados a partir do app.component.ts. Como estamos usando componentes independentes, simplesmente precisamos adicionar aIgxGridComponent classe às importações do nosso app, junto com quaisquer outros componentes usados no template. No nosso exemplo, ao definirmos colunas, também precisamos adicionar oIgxColumnComponent ao array de importação.
// 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';
}
Executar aplicativo
Finalmente, podemos executar nosso novo aplicativo usando um dos seguintes comandos:
- Se o aplicativo foi criado usando a CLI Ignite UI:
ig start
- Se o aplicativo foi criado usando a CLI Angular:
ng serve
O resultado final deve ser semelhante a este:
API References
Neste artigo, aprendemos a criar nossa própria aplicação Ignite UI for Angular do zero, aproveitando o processo totalmente automatizado de criação de projetos Ignite UI for Angular na Ignite UI CLI. Também aprendemos a adicionar Ignite UI for Angular a uma aplicação existente usando a CLI Angular. Criamos nossa própria página incluindo oIgxGridComponent to to it, que por sua vez oferece alguns recursos incríveis, que você pode conferir consultando o menu de navegação.
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub