SeComp 2017
Módulo:
Angular.js
Felipe Oliveira
Introdução
Em termos gerais...
AngularJS é um framework
JavaScript open-source, mantido
pelo Google, que auxilia na
execução de single-page
applications.
Fisolofia
O Angular.js é 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 componentes
software, enquanto a
programação imperativa é
excelente para a escrita de regras
de negócio.
Fisolofia
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 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.
Abstrai o acoplamento entre o lado cliente e o lado
servidor da aplicação. Isto permite que o
desenvolvimento do aplicativo evolua em ambos os
lados, de forma paralela, e permite o reuso de código.
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.
Comunidade Sólida
As métricas do Angular são impressionantes e refletem
a imensa aceitação dele pela comunidade.
O Repositório do Angular no GitHub tem 49 mil
estrelas e mais de mil contribuintes, além de mais que
150 mil repositórios com scripts que utilizam a
tecnologia.
No Stack Overflow, a maior comunidade de perguntas e
respostas do mundo, temos quase 180 mil perguntas.
Caso o interesse seja em vídeos sobre o assunto, o
YouTube nos dá uma marca impressionante de 470
mil vídeos.
Comunidade Sólida
Controller
function InvoiceController($scope){
$scope.name = “HelloWorld”;
Scope
} View
invoice:
new InvoiceController
<div
ng-controller=”InvoiceController”>
<h1>{{name}}<\h1>
PRIMEIROS
PASSOS
Chamada dos scripts
Agora Precisamos chamar
no html os scripts que
desejamos utilizar na
nossa aplicação!
<head>
#path dos scripts
</head>
Ctrl + x
configuração
AGORA VAMOS CONFIGURAR
OS SCRIPTS DA NOSSA
APLICAÇÃO.
1. CRIAR UM MÓDULO
2. CRIAR UM CONTROLE
3. LINKAR O MÓDULO AO
NOSSO CONTROLE
Atribuir o controle
devemos agora colocar
no view o local onde o
controle irá funcionar.
utilizamos a tag:
ng-controller=”Nomecontrole”
vamos fazer funcionar!
no nosso controle
precisamos passar por
parametro nosso escopo
da aplicação, para que
finalmente ele consiga
”enxergar’’ nossa view
vamos fazer funcionar!
Agora podemos criar uma
variável e testar sua
chamada no view
$scope.nomevariavel = valor;
no html
<h1>{{nomevariavel}}</h1>
percorrer
uma lista
ng-repeat
vALOR
DINÂMICO
ng-model
evento
botao
ng-click
Filtro de lista
dinâmico
item in lista | filter : nomeFiltro
html + css +
Angular.js
EXPLORAR FUNÇÕES
Baixe esse Template:
https://drive.google.com/drive/folders/0BzZ
-bvEmEl1WY0hCLUlVd2VHUVk?usp=shar
ing
vamos fazer funcionar!
Agora VAMOS APLICAR A
TECNOLOGIA ANGULAR.JS
PARA FORNECER
FUNCIONALIDADES AO NOSSO
PROJETO COM HTML E CSS
PURO
module()
controller()
AngularJS
Data Binding
Listar()
ng-repeat
cadastrar()
ng-submit com
ng-model
Remover()
ng-click
FIM DO
MÓDULO - [1]
PRÓXIMO:
MÓDULO [2] - Appinventor
MIT - ANDROID
