EmberJS - Primeiros Passos!

  • 309 views
Uploaded on

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

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

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
309
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. EmberJS - Primeiros Passos por: Anderson de Castro
  • 2. AGENDA 1. O que é? 2. Conceitos Básicos 3. Templates 4. Demo
  • 3. “A framework for creating ambitious web applications”
  • 4. Responsáveis...
  • 5. Conceitos Básicos
  • 6. TEMPLATES Onde ficará a interface da aplicação. <script type=”text/x-handlebars” id=”application”> Hello EmberJS! {{outlet}} </script>
  • 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. 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. 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. 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. 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. VIEWS Obs.: - Precisa sofisticar o tratamento de eventos de usuário? - Precisa criar componentes reutilizáveis? Então, USEMOS uma View!
  • 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. 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. DEMONSTRAÇÃO - Aplicação que cadastre pessoas e suas redes sociais. - Apresentar listagem desses com seus respectivos avatares e usuários de contas.
  • 16. Referências: Site Oficial: http://emberjs.com Site brasileiro: http://emberjs.com.br Grupo: https://www.fb.com/groups/EmberJS.Brasil
  • 17. OBRIGADO!