Assunto 06 - Angular e diretivas

Prévia do material em texto

<p>Angular e diretivas</p><p>Apresentação</p><p>Você já deve ter percebido o quanto a área de desenvolvimento de dispositivos móveis tem</p><p>crescido rapidamente. Atualmente, é muito difícil encontrar alguém que não use algum tipo de</p><p>dispositivo como smartphone, tablet, relógio inteligente e outros tipos. Um dos grandes apelos</p><p>desses dispositivos é ter uso fácil, ser agradável e interativo e, para isso, quem trabalha com</p><p>desenvolvimento para esse tipo de equipamento precisa conhecer alguns recursos que tornam o</p><p>trabalho de criação de software mais produtivo, como é o caso do Angular.</p><p>O Angular é um framework muito versátil, o qual é capaz de criar aplicações para a Web e para</p><p>dispositivos móveis. Com ele é possível criar aplicações com animações, menus, gráficos e outros</p><p>muitos elementos que tornam as aplicações mais interativas e usáveis.</p><p>Nesta Unidade de Aprendizagem, você conhecerá um recurso fundamental do Angular: as diretivas,</p><p>as quais, para quem já está acostumado, nada mais são do que uma classe em Javascript, mas com</p><p>alguns poderes importantes. Além disso, verá que elas podem ser de três tipos: componentes,</p><p>estruturais e atributos.</p><p>Bons estudos.</p><p>Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:</p><p>Descrever a utilização do Angular no desenvolvimento de aplicativos móveis.•</p><p>Explicar o uso de diretivas do Angular.•</p><p>Praticar o uso das diretivas do Angular no desenvolvimento de um pequeno exemplo.•</p><p>Desafio</p><p>Desenvolver aplicações em Angular envolve conhecer vários assuntos, como, por exemplo, mostrar</p><p>dados, criar entradas de dados interativos com o usuário, trabalhar com estilos e aplicar em páginas</p><p>HTML para torná-las mais interativas e usáveis. Uma dessas formas é criar diretivas e aplicá-las em</p><p>elementos HTML.</p><p>Por meio de diretivas, e um pouco de pesquisa na documentação do Angular, é possível customizar</p><p>uma caixa de entrada (input) em HTML, de forma que à medida que o usuário digitar um número de</p><p>cartão de crédito, a diretiva mostre uma imagem da bandeira Blastercard, Vista ou Brazilian</p><p>Express, dependendo da entrada de dados. O seu Desafio é criar essa diretiva e aplicá-la em um</p><p>formulário de entrada de dados.</p><p>Desenvolva um pequeno script contendo uma diretiva chamada “logoCC” para customizar uma</p><p>entrada de dados do tipo texto (input type="text") de acordo com o que foi especificado.</p><p>Para resolver o Desafio, você vai precisar de algumas dicas:</p><p>– Os cartões da Brazilian Express sempre começam com 37.</p><p>– Os cartões da Vista começam sempre com o número 4.</p><p>– Os cartões da Blastercard sempre começam com 5.</p><p>Para padronizar, salve as imagens em uma pasta dentro da pasta do seu projeto no seguinte path:</p><p>"my-app\src\assets\img\". Cada bandeira de cartão de crédito tem uma imagem diferente. Veja a</p><p>imagem a seguir como exemplo:</p><p>Infográfico</p><p>Toda linguagem de programação ou framework, como é o caso do Angular, tem estruturas que são</p><p>como blocos de construção para fundamentar os aplicativos. No caso do Angular, há as diretivas</p><p>que compõem os blocos de construção dos scripts.</p><p>Neste Infográfico, você vai ver os tipos de diretivas existentes no Angular.</p><p>Aponte a câmera para o</p><p>código e acesse o link do</p><p>conteúdo ou clique no</p><p>código para acessar.</p><p>https://statics-marketplace.plataforma.grupoa.education/sagah/0d3e04f7-4fe2-4d75-b2c9-d00d1e33ef1b/85832a32-8773-4221-9b23-6181392831d6.jpg</p><p>Conteúdo do livro</p><p>O Angular é um dos frameworks para a Web e dispositivos móveis mais versáteis que existe. Foi o</p><p>Google que inicialmente lançou o framework no mercado, e rapidamente ganhou adeptos e</p><p>implementações diferentes. Porém, existe uma pequena confusão no mercado envolvendo o</p><p>framework, a qual deve ser muito bem entendida. A versatilidade do framework se dá devido a</p><p>alguns recursos que ele tem; um deles são as diretivas.</p><p>No capítulo Angular e diretivas, da obra Desenvolvimento para dispositivos móveis, base teórica desta</p><p>Unidade de Aprendizagem, você vai estudar os diferentes tipos de diretivas existentes no</p><p>framework. Além disso, vai aprender como criá-las e executá-las por meio de pequenos exemplos.</p><p>Boa leitura.</p><p>DESENVOLVIMENTO</p><p>PARA DISPOSITIVOS</p><p>MÓVEIS</p><p>Fabiano Gonçalves dos Santos</p><p>Angular e diretivas</p><p>Objetivos de aprendizagem</p><p>Ao final deste texto, você deve apresentar os seguintes aprendizados:</p><p>� Descrever a utilização do Angular no desenvolvimento de aplicativos</p><p>móveis.</p><p>� Explicar o uso de diretivas do Angular.</p><p>� Praticar o uso de serviços do Angular no desenvolvimento de um</p><p>pequeno exemplo.</p><p>Introdução</p><p>Provavelmente você conhece o framework Angular, sobretudo se já</p><p>programou para a Web, mas uma pergunta comum é “de qual Angular</p><p>se trata?”. Escrito em 2009, o AngularJS era chamado de Angular e,</p><p>desde sua criação, foi mantido pelo Google, o que fez muita gente ficar</p><p>interessada e começar a trabalhar com ele. Seu grande sucesso ocorreu</p><p>porque ele possuía código aberto, oferecia vários recursos inovadores</p><p>para a época e era baseado na linguagem JavaScript.</p><p>Em 2014, surgiu o Angular 2, no qual as mudanças introduzidas foram</p><p>muito grandes a ponto de ser considerado diferente do original Angular,</p><p>levando o mercado a ter dois frameworks distintos: o AngularJS original</p><p>e o Angular. Os quase quatro anos de diferença fizeram uma grande</p><p>comunidade existir em torno do AngularJS, de forma que ele é mantido</p><p>e suportado até hoje.</p><p>Neste capítulo, você estudará a utilização do Angular no desenvolvi-</p><p>mento de aplicativos móveis, o uso de suas diretivas e como empregar</p><p>seus serviços ao desenvolver um pequeno exemplo.</p><p>Angular e dispositivos móveis</p><p>Desde sua criação, o Angular teve como objetivo facilitar o desenvolvimento</p><p>de aplicações para a Web e os dispositivos móveis, uma vez que estes têm</p><p>recursos para executarem as aplicações para Web, chamadas também de</p><p>aplicações híbridas, de acordo com Deitel, Deitel e Wald (2016).</p><p>Uma aplicação híbrida tem como principal característica combinar os</p><p>recursos nativos da plataforma na qual está sendo executada (Android ou</p><p>iPhone Operating System [iOS]) com os recursos próprios da Web, utilizando</p><p>linguagens como Hypertext Markup Language versão 5 (HTML5), Cascading</p><p>Style Sheets (CSS) e JavaScript. Muitas aplicações usadas nos dispositivos</p><p>são assim e, quando uma delas requer um uso mais específico da plataforma,</p><p>surge a aplicação nativa.</p><p>Existem vantagens e desvantagens nos dois lados. Por exemplo, uma</p><p>das grandes vantagens da aplicação híbrida é o fato de desenvolver uma</p><p>aplicação sem considerar muito a plataforma na qual será executada, pois</p><p>o mesmo desenvolvimento feito para uma plataforma rodará na outra sem</p><p>maiores adaptações. No caso do Angular para dispositivos móveis, refere-se</p><p>às aplicações híbridas.</p><p>Portanto, quando se trata de desenvolvimento com o Angular para disposi-</p><p>tivos móveis, cria-se aplicações em HTML, CSS e JavaScript com a ajuda de</p><p>um framework escrito para tornar as aplicações mais interativas e interessantes,</p><p>além de ser produtivo e possuir vários recursos para o desenvolvimento.</p><p>Uma aplicação feita em Angular é constituída de componentes (compo-</p><p>nents), que, basicamente, são uma forma de criar tags que serão reconhecidas</p><p>pelo browser. Na Figura 1, você consegue agrupar os elementos para gerar</p><p>componentes que sejam reutilizáveis? Considere que esses componentes podem</p><p>ser construídos de forma incremental, criando os menores e acrescentando</p><p>elementos e/ou funções a eles.</p><p>Angular e diretivas2</p><p>Figura 1. Exemplo de uma tela de um aplicativo de gestão de estoques.</p><p>Observando a Figura 1, você pode perceber três componentes principais:</p><p>o componente de navegação (mostrado pela flecha 1), o componente de menu</p><p>hierárquico, conhecido como breadcrumb (mostrado pela flecha 2) e a lista de</p><p>produtos (mostrada pela flecha 3), esta pode ser composta de um componente</p><p>menor, chamado de linha de produto. Assim, três linhas de produtos formam</p><p>a lista de produtos.</p><p>A linha de produto, por sua vez, ainda pode ser decomposta em compo-</p><p>nentes menores</p><p>como uma imagem para o produto, um texto para a descrição</p><p>do produto e outro texto para o preço. Lembre-se que, como se trata de uma</p><p>aplicação, esses elementos são lidos do banco de dados e montados dinami-</p><p>camente na tela.</p><p>Na Figura 2, você pode ver como estruturar a aplicação de acordo com os</p><p>seus componentes.</p><p>3Angular e diretivas</p><p>Figura 2. Exibição em árvore do aplicativo de gestão de estoque.</p><p>Barra de navegação Lista de produtos Breadcrumbs</p><p>Linha de produto Linha de produto Linha de produto</p><p>Imagem Descrição Preço</p><p>Aplicativo de gestão</p><p>de estoque</p><p>Como você observou na Figura 2, pode-se estruturar a tela da aplicação</p><p>em uma árvore de componentes em que a raiz é o aplicativo, abaixo do qual</p><p>há os três componentes principais: a barra de navegação, a lista de produtos</p><p>e os breadcrumbs. Depois, está a decomposição da lista de produtos nas três</p><p>linhas de produtos e, por fim, cada linha de produto pode ser decomposta em</p><p>uma imagem, uma descrição e o preço.</p><p>Assim, criar uma aplicação em Angular consiste, basicamente, em arquitetar</p><p>os componentes que podem ser usados, implementá-los e, em seguida, combiná-</p><p>-los nas posições projetadas. Agora, deve-se saber como usar a linguagem do</p><p>Angular para isso, mas lembre-se de utilizá-la juntamente aos conceitos de</p><p>HTML5, CSS e JavaScript, que você já conhece.</p><p>A seguir, veja como é possível implementar um destes componentes, sem</p><p>se preocupar com a sintaxe e o pleno entendimento nesse momento.</p><p>@Component({</p><p>selector: 'lista-produtos',</p><p>template: `</p><p><div class="lista-produtos"></p><p><linha-produto *ngFor="#let produto of produtos"</p><p>[produto]="produto"</p><p>Angular e diretivas4</p><p>(click)='clicked(produto)'></p><p></linha-produto></p><p></div></p><p>`</p><p>})</p><p>class ListaProdutos {</p><p>@Input() produtos: Produto[];</p><p>@Output() selecionado: EventEmitter;</p><p>constructor(){</p><p>this.selecionado = new EventEmitter();</p><p>}</p><p>clicked(produto) {</p><p>this.selecionado.emit(produto);</p><p>}</p><p>}</p><p>Diretivas do Angular</p><p>Segundo sua documentação oficial (INTRODUCTION..., 2019, documento</p><p>on-line), as diretivas ou directives são marcadores no código HTML. Durante</p><p>os seus estudos, você perceberá que os componentes podem ser uma diretiva</p><p>em Angular, a diferença é que eles se tornam uma diretiva com um template.</p><p>Muitas vezes, você lerá que os componentes seriam a base das aplicações em</p><p>Angular ou seus blocos de construção, mas, na verdade, as diretivas que são</p><p>esses blocos.</p><p>A diretiva é uma função executada sempre que o compilador do Angular</p><p>a encontra no Document Object Model ou Modelo de Objeto de Documento</p><p>(DOM). As diretivas do Angular servem para estender o poder do HTML,</p><p>dando uma nova sintaxe a ele e criando tags. Cada diretiva tem um nome, já</p><p>existente no Angular ou criada por desenvolvedores, e determina onde será</p><p>usada: no elemento, atributo, classe ou comentário.</p><p>De forma resumida, as diretivas são elementos que farão parte do DOM,</p><p>especificando como colocar os componentes e a regra de negócio dentro do</p><p>Angular. Elas se separam em três tipos: componentes, atributos e estruturais,</p><p>sendo criadas em JavaScript e declaradas como @directive.</p><p>5Angular e diretivas</p><p>Os componentes são diretivas com templates (STRUCTURAL..., 2019,</p><p>documento on-line), usam, de forma discreta, a Application Programming</p><p>Interface (API) de diretivas e definem-nos de modo mais claro. As outras duas</p><p>diretivas não possuem templates, em vez disso, elas são feitas especificamente</p><p>para manipular o DOM. As diretivas de componentes são usadas na classe</p><p>principal (main class) e contêm os detalhes de como o componente deve ser</p><p>processado, instanciado e utilizado na execução.</p><p>As diretivas de atributos manipulam o DOM, mudando seu comportamento</p><p>e sua aparência, por exemplo, ao aplicar estilos condicionais em elementos,</p><p>mostrar ou esconder os elementos dinamicamente, ou mudar sua propriedade</p><p>de acordo com alguma condição.</p><p>Já as diretivas estruturais são especificamente usadas para criar e destruir</p><p>elementos do DOM. Algumas diretivas de atributo, como o hidden (mostra</p><p>ou esconde um elemento), mantêm o DOM como está, mas as estruturais não</p><p>trabalham dessa forma, e sim removem ou colocam tal atributo no DOM. Logo,</p><p>mexer com diretivas estruturais altera a estrutura do DOM. Elas também</p><p>começam com um “*”, por exemplo *ngIf, *ngFor, etc.</p><p>No Quadro 1, você pode observar as diferenças entre as diretivas de atributo</p><p>e as estruturais, de acordo com Scarpino (2017).</p><p>Fonte: Adaptado de Scarpino (2017).</p><p>Diretiva de atributo Diretiva estrutural</p><p>Parece com um atributo HTML</p><p>normal e é usada, principalmente,</p><p>em databinding (vinculação e</p><p>sincronização de dados) e event</p><p>binding (sincronização de eventos).</p><p>Começa com “*” e possui uma</p><p>aparência diferente no código.</p><p>Afeta somente o elemento</p><p>no qual ela está aplicada.</p><p>Afeta toda a estrutura do DOM.</p><p>Quadro 1. Diferenças entre diretivas de atributo e estruturais</p><p>Angular e diretivas6</p><p>Uso das diretivas existentes do Angular</p><p>Usar as diretivas do Angular é bem fácil, sendo a ngClass um bom exemplo</p><p>de uma diretiva de atributo, conforme você pode ver no código a seguir:</p><p>1 <p [ngClass] = "{'azul'=true, 'amarelo'=false}"></p><p>2 Diretivas são legais!</p><p>3 </p></p><p>4 <style></p><p>5 .azul { color: blue }</p><p>6 .amarelo {color: yellow}</p><p>7 </style></p><p>Ao usar a diretiva ngClass, coloca-se a classe azul no elemento <p></p><p>(linha 1) e, explicitamente, não se insere a classe amarelo. Assim, desde que</p><p>se mude o estilo da classe e não se altere a estrutura do HTML, é claramente</p><p>uma diretiva de atributo. O Angular também possui outras diretivas, como o</p><p>ngIf, observe o exemplo a seguir:</p><p>1 @Component({</p><p>2 selector: 'ng-if-simples',</p><p>3 template: `</p><p>4 <button (click)="show = !show">{{show ? 'hide' : 'show'}}</</p><p>button></p><p>5 show = {{show}}</p><p>6 <br></p><p>7 <div *ngIf="show">Texto de Exemplo</div></p><p>8 `</p><p>9 })</p><p>10 class NgIfSimples {</p><p>11 show: boolean = true;</p><p>12 }</p><p>No exemplo anterior, a diretiva ngIf foi usada para adicionar ou remover</p><p>o texto usando um botão, por isso, a estrutura do HTML foi modificada, logo,</p><p>é uma diretiva estrutural.</p><p>7Angular e diretivas</p><p>Para ver uma lista completa das diretivas disponíveis, acesse a documentação oficial</p><p>no link a seguir.</p><p>https://qrgo.page.link/CwTTS</p><p>Conforme você estudar mais sobre o Angular, perceberá que criar diretivas</p><p>é bem simples. O poder do Angular está na sua habilidade de gerar as próprias</p><p>diretivas e, para isso, ele possui uma API descomplicada.</p><p>Criação de diretivas em Angular</p><p>A fim de entender melhor como funcionam as diretivas em Angular, você</p><p>verá a criação de algumas delas usando exemplos. É importante que você</p><p>pratique esses exemplos e crie com eles novas possibilidades para absorver</p><p>bem o assunto.</p><p>Criação de uma diretiva de atributo</p><p>Criar uma diretiva de atributo é como gerar um componente, porém, usando o</p><p>decorator @Directive. O exemplo mostra a criação de uma diretiva chamada</p><p>meu-erro, que colocará um fundo vermelho no elemento para indicar um erro.</p><p>O próximo exemplo é uma aplicação padrão gerada pelo setup do Angular,</p><p>com a qual se pode adaptar o código. Existem, basicamente, duas formas de</p><p>criar uma diretiva: a primeira é usar a linha de comando por meio de uma</p><p>instrução do Angular, a qual gerará alguns arquivos; e a segunda cria arquivo</p><p>por arquivo. Para usar a linha de comando, digita-se a seguinte instrução:</p><p>ng generate directive meu-erro</p><p>Essa instrução gerará dois arquivos importantes: src/app/meu-erro.</p><p>directive.spec.ts e src/app/meu-erro.directive.ts, so-</p><p>brescrevendo o src/app/app.module.ts com uma pequena alteração.</p><p>Portanto, pode-se usar uma instrução que gera os arquivos automaticamente</p><p>ou criá-los um a um, conforme você pode ver a seguir.</p><p>Angular e diretivas8</p><p>Inicia-se criando o arquivo app.meu-errodirective.ts no diretório</p><p>src/app, com o código a seguir (os números que iniciam cada linha não</p><p>devem ser digitados, eles servem para a explicação do código apenas):</p><p>1: import { Directive, ElementRef } from '@angular/core';</p><p>2:</p><p>3: @Directive({</p><p>4: selector: '[meu-erro]'</p><p>5: })</p><p>6: export class MeuErroDirective {</p><p>7: constructor(elr:ElementRef) {</p><p>8: elr.nativeElement.style.background='red';</p><p>9: }</p><p>10: }</p><p>Observando o código, você pode notar uma importação da Directive</p><p>do pacote @angular/core na linha 1. Já na criação da diretiva na linha 3,</p><p>usa-se o seletor ‘meu-erro’.</p><p>É uma boa prática de programação usar um prefixo ao criar diretivas para</p><p>evitar conflitos com os atributos HTML e o uso do prefixo “ng”, pois este é</p><p>empregado pelo Angular, assim, não é necessário misturar seus prefixos com</p><p>os já definidos por ele. Nesse caso, para você saber que é uma diretiva sua,</p><p>utiliza-se o prefixo “meu” ou “meu-”.</p><p>Já na linha 6, cria-se uma classe chamada MeuErroDirective. Para</p><p>acessar qualquer elemento do DOM, deve-se usar o ElementRef, o qual</p><p>também foi importado na linha 1. Depois, adiciona-se o código para dar o</p><p>efeito no construtor da classe nas linhas 7 a 9.</p><p>Para usar essa nova diretiva, deve-se adicioná-la na declaração do arquivo</p><p>app.module.ts, conforme você pode ver a seguir:</p><p>1: import { BrowserModule } from '@angular/platform-browser';</p><p>2: import { NgModule } from '@angular/core';</p><p>3:</p><p>4: import { AppComponent } from './app.component';</p><p>5: import { MeuErroDirective } from './meu-erro.directive';</p><p>6:</p><p>7: @NgModule({</p><p>8: declarations: [</p><p>9: AppComponent,</p><p>9Angular e diretivas</p><p>10: MeuErroDirective</p><p>11: ],</p><p>12: imports: [</p><p>13: BrowserModule</p><p>14: ],</p><p>15: providers: [],</p><p>16: bootstrap: [AppComponent]</p><p>17: })</p><p>18: export class AppModule { }</p><p>Feito isso, finalmente pode-se usá-la em algum arquivo da aplicação e,</p><p>para habilitá-la, deve-se editar o arquivo app.component.ts:</p><p>1: import { Component } from '@angular/core';</p><p>2:</p><p>3: @Component({</p><p>4: selector: 'app-root',</p><p>5: templateUrl: './app.component.html',</p><p>6: styleUrls: ['./app.component.css']</p><p>7: })</p><p>8: export class AppComponent {</p><p>9: titulo = 'my-app';</p><p>10: }</p><p>Na linha 5, note que há o caminho do template aplicado ao componente ./</p><p>app.component.html. Você pode ver o código do app.component.</p><p>html a seguir, percebendo, na linha 2, o uso da diretiva meu-erro no</p><p>elemento h1:</p><p>1: <div style="text-align:center"></p><p>2: <h1 meu-erro></p><p>3: Bem-vindo(a) à {{ titulo }}!</p><p>4: </h1></p><p>5: </div></p><p>Na Figura 3, você pode conferir, visualmente, o resultado do exemplo.</p><p>Angular e diretivas10</p><p>Figura 3. Aplicação da diretiva meu-erro.</p><p>Criação de uma diretiva estrutural</p><p>O processo de criação de uma diretiva estrutural é exatamente igual ao de uma</p><p>diretiva de atributo usando o Angular. Pode-se usar a linha de comando ou</p><p>criar arquivo por arquivo, porém, deve-se adaptar o código à sintaxe correta.</p><p>Neste exemplo, será criada uma cópia da diretiva ngIf. Assim, você não</p><p>estará apenas implementando-a, como também verificando como as diretivas</p><p>do Angular lidam com tudo internamente. Começa-se com o arquivo app.</p><p>meu-if.directive.ts, conforme você pode ver a seguir:</p><p>1: import { Directive, Input, TemplateRef, ViewContainerRef }</p><p>from '@angular/core';</p><p>2:</p><p>3: @Directive({</p><p>4: selector: '[meuIf]'</p><p>5: })</p><p>11Angular e diretivas</p><p>6: export class MeuIfDirective {</p><p>7:</p><p>8: constructor(</p><p>9: private templateRef: TemplateRef<any>,</p><p>10: private viewContainer: ViewContainerRef) { }</p><p>11:</p><p>12: @Input() set meuIf(condicao: boolean){</p><p>13: if(condicao){</p><p>14: this.viewContainer.createEmbeddedView(this.templateRef);</p><p>15: }</p><p>16: else {</p><p>17: this.viewContainer.clear();</p><p>18: }</p><p>19: }</p><p>20: }</p><p>Como você pode perceber, usa-se alguns import diferentes, principal-</p><p>mente Input, TemplateRef e ViewContainerRef. O decorator Input</p><p>na linha 12 é usado para passar os dados para o componente; e o TemplatRef</p><p>da linha 9, para instanciar as embedded views (visões embarcadas).</p><p>A visão embarcada representa uma parte de um layout a ser renderizado</p><p>na tela e é ligada a um template; já o ViewContainerRef se trata de um</p><p>container nos quais uma ou mais visões podem ser colocadas. Juntos, esses</p><p>componentes funcionam assim: as diretivas têm acesso ao container de visão</p><p>(container view) injetando um ViewContainerRef. As visões embarcadas</p><p>são criadas e colocadas no container, chamando o método createEmbe-</p><p>ddedView de ViewContainerRef passado no template, o qual possui a</p><p>diretiva para ver a passagem do TemplateRef injetado.</p><p>Agora, adiciona-se alguns decorators, editando e atualizando o arquivo</p><p>app.module.ts:</p><p>1: import { BrowserModule } from '@angular/platform-browser';</p><p>2: import { NgModule } from '@angular/core';</p><p>3:</p><p>4: import { AppComponent } from './app.component';</p><p>5: import { MeuErroDirective } from './meu-erro.directive';</p><p>6: import { MeuIfDirective } from './meu-if.directive';</p><p>7:</p><p>Angular e diretivas12</p><p>8: @NgModule({</p><p>9: declarations: [</p><p>10: AppComponent,</p><p>11: MeuErroDirective,</p><p>12: MeuIfDirective</p><p>13: ],</p><p>14: imports: [</p><p>15: BrowserModule</p><p>16: ],</p><p>17: providers: [],</p><p>18: bootstrap: [AppComponent]</p><p>19: })</p><p>20: export class AppModule { }</p><p>Depois, o arquivo app.components.ts também é editado e atualizado:</p><p>1: import { Component } from '@angular/core';</p><p>2:</p><p>3: @Component({</p><p>4: selector: 'app-root',</p><p>5: templateUrl: './app.component.html',</p><p>6: styleUrls: ['./app.component.css']</p><p>7: })</p><p>8: export class AppComponent {</p><p>9: titulo = 'my-app';</p><p>10: condicao = false;</p><p>11: nome = 'Angular';</p><p>12: }</p><p>O tipo de abordagem fornecido pelas diretivas estruturais é muito útil,</p><p>como quando se precisa mostrar informações diferentes para vários usuários</p><p>com base em suas permissões. Por exemplo, um administrador do site deve</p><p>conseguir ver e editar tudo, já um usuário normal, não. Se você carregar</p><p>informações privadas no DOM usando uma diretiva de atributo, o usuário</p><p>regular e todos os outros desse assunto teriam acesso a ele.</p><p>Na Figura 4, você pode observar o resultado da aplicação da nova diretiva</p><p>na página de exemplo.</p><p>13Angular e diretivas</p><p>Figura 4. Aplicação da diretiva meuIf.</p><p>De forma bem resumida, neste capítulo, você conheceu as diretivas do</p><p>Angular, que compõem o núcleo das aplicações, bem como seus diferentes</p><p>tipos e o modo de criar itens personalizados que atendam às suas necessidades.</p><p>Ao pesquisar na internet sobre as diferentes versões do Angular, você notará que a</p><p>sequência é Angular 2, Angular 4, Angular 5, etc. e poderá surgir uma dúvida sobre</p><p>o motivo do pulo da versão 2 para a 4. Lembre-se que o Angular original agora é</p><p>conhecido como AngularJS, e da segunda versão em diante se conhece apenas por</p><p>Angular. Já versão 3 não foi lançada devido a alguns componentes estarem nessa</p><p>versão e outros ainda na 2. A forma de versionamento do Angular é a Semver (Semantic</p><p>Versioning) e, nessa modalidade, ele alinhou todos os novos componentes na versão</p><p>4, deixando a versão 3 sem ser lançada. Saiba mais no link a seguir:</p><p>https://qrgo.page.link/GGZw5</p><p>Angular e diretivas14</p><p>DEITEL, P.; DEITEL, H.; WALD, A. Android 6 para programadores: uma abordagem baseada</p><p>em aplicativos. 3. ed. Porto Alegre: Bookman, 2016. 618 p.</p><p>INTRODUCTION to the Angular Docs Angular. One framework. Mobile & desktop, [S. l.],</p><p>2019. Disponível em: https://angular.io/docs. Acesso em: 3 jul. 2019.</p><p>SCARPINO, M. Building web components with Typescript and Angular 4. Fishers: Quiller</p><p>Technologies, 2017. 440 p.</p><p>STRUCTURAL Directives. Angular. One framework. Mobile & desktop, [S. l.], 2019. Disponível</p><p>em: https://angular.io/guide/structural-directives. Acesso em: 3 jul. 2019.</p><p>Leituras recomendadas</p><p>APRENDENDO HTML: Guias e tutoriais. Mozilla Developer Network, [S. l.], 2019. Disponível</p><p>em: https://developer.mozilla.org/pt-BR/docs/Aprender/HTML. Acesso em: 3 jul. 2019.</p><p>DOCUMENTATION — TypeScript. Microsoft, Remond, 2019. Disponível em: https://</p><p>www.typescriptlang.org/docs/home.html. Acesso em: 3 jul. 2019.</p><p>FLANAGAN, D. Javascript: o guia definitivo. Porto Alegre: Bookman, 2013. 1080 p.</p><p>HAROLD, E. R. Refatorando HTML: como melhorar o projeto de aplicações web existentes.</p><p>Porto Alegre: Bookman, 2010.</p><p>360 p.</p><p>15Angular e diretivas</p><p>Dica do professor</p><p>Ao longo dos anos, de maneira muito rápida, o desenvolvimento de dispositivos móveis sofreu</p><p>mudanças bem significativas. Na metade dos anos 2000, falava-se em aplicativos para o protocolo</p><p>WAP apenas para alguns celulares; atualmente, fala-se em aplicativos híbridos integrados na</p><p>nuvem.</p><p>Nesta Dica do Professor, você vai saber mais sobre o que são esses aplicativos híbridos.</p><p>Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.</p><p>https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/4c183cbfdc44b196790dedba0a4819fe</p><p>Exercícios</p><p>1) O desenvolvimento de sistemas tem mudado muito nos últimos anos. Até pouco tempo, o</p><p>desenvolvimento se concentrava em aplicações desktop. Com o passar dos anos apareceu o</p><p>desenvolvimento para Web e, recentemente, o desenvolvimento para dispositivos móveis.</p><p>Com relação ao Angular, um framework voltado para a criação de interfaces, quais são as</p><p>plataformas de execução?</p><p>A) Somente Web, dispositivos móveis e desktop.</p><p>B) Somente Web.</p><p>C) Somente aplicações nativas para dispositivos móveis.</p><p>D) Somente para aplicações híbridas para dispositivos móveis.</p><p>E) Somente para desktop.</p><p>2) As diretivas em Angular são realmente importantes. Por meio delas é possível estender o</p><p>poder do código HTML, permitindo ao programador aplicá-las aos elementos do DOM e</p><p>criar inúmeros efeitos de comportamento e estilos.</p><p>Associe corretamente as expressões e assinale a alternativa que contém a associação</p><p>correta.</p><p>I. Diretiva de componente</p><p>II. Diretiva estrutural</p><p>III. Diretiva de atributo</p><p>A. Muda a composição do DOM, criando e removendo elementos.</p><p>B. São as diretivas com template.</p><p>C. Muda a aparência e o comportamento de um elemento.</p><p>A) I - A, II - B, III - C.</p><p>B) I - B, II - A, III - C.</p><p>C) I - C, II - B , III - A.</p><p>D) I - C, II - A, III - B.</p><p>spfau</p><p>Realce</p><p>spfau</p><p>Realce</p><p>spfau</p><p>Realce</p><p>spfau</p><p>Realce</p><p>spfau</p><p>Realce</p><p>spfau</p><p>Realce</p><p>E) I - A, II - C, III - B.</p><p>Observe o código a seguir, escrito em Angular:3)</p><p>Assinale a alternativa correta.</p><p>A) O código apresenta uma diretiva de componente.</p><p>B) Trata-se de uma diretiva de atributo.</p><p>C) O código é uma diretiva estrutural.</p><p>D) Não há diretivas no código apresentado.</p><p>E) O código está incorreto e vai gerar um erro.</p><p>4) Atualmente, muitas empresas, de vários segmentos, estão criando seus próprios aplicativos</p><p>para oferecer mais serviços e produtos a seus clientes. Nesses casos, elas precisam escolher</p><p>entre criar aplicações nativas ou híbridas.</p><p>Sendo assim, assinale a alternativa que contém o conceito de aplicações híbridas.</p><p>A) São aplicativos para Web, desenvolvidos com tecnologias como HTML5, CSS3 e Javascript.</p><p>B) É uma aplicação que usa acesso ao banco de dados no próprio dispositivo local e na nuvem</p><p>simultaneamente, tornando-se híbrida exclusivamente pelo acesso multimeio do banco de</p><p>dados.</p><p>C) São aplicações desenvolvidas basicamente em Java, que rodam especificamente no</p><p>dispositivo-alvo, por exemplo, nas plataformas mais usadas do mercado, como o Android e o</p><p>iOS. Outras plataformas precisam de adaptações.</p><p>D) É uma aplicação que usa a mesma base de uma aplicação Web, rodando em sistemas Android</p><p>e iOS por meio de HTML, CSS e Javascript. Além disso, tem a possibilidade de acessar</p><p>recursos específicos do hardware do dispositivo.</p><p>E) São aplicações que representam a tela na qual o sistema será executado, e se adaptam à tela</p><p>do dispositivo móvel que está acessando a aplicação. Caso seja tablet, a tela se adapta ao seu</p><p>tamanho, o mesmo ocorrendo para aparelhos celulares e demais dispositivos.</p><p>O uso do Angular permite que o programador acesse elementos do DOM por meio de</p><p>diretivas. Usando o framework, o programador vai encontrar mais facilidade e produtividade,</p><p>além de ter mais recursos para poder mexer na aparência e no comportamento dos</p><p>elementos.</p><p>5)</p><p>spfau</p><p>Realce</p><p>spfau</p><p>Realce</p><p>Sendo assim, assinale a alternativa correta em relação às diretivas em Angular.</p><p>A) ngFor e ngIf são diretivas estruturais porque podem criar em tempo de execução novos</p><p>elementos no DOM ou remover elementos, de acordo com condições de dados dinâmicos</p><p>provenientes da interação com o banco de dados.</p><p>B) As diretivas de atributos são fáceis de serem reconhecidas porque têm um "*" na frente de</p><p>cada uma delas, não sendo necessário o uso de parênteses para passar algum parâmetro.</p><p>C) A criação de diretivas deve ser feita com muita atenção, pois existem vários arquivos que são</p><p>editados; não podem ocorrer erros na manipulação desses arquivos.</p><p>D) Não é possível passar parâmetros para uma diretiva. Uma vez criada, ela se comportará</p><p>exatamente como foi implementada. Porém, é possível criar diretivas diferentes que</p><p>executem instruções semelhantes.</p><p>E) <p app:MarcaTexto>Testando</p> é a forma correta de executar a diretiva MarcaTexto no</p><p>elemento de parágrafo.</p><p>Na prática</p><p>Após a instalação do Angular no seu computador, o próximo passo é criar o workspace de</p><p>desenvolvimento, o qual é um conjunto de projetos ou bibliotecas que compõem uma aplicação.</p><p>Por meio da linha de comandos do sistema operacional é possível criar esse ambiente e</p><p>rapidamente ter uma aplicação padrão funcionando, pronta para ser expandida de acordo com as</p><p>necessidades do projeto.</p><p>Nesta Na Prática, você vai ver como configurar esse ambiente.</p><p>Aponte a câmera para o</p><p>código e acesse o link do</p><p>conteúdo ou clique no</p><p>código para acessar.</p><p>https://statics-marketplace.plataforma.grupoa.education/sagah/19ceaeb6-2d89-48e6-ac35-895bb5247cc6/ab26d3dc-6428-4590-91a0-e70f30837fca.jpg</p><p>Saiba +</p><p>Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:</p><p>Aprendendo HTML: guias e tutoriais</p><p>Entre os vários tutoriais gratuitos disponíveis na Internet, alguns têm conteúdo mais confiável e</p><p>desenvolvido por fontes confiáveis. O tutorial a seguir é excelente e desenvolvido pela Mozilla.</p><p>Confira.</p><p>Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.</p><p>Javascript: o guia definitivo</p><p>Excelente livro sobre Javascript, linguagem que está relacionada ao Angular. Veja a seguir.</p><p>Conteúdo interativo disponível na plataforma de ensino!</p><p>Refatorando HTML: como melhorar o projeto de aplicações</p><p>web existentes</p><p>Veja a seguir um ótimo livro sobre o desenvolvimento de softwares para a Web.</p><p>Conteúdo interativo disponível na plataforma de ensino!</p><p>https://developer.mozilla.org/pt-BR/docs/Aprender/HTML</p>