No desenvolvimento de aplicações em Angular precisamos criar diferentes tipos de artefatos, como componentes e diretivas. É através destes dois artefatos, por exemplo, que criamos a parte visual de nossa aplicação, como caixas de texto, tabelas, entre outros. O Angular CLI facilita bastante a criação destes artefatos através de comandos específicos para isto.
Neste documento apresentaremos como criar todos os artefatos do Angular a partir do comando ng generate.
Tópicos
ng generate
O Angular CLI provê um conjunto de comandos que permitem criar todos os artefatos do Angular, como diretivas, componentes, pipes e muitos outros. A sintaxe básica para isso é:
ng generate <tipo do artefato> <nome> A seguir, serão descritos todos os comandos ng generate disponíveis.
ng generate component <nome>
Um dos artefatos mais importantes para o desenvolvimento com Angular, um componente pode ser criado de forma bastante simples, utilizando o comando ng generate component <nome>.
Exemplo de uso:
ng generate component favoritoO resultado da execução desse comando é:
ng generate component favorito
installing component
create src/app/favorito/favorito.component.css
create src/app/favorito/favorito.component.html
create src/app/favorito/favorito.component.spec.ts
create src/app/favorito/favorito.component.ts
update src/app/app.module.ts
Observe que além de criar um novo diretório e os quatro arquivos necessários para um componente, esse comando também atualiza o arquivo app.module.ts, com o objetivo de incluir nele os dados necessárias para informar ao Angular sobre esse novo componente.
Parâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 1.
|
Parâmetro |
Descrição |
|
--flat |
Flag que indica se deve ser criado um diretório no qual os arquivos do componente serão colocados. Valor padrão: true. |
|
--inline-style |
Colocar os estilos (CSS) inline, dentro do próprio arquivo ts, ao invés de criar um arquivo em separado para eles. Valor padrão: false. |
|
--inline-template |
Colocar os templates inline, dentro do próprio arquivo ts, ao invés de criar um arquivo em separado. Valor padrão: false. |
|
--prefix <string> |
Define o prefixo do seletor do componente. Caso não informado, é utilizado o prefixo padrão da aplicação (valor "app" ou outro definido a partir do parâmetro prefix do comando ng new). |
|
--spec |
Define se o arquivo de teste com extensão .spec.ts deve ser criado. Valor padrão: true. |
|
--view-encapsulation <string> |
Informa a estratégia de encapsulamento da View, que é relacionada ao uso do Shadow DOM (HTML 5) por sua aplicação de forma nativa ou emulada. |
|
--change-detection <string> |
Define a estratégia de detecção de mudanças que o componente deve usar. |
|
--skip-import |
Define se o novo componente deve ser automaticamente importado no módulo para o qual ele foi criado. Caso contrário, será necessário importá-lo manualmente. |
|
--module <string> |
Define para qual módulo da aplicação este componente deve ser criado. |
|
--export |
Define se o componente é visível para outros módulos. |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações o componente deve ser criado. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
Tabela 1. Parâmetros do comando ng generate component
ng generate directive <nome>
O comando ng generate directive é utilizado para criar uma nova diretiva. Ao executá-lo, dois novos arquivos serão criados dentro da pasta /src/app: o arquivo contendo a classe que representa a diretiva e outro contendo a classe de testes para a diretiva.
Esse comando também força a atualização do arquivo app.module.ts, para informar ao Angular a existência da nova diretiva.
Exemplo de uso:
ng generate directive upperCaseParâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 2.
|
Parâmetro |
Descrição |
|
--flat |
Flag que indica se deve ser criado um diretório no qual os arquivos do componente serão colocados. Valor padrão: true. |
|
--inline-style |
Colocar os estilos (CSS) inline, dentro do próprio arquivo ts, ao invés de criar um arquivo em separado para eles. Valor padrão: false. |
|
--inline-template |
Colocar os templates inline, dentro do próprio arquivo ts, ao invés de criar um arquivo em separado. Valor padrão: false. |
|
--prefix <string> |
Define o prefixo do seletor da diretiva. Caso não informado, é utilizado o prefixo padrão da aplicação (valor "app" ou outro definido a partir do parâmetro prefix do comando ng new). |
|
--spec |
Define se o arquivo de teste com extensão .spec.ts deve ser criado. Valor padrão: true. |
|
--view-encapsulation <string> |
Informa a estratégia de encapsulamento da View, que é relacionada ao uso do Shadow DOM (HTML 5) por sua aplicação de forma nativa ou emulada. |
|
--change-detection <string> |
Define a estratégia de detecção de mudanças que a diretiva deve usar. |
|
--module <string> |
Define para qual módulo da aplicação esta diretiva deve ser criada. |
|
--export |
Define se a diretiva é visível para outros módulos da mesma aplicação. |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações a diretiva deve ser criada. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
Tabela 2. Parâmetros do comando ng generate directive
ng generate guard <nome>
Um guard é um recurso utilizado para informar se um usuário pode navegar para uma determinada rota ou não. Ele pode ser criado através do comando ng generate guard, conforme exemplo abaixo.
Exemplo de uso:
ng generate guard UserLoggedInGuardO resultado da execução serão dois arquivos: um contendo a classe que representa o guard e outro contendo os testes dessa classe.
Parâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 3.
|
Parâmetro |
Descrição |
|
--flat |
Flag que indica se deve ser criado um diretório no qual os arquivos do guard serão colocados. Valor padrão: true. |
|
--spec |
Define se deve ser gerado o arquivo de testes (arquivo com extensão .spec.ts). |
|
--module <string> |
Define para qual módulo da aplicação este guard deve ser criado. |
Tabela 3. Parâmetros do comando ng generate guard
ng generate module <nome>
Os módulos são úteis para agregar funcionalidades em comum dentro de uma aplicação. Por exemplo, é possível criar um módulo para conter todas as funcionalidades da área de administração de sua aplicação usando o comando ng generate module, conforme exemplo abaixo.
Exemplo de uso:
ng generate module adminO resultado dessa operação é a criação de um diretório chamado admin e um arquivo, dentro dessa pasta, chamado admin.module.ts.
Parâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 4.
|
Parâmetro |
Descrição |
|
--flat |
Flag que indica se deve ser criado um diretório no qual os arquivos do módulo serão colocados. Valor padrão: true. |
|
--spec |
Define se deve ser gerado o arquivo de testes (arquivo com extensão .spec.ts). |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações o módulo deve ser criado. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
|
--routing |
Cria um módulo onde serão definidas as rotas da aplicação. Dessa forma, dentro de um módulo teremos um outro módulo responsável pela definição das rotas relacionadas. Valor padrão: falso. |
Tabela 4. Parâmetros do comandong generate module
ng generate pipe <nome>
Muito utilizado em aplicações Angular, um pipe é responsável por transformar um valor de entrada em outro valor desejado. Por exemplo, ele pode receber uma data e formatá-la para o padrão brasileiro. A criação de pipes também é bem simples usando o CLI, conforme pode ser visto no exemplo abaixo.
Exemplo de uso:
ng generate pipe dateO resultado desse comando será a criação de dois arquivos: /src/app/date.pipe.ts e /src/app/date.pipe.spec.ts. O primeiro contém a declaração da classe que representa o pipe, enquanto o segundo contém os testes.
Além disso, o arquivo /src/app/app.module.ts é atualizado para informar ao Angular a existência desse novo artefato.
Parâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 5.
|
Parâmetro |
Descrição |
|
--flat |
Flag que indica se deve ser criado um diretório no qual os arquivos do módulo serão colocados. Valor padrão: true. |
|
--spec |
Define se deve ser gerado o arquivo de testes (arquivo com extensão .spec.ts). |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações o módulo deve ser criado. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
|
--module <string> |
Define para qual módulo da aplicação este guard deve ser criado. |
|
--skip-import |
Define se o novo pipe deve ser automaticamente importado no módulo para o qual ele foi criado. Caso contrário, será necessário importá-lo manualmente. |
|
--export |
Define se o pipe é visível para outros módulos da mesma aplicação. |
Tabela 5. Parâmetros do comando ng generate pipe
ng generate service <nome>
Os serviços são úteis para separar toda a lógica que não está relacionada à visão em classes separadas como, por exemplo, o acesso a uma API para obter dados para exibição na tela. Para criar um serviço usando o CLI, basta executar o comando ng generate service.
Exemplo de uso:
ng generate service apiO resultado disso será a criação do arquivo /src/app/api.service.ts contendo a classe que representa o serviço e o arquivo /src/app/api.service.spec.ts, que contém os testes dessa classe.
Parâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 6.
|
Parâmetro |
Descrição |
|
--flat |
Flag que indica se deve ser criado um diretório no qual os arquivos do módulo serão colocados. Valor padrão: true. |
|
--spec |
Define se deve ser gerado o arquivo de testes (arquivo com extensão .spec.ts). |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações o módulo deve ser criado. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
|
--module <string> |
Define para qual módulo da aplicação este guard deve ser criado. |
Tabela 6. Parâmetros do comando ng generate service
ng generate class <nome>
Além de artefatos do Angular, o Angular CLI também pode criar artefatos que são puramente TypeScript, como classes, enums e interfaces. Por exemplo, o comando ng generate class cria um arquivo com o nome informado e que será colocado dentro da pasta /src/app/. Dentro desse arquivo haverá uma classe básica escrita em Typescript, cujo o nome é o mesmo do arquivo.
Exemplo de uso:
ng generate class produtoA execução desse comando criará o arquivo /src/app/produto.ts contendo uma classe chamada Produto.
Parâmetros
Para esse comando, podemos especificar os parâmetros apresentados na Tabela 7.
|
Parâmetro |
Descrição |
|
--spec |
Define se deve ser gerado o arquivo de testes (arquivo com extensão .spec.ts). |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações a classe deve ser criada. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
Tabela 7. Parâmetros do comando ng generate class
ng generate enum <nome>
De forma similar ao comando para criar uma classe, também é possível utilizar o Angular CLI para gerar um enum em TypeScript. A única diferença é a mudança da palavra class para enum, conforme exemplo abaixo. Nesse caso, também teremos a criação de um novo arquivo em /src/app, que conterá a declaração de um enum.
Exemplo de uso:
ng generate enum situacaoProdutoO comando do exemplo cria o arquivo /src/app/status-produto.ts contendo um enum chamado SituacaoProduto.
Parâmetros
Para esse comando, podemos especificar apenas o parâmetro --app <string>.
|
Parâmetro |
Descrição |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações o enum deve ser criado. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
ng generate interface <nome>
A interface é outro artefato do TypeScript que pode ser criado com o Angular CLI. A regra é similar ao que foi feito para gerar classes e enums.
Exemplo de uso:
ng generate interface IProdutoServiceA execução desse comando criará um arquivo /src/app/iproduto-service.ts contendo a declaração de uma interface com nome IProdutoService.
Parâmetros
Para esse comando, podemos especificar apenas o parâmetro --app <string>.
|
Parâmetro |
Descrição |
|
--app <string> |
É possível definir várias aplicações no arquivo angular-cli.json contendo diferentes configurações. Este parâmetro especifica para qual dessas aplicações a interface deve ser criada. Por padrão, é a primeira aplicação informada no arquivo angular-cli.json. |
Exemplo prático
Suponha que seja necessário criar um novo componente para seu projeto e você não deseja que seja criado um diretório ou arquivos de teste para ele. Para tal, você deve usar o comando abaixo:
ng generate component Favorito --flat --spec falseCom esse componente criado, suponha que agora você precisa de um serviço para se comunicar com uma API externa para obter dados. Entretanto, você não quer arquivos de testes, mas gostaria que esse serviço fosse criado dentro de um diretório próprio. Para fazer isso, utilize o comando abaixo:
ng generate service API --spec false --flat false
