Introdução ao Ignite UI for Angular
Ignite UI for Angular é um conjunto completo de widgets de interface do usuário baseados em materiais, componentes e kits de interface do usuário Sketch e diretivas de suporte para Angular da Infragistics. Ele permite que os desenvolvedores criem aplicativos HTML5 e JavaScript modernos de alto desempenho para navegadores de desktop, experiências móveis e aplicativos da web progressivos (PWAs) voltados para a estrutura Angular do Google.
Prerequisites
- Instale o NodeJS.
- Instale o Visual Studio Code.
Installing Ignite UI for Angular
O Ignite UI for Angular pode ser instalado com a CLI do Angular ou com a CLI Ignite UI.
Quick Start with the Angular CLI
A CLI do Angular fornece suporte para bibliotecas externas ao seu projeto por meio do comando, que instala ng add os pacotes de npm uma biblioteca em 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 ser usado para os arquivos de estilo do aplicativo com a--style opção. Recomendamos o uso do SCSS, pois os estilos de 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 de componentes específicos.
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 o igniteui-theming pacote explicitamente, ele vem com Ignite UI for Angular. Lembre-se de que, com o comando acima, você instalará a versão de teste do Ignite UI for Angular.
Durante o processo de instalação, você será perguntado se deseja habilitar polyfills para IE, Edge e Safari. Isso instalará o pacote em seu projeto, o web-animations-js que é necessário se você usar AnimationBuilder em seu aplicativo e em um desses navegadores. Você também pode optar por adicionar a biblioteca CSS para redefinir os estilos de elementos HTML nos navegadores e eles minireset.css serão instalados em seu aplicativo.
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 estiver usando igniteui-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 em nosso registro npm, se ainda não estiver configurado. Isso faz parte da configuração da conta de avaliação para licença.
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 ao nosso aplicativo usando o component esquema ou o add comando:
ng g @igniteui/angular-schematics:component
ig add
Note
Observe que o ig add comando pode ser usado se o aplicativo foi criado usando a CLI do Ignite UI ou se foi criado usando a CLI do Angular com Ignite UI for Angular adicionado a ela 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
Importar módulos
Primeiro temos que importar os respectivos módulos dos componentes que queremos usar no arquivo app.module.ts. Vamos em frente e faremos isso para o igxGrid! Observe que alguns componentes têm animações dependendo de BrowserAnimationsModule, então vamos importá-lo também:
// 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
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 do nosso aplicativo que são referenciados a partir do 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';
}
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 como criar nosso próprio aplicativo Ignite UI for Angular do zero, aproveitando o processo totalmente automatizado de criação de projetos Ignite UI for Angular na CLI do Ignite UI. Também aprendemos como adicionar Ignite UI for Angular a um aplicativo existente usando a CLI Angular. Projetamos nossa própria página incluindo o IgxGridComponent para ele, que por si só oferece alguns recursos incríveis, que você pode dar uma olhada consultando o menu de navegação.
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub