Guia passo a passo usando esquemas Ignite UI for Angular

Se você deseja obter uma experiência guiada pelas opções disponíveis, pode inicializar o modo passo a passo que o ajudará a criar e configurar sua nova aplicação, bem como atualizar o projeto criado anteriormente com o Ignite UI Angular Schematics.

Para ativar o guia usando a coleção Esquemas, execute:

ng new --collection="@igniteui/angular-schematics"

Isso ativará o modo passo a passo e você receberá uma série de perguntas para ajudá-lo a criar seu novo projeto.

Note

O modo passo a passo depende Inquirer.js, consulte os terminais suportados

Create new project

Primeiro, você será solicitado a escolher a maneira como seu aplicativo será inicializado, usando módulos ou componentes autônomos:

Em seguida, você pode inserir um nome para seu aplicativo:

Em seguida, você será orientado a escolher um dos modelos de projeto disponíveis. Você pode criar um projeto vazio, projeto com navegação lateral ou projeto de autenticação com módulo de autenticação básica. Navegue pelas opções disponíveis usando as teclas de seta e pressione ENTER para confirmar a seleção:

O próximo passo é escolher um tema para sua aplicação. Se você selecionar a opção padrão, um arquivo CSS pré-compilado (igniteui-angular.css) com o tema Ignite UI for Angular padrão será incluído no do seu projeto angular.json. A opção personalizada gera código para uma paleta de cores e tema com nossa API de temas no app/styles.scss.

Depois de concluir as etapas acima, a estrutura do aplicativo será gerada, o repositório git será inicializado e o projeto será confirmado. Em seguida, você será perguntado se deseja concluir o processo ou adicionar uma nova visualização ao seu aplicativo:

Add view

Ignite UI CLI oferece suporte a vários modelos de componentes, bem como alguns modelos de cenário mais elaborados, que podem ser adicionados a um projeto. Este modo pode ser ativado após a conclusão da criação do projeto ou dentro de um projeto existente usando os comandos abaixo.

Para ativar o modo passo a passo usando a coleção Schematics, execute o component (alias: c) esquema:

ng g @igniteui/angular-schematics:component

Caso opte por adicionar um novo controle, você receberá uma lista dos modelos disponíveis, agrupados em categorias.

Use as teclas de seta para navegar pelas opções e ENTER para escolher a selecionada.

Para alguns modelos, como Custom Grid, por exemplo, você receberá uma lista de opções que você pode ativar. As opções podem ser alternadas com a tecla ESPAÇO:

Se você optar por adicionar um cenário ao seu aplicativo, também obterá uma lista dos modelos de cenário disponíveis:

Depois de adicionar um modelo ao seu aplicativo, você será perguntado se deseja concluir o processo ou prosseguir com a adição de mais controles. Quando você optar por concluir o processo, os pacotes necessários serão instalados (na criação do projeto) e o aplicativo será servido e aberto em seu navegador padrão.

Você sempre pode adicionar mais visualizações Ignite UI for Angular ao seu aplicativo no último momento usando o ng g @igniteui/angular-schematics:c [template] [name] comando.