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.
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.
