Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebApps com AngularJS e MongoDB (CPBR14)

Vitor Leal
January 31, 2014

WebApps com AngularJS e MongoDB (CPBR14)

Desenvolvendo protótipos com AngularJS e MongoDB na Campus Party 2014 - http://www.youtube.com/watch?v=NhJQhJo6HCI

Vitor Leal

January 31, 2014
Tweet

More Decks by Vitor Leal

Other Decks in Technology

Transcript

  1. • Teve uma ideia • Quer lançar um produto rápido

    (Startup) • Tem que fazer uma prova de conceito • Tem que apresentar um MVP Imagine que você:
  2. • NodeJS • Python • Ruby • PHP Você tem

    muitas opções: mas não tem tempo…
  3. Por que usar o mongoLab? • Tem versão FREE •

    Não precisa programar o Back-End! • Utiliza uma API em REST • Retorna os dados em formato JSON! • Cross-Origin Resource Sharing (CORS)
  4. Exemplo da API REST • URL padrão https://api.mongolab.com/api/1 • GET

    /databases/{db}/collections?apiKey={key}! • GET /databases/{db}/collections/{coll}?apiKey={key}! • POST /databases/{db}/collections/{collection}?apiKey={key}! • data: JSON.stringify( { "data": "value", "data": "value" } )
  5. Sem escrever nenhuma linha de código no Back-End sobra mais

    tempo pra você focar no que interessa nesse momento, o seu aplicativo
  6. AngularJS (v.1.2.10) Um framework para criar aplicações web dinâmicas, de

    maneira rápida, testável e de fácil manutenção
  7. O que o AngularJS oferece? • Templates (view) • Two-way

    Data-binding • Injeção de dependências • Directives! • Testes (Unit/E2E)
  8. Modelo • O modelo da aplicação é representado pelo objeto

    $scope, que liga a View e o Controller myController.js myView.html
  9. Controllers • São funções usadas para "aumentar" a instância do

    $scope. Adicionando um valor ou um comportamento a um objeto
  10. Views • As views no angular são simplesmente HTML5 É

    onde toda a presentation logic deve estar
  11. Two-Way Data-Binding • Data binding no angular funciona de maneira

    bi-direcional, qualquer alteração na View se reflete no Model e vice-versa
  12. Services e factorys • São objetos que executam tarefas específicas

    e que são controlados pela injeção de depêndencias. • $http! • $locale! • $timeout! • $filter
  13. $http • O service $http facilita a integração com APIs.

    Métodos: .get, .post, .put, .delete, .jsonp
  14. Routes (ngRoute) • Em apps mais complexos utilize o $routeProvider

    do angular, para definir qual controller e template deve ser utilizdo em cada path.
  15. Criando um factory para mongoLab • Vamos utilizar o módulo

    ngResource para criar nosso factory e enviar dados par o mongoLab
  16. Como utilizar nosso factory • Vamos utilizar o módulo ngResource

    para criar nosso factory e enviar dados par o mongoLab