EmberJS - Primeiros Passos!

593
-1

Published on

Palestra de introdução ao EmberJS. Objetivo de serem realizadas em especial, nas faculdades de Computação e Sistemas.

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
593
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

EmberJS - Primeiros Passos!

  1. 1. EmberJS - Primeiros Passos por: Anderson de Castro
  2. 2. AGENDA 1. O que é? 2. Conceitos Básicos 3. Templates 4. Demo
  3. 3. “A framework for creating ambitious web applications”
  4. 4. Responsáveis...
  5. 5. Conceitos Básicos
  6. 6. TEMPLATES Onde ficará a interface da aplicação. <script type=”text/x-handlebars” id=”application”> Hello EmberJS! {{outlet}} </script>
  7. 7. ROUTER Responsável por gerencia o estado do aplicativo. App.Router.map(function(){ this.resource(“usuarios”); this.resource(“contato”); }); http://minhaaplicacao.com/#/usuarios http://minhaaplicacao.com/#/contato
  8. 8. COMPONENTS Tag HTML customizada. Útil para criar controles reutilizáveis na aplicação. <script type=”text/x-handlebars” id=”components/twitter-foto”> <img src=”http://www.gravatar.com/avatar/email_hexMD5?s=200” alt=””> </script> Meu Avatar {{twitter-foto}}
  9. 9. MODELS Objeto que guarda o estado de persistência. É apresentado para o usuário através dos templates. App.Pessoa = DS.Model.extend({ nome: DS.attr(‘string’), email: DS.attr(‘string’) });
  10. 10. ROUTE É um objeto que diz ao Template qual objeto será apresentado. App.IndexRoute = Ember.Route.extend({ model: function(){ return $.getJSON(‘https://api.github.com/repos/emberjs/ember.js/pulls'); } });
  11. 11. CONTROLLERS Objeto que armazena o estado da aplicação. Propriedades podem ser recuperadas e transmitidas ao Template. App.PessoaController = Ember.ObjectController.extend({ adicionar: function(){ console.log(“adicionando nova pessoa...”); }, editando: false });
  12. 12. VIEWS Obs.: - Precisa sofisticar o tratamento de eventos de usuário? - Precisa criar componentes reutilizáveis? Então, USEMOS uma View!
  13. 13. VIEWS NO HTML: <script type=”text/x-handlebars” id=”diga-ola”> Como vai {{view.nome}} </script> NO JS: var view = Ember.View.create({ templateName: ‘diga-ola’, nome: ‘Maria Rita’ });
  14. 14. VIEWS No HBS {{#view App.Clicavel}} Pode clicar aqui! {{/view}} No JS App.Clicavel = Ember.View.extend({ click: function(evt){ alert(“Você acabou de clicar aqui!”); } });
  15. 15. DEMONSTRAÇÃO - Aplicação que cadastre pessoas e suas redes sociais. - Apresentar listagem desses com seus respectivos avatares e usuários de contas.
  16. 16. Referências: Site Oficial: http://emberjs.com Site brasileiro: http://emberjs.com.br Grupo: https://www.fb.com/groups/EmberJS.Brasil
  17. 17. OBRIGADO!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×