Introdução ao Ignite UI for Angular Schematics
Para começar, instale Ignite UI for Angular Schematics globalmente:
npm i -g @igniteui/angular-schematics
A instalação acima tornará os esquemas disponíveis para usar um parâmetro de coleta para ong new comando.
Se você está usandoyarn o gerenciador de pacotes:
yarn global add @igniteui/angular-schematics
Using guided experience
A maneira mais curta e fácil de inicializar um aplicativo é usar o guia passo a passo usando Ignite UI for Angular Esquemas.
Para ativar a guia usando o Ignite UI for Angular Esquemas, execute:
ng new --collection="@igniteui/angular-schematics"
Create a new project
Para criar uma aplicação configurada para usar os controles Ignite UI for Angular, execute ong new comando que fornece@igniteui/angular-schematics para a opção de coleção.
ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav
Além disso, ao definir otype projeto dessa forma--type=igx-ts-legacy, você pode especificar que prefere que seu projeto seja gerado usando bootstrapping baseado em módulo. Não especificar isso fará que o projeto seja padrão que use componentes independentes.
Se você já tem um projeto Angular, criado sem fornecer a@igniteui/angular-schematics coleção descrita acima, pode adicionar o produto Ignite UI for Angular, usando o seguinte comando:
ng add igniteui-angular
A nova aplicação é criada em um diretório com o mesmo nome (newAngularProject). Existem vários modelos de projeto entre os quais você pode escolher ao criar um aplicativo Ignite UI for Angular:
| ID do modelo | Descrição do modelo |
|---|---|
| vazio | Estrutura do projeto com roteamento e uma página inicial |
| navegação lateral | Estrutura do projeto com gaveta de navegação lateral |
| autenticação de navegação lateral | Projeto de navegação lateral estendido com módulo de autenticação de usuário. Angular tópico Modelo de Projeto de Autenticação aborda o modelo de projeto em detalhes. |
Além disso, você pode especificar argumentos para controlar o tema ou ignorar a instalação de pacotes:
nome
name(pseudônimo:-n)
O nome do aplicativo. O aplicativo é criado dentro de um diretório com o mesmo nome.
framework(Ignite UI CLI apenas)
--framework(pseudônimo:-f) Valor padrão: "jquery"
Framework para configurar o projeto. As estruturas suportadas são jQuery, Angular e React.
type( somente Ignite UI CLI)
--type(pseudônimo:-t)
Os tipos de projeto disponíveis dependem da estrutura selecionada.
tema
--theme(pseudônimo:-th)
Tema do projeto (depende do tipo de projeto).
pular-git
--skip-git(pseudônimo:--sg)
Quando esta opção for usada, a inicialização automática do repositório com o Git será ignorada. Se a opção for omitida, a propriedade de configuração global skip-git será usada.
pular-instalar
--skip-install(pseudônimo:--si)
Onew comando instalará dependências de pacotes na criação do projeto. Passar por essa bandeira pula a instalação inicial.
modelo
--template
Use essa opção se houver modelos de projeto diferentes para um tipo de estrutura específico. Atualmente, esta opção está disponível apenas para Ignite UI for Angular tipos de projeto igx-ts.
Add template
Para adicionar um dos modelos de Ignite UI Angular disponíveis, você precisa fornecer o ID do modelo e um nome para o novo componente ou usar o Guia Passo a Passo. Seu uso é suportado apenas dentro de projetos existentes criados com os Angular Esquemas, Ignite UI CLI ou onde Ignite UI for Angular foi instalado.ng add
Com Schematics, useng generate com a coleção Ignite UI for Angular ecomponent [template] [name]:
ng g @igniteui/angular-schematics:component grid newGrid
Lista de todos os modelos disponíveis.
Além disso, você pode especificar o módulo no qual o componente será registrado ou ignorar a geração automática da rota de navegação do aplicativo:
módulo
--module(pseudônimo:-m)
Nota: O argumento module é aplicável somente em projetos Angular.
Caminho para o arquivo module.ts, relativo à pasta /src/app/, para o módulo onde o novo componente deve ser registrado:
ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
Pular rota
--skip-route(pseudônimo:-srk)
Não gere automaticamente uma rota de navegação do aplicativo para o novo componente
Run the application
Ostart esquema vai construir a aplicação, iniciar um servidor web e abri-lo no seu navegador padrão.
ng g @igniteui/angular-schematics:start