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.

    Pré-requisitos

    1. Instale o NodeJS.
    2. Instale o Visual Studio Code.

    Instalando Ignite UI for Angular

    O Ignite UI for Angular pode ser instalado com a CLI do Angular ou com a CLI Ignite UI.

    Início rápido com a CLI do Angular

    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
    Observação

    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.

    Início rápido com Angular Schematics e 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
    Observação

    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.

    Usando Ignite UI for Angular

    Agora estamos prontos para começar a usar Ignite UI for Angular componentes!

    Adicionar componentes automaticamente

    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
    Observação

    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

    Adicionar componentes manualmente

    A partir de 19 de Angular, os componentes autônomos são a maneira padrão de criar aplicativos Angular, eliminando a necessidade NgModules e simplificando significativamente o processo de adição de componentes. Então, vamos usar isso para adicionar um componente igxGrid ao nosso aplicativo.

    Antes de começarmos, porém, observe que alguns componentes têm animações que exigem um provedor como parte da bootstrapApplication 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:

    


    
  
    
    Welcome to {{title}}!
  
    

    


    
  
    
    
  

    
--><!-- 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. Como estamos usando componentes autônomos, basta adicionar a IgxGridComponent classe às importações do nosso aplicativo, juntamente com quaisquer outros componentes usados no modelo. Em nosso exemplo, como estamos definindo colunas, também temos que adicionar o IgxColumnComponent 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:

    Referências de API

    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.

    Recursos adicionais

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.