Você está na página 1de 7

Instituto Federal do Norte de Minas Gerais

Tecnologia em Análise e Desenvolvimento de Sistemas


Programação web II

AngularJS

Alunos: Adriano, Anderson, Breno Martins, Nilton e José Renan


Professor: Fernando
- Araçuaí -
Outubro/2017
AngularJS
O que é?
É um framework para o desenvolvimento de aplicações web dinâmicas utilizando a
linguagem javascript e ele foi criado por Misko Hevery e Adams Abrons em 2009.

Arquitetura
O angularJS foi criado com base no padrão MVC, atualmente o seu padrão é chamado
de MVW. Este padrão permite estruturar uma aplicação web em camadas bem
estruturadas, criar componentes reusáveis e modulares.
O padrão do angularJS é composto basicamente por um módulo (componente que
contém as diferentes partes do aplicativo), uma view (conteúdo que o usuário vê), um
controller (controlador que oferece lógica de negócios por trás da view) e de um scope
(contexto que permite interligar uma view a um controller).
O angularJS possui um compilador html que percorre o DOM atrás de diretivas
(marcadores adicionados à tags htmls para torná-las interativas) para instância-las.

Suas principais características são:


 Two-way Data binding.
 Injeção de Dependências.
 Criação de diretivas (Extensão do HTML).
 Modularização e reuso (Controllers, Services e Filters).
 Testabilidade.

Vantagens
 Produtividade.
 Continuidade.
 Completamente escrito em Javascript.

Desvantagens
 Gestão mais complexa.
 Risco de qualidade.
Estrutura básica de um arquivo do angularJS
1° Formato
<script>
//criando um do módulo
angular.module(“nomeDoModulo”, []);
//criação do controller
angular.module(“nomeDoModulo”).controller(“nomeDoController”),fu
nction($scope){
//criando uma variável
$scope.var1 = “Olá, mundo!”;
//criando uma função
$scope.soma = function (val1, val2) { return val1+val2;}
}
</script>

2° Formato
<script>
//criando um do módulo
var app = angular.module(“nomeDoModulo”, []);
//criação do controller
app.controller(“nomeDoController”),function($scope){
//criando uma variável
$scope.var1 = “Olá, mundo!”;
//criando uma função
$scope.soma = function (val1, val2) { return val1+val2;}
}
</script>

Observação: o colchetes na criação do módulo, permite importar outros módulos.


Interpolação: são chaves duplas usadas exibir o valor de um conteúdo de $scope,
entre tags html. Por exemplo: <h1>{{var1}}</h1>. Ou quando se deseja ver
dinamicamente o que está sendo escrito em um campo do tipo “input”, mas para isso o
campo deverá esta com o seu “ng-model” definido.

Diretivas do angularJS
Diretivas são extensões da linguagem html que permitem a implementação de novos
comportamentos de forma declarativa, dentro das tags html.
ng-controller: vincula um elemento da view ao controller. Sintaxe: ng-controller
= “nomeDoController”.
ng-app: contém o nome da aplicação e este deve ser igual ao nome do módulo criado, e
deve ser colocado em um tag de hierarquia mais alta. Sintaxe: ng-app =
“nomeDaAplicacao”.
ng-bind: substitui um elemento por uma expressão. Sintaxe: <h1 ng-
bind=”nomeDaVariavelCriadaComScope”></h1>.
ng-repeat: permite a iteração sobre itens de um array com valores numéricos, string ou
objetos. Por exemplo, considere um array de objetos chamado clientes =
[{nome: “Ana”, idade: 19},...] com 10 registros, considerando que ele foi
criado com $scope, para mostrar todos os registros em uma tabela basta as seguintes
instruções:
<tr ng-repeat=”cliente in clientes”>
<td>{{cliente.nome}}</td>
<td>{{cliente.idade}}</td>
</tr>

ng-model: vincula uma propiedade ao $scope e é aplicado nos inputs, selects e


textarea. Permite cria objetos e atributos dinamicamente e tem um ciclo de notificação
que é disparado quando se escreve algo em um desses campos.
ng-click: dispara o comportamento de um evento quando ocorrer um click. Assim como
esse evento, há outros como ng-mouseover, ng-mouseout, etc. Sintaxe ng-
click=”funçãoADisparar()”.

ng-disabled: desabilita um elemento dinamicamente. Sintaxe: ng-


disabled=”valorBooleano”.
ng-options: renderiza as opções de um select. Por exemplo, um vetor objetos estados
“criado com $scope” pode ser exibido em um select assim:
<select ng-model=”cliente” ng-options=”cliente.nome for cliente
in clientes”>
<option value=””>Escolha um estado</option>
</select>

,portanto, a leitura acima seria pegue o nome de um cliente para cada cliente existente
no vetor clientes e preencha o option. Outra forma possível para o select seria agrupar
os clientes por idade antes de exibi-los, por exemplo:
<select ng-model=”cliente” ng-options=”cliente.nome groupBy
cliente.idade for cliente in clientes”>
<option value=””>Escolha um estado</option>
</select>
ng-class: serve para utilizar um classe já criada, seja de maneira direta ng-
class=”nomeDaClasse” ou indireta com um atributo em $scope.atributo =
“nomeCls” referenciado em ng-class=”nomeCls”. Ainda pode-se criar um array
de classe, por exemplo, ng-class=”[classe1, classe2]” com essas classes
nomeadas em $scope.
ng-show: permite mostrar um elemento se determinada condição for satisfeita. Sintaxe:
ng-show = “condicao”.
ng-hide: permite esconder um elemento se determinada condição for satisfeita. Sintaxe:
ng-hide=”condicao”.
Observação: o ng-show e o ng-hide trabalham apenas com a visibilidade do elemento.
ng-if: permite inserir ou remover um determinado elemento, se determinada condição
for satisfeita. É útil quando tem-se elementos que não são necessários carregar de
imediato e que consumam recursos como imagens, vídeos, etc.
ng-include: serve para incluir um conteúdo dinamicamente em uma página. Por
exemplo, incluindo um rodapé que se encontra feito em uma página separada ng-
include=” ’footer.html’ ”, a aspa simples é obrigatória.
ng-minlength: define o tamanho mínimo de caracteres que um campo deve ter. Sintaxe:
ng-minlength: “valor”.
ng-maxlength: define o tamanho máximo de caracteres que um campo deve ter.
Sintaxe: ng-maxlength: “valor”.
ng-required: define um determinado campo como obrigatório. Sintaxe: ng-
required=”valorBooleano”.
ng-pattern: permite criar uma expressão regular, ou seja, formatar um campo de acordo
com a sua necessidade. Sintaxe: ng-pattern=”/^\d{3}-\d{4}$/”, essa
expressão define que o campo que a tiver, deverá iniciar com três dígitos, ter um hifén e
terminar com quatro dígitos.
$valid e $invalid: permite consultar a validade de um campo do formulário ou do
próprio formulário. Sintaxe: “nomeFormulario.nomeCampo.$valid”, verifica
se é válido, caso use $invalid será verificado se é invalido o campo ou o formulário.
Essas duas verificações funcionam em conjunto com o ng-required.
$dirty: verifica o campo após ele ter sido usado pelo menos uma vez. Sintaxe:
“nomeFormulario.nomeCampo.$dirty”.
$setPrestine: permite voltar um campo ao seu estado inicial. Sintaxe:
“$scope.nomeFormulario.nomeCampo.$setPrestine()”.
$error: é um objeto que contém validações e seus respectivos estados, sendo assim,
permite consultar os erros de um campo ou formulário. Sintaxe:
“nomeFormulario.$error.tipoDeErroAIdentificar (required,
minlength, etc)”.

Filtros
Filtros permitem transformar uma expressão, realizando operações como a formatação
de data, conversão de moeda e a ordenação de um array.
uppercase: transforma uma string em letra maiúscula. Sintaxe: {{elemento |
uppercase}}.
lowercase: transforma uma string em letra minúscula. Sintaxe: {{elemento |
lowercase}}.
date: permite formatar uma data usando uma máscara. Sintaxe:
{{objetoDoTipoDate | ‘dd/MM/yyyy’}}.
filter: permite filtrar um array para realizar uma pesquisa dinamicamente. Sintaxe: ng-
repeat= ”varAuxiliar in array | filter:
nomeDoAtributoAserFiltradoNoArray (ou nome do ng-model do
campo de busca)”.

orderBy: permite ordenar um array com base em um critério. Sintaxe: ng-repeat=


”varAuxiliar in array | orderBy: criterioDeOrdenação”.
groupBy: permite agrupar itens de um array com base em um critério. Sintaxe em um
select como exemplo:
<select ng-options=”critérioDeapresentacao groupBy
atributoASerAgrupado for varAuxiliar in vArray”>
<option value=””>Vazio</option>

</select>.
currency: permite um converter um número para moeda. Sintaxe: {{número |
currency}}.
number: permite formatar um número fazendo arredondamento ou definindo o número
de casas decimais. Sintaxe: {{número | number:2}}, nesta expressão tem-se um
número com duas casas decimais.
Documentação do angularjs: disponível em, https://docs.angularjs.org/guide.
Para quem quer mais:
O angularJS é um framework que sofre atualizações a cada seis meses, portanto, a sua
versão mais recente se encontra disponível em, https://angular.io/guide/quickstart .
REFERÊNCIAS:
RODRIGO BRANAS, disponível em,
https://www.youtube.com/watch?v=_y7rKxqPoyg&index=1&list=PLQCmSnNFVYnT
D5p2fR4EXmtlR6jQJMbPb .
Características do angularJS, disponível em,
https://tasafo.wordpress.com/2014/11/26/porque-utilizar-angularjs-no-seu-proximo-
projeto/ , acessado em 05/10/17.
Desvantagens do angularJS, disponível em,
https://pt.stackoverflow.com/questions/32690/quais-as-vantagens-e-desvantagens-de-
gerar-o-html-no-cliente-ou-servidor , acessado em 05/10/17.