GET /AngularJS 200 OK

Palestra sobre AngularJS realizada no 4.PHP - 4o. Fórum de Profissionais PHP do Maranhão.

Transcript

1. GET /AngularJs 200 Ok
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. O que é AngularJS MVC Client-side HTML melhorado
4. E como eu comecei? Fazendo o que todo programador deve fazer: Ler código. Alguma documentação (angularjs.org)
5. E pra usar? <script src="lib/angular/angular.js"></script>
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. 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. Começando
9. Two-way data binding Alteração dos dados do Model de forma fácil Atualização da interface automática
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. ng-repeat
12. Modularidade e DI • Serviços – Data factories • Diretivas • Filtros • Componentes – Estendem o DOM com diretivas
13. Anote a receita MVC com AngularJS … mais rotas, diretivas MVC com AngularJS … mais rotas, diretivas personalizadas... personalizadas...
14. Controllers e Rotas • Rotas configuráveis • Um Controller por Rota
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. 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. Usando código online Plunkr.co jsfiddle.net
18. Perguntas?
19. Muito obrigado @evaldobarbosa evaldobarbosa@gmail.com http://www.linkedin.com/in/evaldobarbosa