Aplicativos Web Com Html5 Angular Js Twitter Bootstrap e Node Js 150131061135 Conversion Gate02

Aprendendo Na Prática: Aplicativos
Web com HTML5, Angular.js, Twitter

Bootstrap e Node.js
Tags: Node.js, HTML5, Angular.js e Twitter Bootstrap
Apresentação
Um pouco sobre mim
 Daniel Souza Makiyama

 E-mail: daniel.makiyama@gmail.com
 Graduado em Ciência da Computação pela FEI;
 Cursando Mestrado em Ciência da Computação pela UFABC;
 Microsoft Certified Professional (Desenvolvimento Web em ASP.NET 4.5);
 Sócio-Fundador da Donuts4u Desenvolvimento e Comunicação Via Web.
Um pouco sobre você
 Qual é o seu nome?

 Qual sua experiência profissional?
 Qual é a sua experiência com desenvolvimento web?
 O que você espera aprender no curso de Aplicativos Web com
HTML5, Angular.js, Twitter Bootstrap e Node.js?
Plano de Curso
 O futuro da Web  Hello Node!

 Interface de usuário também é  O prompt de comando
coisa de programador  Instalando o Angular.Js
 Sopa de Frameworks  Hello Angular!
 Por onde Começar?  Instalando o Twitter Bootstrap
 Instalando o Node.js  Testes com o Bootstrap
 Instalando a IDE ATOM  Instalando o GIT
Plano de Curso
 Aplicação PhoneCat  Filtros

(fonte: tutorial do site angularjs.org)  Tratador de Eventos
 Template Estático  REST e Serviços Customizados
 Templates Angular  Animações
 Filtrando Repetidores  Participação em Pesquisa: Base
 Vinculação dupla de dados de Conhecimento de Frameworks
 XHRs e Injeção de Dependências
Web
 Links de Template e Imagens
 Rotas e Visões Múltiplas  Pesquisa Qualitativa: Impressões
 Mais templates e Feedback
Motivação / Oportunidade
fonte: linguagem vs salário / demanda (http://tinyurl.com/ppbu65x acessado em 05/01/2014)
 Javascript é a linguagem
com maior demanda atual
no mercado;
 Bolsas de iniciação
científica:
 Arquiteturas e Frameworks
Web
 Pesquisa sobre arquiteturas e
frameworks da internet e suas
aplicações;
(pesquisa realizada de Janeiro à Junho de 2014 nos Estados Unidos,
Grã-Bretanha e Austrália
Qual é o futuro da web?
fonte: Application Foundations for The Open Web Platform (http://tinyurl.com/nnxbt4x acessado em 05/01/2014)
 Experiência única em qualquer contexto;

 Integração total entre dispositivos;
 Modularização e reuso de interfaces;
 Mídias e comunicação em tempo real;
 Maior usabilidade e acessibilidade;
 Novos serviços de api aberta;
 Segurança e privacidade;
Interface de Usuário também é coisa de
Programador
Estrutura Modularização
com o aumento da
Codificação Automação
complexidade, como
gerenciar a qualidade?
Organização Testes
...e isso não representa nem a metade
dos frameworks disponíveis!
Sopa de Frameworks
fonte: Javascript The Right Way (http://jstherightway.org/ acessado em 05/01/2015)
Por onde começar?
+ +
Instalando o Node.js
http://nodejs.org/download/
Windows Installer (.msi) 32-bit
Instalando a IDE Atom
https://atom.io/
Windows Installer para Windows 7
(o Atom não precisa de instalação)
Hello Node!
 Inicialmente crie em \seudiretorio\hellonode\ um arquivo entitulado hello.js;
 Abra o Atom e arraste o arquivo hello.js vazio para o mesmo;
 Implemente o seguinte código no arquivo e salve;
O prompt de comando
 Localize no menu iniciar o ‘node.js command
prompt’, abra o programa;
 Navegue até a pasta do arquivo hello.js e digite
‘node hello.js’ para iniciar o servidor web node.js;
 Verifique a mensagem ‘Servidor executando em
http://127.0.0.1:8000/
O prompt de comando
 Abra o navegador de sua preferência e digite
http://127.0.0.1:8000/ . Você verá a mensagem:
Hello Node!
 Voltem ao prompt de comando e digitem ctrl+c

para parar o servidor;
Instalando o Angular.js
fonte: NPM (https://www.npmjs.com/package/angular acessado em 05/01/2015)
 Digite ‘npm install angular’ para instalar o

angular.js na sua pasta (existem outras maneiras
de instalar o angular);
 O comando copia os arquivos da última versão do

angular.js para o diretório node_modules/angular/
Hello Angular!
fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)
 Crie um arquivo com o nome

index.html na pasta
\helloangular;
 Abra o Atom e arraste o arquivo
index.html recém criado para o
mesmo;
 Implemente o código ao lado no
arquivo e salve;
Hello Angular!
 Abra o prompt de comando do

node.js, navegue até a pasta
helloangular e digite o comando
‘npm install http-server –g’ para
instalar o servidor http-server
globalmente;
 Inicialize o servidor digitando
http-server –a 0.0.0.0 –p 8000;
Hello Angular!
 Abra o navegador de sua preferência e digite

http://localhost:8000/ . Você verá um campo
de texto e uma mensagem ‘Hello’;
 Digite qualquer texto na caixa de texto e

automaticamente o texto é exibido no <h2>
(no exemplo ao lado digitamos ‘Angular!!!!’);
 Volte ao prompt de comando e digite ctrl+c
para parar o servidor;
Instalando o Twitter Bootstrap
fonte: webapp (https://github.com/yeoman/generator-webapp acessado em 05/01/2015)
 Vamos utilizar o Yeoman para instalar o

bootstrap(existem outras maneiras de instalar
o bootstrap). Digite ‘npm install -g yo’ para
instalar o bootstrap globalmente;
 Digite ‘yo webapp’ para criar uma nova

aplicação web;
 Mantenha a opção padrão ‘Bootstrap’ e
pressione a tecla <espaço>. O gerador
Yeoman criará diversos arquivos básicos
para uma aplicação web (demora um
pouquinho);
fonte: gruntjs (http://gruntjs.com/ acessado em 05/01/2015)
 Vamos verificar a estrutura criada pelo

gerador, começando pela raiz;
 Package.json => pacotes npm
...  devDependencies => referências;
 engines => versão do node.js e/ou npm;
 Gruntfile.js => executador de tarefas

 serve => inicializa servidor, injeta dependências
(bower), auto-prefixos de css, auto-refresh;
fonte: bower (http://bower.io/ acessado em 05/01/2015)
 Bower.json => dependências de front-end;
 .yo-rc.json => configurações Yeoman;

 .jshintrc => configurações jshintrc;
 .gitignore => pastas/extensões a serem
ignorado(a)s no commit;
 .gitattributes => atributos dos arquivos a serem
comitados, por caminho;
 .editorconfig => configurações para IDEs;
 .bowerrc => configurações do bower;
fonte: mocha (http://mochajs.org/ acessado em 05/01/2015)
 test\spec\ => pasta de testes;

 test.js => implementação de testes;
 Implemente o código ao lado no arquivo e
salve;
 Acesse o prompt de comando e execute o

comando ‘grunt test’ para rodar o teste
implementado;
fonte: gruntjs (http://gruntjs.com/ acessado em 05/01/2015)
 app\ => pasta da aplicação;

 index.html => página inicial da aplicação;
 Acesse o prompt de comando e execute o

comando ‘grunt serve’ para inicializar o
servidor. Automaticamente a página inicial da
aplicação é apresentada no navegador;
Testes com o Bootstrap
 pratique: crie uma table com class

table e table-striped e veja o
>> resultado.
 foi possível verificar o livereload?

Instalando o GIT
fonte: git (http://git-scm.com/ acessado em 05/01/2015)
http://git-scm.com/download/
Windows Installer
Recapitulando
Aula anterior. Objetivo: existem inúmeras Aula de hoje: Projeto Phonecat:
possíveis configurações de projetos web Estrutura básica recomendada pelo
site do AngularJS.org
Framework de padrões para

desenvolvimento mobile-first
Executador de Tarefas, automatiza

atividades manuais envolvendo diversos
pacotes
Framework para criação e execução de

testes Javascript
Ferramenta geradora de código (facilita a

construção de código)
Gestores de pacotes
O que é o Angular.js?
fonte: git (http://todomvc.com/examples/angularjs/#/ acessado em 05/01/2015)
O HTML é mestre em lidar com conteúdo estático, mas ainda

falha no dinamismo.
AngularJS permite extender o vocabulário do HTML para sua

aplicação. O ambiente resultante é expressivo, fácil de usar e
rápido de desenvolver.
Ajustes Possíveis Problemas de Permissão e
tamanho do caminho dos pacotes npm
Apagar sua pasta, criar novamente ex: c:\dsm\ e criar a pasta c:\npm
Abrir o notepad como administrador;
Acessar o arquivo npmrc em : C:\program
files\nodejs\node_modules\npm\ e colocar: prefix=c:\npm e salvar;
Navegar até o diretório do seu projeto cd dsm, baixar o projeto do GIT git
clone --depth=14 https://github.com/angular/angular-phonecat.git;
Abrir o console na pasta do projeto (angular-phonecat) e rodar git
config --global url.”https://”.insteadOf git:// ;
Aplicação PhoneCat
fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
 Abra o prompt de comando e clone o

repositório do tutorial ‘git clone --
depth=14
https://github.com/angular/angular-
phonecat.git’
 Navegue no prompt até a pasta

angular-phonecat recém criada e
execute ‘npm install’ para instalar todas
as ferramentas especificadas no
arquivo package.json;
 Digite o comando ‘npm start’ para iniciar o

servidor na porta 8000 (como definido no
arquivo packages.json;
 O servidor apresenta como diretório raiz a

pasta phonecat\angular-phonecat. Clique na
pasta ‘app’ para acessar a aplicação;
 Navegue um pouco na aplicação. É um

catálogo de smartphones;
 Reinicie o Atom e arraste o arquivo

package.json do dir. angular-phonecat\
para ele. O projeto angular-phonecat será
aberto no Atom;
 Abra um novo console, acesse a pasta da

aplicação e digite ‘npm test’ para rodar os
testes. Os testes unitários executados
estão presentes no diretório angular-
phonecat\test\unit\;
 gere um erro no teste it(‘should fetch

phone detail’... e verifique se o console de
teste é atualizado;
 Pare o processo automático de testes com

ctrl+c e ‘S’. Execute o comando ‘git
checkout –f step-0’ para voltar o projeto ao
step-0 do tutorial;
 Como o servidor ainda está rodando em

outro console acesse localhost:8000/,
clique no diretório app. Na página dê
ctrl+F5 para eliminar cache. Aparecerá
página com ‘Nothing here yet’;
 No Atom abra o arquivo app/index.html e

verifique as funções do angular na página;
 multiplicar 3 inputs HTML. O que ocorre

antes do preenchimento, e depois?
 O ng-app ativa o injetor do angular, responsável

Angular pela injeção de dependências. O injetor também
cria o escopo raiz, contexto para o modelo da
ng-app escopo raiz aplicação;
template html modelo  Angular compila o modelo de objetos do

documento html (DOM) e processa as
expressões (vínculos) expressões;
visão  Ao receber ações do usuário, Angular verifica

modifica modificações no modelo, caso existam, Angular
executa novamente os vínculos afetados;
Ação usuário (mouse, teclado)
Aplicação PhoneCat – template estático
 Execute o comando ‘git checkout –f step-1’

para ir ao step-1 do tutorial;
 Localize e abra o arquivo app\index.html e

verifique o conteúdo estático incluído;
 transforme o conteúdo dos itens nas tags

<details> e <summary> do HTML5.
Informe a class ‘nav nav-pills’ na <ul>.
Finalize apresentando o total de telefones
usando a tag <div> com class ‘alert alert-
info’;
Aplicação PhoneCat – templates angular
 Execute o comando ‘git checkout –f step-2’

para ir ao step-2 do tutorial. Acesse o
arquivo app/index.html;
 ng-app define o módulo phonecatApp que

possui o controller PhoneListCtrl;
 ng-controller permite anexar o controller

PhoneListCtrl à tag <body>. O modelo é
definido no controller;
 ng-repeat permite o loop dos itens do

modelo de acordo com o template
especificado dentro da <li> com os
vínculos {{phone.name}} e
{{phone.snippet}};
 Acesse o arquivo app/js/controllers.js;
 angular.module define o módulo phonecatApp, sem

dependências ‘[]’ e atribui à variável phonecatApp;
 phonecatApp define o controller ‘PhoneListCtrl’;
 PhoneListCtrl anexa os dados dos smartphones ao
escopo ($scope), atribuindo os mesmos à variável
‘phones’;
 Este escopo está definido a todos os vínculos localizados
dentro da tag de <body>, onde a diretiva ng-
controller=“PhoneListCtrl” é definida;
 Graças ao escopo, a visão e o modelo estão sempre
sincronizados: http://plnkr.co/edit/zZfUQN?p=preview;
 Acesse o arquivo test/unit/controllersSpec.js;
 testes unitários do controller ‘PhoneListCtrl’;

 beforeEach => inicializa módulo ‘phonecatApp’ antes da
execução dos testes;
 it => define cada teste;
 inject => injeta o serviço controller no teste, que permite
obter o controller pelo nome;
 O escopo é mock (simula o comportamento do objeto real
neste contexto);
 A verificação é feita através da função expect do
framework jasmine;
 Abra o console na pasta do projeto e execute

‘npm test’. O único teste será executado com
sucesso;
 Crie uma nova variável no arquivo de
app/js/controller.js chamada ‘itemName’ com
nome ‘Lista de Telefones’;
 Na página app/index.html crie uma <h2> que
apresente a mensagem ‘Olá Lista de Telefones’
com a variável ‘itemName’;
 Crie um novo teste para verificar se a variável
‘itemName’ está preenchida corretamente no
controller: expect(scope.itemName).toBe(‘Lista
de Telefones’);
 Crie uma tabela conforme a imagem ao lado e
corrija o código para apresentar os números
multiplicados por 2, por linha;
Aplicação PhoneCat – filtrando repetidores
 Execute o comando ‘git checkout –f step-3’ para

ir ao step-3 do tutorial. Acesse o arquivo
app/index.html;
Index.html  Verifique na index.html que foi incluído um input
com nome query e a sentença ‘| filter:query’ no
repetidor;
 Vinculação: no carregamento da página a
variável query do input é ligada ao modelo, ou
seja, ao escopo do controller ‘PhoneListCtrl’;
Escopo do PhoneListCtrl  Devido à sintaxe ‘filter:query’ no repetidor,
query qualquer alteração na variável ‘query’ faz com
que o repetidor atualize o DOM para refletir as
phones mudanças;
 crie uma variável chamada query no controller
PhoneListCtrl e preencha com o valor ‘Nex’;
 A função ’filter’ utiliza a variável ‘query’ para criar

um novo array com itens que contém este
conteúdo. O filtro verifica o conteúdo em todas
as propriedades de cada item do array;
 busque pela palavra ‘next’ e ‘motorola’ comprove
que a busca varre não só a variável ‘name’, mas
também a propriedade ‘snippet’;
 A função ‘filter’ possui diversas opções:
dica...
 troque a variável query por um objeto com
{name: query}. Coloque uma negação em query
(‘!’) e veja o resultado;
dica...
 substitua a variável query pela função
filterName, implemente a função no controller e
a função é executada n vezes, para cada item do array, em cada teste. A função deve filtrar pela propriedade
execução, o item do array é passado como primeiro parâmetro (item) snippet;
 Acesse o arquivo em test\e2e\scenarios.js .

Neste arquivo está a implementação de um teste
de integração que verifica a funcionalidade de
filtro;
 Para executá-lo, abra o prompt de comando,
navegue até a pasta do projeto e digite o
comando: ‘npm run protractor’. O navegador é
aberto automaticamente e é possível visualizar o
teste sendo executado;
 Coloque a variável {{query}} no <title> antes de

‘Google Phone Gallery’;
 Crie um teste integrado conforme a imagem ao
lado; Veja que o valor não aparece pois a tag
<title> não está na região definida pelo escopo
do controller ‘PhoneListCtrl’ (<body>);
 Mova o ng-controller=‘PhoneListCtrl’ para a tag
<html> e verifique novamente a página;
 Para evitar mostrar {{query}} poucos
milisegundos após o carregamento da página,
dica...
utilize ng-bind-template;
 Com o protector o modelo do Angular e o DOM
da aplicação fica acessível através da
propriedade ‘element’. Crie um <h3> na
app/index.html e inclua a variável {{query}} nele.
Crie um teste integrado para verificar se o valor
da query está presente no <h3>;
Aplicação PhoneCat – vinculação dupla de dados

app/index.html;
 Neste step foi incluído um combobox com
propriedade ‘orderProp’;
 No filtro foi incluído ‘orderBy:orderProp’ ao filtro.
Este encadeamento permitirá que, além de filtrar,
o resultado do filtro também seja ordenado;
 No controller, a propriedade ‘age’ também foi

adicionada ao array de telefones;
 O valor padrão do campo de ordenação é ‘age’;
Aplicação PhoneCat – vinculação dupla de dados
 Foi incluído teste unitário para a nova variável.

Verifique o status da sua console de testes
unitários (npm test);
 Foi incluído teste de integração que verifica a
ordenação. Lembrando que no momento ainda
não estamos utilizando dados remotos, portanto
não é possível preencher o array de telefones
com dados de teste para implementar o teste
integrado. Rode os testes (npm run protractor);
 Reverta a ordenação adicionando um ‘-’ antes

dos valores do combobox. Porque apareceu uma
opção vazia no combobox?
Aplicação PhoneCat – xhr e injeção de dependências

app/phones/phones.json. Este arquivo possui
serviços uma lista de telefones no formato JSON;
fábricas instâncias
$http  Abra o arquivo app/js/controllers.js. $http é um
injetor objeto serviço do Angular que permite realizar
$scope requisições HTTP. Serviços são injetados no
controllers;
...
 Uma requisição ‘get’ retorna um objeto ‘promise’
(compromisso) com um método ‘success’, desta
forma é possível tratar a resposta assíncrona;
 Não é necessário fazer parse do json;
 Serviços do Angular possuem prefixo ‘$’. Por
questões de minificação, o nome dos serviços é
apresentado no formato string;
Aplicação PhoneCat – xhr e injeção de dependências
 Acesse o arquivo test/unit/controllersSpec.js. O

método ‘inject’ é utilizado para injetar instâncias
dos serviços $rootScope, $controller e
$httpBackend na função beforeEach do Jasmine
(isolamento);
 Neste método o escopo é inicializado e o
httpBackend é ‘mockado’, ou seja, é definido o
retorno esperado para a url acessada no
controller;
 Adicione uma tag <pre>{{phones | filter:query |
orderBy:orderProp | json}}</pre> para visualizar
os telefones em formato JSON;
 No callback do carregamento dos telefones,
limite o número de telefones a um único item
(use o método splice). Arrume o teste unitário;
Aplicação PhoneCat – Links de Template e Imagens

app/index.html e verifique os links da lista de
telefones ‘#/phones/{{phone.id}}’;
 Porque no caso da tag img utilizamos ng-src ao
invés de colocar as 2 chaves ‘{{}}’?
 Abra o arquivo test/e2e/scenarios.js e verifique o
novo teste criado. Execute o teste ‘npm run
protractor’;
 Substitua o ‘ng-src’ por um ‘src’ comum. Verifique
as requisições na ferramenta de desenvolvedor
do Chrome;
Aplicação PhoneCat – Rotas e Visões Múltiplas

bower.json e verifique que foi incluído a
O script precisa ser incluído no template layout <= dependência “angular-route”. Rode ‘npm install’;
 Inclua um link ‘<a href="#/phones">voltar</a>’ na
serviços página app/partials/phone-detail.html. Navegue
instâncias na aplicação e verifique que o link no navegador
injetor $route muda, mas a página não dá refresh;
objeto  Na função de config são definidos os
providers ...
‘provedores’ de cada serviço, onde é possível
controlar a criação e comportamento em tempo
$routeProvider de execução do serviço;
atalhos: factory, value  Abra o arquivo app/js/app.js. Veja que o módulo
ngRoute e o módulo phonecatControllers são
definidos como dependências do módulo da
aplicação;
Index.html Index.html  Abra o app/index.html. Com o serviço de rotas, a

ngView
URL e o ng-view ficam vinculados.
 Voltando ao arquivo app/js/app.js, verifique que
caso o link seja ‘/phones’, o ng-view renderiza
$routeProvider ‘partials/phone-list.html’, caso o link seja
‘phones/:phoneId’, o ng-view renderiza
$route service ‘partials/phone-detail.html’;
 O provedor de rotas é injetado no método de
configuração e as rotas são definidas no método
‘when’ do provider;
 Note a rota ‘/phones/:phoneId’, informações
precedidas por ‘:’ são extraídas da URL e
agregadas ao parâmetro $routeParams
disponível no controller;
 Abra o arquivo app/js/controllers.js. Note que foi

criado um módulo chamado
‘phonecatControllers’ para armazenar os dois
controllers;
 No controller ‘PhoneDetailCtrl’ é injetado o objeto
‘$routeParams’ que possui a propriedade
‘phoneId’ obtida via rota => querystring;
 Acesse o arquivo de testes de integração.
Entenda e execute os testes (npm run
protractor). Em ‘should display placeholder...’,
troque ‘by.binding’ por ‘by.model’, porque não
funciona?
 Inclua ‘{{orderProp}}’ em app/index.html;
Aplicação PhoneCat – Mais templates

ir ao step-8 do tutorial. Na pasta app/phones/ é
possível verificar além do arquivo phones.json
outros arquivos, um para cada modelo de
telefone com detalhes em formato json;
 Abra o arquivo ‘app/js/controllers.js’ e no
controller ‘PhoneDetailCtrl’ verifique a requisição
aos arquivos com detalhes dos telefones;
 Abra o arquivo ‘app/partials/phone-detail.html’.
Veja que não é mais necessário especificar o ng-
controller. O mesmo é vinculado ao template
através da rota;
 Abra o arquivo ‘test/unit/controllersSpec.js’ e
verifique novos testes para a visão de detalhes;
Aplicação PhoneCat – Mais templates
 Abra o arquivo ‘test/unit/controllersSpec.js’ e

verifique novos testes para a visão de detalhes.
Retire a linha que atribui valor para ‘phoneId’ e
execute o teste;
 Abra o arquivo ‘test/e2e/scenarios.js’ e verifique

o teste ‘should display nexus-s page’;
 Escreva um teste integrado que verifique que
são apresentadas 4 thumbnails na página de
detalhes do ‘Nexus S’;
Aplicação PhoneCat – Filtros Customizados

ir ao step-9 do tutorial.
 Abra o arquivo ‘app/js/filters.js’, verifique o filtro
‘checkmark’ que a partir de uma variável
booleana apresenta o caracter ✓ para verdadeiro
ou ✘para falso. Este arquivo deve ser incluído
na index.html para que funcione;
 Abra o arquivo ‘app/partials/phone-detail.html’ e
veja o filtro customizado aplicado à 2 variáveis;
 Abra o arquivo ‘test/unit/filtersSpec.js’ e verifique
as injeções de dependência. No caso de filtros, o
sufixo ‘Filter’ deve ser adicionado ao nome do
filtro quando injetado;
 No arquivo ‘app/partials/phone-detail.html’,
experimente filtros como: uppercase, limitTo(
você pode encadear filtros);
Aplicação PhoneCat – Filtros Customizados

ir ao step-10 do tutorial.
 Abra o arquivo ‘app/js/controllers.js’. A função
tratadora de eventos ‘setImage’ altera o valor da
propriedade ‘mainImageUrl’;
 Abra o arquivo ‘app/partials/phone-detail.html’ e
verifique o atributo ‘ng-click’ que utiliza a função
‘setImage’ para tratar o evento de clique nas
imagens;
 Abra o arquivo ‘test/e2e/scenarios.js’ e verifique
dois novos métodos que verificam este
mecanismo recém implementado;
 Abra o arquivo ‘test/unit/controllersSpec.js’ e veja
a nova função ‘xyzPhoneData’. Retire o item
‘images’ e veja o teste falhar. Porque? Teste o
funcionamento do ‘ng-mouseover’;
Aplicação PhoneCat – Rest

ir ao step-11 do tutorial. Abra o arquivo
bower.json e veja a nova referência
O script precisa ser incluído no template layout <=
‘ngResource’(implementação RESTful);
 Abra o arquivo ‘app/js/services.js’ onde foi
implementado o serviço de acesso a dados dos
telefones;
 Abra o arquivo ‘app/js/app.js’ e visualize a nova
dependência: ‘phonecatServices’;
 Abra o arquivo ‘app/js/controllers.js’ e verifique
os controllers ainda mais simplificados e sem
dependência do serviço $http;
 Verifique as alterações nos testes unitários
(referências, código e funções usadas), ex:
toEqualData;
Aplicação PhoneCat – Aplicando Animações

ir ao step-12 do tutorial, Abra o arquivo
O script precisa ser incluído no template layout <=
bower.json: jquery e ng-animate serão utilizados;
Muitas animações podem ser feitas em CSS3, mas coisas mais complexas precisam de Javascript. Para
entender animações em Angular é necessário primeiro entender ‘transitions’ em HTML5:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
Transições também funcionam quando novas classes são incluídas via javascript:
http://jsfiddle.net/makiyamad/c7zsvyuo/6/
Transições funcionam toda vez que a(s) propriedade(s) monitorada(s) é(são) alterada(s), não
necessariamente porque uma classe foi alterada no elemento em questão:
http://jsfiddle.net/makiyamad/4s3posav/1/
 Veja o passo a passo de uma animação de ‘hide’

: https://docs.angularjs.org/guide/animations .
Veja o css utilizado:
 Abra o arquivo ‘app/partials/phone-list.html’, veja

a classe ‘phone-listing’ que foi adicionada ao
<li>;
este css define que nos 3  Abra o arquivo ‘app/css/animations.css’. No caso
tipos de transições deve ser de animações no ng-repeat:
executada uma animação  ng-enter aplicado quando um novo item é adicionado à
lista e renderizado na página;
 ng-move aplicado quando o item é movido na lista;
ex: o estado ng-leave é o  ng-leave aplicado quando o item é removido da lista;
estado de animação
iniciada e o ng-enter-active
marca o estado final da
animação;
 Para simular o funcionamento inclua o serviço

$interval no controller PhoneListCtrl, aumente o
tempo da animação no css para 5 segundos e com
a ferramenta do desenvolvedor abra o console e
monitore.
 Você verá algo semelhante à imagem abaixo, que
comprova que a sequência ng-enter > ng-enter-
active ou ng-leave > ng-leave-active é executada
antes de mostrar ou remover um elemento de um
repeater;
 Também é possível realizar animações com

keyframe CSS3;
 A animação é definida através da cláusula
‘@keyframes’ e utilizada na classe através do
atributo ‘animation’;
 Para verificar esta animação clique em um
telefone na página principal de telefones, você
verá o efeito de fade-out e fade-in.
 Na tela de detalhes de um telefone, clique na
seta de voltar do próprio navegador. É
impressionante verificar o fade-out e fade-in
também é executado e não há refresh;
 Inclua o link voltar no phone-details.html, veja a
mesma animação ao clicar nele;
 Abra o arquivo ‘app/js/animations.js’, veja que foi

-500 -500 -500 criada uma animação para a classe ‘.phone’;
- animatedown -  A animação animateup é disparada quando a
classe active é adicionada nos elementos com
+0 +0 +0 classe phone;
active - active  A animação animatedown é disparada quando a
classe active é removida dos elementos com
+ 500 + 500 + 500 classe phone;
active
animateup
Base de Conhecimento de Frameworks Web
 Engenharia de Software
 Arquitetura Web;
 Método : programação
e técnicas de IHC;
Questão da Pesquisa
 Grande volume de
frameworks web;
 Curva de aprendizagem:
vale a pena?
 Como classificar os
frameworks web e
promover o conhecimento?
 Como tornar o processo de
seleção mais pragmático?
Objetivo
Classificar frameworks web e criar uma base

e conhecimento para a tomada de decisão;
Como participar?
 Motivação
 Hands-On : IHC e Estudo de Diversos Frameworks Web;
 Caso tenha interesse deixe seu e-mail comigo;
Dúvidas

Aplicativos Web Com Html5 Angular Js Twitter Bootstrap e Node Js 150131061135 Conversion Gate02

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aplicativos Web Com Html5 Angular Js Twitter Bootstrap e Node Js 150131061135 Conversion Gate02

Diunggah oleh

Hak Cipta:

Format Tersedia

Aprendendo Na Prática: Aplicativos

Web com HTML5, Angular.js, Twitter

 Daniel Souza Makiyama

 Qual é o seu nome?

 O futuro da Web  Hello Node!

 Aplicação PhoneCat  Filtros

 Experiência única em qualquer contexto;

 Voltem ao prompt de comando e digitem ctrl+c

 Digite ‘npm install angular’ para instalar o

 O comando copia os arquivos da última versão do

 Crie um arquivo com o nome

 Abra o prompt de comando do

 Abra o navegador de sua preferência e digite

 Digite qualquer texto na caixa de texto e

 Vamos utilizar o Yeoman para instalar o

 Digite ‘yo webapp’ para criar uma nova

 Vamos verificar a estrutura criada pelo

 Gruntfile.js => executador de tarefas

 Bower.json => dependências de front-end;

 .yo-rc.json => configurações Yeoman;

 test\spec\ => pasta de testes;

 Acesse o prompt de comando e execute o

 app\ => pasta da aplicação;

 Acesse o prompt de comando e execute o

 pratique: crie uma table com class

 foi possível verificar o livereload?

Framework de padrões para

Executador de Tarefas, automatiza

Framework para criação e execução de

Ferramenta geradora de código (facilita a

O HTML é mestre em lidar com conteúdo estático, mas ainda

AngularJS permite extender o vocabulário do HTML para sua

 Abra o prompt de comando e clone o

 Navegue no prompt até a pasta

 Digite o comando ‘npm start’ para iniciar o

 O servidor apresenta como diretório raiz a

 Navegue um pouco na aplicação. É um

 Reinicie o Atom e arraste o arquivo

 Abra um novo console, acesse a pasta da

 gere um erro no teste it(‘should fetch

 Pare o processo automático de testes com

 Como o servidor ainda está rodando em

 No Atom abra o arquivo app/index.html e

 multiplicar 3 inputs HTML. O que ocorre

 O ng-app ativa o injetor do angular, responsável

template html modelo  Angular compila o modelo de objetos do

visão  Ao receber ações do usuário, Angular verifica

 Execute o comando ‘git checkout –f step-1’

 Localize e abra o arquivo app\index.html e

 transforme o conteúdo dos itens nas tags

 Execute o comando ‘git checkout –f step-2’

 ng-app define o módulo phonecatApp que

 ng-controller permite anexar o controller

 ng-repeat permite o loop dos itens do

 Acesse o arquivo app/js/controllers.js;

 angular.module define o módulo phonecatApp, sem

 Acesse o arquivo test/unit/controllersSpec.js;

 testes unitários do controller ‘PhoneListCtrl’;

 Abra o console na pasta do projeto e execute

 Execute o comando ‘git checkout –f step-3’ para

 A função ’filter’ utiliza a variável ‘query’ para criar

 Acesse o arquivo em test\e2e\scenarios.js .

 Coloque a variável {{query}} no <title> antes de