Angular 2/4 - Apresentando o Angular CLI - II

 Neste artigo vou apresentar o Angular CLI a ferramenta de linha de comando para automatizar o desenvolvimento de aplicações Angular 2/4. Adicionando um novo componente.

Vamos continuar adicionando recursos em nossa aplicação Angular,  criada na primeira parte do artigo, usando o Angular CLI.

Neste artigo vamos adicionar um novo componente.

Um Component controla uma view, de acordo com seletores, e pode usar providers, directives e templates. No Angular 2 'tudo é um componente'.

Adicionando um novo componente

Para adicionar um novo componente chamado VerificaLoginComponent execute o seguinte comando : ng  generate component verifica-login

O Angular CLI irá ajustar automaticamente as letras do nome do arquivo e do nome do componente para você, então os seguintes comandos têm o mesmo efeito:

ng generate component verifica-login
ng generate component verificaLogin
ng generate component VerificaLogin

Veja na figura abaixo os arquivos do componente gerado na pasta src\app\verifica-login  e ao lado o componente VerificaLoginComponent criado no arquivo verifica-login.component.ts e usando o seletor 'app-verifica-login' :

 
 

Nos bastidores, acontece o seguinte:

- um diretório src/app/verifica-login é criado
- neste diretório são gerados 4 arquivos:
   1- um arquivo CSS para os estilos de componentes : verifica-login.component.css
   2- um arquivo HTML para o modelo de componente : verifica-login.component.html
   3- um arquivo TypeScript com uma classe componente chamada VerificaLoginComponent seletor app-verifica-login : verifica-login.component.ts
   4- um arquivo de especificação com testes de unidade de amostra para o seu novo componente : verifica-login.component.espec.ts

Além disso uma referência a VerificaLoginComonent é adicionada como uma declaração no decorator @NgModule do módulo mais próximo, neste caso o módulo AppModule do arquivo src/app/ app.module.ts



Opções disponíveis

--flat: boolean, default false, gera os arquivos do componente na pasta src/app ao invés da pasta src/app/verifica-login
--inline-template: boolean, default false, usa um template inline ao invés de um arquivo HTML separado
--inline-style: boolean, default false, usa estilos inline ao invés de um arquivo CSS separado
--prefix: boolean, default true, usa o prefixo especificado em .angular-cli.json no selector do componente
--spec: boolean, default true, gera um arquivo spec com testes unitários.
--view-encapsulation: string, especifica a estratégia de encapsulamento vista
--change-detection: string, especifica a estratégia de detecção de mudanças
--help : vê todas as opções disponíveis do Angular CLI

Exemplos:
Gerar componente 'verifica-login' : ng generate component verifica-login

Gerar componente 'verifica-login' com template e estilo inline : ng generate component verifica-login --inline-template --inline-styles

No próximo artigo vamos adicionar uma nova diretiva.

O anjo do Senhor acampa-se ao redor dos que o temem, e os livra.
Salmos 34:7

Referências:

José Carlos Macoratti