Escriturário
Informática – Parte 24
Prof. Márcio Hunecke
www.acasadoconcurseiro.com.br 3
Informática
ANGULAR.JS 1.6.X
AngularJS é um framework JavaScript código aberto, mantido pelo Google, que auxilia na exe- cução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessa- dos 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 cone- xã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. Con- sidera 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 Interfa- ce, 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 empreendi-
mento foi disponibilizado em "GetAngular.com", e teve alguns inscritos, antes de os dois decidi-
rem abandonar a ideia comercial e distribuir Angular como um framework open-source.
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.
Banco do Brasil - TI (Escriturário) – Informática – Márcio Henecke
www.acasadoconcurseiro.com.br 5
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
www.acasadoconcurseiro.com.br 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.
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.
www.acasadoconcurseiro.com.br 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 é me- lhor para expressar a lógica do negócio.
d) A forma primária de organizar as inter- faces no Ember.js são os templates es- critos 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
