Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

VRaptor e Angular.js

No description
by

Felipe Chagas Pereira

on 25 July 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of VRaptor e Angular.js

VRaptor e Angular.JS
Características
RESTful
Baseado em ações
Injeção de Dependência
Integração com JPA/Hibernate
Benefícios
Alta produtividade
Fácil aprendizagem
Testabilidade
Flexibilidade
Redirecionando para uma view
A convenção de redirecionamento de páginas após a lógica é a seguinte:
/WEB-INF/jsp/{nomeDoResource}/{lógica}.jsp

Exemplo:
{nomeDoResource} = Produtos
{lógica} = listar()

Vai ficar:
{nomeDoResource} = produtos
{lógica} = listar

Assim o endereço será:

/WEB-INF/jsp/produtos/listar.jsp

Controllers
Por convenção todo controller no Vraptor deve ter o seguinte formato:

@Resource
public class <nome da entidade>Controller {...}

Exemplo: pra entidade Produtos temos,

@Resource
public class ProdutosController {...}

O @Resource é necessário para que seus métodos públicos sejam expostos e acessíveis via URL.
O que é Vraptor?
O VRaptor é um framework MVC, que trabalha de maneira, RESTful. Brasileiro desenvolvido pela Caelum, o Vraptor tem como objetivo simplificar o desenvolvimento de aplicações web. É open source, baseado nas melhores práticas de programação e possui estrutura desacoplada.
HTTP Method
Como o VRaptor é um framework RESTful, este tira proveito do protocolo HTTP. Normalmente estes métodos são relacionados com as ações CRUD: POST (salvar), GET (consultar), PUT (atualizar) e DELETE (deletar). Se não for especificado qual o tipo de requisição um método irá responder, ele aceitará qualquer uma delas. Como ficaria o método salvar:

@Post
@Path("/produtos")
public void salvar(Produto produto) {...}

Injeção de dependencias
O VRaptor está fortemente baseado ao conceito de injeção de dependência. Aqui a ideia é que você não deve buscar aquilo que deseja acessar, mas tais necessidades devem ser fornecidas para você.
No Vraptor a injeção de dependencia é muito simples. Para isso usa-se a anotação @Component. Exemplo:

@Component
public class ProdutoDao {...}

Nesse caso a classe ProdutoDao será controlada pelo VRaptor. Dessa forma, quando o VRaptor for instanciar a classe ProdutosController, ele verificará que ela depende de um ProdutoDao, e criará uma instância da mesma.
O que é Angular.JS?
O Angular é um framework JavaScript mantido pelo Google. Ele se enquadra nos modelos MVC, MVP e MVVM, sendo considerado pelos seus desenvolvedores como um framework MVW (Model-View-Whatever), já que o foco do framework não é conceitos de separação. AngularJS foi contruído para o desenvolvimento de aplicações espetaculares, como você verá adiante nesse artigo.
Ele permite que você use HTML como linguagem de modelo e permite estendê-lo para expressar os componentes da sua aplicação de forma clara e sucinta. Segundo a própria documentação, o Angular é o que o HTML seria se tivesse sido projetado para aplicações dinâmicas.
Binding Bidirecional
Binding bidirecional nada mais é que um conceito onde as alterações feitas em qualquer uma das camadas refletem na outra. Isso porque a implementação do Angular nos permite trabalhar somente com a model na aplicação, a view de fato é uma projeção da model.
A camada de controle (controller) fica separada dessas outras duas. Isso faz com que os testes sejam mais rápidos e organizados pois testamos somente a controller de forma isolada. Dessa forma, eliminamos os problemas de dependência dos navegadores.
Inicialização
Módulo
No Angular, um módulo é uma coleção de componentes . Módulos devem ser utilizados para agrupar objetos que contribuem entre si para algum objetivo e também para facilitar a reutilização de comportamentos. Assim, uma aplicação é composta por um ou mais módulos.
MVW do Angular
Model: Objeto $scope utilizado nos controllers. As propriedades e comportamentos desse objeto representam o que pode ser acessado pela sua respectiva view;

View: Template HTML que contém os bindings e declaração das diretivas;

Controller: Objeto que contém a lógica da aplicação e é responsável pelo “meio de campo” entre view e model.
Injeção de depêndencia
Na primeira vez que um objeto é requisitado, o Angular invoca sua respectiva fábrica. A partir desse ponto, nas próximas injeções o objeto será obtido através de um cache dos objetos criados. Exemplo:

Inicialização automática
Inicialização manual
module.controller: Registra um novo controller para o módulo;

module.factory: Registra uma nova fábrica de serviço para o módulo;

module.directive: Registra uma diretiva customizada para o módulo.
function myController(scope, notifyService) {
scope.callNotify = function(msg) {
notifyService(msg);
};
}

myController.$inject = ['$scope', '$notify'];
Aplicações que utilizam Angular
YouTube on PS3
DoubleClick
yap. TV Facebook Application
Full transcript