Pensando como um componente no Angular

(Parte 1 de 3)

Quando se fala em framework para o front-end, o primeiro conceito que devemos pensar são sobre componentes. Nos dias de hoje, a base de tudo gira em torno desse conceito. Usando um único nome, as diretivas são responsáveis por empacotar códigos relevantes, reutilizáveis e testáveis.

Imagem no Flickr

Você não deve ter notado, mas quase tudo que usamos no AngularJS é uma diretiva. O conceito de diretivas é o que faz este framework ser tão poderoso.

Um dos casos de uso mais comuns de diretivas é o de poder criar componentes reutilizáveis e customizáveis. Para ter uma ideia de como isso funciona, vamos dar uma olhada mais de perto no conceito de diretivas do Angular.


Qual é o público alvo?

  • Interessados em aprender e praticar a força de vontade
  • Iniciantes no mundo do AngularJS

Objetivos técnicos

  • Código limpo e de fácil compreensão
  • Componentização e reutilização de código

Pré-requisitos

  • Editor de textos preferido
  • Entender o básico de HTML, CSS e JavaScript

O que é uma diretiva?

Diretivas são claramente extensões da linguagem HTML, escrito de forma declarativa. No HTML, por exemplo, para centralizar o texto em uma tabela com uma imagem é usado o atributo align. Dessa forma:

Assim, todo o conteúdo dentro dessa coluna estará alinhado ao centro. O HTML é uma linguagem de marcação declarativa que define os elementos e a estrutura de uma página.

O AngularJS vem com um conjunto de diretivas comuns por padrão, que são úteis para a construção de qualquer aplicativo web ou mobile. Você já deve ter visto diretivas como: ng-app, ng-controller, ng-repeat, ng-model e ng-bind em algum de nossos codelabs. Como no exemplo:

Além disso, você pode estender o HTML para criar o seu próprio componente web atráves das diretivas do Angular. E ainda se estiver interessado sobre Web Components, recomendo ver o Polymer.

Anatomia de uma diretiva

Existem várias opções que podem ser atribuidas à uma diretiva. Como:

Essa é uma forma de declaração de diretiva, também conhecido como Directive Definition Object.

Melhor Prática: É recomendado usar a forma de Objeto de Definição de Diretiva (Directive Definition Object).

Neste tutorial focaremos em algumas das opções mais simples para a definição de uma diretiva.

Mão na massa

Agora, começaremos a criar uma diretiva bem básica e, ao longo do caminho, destrincharemos algumas das opções que as diretivas nos fornecem.

Uma diretiva é criada da mesma forma que um controller, service e filter. O método .directive() permite criar uma diretiva que recebe um nome e uma função. Essa função retorna uma lista de opções chamada de objeto de definição de diretiva. Vamos ver como isso funciona na prática:

Definimos a nossa diretiva com o nome minhaDiretiva e uma função contendo a lista de opções necessárias para a configuração da diretiva.

Por padrão, nossa diretiva pode ser declarada como um elemento ou um atributo em nosso HTML. Podendo ser usada somente como <minha-diretiva></minha-diretiva> e <div minha-diretiva></div>.

Vale lembrar que sempre nos referimos a uma diretiva pelo seu case-sensitive camelCase. Ou seja, o nome da sua diretiva deve seguir como minhaSegundaDiretiva e, no HTML, declarar <minha-segunda-diretiva>.

Diretivas são case-sensitive camelCase.

Até o momento definimos a opção template como sendo parte da configuração do objeto de definição de diretiva, da seguinte maneira:

Nesse exemplo, o AngularJS substitui o conteúdo do elemento em que a diretiva foi colocada pelo valor que estiver na opção template.

Além da opção template, também podemos usar a opção templateUrl. Nesse caso, o AngularJS irá acessar diretamente o arquivo HTML que for indicado no templateUrl.

Vamos ver como como fica nossa diretiva:

E aqui o conteúdo do arquivo template_diretiva.html:

Definimos a diretiva minhaDiretiva e usando as chaves template e templateUrl, o conteúdo é inserido quando nossa diretiva for encontrada pelo AngularJS. Internamente usamos a diretiva para alterar uma determinada parte do HTML.

Essa foi uma pequena introdução sobre o conceito de componentes que o Angular pode nos proporcionar. Fique ligado na parte II deste tutorial.


Like what you read? Give Leandro Parazito a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.