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

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

Bootstrap e Node.jsTags: Node.js, HTML5, Angular.js e Twitter Bootstrap

Apresentação

Um pouco sobre mim

Daniel Souza Makiyama E-mail: [email protected]

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

Interface de usuário também é coisa de programador

Sopa de Frameworks

Por onde Começar?

Instalando o Node.js

Instalando a IDE ATOM

Hello Node!

O prompt de comando

Instalando o Angular.Js

Hello Angular!

Instalando o Twitter Bootstrap

Testes com o Bootstrap

Instalando o GIT

Plano de Curso

Aplicação PhoneCat (fonte: tutorial do site angularjs.org)

Template Estático

Templates Angular

Filtrando Repetidores

Vinculação dupla de dados

XHRs e Injeção de Dependências

Links de Template e Imagens

Rotas e Visões Múltiplas

Mais templates

Filtros

Tratador de Eventos

REST e Serviços Customizados

Animações

Participação em Pesquisa: Base de Conhecimento de Frameworks Web

Pesquisa Qualitativa: Impressões e Feedback

Motivação / Oportunidade

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;

fonte: linguagem vs salário / demanda (http://tinyurl.com/ppbu65x acessado em 05/01/2014)

(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

Organização Testes

Modularização

com o aumento da

complexidade, como

gerenciar a qualidade?

AutomaçãoCodificação

Sopa de Frameworksfonte: Javascript The Right Way (http://jstherightway.org/ acessado em 05/01/2015)

...e isso não representa nem a metade dos frameworks disponíveis!

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

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/

fonte: NPM (https://www.npmjs.com/package/angular acessado em 05/01/2015)

Hello Angular!

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;

fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)

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;



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: webapp (https://github.com/yeoman/generator-webapp 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: gruntjs (http://gruntjs.com/ 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: bower (http://bower.io/ 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: mocha (http://mochajs.org/ 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;

fonte: gruntjs (http://gruntjs.com/ acessado em 05/01/2015)

Testes com o Bootstrapfonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)

>>

pratique: crie uma table com class

table e table-striped e veja o

resultado.

foi possível verificar o livereload?

Instalando o GITfonte: git (http://git-scm.com/ acessado em 05/01/2015)

http://git-scm.com/download/

Windows Installer

Recapitulando

Aula anterior. Objetivo: existem inúmeras possíveis configurações de projetos web

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)

Aula de hoje: Projeto Phonecat: Estrutura básica recomendada pelo

site do AngularJS.org

Gestores de pacotes

O que é o Angular.js?

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.

fonte: git (http://todomvc.com/examples/angularjs/#/ acessado em 05/01/2015)

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

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;

fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)


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?


Angular


O ng-app ativa o injetor do angular, responsável pela injeção de dependências. O injetor também cria o escopo raiz, contexto para o modelo da aplicação;

Angular compila o modelo de objetos do documento html (DOM) e processa as expressões;

Ao receber ações do usuário, Angular verifica modificações no modelo, caso existam, Angular executa novamente os vínculos afetados;


ng-app escopo raiz

template html

expressões (vínculos)

Ação usuário (mouse, teclado)

visão

modelo

modifica

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


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’;

Devido à sintaxe ‘filter:query’ no repetidor, qualquer alteração na variável ‘query’ faz com que o repetidor atualize o DOM para refletir as mudanças;

crie uma variável chamada query no controller PhoneListCtrl e preencha com o valor ‘Nex’;


Index.html

Escopo do PhoneListCtrl

query

phones


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:

troque a variável query por um objeto com {name: query}. Coloque uma negação em query (‘!’) e veja o resultado;

substitua a variável query pela função filterName, implemente a função no controller e teste. A função deve filtrar pela propriedade snippet;


a função é executada n vezes, para cada item do array, em cada

execução, o item do array é passado como primeiro parâmetro (item)

dica...

dica...


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, 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>;


dica...

Aplicação PhoneCat – vinculação dupla de dados


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?


objeto

Aplicação PhoneCat – xhr e injeção de dependências

Execute o comando ‘git checkout –f step-5’ para ir ao step-5 do tutorial. Acesse o arquivo app/phones/phones.json. Este arquivo possui uma lista de telefones no formato JSON;

Abra o arquivo app/js/controllers.js. $http é um serviço do Angular que permite realizar 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;


injetor

serviços

$http

$scope

...

fábricas instâncias

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

Execute o comando ‘git checkout –f step-6’ para ir ao step-6 do tutorial. Acesse o arquivo 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

Execute o comando ‘git checkout –f step-7’ para ir ao step-7 do tutorial. Acesse o arquivo bower.json e verifique que foi incluído a dependência “angular-route”. Rode ‘npm install’;

Inclua um link ‘<a href="#/phones">voltar</a>’ na página app/partials/phone-detail.html. Navegue na aplicação e verifique que o link no navegador muda, mas a página não dá refresh;

Na função de config são definidos os ‘provedores’ de cada serviço, onde é possível controlar a criação e comportamento em tempo de execução do serviço;

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;


objeto

injetor

serviços

$route

...

instâncias

$routeProvider

atalhos: factory, value

providers

O script precisa ser incluído no template layout <=

$route service


Abra o app/index.html. Com o serviço de rotas, a 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 ‘partials/phone-list.html’, caso o link seja ‘phones/:phoneId’, o ng-view renderiza ‘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;


Index.html

ngView

$routeProvider

Index.html


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

Execute o comando ‘git checkout –f step-8’ para 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

Execute o comando ‘git checkout –f step-9’ para 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

Execute o comando ‘git checkout –f step-10’ para 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

Execute o comando ‘git checkout –f step-11’ para ir ao step-11 do tutorial. Abra o arquivo bower.json e veja a nova referência ‘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

Execute o comando ‘git checkout –f step-12’ para ir ao step-12 do tutorial, Abra o arquivo 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>;

Abra o arquivo ‘app/css/animations.css’. No caso de animações no ng-repeat:

ng-enter aplicado quando um novo item é adicionado à lista e renderizado na página;

ng-move aplicado quando o item é movido na lista;

ng-leave aplicado quando o item é removido da lista;


este css define que nos 3

tipos de transições deve ser

executada uma animação

ex: o estado ng-leave é o

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 criada uma animação para a classe ‘.phone’;

A animação animateup é disparada quando a classe active é adicionada nos elementos com classe phone;

A animação animatedown é disparada quando a classe active é removida dos elementos com classe phone;


-

active

active

-

-500

+ 0

+ 500

-500

+ 0

+ 500

active

-

-500

+ 0

+ 500

animateup

animatedown

Base de Conhecimento de Frameworks Web

Engenharia de Software

Arquitetura Web;

Método : programação e técnicas de IHC;

Base de Conhecimento de Frameworks WebQuestã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?

Base de Conhecimento de Frameworks WebObjetivo

Classificar frameworks web e criar uma base e conhecimento para a tomada de decisão;

Base de Conhecimento de Frameworks WebComo participar?

MotivaçãoHands-On : IHC e Estudo de Diversos Frameworks Web;

Caso tenha interesse deixe seu e-mail comigo;

Dúvidas

?

Technology

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