Informática Parte 24 Prof. Márcio Hunecke

Transcrição

1 Escriturário Informática Parte 24 Prof. Márcio Hunecke

2

3 Informática ANGULAR.JS 1.6.X AngularJS é um framework JavaScript código aberto, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. A biblioteca lê o HTML que contém atributos especiais e então executa a diretiva na qual esta tag pertence, e faz a ligação entre a apresentação e seu modelo, representada por variáveis JavaScript comuns. A filosofia do Angular O AngularJS é construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componente software, enquanto a programação imperativa é excelente para a escrita de regras de negócio. O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views. Objetivos Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os testes do código. Considera os testes do aplicativo tão importantes quanto seu desenvolvimento. A dificuldade do teste é diretamente afetada pela maneira como o código é estruturado. Guia os desenvolvedores através da construção de todo o aplicativo: desde o design de Interface, passando pela escrita das regras de negócio, até chegar aos testes da aplicação. Histórico de desenvolvimento AngularJS foi originalmente desenvolvido em 2009 por Miško Hevery e Adam Abrons como um software por trás de um serviço de armazenamento JSON online, que teria preço estimado por megabyte, para aplicações pré-construídas (easy-to-make) para as empresas. Este empreendimento foi disponibilizado em "GetAngular.com", e teve alguns inscritos, antes de os dois decidirem abandonar a ideia comercial e distribuir Angular como um framework open-source. 3

4 Abrons deixou o projeto, mas Hevery, que trabalha no Google continuou seu desenvolvimento e manteve o framework em conjunto com alguns colegas do Google. AngularJS bootstrapper Existem três fases do AngularJS bootstrapper que ocorrem após o carregamento completo do DOM: 1. Criar um novo injetor 2. Serviço de compilação: Ele passa pelo DOM e localiza todas as diretivas, como: "ng-app. 3. Link a fase de linking anexa todas as diretivas ao escopo. Principais diretivas do Angular Diretivas no AngularJS permitem ao desenvolvedor especificar tags HTML personalizadas e reusáveis, que personalizam o comportamento de certos elementos. ng-app Declara um elemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrão da tag. ng-bind Muda o texto de um elemento HTML automaticamente, de acordo com o seu resultado, vindo das regras de negócio. ng-model É similar ao ng-bind, mas permite ligação direta bidirecional (two-way data binding ) entre a view e o escopo do aplicativo. ng-click Permite instanciar o evento de click, semelhante ao onclick do JavaScript. ng-controller Especifica um controller JavaScript para o HTML. ng-repeat Instancia um elemento por item de um array. ng-show e ng-hide Mostra ou esconde um elemento HTML de acordo com o resultado de uma expressão booleana. ng-class Permite atributos de classe ser carregados dinamicamente. ng-switch Instancia um modelo, em uma lista de escolhas, dependendo do valor obtido pela expressão. ng-view A diretiva base para manipulação de rotas, resolvendo um JSON antes de renderizar os modelos acionados por controladores especificados. ng-if Declaração básica de um 'IF' que permite mostrar um elemento se a condição for verdadeira. 4

5 Banco do Brasil - TI (Escriturário) Informática Márcio Henecke Ligação bidirecional de dados (Two-way data binding) Ligação bidirecional de dados no AngularJS é sua principal característica e reduz a quantidade de códigos escritos para mostrar os dados processados pelo servidor. Modelos são renderizados em HTML puro de acordo com os dados contidos em um escopo definido na model. A variável $scope do Angular detecta mudanças no modelo e modifica o HTML na view por meio de um controller. Da mesma forma, qualquer alteração na view é refletida na model. Isso exclui a necessidade de manipular o DOM e facilita o bootstrapping e rápida prototipação de aplicativos web. Plug-in para Google Chrome Em Julho de 2012, o time do Angular construiu um plug-in para o Google Chrome chamado Batarang, que melhora o debug de aplicativos web construídos com Angular. A extensão permite fácil detecção de gargalos e oferece uma interface visual para depurar seus aplicativos. Exemplo de código HTML com chamada para o Framework AngularJS 5

6

7 Questões 1. (2017 FCC TRT 11ª Região (AM e RR) Técnico Judiciário Tecnologia da Informação) Considere o fragmento de código HTML abaixo. Este fragmento evidencia o uso de a) QueryJS. b) Facelets. c) AngularJS. d) Portlets. e) PrimeFaces. 2. (2016 FGV IBGE Tecnologista Programação Visual Webdesign) Mantido pelo Google, o AngularJS é um framework popular usado para: a) ampliar as funções do CSS, estendendo a biblioteca da linguagem com novos comandos e oferecendo recursos dinâmicos para exibição de dados; b) substituir o JavaScript na programação de recursos interativos através da oferta de uma biblioteca de comandos multimidiáticos; c) declarar visualizações dinâmicas em aplicações web, estendendo as bibliotecas de linguagens dinâmicas como PHP e ASP; d) substituir o HTML como linguagem de marcação para hierarquização mais eficiente do conteúdo; e) declarar visualizações dinâmicas em aplicações web, estendendo atributos do HTML com diretivas e vinculando dados ao HTML através de expressões. 7

8 3. (2017 FCC DPE-RS Analista Desenvolvimento de Sistemas) AngularJS é um framework JavaScript, também referenciado como uma biblioteca escrita em JavaScript. Esse framework permite o uso de a) expressões escritas dentro de uma diretiva no formato: ng-bind = "expression". b) expressões escritas dentro de colchetes duplos, no formato [[expression.]]. c) filtros que devem ser adicionados às expressões por meio do caractere cerquilha (#). d) XML com diretivas xsd, como xsd-app, xsd-model e xsd-bind. e) expressões que suportam condicionais, loops e exceções, mas não suportam filtros. 4. (2017 IBFC TJ-PE Técnico Judiciário Programador de Computador) Para facilitar a detecção de gargalos e oferecer uma Interface visual para depurar os aplicativos AngularJS é interessante instalar o plugin no Google Chrome denominado: a) Batarang b) Cockroach c) Potatoes d) Cucarach e) Beetling 5. (2017 CESPE SEDF Analista de Gestão Educacional Tecnologia da Informação Questão alterada) Julgue o item subsecutivo, relacionados aos aspectos fundamentais de arquitetura e desenvolvimento em nuvem. AngularJS, Ajax, JQuery e Less são tecnologias para desenvolvimento web front-end. ( ) Certo ( ) Errado 6. (2015 CESPE STJ Técnico Judiciário Tecnologia da Informação) No que se refere à programação web e a sistemas de controle de versão, julgue o item subsequente. O atributo ngbind informa ao AngularJS para atualizar o conteúdo do texto, quando o valor da expressão for alterado. ( ) Certo ( ) Errado 7. (2017 IBFC TJ-PE Analista Judiciário Analista de Sistemas) Abaixo são apresentadas algumas das principais diretivas no AngularJS: (1) ng-model (2) ng-app (3) ng-loop (4) ng-controller Selecione a alternativa tecnicamente correta: a) da relação apresentada somente são aplicadas o 1, 2 e 3 b) da relação apresentada somente são aplicadas o 1, 2 e 4 c) da relação apresentada somente são aplicadas o 2, 3 e 4 d) da relação apresentada somente são aplicadas o 1, 3 e 4 e) da relação apresentada todas diretivas podem ser aplicadas 8. (2015 CESPE TRE-RS Analista Judiciário Análise de Sistemas) Na escolha de um framework e bibliotecas para apoiar a utilização do JavaScript, uma empresa levou em consideração algumas afirmações apresentadas por sua equipe técnica. Com base nesse contexto, assinale a opção correta. a) O ReactJS não depende exclusivamente do DOM (document object model) do navegador, uma vez que mantém um DOM virtual próprio. 8

9 Banco do Brasil - TI (Escriturário) Informática Márcio Henecke b) O AngularJS está baseado na manipulação pelo desenvolvedor da sincronização entre a camada de visão, fornecida pelo código HTML, e o modelo, e vice- -versa. c) Segundo os princípios adotados pelo AngularJS, o código declarativo é melhor para expressar a lógica do negócio. d) A forma primária de organizar as interfaces no Ember.js são os templates escritos em JavaScript que definem o seu comportamento. e) Os projetos Ember.js podem ser criados e gerenciados por uma ferramenta de linha de comando denominada Ember Loc. 9. (2016 FGV IBGE Analista Análise de Sistemas Desenvolvimento de Aplicações Web Mobile) Com relação ao AngularJS, analise as afirmativas a seguir: I. É capaz de estender o HTML graças às diretivas do tipo ng-init e ng-app. II. Suas expressões podem ser escritas dentro de chaves duplas. III. Não oferece validação de forms do lado do cliente. Está correto somente o que se afirma em: a) I; b) II; c) III; d) I e II; e) I e III. Gabarito: 1. C 2. E 3. A 4. A 5. Certo 6. Certo 7. B 8. B 9. D 9