Angular 2/4 - Apresentando o Angular CLI - III

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

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

Neste artigo vamos adicionar uma nova diretiva.

As diretivas do Angular estendem o código HTML, atribuindo funcionalidades aos componentes.

Adicionando uma nova diretiva

Para adicionar uma nova diretiva chamada AdminLogin usando o seletor appAdminLogin execute o seguinte comando : ng  generate directive admin-login

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

ng generate directive admin-login
ng generate directive adminLogin
ng generate directive AdminLogin

Veja na figura abaixo os arquivos da diretiva gerados na pasta src\app\ e ao lado a diretiva AdminLoginDirective criada no arquivo admin-login.directive.ts e usando o seletor 'appAdminLogin' :

 
 

Nos bastidores, acontece o seguinte:

- um arquivo src/app/admin-login.directive.ts é criado que exporta a directiva AdminLoginDirective usando o selector chamado appAdminLogin
- um arquivo src/app/admin-logindirective.spec.ts é criado com especificações de testes de unidade para a diretiva

Além disso AdminLoginDirective é adicionada como uma declaração na decorador @NgModule do módulo mais próximo, neste caso a AppModule em src/app/app.module.ts



Opções disponíveis

--flat: boolean, default true, gera os arquivos de diretiva na pasta src/app ao invés de src/app/admin-login
--prefix: boolean, default true, usao prefixo especificado em .angular-cli.json no seletor da diretiva
--spec: boolean, default true, gera o arquivo de especificações de testes unitários.
--help : vê todas as opções disponíveis do Angular CLI

Exemplos:
Gerar uma diretiva 'adminLogin' : ng generate directive admin-login
Gerar uma diretiva 'adminLogin' sem testes unitários: ng generate directive admin-login --spec=false

No próximo artigo vamos incluir o recurso enum no projeto.

"Ora, o fim do mandamento é o amor de um coração puro, e de uma boa consciência, e de uma fé não fingida."
1 Timóteo 1-5

Referências:

José Carlos Macoratti