Angular js 4php

511 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
511
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for 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

×