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 deInquirer.js, veja 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 é incluído noangular.json do seu projeto. A opção personalizada gera código para uma paleta de cores e tema com nossa API de Temas naapp/styles.scss área.

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.

To activate the the step by step mode using the Schematics collection run the component(alias:c) schematic:

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, comoCustom Grid por exemplo, você receberá uma lista de opções que pode ser ativada. 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.

You can always add more Ignite UI for Angular views to your application at latter moment using the ng g @igniteui/angular-schematics:c [template] [name] command.