Angular js 4php

504 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
504
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Angular js 4php

  1. 1. GET /AngularJs 200 Ok
  2. 2. Evaldo Barbosa Analista de Sistemas Presidente do PHP­MA Artigos publicados em sites como: http://www.imasters.com.br http://www.vivaolinux.com.br http://www.php­df.org http://www.phpmaranhao.com.br
  3. 3. O que é AngularJS MVC Client-side HTML melhorado
  4. 4. E como eu comecei? Fazendo o que todo programador deve fazer: Ler código. Alguma documentação (angularjs.org)
  5. 5. E pra usar? <script src="lib/angular/angular.js"></script>
  6. 6. Por que é bom? ● Google ● Extende o HTML ● Tira o MVC do servidor ● Aprendizagem rápida ● Velocidade na codificação ● Proteção contra XSRF
  7. 7. Tirando o MVC do Servidor ● Codificação de APIs no backend – Maior velocidade na codificação – Mais foco na regra de negócio ● JS de sintaxe fácil ● Two-way data binding
  8. 8. Começando
  9. 9. Two-way data binding Alteração dos dados do Model de forma fácil Atualização da interface automática
  10. 10. Diretivas melhoram o HTML ● ng-app: inicia uma aplicação ● ng-controller: marca o início de um controller ● ng-show/ng-hide: visibilidade de um objeto HTML ● ng-model: vincula um objeto a um atributo do model ● ng-click/ng-change: eventos ● ng-repeat: faz mágica
  11. 11. ng-repeat
  12. 12. Modularidade e DI ● Serviços – Data factories ● Diretivas ● Filtros ● Componentes – Estendem o DOM com diretivas
  13. 13. Anote a receita MVC com AngularJS … mais rotas, diretivas MVC com AngularJS … mais rotas, diretivas  personalizadas...personalizadas...
  14. 14. Controllers e Rotas ● Rotas configuráveis ● Um Controller por Rota
  15. 15. Diretivas personalizadas <my-directive></my-directive> <span my-directive></span> App.directive('my-directive',function() { return { restrict: 'EA', template: '<div class=”angular-js-4-php”>Quer twittar a #4php ?</div>' } });
  16. 16. Melhorando ainda mais ● Bootstrap (http://getbootstrap.com) ● FontAwesome ( http://fortawesome.github.io/Font-Awesome/) ● Jasmine (http://pivotal.github.io/jasmine/) ● Yoman, Bower, Angular-seed, ...
  17. 17. Usando código online Plunkr.co jsfiddle.net
  18. 18. Perguntas?
  19. 19. Muito obrigado @evaldobarbosa evaldobarbosa@gmail.com http://www.linkedin.com/in/evaldobarbosa

×