Angular e diretivas

Prévia do material em texto

DESENVOLVIMENTO 
PARA DISPOSITIVOS 
MÓVEIS
Fabiano Gonçalves dos Santos
Angular e diretivas
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Descrever a utilização do Angular no desenvolvimento de aplicativos 
móveis.
 � Explicar o uso de diretivas do Angular. 
 � Praticar o uso de serviços do Angular no desenvolvimento de um 
pequeno exemplo.
Introdução
Provavelmente você conhece o framework Angular, sobretudo se já 
programou para a Web, mas uma pergunta comum é “de qual Angular 
se trata?”. Escrito em 2009, o AngularJS era chamado de Angular e, 
desde sua criação, foi mantido pelo Google, o que fez muita gente ficar 
interessada e começar a trabalhar com ele. Seu grande sucesso ocorreu 
porque ele possuía código aberto, oferecia vários recursos inovadores 
para a época e era baseado na linguagem JavaScript.
Em 2014, surgiu o Angular 2, no qual as mudanças introduzidas foram 
muito grandes a ponto de ser considerado diferente do original Angular, 
levando o mercado a ter dois frameworks distintos: o AngularJS original 
e o Angular. Os quase quatro anos de diferença fizeram uma grande 
comunidade existir em torno do AngularJS, de forma que ele é mantido 
e suportado até hoje.
Neste capítulo, você estudará a utilização do Angular no desenvolvi-
mento de aplicativos móveis, o uso de suas diretivas e como empregar 
seus serviços ao desenvolver um pequeno exemplo.
Angular e dispositivos móveis
Desde sua criação, o Angular teve como objetivo facilitar o desenvolvimento 
de aplicações para a Web e os dispositivos móveis, uma vez que estes têm 
recursos para executarem as aplicações para Web, chamadas também de 
aplicações híbridas, de acordo com Deitel, Deitel e Wald (2016).
Uma aplicação híbrida tem como principal característica combinar os 
recursos nativos da plataforma na qual está sendo executada (Android ou 
iPhone Operating System [iOS]) com os recursos próprios da Web, utilizando 
linguagens como Hypertext Markup Language versão 5 (HTML5), Cascading 
Style Sheets (CSS) e JavaScript. Muitas aplicações usadas nos dispositivos 
são assim e, quando uma delas requer um uso mais específico da plataforma, 
surge a aplicação nativa.
Existem vantagens e desvantagens nos dois lados. Por exemplo, uma 
das grandes vantagens da aplicação híbrida é o fato de desenvolver uma 
aplicação sem considerar muito a plataforma na qual será executada, pois 
o mesmo desenvolvimento feito para uma plataforma rodará na outra sem 
maiores adaptações. No caso do Angular para dispositivos móveis, refere-se 
às aplicações híbridas.
Portanto, quando se trata de desenvolvimento com o Angular para disposi-
tivos móveis, cria-se aplicações em HTML, CSS e JavaScript com a ajuda de 
um framework escrito para tornar as aplicações mais interativas e interessantes, 
além de ser produtivo e possuir vários recursos para o desenvolvimento.
Uma aplicação feita em Angular é constituída de componentes (compo-
nents), que, basicamente, são uma forma de criar tags que serão reconhecidas 
pelo browser. Na Figura 1, você consegue agrupar os elementos para gerar 
componentes que sejam reutilizáveis? Considere que esses componentes podem 
ser construídos de forma incremental, criando os menores e acrescentando 
elementos e/ou funções a eles.
Angular e diretivas2
Figura 1. Exemplo de uma tela de um aplicativo de gestão de estoques.
Observando a Figura 1, você pode perceber três componentes principais: 
o componente de navegação (mostrado pela flecha 1), o componente de menu 
hierárquico, conhecido como breadcrumb (mostrado pela flecha 2) e a lista de 
produtos (mostrada pela flecha 3), esta pode ser composta de um componente 
menor, chamado de linha de produto. Assim, três linhas de produtos formam 
a lista de produtos.
A linha de produto, por sua vez, ainda pode ser decomposta em compo-
nentes menores como uma imagem para o produto, um texto para a descrição 
do produto e outro texto para o preço. Lembre-se que, como se trata de uma 
aplicação, esses elementos são lidos do banco de dados e montados dinami-
camente na tela.
Na Figura 2, você pode ver como estruturar a aplicação de acordo com os 
seus componentes.
3Angular e diretivas
Figura 2. Exibição em árvore do aplicativo de gestão de estoque.
Barra de navegação Lista de produtos Breadcrumbs
Linha de produto Linha de produto Linha de produto
Imagem Descrição Preço
Aplicativo de gestão 
de estoque
Como você observou na Figura 2, pode-se estruturar a tela da aplicação 
em uma árvore de componentes em que a raiz é o aplicativo, abaixo do qual 
há os três componentes principais: a barra de navegação, a lista de produtos 
e os breadcrumbs. Depois, está a decomposição da lista de produtos nas três 
linhas de produtos e, por fim, cada linha de produto pode ser decomposta em 
uma imagem, uma descrição e o preço.
Assim, criar uma aplicação em Angular consiste, basicamente, em arquitetar 
os componentes que podem ser usados, implementá-los e, em seguida, combiná-
-los nas posições projetadas. Agora, deve-se saber como usar a linguagem do 
Angular para isso, mas lembre-se de utilizá-la juntamente aos conceitos de 
HTML5, CSS e JavaScript, que você já conhece.
A seguir, veja como é possível implementar um destes componentes, sem 
se preocupar com a sintaxe e o pleno entendimento nesse momento.
@Component({
 selector: 'lista-produtos',
 template: `
 <div class="lista-produtos">
 <linha-produto *ngFor="#let produto of produtos"
 [produto]="produto"
Angular e diretivas4
 (click)='clicked(produto)'>
 </linha-produto>
 </div>
 `
})
class ListaProdutos {
 @Input() produtos: Produto[];
 @Output() selecionado: EventEmitter;
 constructor(){
 this.selecionado = new EventEmitter();
 }
 clicked(produto) {
 this.selecionado.emit(produto);
 }
}
Diretivas do Angular
Segundo sua documentação oficial (INTRODUCTION..., 2019, documento 
on-line), as diretivas ou directives são marcadores no código HTML. Durante 
os seus estudos, você perceberá que os componentes podem ser uma diretiva 
em Angular, a diferença é que eles se tornam uma diretiva com um template. 
Muitas vezes, você lerá que os componentes seriam a base das aplicações em 
Angular ou seus blocos de construção, mas, na verdade, as diretivas que são 
esses blocos.
A diretiva é uma função executada sempre que o compilador do Angular 
a encontra no Document Object Model ou Modelo de Objeto de Documento 
(DOM). As diretivas do Angular servem para estender o poder do HTML, 
dando uma nova sintaxe a ele e criando tags. Cada diretiva tem um nome, já 
existente no Angular ou criada por desenvolvedores, e determina onde será 
usada: no elemento, atributo, classe ou comentário.
De forma resumida, as diretivas são elementos que farão parte do DOM, 
especificando como colocar os componentes e a regra de negócio dentro do 
Angular. Elas se separam em três tipos: componentes, atributos e estruturais, 
sendo criadas em JavaScript e declaradas como @directive.
5Angular e diretivas
Os componentes são diretivas com templates (STRUCTURAL..., 2019, 
documento on-line), usam, de forma discreta, a Application Programming 
Interface (API) de diretivas e definem-nos de modo mais claro. As outras duas 
diretivas não possuem templates, em vez disso, elas são feitas especificamente 
para manipular o DOM. As diretivas de componentes são usadas na classe 
principal (main class) e contêm os detalhes de como o componente deve ser 
processado, instanciado e utilizado na execução.
As diretivas de atributos manipulam o DOM, mudando seu comportamento 
e sua aparência, por exemplo, ao aplicar estilos condicionais em elementos, 
mostrar ou esconder os elementos dinamicamente, ou mudar sua propriedade 
de acordo com alguma condição.
Já as diretivas estruturais são especificamente usadas para criar e destruir 
elementos do DOM. Algumas diretivas de atributo, como o hidden (mostra 
ou esconde um elemento), mantêm o DOM como está, mas as estruturais não 
trabalham dessaforma, e sim removem ou colocam tal atributo no DOM. Logo, 
mexer com diretivas estruturais altera a estrutura do DOM. Elas também 
começam com um “*”, por exemplo *ngIf, *ngFor, etc.
No Quadro 1, você pode observar as diferenças entre as diretivas de atributo 
e as estruturais, de acordo com Scarpino (2017).
Fonte: Adaptado de Scarpino (2017).
Diretiva de atributo Diretiva estrutural
Parece com um atributo HTML 
normal e é usada, principalmente, 
em databinding (vinculação e 
sincronização de dados) e event 
binding (sincronização de eventos).
Começa com “*” e possui uma 
aparência diferente no código.
Afeta somente o elemento 
no qual ela está aplicada.
Afeta toda a estrutura do DOM.
Quadro 1. Diferenças entre diretivas de atributo e estruturais
Angular e diretivas6
Uso das diretivas existentes do Angular
Usar as diretivas do Angular é bem fácil, sendo a ngClass um bom exemplo 
de uma diretiva de atributo, conforme você pode ver no código a seguir:
1 <p [ngClass] = "{'azul'=true, 'amarelo'=false}">
2 Diretivas são legais!
3 </p>
4 <style>
5 .azul { color: blue }
6 .amarelo {color: yellow}
7 </style>
Ao usar a diretiva ngClass, coloca-se a classe azul no elemento <p> 
(linha 1) e, explicitamente, não se insere a classe amarelo. Assim, desde que 
se mude o estilo da classe e não se altere a estrutura do HTML, é claramente 
uma diretiva de atributo. O Angular também possui outras diretivas, como o 
ngIf, observe o exemplo a seguir:
1 @Component({
2 selector: 'ng-if-simples',
3 template: `
4 <button (click)="show = !show">{{show ? 'hide' : 'show'}}</
button>
5 show = {{show}}
6 <br>
7 <div *ngIf="show">Texto de Exemplo</div>
8 `
9 })
10 class NgIfSimples {
11 show: boolean = true;
12 }
No exemplo anterior, a diretiva ngIf foi usada para adicionar ou remover 
o texto usando um botão, por isso, a estrutura do HTML foi modificada, logo, 
é uma diretiva estrutural.
7Angular e diretivas
Para ver uma lista completa das diretivas disponíveis, acesse a documentação oficial 
no link a seguir. 
https://qrgo.page.link/CwTTS
Conforme você estudar mais sobre o Angular, perceberá que criar diretivas 
é bem simples. O poder do Angular está na sua habilidade de gerar as próprias 
diretivas e, para isso, ele possui uma API descomplicada.
Criação de diretivas em Angular
A fim de entender melhor como funcionam as diretivas em Angular, você 
verá a criação de algumas delas usando exemplos. É importante que você 
pratique esses exemplos e crie com eles novas possibilidades para absorver 
bem o assunto.
Criação de uma diretiva de atributo
Criar uma diretiva de atributo é como gerar um componente, porém, usando o 
decorator @Directive. O exemplo mostra a criação de uma diretiva chamada 
meu-erro, que colocará um fundo vermelho no elemento para indicar um erro.
O próximo exemplo é uma aplicação padrão gerada pelo setup do Angular, 
com a qual se pode adaptar o código. Existem, basicamente, duas formas de 
criar uma diretiva: a primeira é usar a linha de comando por meio de uma 
instrução do Angular, a qual gerará alguns arquivos; e a segunda cria arquivo 
por arquivo. Para usar a linha de comando, digita-se a seguinte instrução:
ng generate directive meu-erro
Essa instrução gerará dois arquivos importantes: src/app/meu-erro.
directive.spec.ts e src/app/meu-erro.directive.ts, so-
brescrevendo o src/app/app.module.ts com uma pequena alteração. 
Portanto, pode-se usar uma instrução que gera os arquivos automaticamente 
ou criá-los um a um, conforme você pode ver a seguir.
Angular e diretivas8
Inicia-se criando o arquivo app.meu-errodirective.ts no diretório 
src/app, com o código a seguir (os números que iniciam cada linha não 
devem ser digitados, eles servem para a explicação do código apenas):
1: import { Directive, ElementRef } from '@angular/core';
2: 
3: @Directive({
4: selector: '[meu-erro]'
5: })
6: export class MeuErroDirective {
7: constructor(elr:ElementRef) {
8: elr.nativeElement.style.background='red';
9: }
10: }
Observando o código, você pode notar uma importação da Directive 
do pacote @angular/core na linha 1. Já na criação da diretiva na linha 3, 
usa-se o seletor ‘meu-erro’.
É uma boa prática de programação usar um prefixo ao criar diretivas para 
evitar conflitos com os atributos HTML e o uso do prefixo “ng”, pois este é 
empregado pelo Angular, assim, não é necessário misturar seus prefixos com 
os já definidos por ele. Nesse caso, para você saber que é uma diretiva sua, 
utiliza-se o prefixo “meu” ou “meu-”.
Já na linha 6, cria-se uma classe chamada MeuErroDirective. Para 
acessar qualquer elemento do DOM, deve-se usar o ElementRef, o qual 
também foi importado na linha 1. Depois, adiciona-se o código para dar o 
efeito no construtor da classe nas linhas 7 a 9.
Para usar essa nova diretiva, deve-se adicioná-la na declaração do arquivo 
app.module.ts, conforme você pode ver a seguir:
1: import { BrowserModule } from '@angular/platform-browser';
2: import { NgModule } from '@angular/core';
3: 
4: import { AppComponent } from './app.component';
5: import { MeuErroDirective } from './meu-erro.directive';
6: 
7: @NgModule({
8: declarations: [
9: AppComponent,
9Angular e diretivas
10: MeuErroDirective
11: ],
12: imports: [
13: BrowserModule
14: ],
15: providers: [],
16: bootstrap: [AppComponent]
17: })
18: export class AppModule { }
Feito isso, finalmente pode-se usá-la em algum arquivo da aplicação e, 
para habilitá-la, deve-se editar o arquivo app.component.ts: 
1: import { Component } from '@angular/core';
2: 
3: @Component({
4: selector: 'app-root',
5: templateUrl: './app.component.html',
6: styleUrls: ['./app.component.css']
7: })
8: export class AppComponent {
9: titulo = 'my-app';
10: }
Na linha 5, note que há o caminho do template aplicado ao componente ./
app.component.html. Você pode ver o código do app.component.
html a seguir, percebendo, na linha 2, o uso da diretiva meu-erro no 
elemento h1:
1: <div style="text-align:center">
2: <h1 meu-erro>
3: Bem-vindo(a) à {{ titulo }}!
4: </h1>
5: </div>
Na Figura 3, você pode conferir, visualmente, o resultado do exemplo.
Angular e diretivas10
Figura 3. Aplicação da diretiva meu-erro.
Criação de uma diretiva estrutural
O processo de criação de uma diretiva estrutural é exatamente igual ao de uma 
diretiva de atributo usando o Angular. Pode-se usar a linha de comando ou 
criar arquivo por arquivo, porém, deve-se adaptar o código à sintaxe correta.
Neste exemplo, será criada uma cópia da diretiva ngIf. Assim, você não 
estará apenas implementando-a, como também verificando como as diretivas 
do Angular lidam com tudo internamente. Começa-se com o arquivo app.
meu-if.directive.ts, conforme você pode ver a seguir:
1: import { Directive, Input, TemplateRef, ViewContainerRef } 
from '@angular/core';
2: 
3: @Directive({
4: selector: '[meuIf]'
5: })
11Angular e diretivas
6: export class MeuIfDirective {
7: 
8: constructor(
9: private templateRef: TemplateRef<any>,
10: private viewContainer: ViewContainerRef) { }
11: 
12: @Input() set meuIf(condicao: boolean){
13: if(condicao){
14: this.viewContainer.createEmbeddedView(this.templateRef);
15: }
16: else {
17: this.viewContainer.clear();
18: }
19: }
20: }
Como você pode perceber, usa-se alguns import diferentes, principal-
mente Input, TemplateRef e ViewContainerRef. O decorator Input 
na linha 12 é usado para passar os dados para o componente; e o TemplatRef 
da linha 9, para instanciar as embedded views (visões embarcadas).
A visão embarcada representa uma parte de um layout a ser renderizado 
na tela e é ligada a um template; já o ViewContainerRef se trata de um 
container nos quais uma ou mais visões podem ser colocadas. Juntos, esses 
componentes funcionam assim: as diretivas têm acesso ao container de visão 
(container view) injetando um ViewContainerRef.As visões embarcadas 
são criadas e colocadas no container, chamando o método createEmbe-
ddedView de ViewContainerRef passado no template, o qual possui a 
diretiva para ver a passagem do TemplateRef injetado.
Agora, adiciona-se alguns decorators, editando e atualizando o arquivo 
app.module.ts:
1: import { BrowserModule } from '@angular/platform-browser';
2: import { NgModule } from '@angular/core';
3: 
4: import { AppComponent } from './app.component';
5: import { MeuErroDirective } from './meu-erro.directive';
6: import { MeuIfDirective } from './meu-if.directive';
7: 
Angular e diretivas12
8: @NgModule({
9: declarations: [
10: AppComponent,
11: MeuErroDirective,
12: MeuIfDirective
13: ],
14: imports: [
15: BrowserModule
16: ],
17: providers: [],
18: bootstrap: [AppComponent]
19: })
20: export class AppModule { }
Depois, o arquivo app.components.ts também é editado e atualizado:
1: import { Component } from '@angular/core';
2: 
3: @Component({
4: selector: 'app-root',
5: templateUrl: './app.component.html',
6: styleUrls: ['./app.component.css']
7: })
8: export class AppComponent {
9: titulo = 'my-app';
10: condicao = false;
11: nome = 'Angular';
12: }
O tipo de abordagem fornecido pelas diretivas estruturais é muito útil, 
como quando se precisa mostrar informações diferentes para vários usuários 
com base em suas permissões. Por exemplo, um administrador do site deve 
conseguir ver e editar tudo, já um usuário normal, não. Se você carregar 
informações privadas no DOM usando uma diretiva de atributo, o usuário 
regular e todos os outros desse assunto teriam acesso a ele.
Na Figura 4, você pode observar o resultado da aplicação da nova diretiva 
na página de exemplo.
13Angular e diretivas
Figura 4. Aplicação da diretiva meuIf.
De forma bem resumida, neste capítulo, você conheceu as diretivas do 
Angular, que compõem o núcleo das aplicações, bem como seus diferentes 
tipos e o modo de criar itens personalizados que atendam às suas necessidades.
Ao pesquisar na internet sobre as diferentes versões do Angular, você notará que a 
sequência é Angular 2, Angular 4, Angular 5, etc. e poderá surgir uma dúvida sobre 
o motivo do pulo da versão 2 para a 4. Lembre-se que o Angular original agora é 
conhecido como AngularJS, e da segunda versão em diante se conhece apenas por 
Angular. Já versão 3 não foi lançada devido a alguns componentes estarem nessa 
versão e outros ainda na 2. A forma de versionamento do Angular é a Semver (Semantic 
Versioning) e, nessa modalidade, ele alinhou todos os novos componentes na versão 
4, deixando a versão 3 sem ser lançada. Saiba mais no link a seguir:
https://qrgo.page.link/GGZw5
Angular e diretivas14
DEITEL, P.; DEITEL, H.; WALD, A. Android 6 para programadores: uma abordagem baseada 
em aplicativos. 3. ed. Porto Alegre: Bookman, 2016. 618 p.
INTRODUCTION to the Angular Docs Angular. One framework. Mobile & desktop, [S. l.], 
2019. Disponível em: https://angular.io/docs. Acesso em: 3 jul. 2019.
SCARPINO, M. Building web components with Typescript and Angular 4. Fishers: Quiller 
Technologies, 2017. 440 p.
STRUCTURAL Directives. Angular. One framework. Mobile & desktop, [S. l.], 2019. Disponível 
em: https://angular.io/guide/structural-directives. Acesso em: 3 jul. 2019.
Leituras recomendadas
APRENDENDO HTML: Guias e tutoriais. Mozilla Developer Network, [S. l.], 2019. Disponível 
em: https://developer.mozilla.org/pt-BR/docs/Aprender/HTML. Acesso em: 3 jul. 2019.
DOCUMENTATION — TypeScript. Microsoft, Remond, 2019. Disponível em: https://
www.typescriptlang.org/docs/home.html. Acesso em: 3 jul. 2019.
FLANAGAN, D. Javascript: o guia definitivo. Porto Alegre: Bookman, 2013. 1080 p.
HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes. 
Porto Alegre: Bookman, 2010. 360 p.
15Angular e diretivas