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