Getting Started with Angular.JS

Apresentação sobre angular no 2nd Open Meeting do Pernambuco.JS

Transcript

1. Superheroic JavaScript MVW Framework
   Wednesday, August 14, 13
   

   View Slide

2. Cirdes Henrique
   Bacharel em Engenharia da Computação pelo CIn/UFPE
   Wednesday, August 14, 13
   

   View Slide

3. View Slide

4. BAGUNÇA.JS
   JAVASCRIPT

   View Slide

5. Design Stamina
   Hypothesis
   Wednesday, August 14, 13
   

   View Slide

6. Ramon Victor
   Especialista em Design da Informação pela UFPE
   Wednesday, August 14, 13
   

   View Slide

7. @RAMONVICTOR
   2008 2013
   OGILVY PARTEC JOY
   MARISTA UFPE
   DIVE

   View Slide

8. Motivações
   Budstime: uma rede social de eventos
   ! Tudo no $(document).ready();
   MV* era um requisito
   Frustração com Backbone.js
   Wednesday, August 14, 13
   

   View Slide

9. Wednesday, August 14, 13
   

   View Slide

10. Frameworks
    vs
    Libraries
    Wednesday, August 14, 13
    

    View Slide

11. Início
    GOOGLE

    View Slide

12. Início
    MISKO

    View Slide

13. Google Trends
    Wednesday, August 14, 13
    

    View Slide

14. Conceitos
    Client-Side templates
    MVC
    DATA

    View Slide

15. Client-Side templates
    TEMPLATE

    View Slide

16. Conceitos
    CLIENT-SIDE

    View Slide

17. MVC
    1970

    View Slide

18. Conceitos
    CLIENT-SIDE

    View Slide

19. Data Binding
    PROPRIEDADES

    View Slide

20. Conceitos
    CLIENT-SIDE

    View Slide

21. Dependency Injection
    LAW

    View Slide

22. Conceitos
    CLIENT-SIDE

    View Slide

23. Directives
    ng-app
    ng-controller
    ng-submit
    ng-repeat
    ng-view
    ng-model
    ng-change
    ng-hide
    ng-click
    Wednesday, August 14, 13
    

    View Slide

24. Directives
    Built-in
    Wednesday, August 14, 13
    

    View Slide

25. Directives
    Built-in
    Wednesday, August 14, 13
    

    View Slide

26. Directives
    Built-in
    Wednesday, August 14, 13
    

    View Slide

27. Directives
    • E - Element name:
    
    • A - Attribute:
    
    • C - Class:
    
    • M - Comment:
    
    Restrict:
    Built-in
    Wednesday, August 14, 13
    

    View Slide

28. jQuery to Angular
    jQuery
    index.html
    clientes.html
    empresa.html
    busca.html main.js
    $(document).ready();
    Wednesday, August 14, 13
    

    View Slide

29. jQuery to Angular
    AngularJS
    view.html
    my-controller.js
    my-directives.js
    my-services.js
    Wednesday, August 14, 13
    

    View Slide

30. jQuery to Angular
    Ex.: dropdown menu
    No AngularJS a view
    passa a ser o "registro
    oficial" dos
    comportamentos
    Wednesday, August 14, 13
    

    View Slide

31. Services
    $http
    $timeout
    $location
    $locale
    $route
    +

    View Slide

32. Testes automatizados
    KARMA
    JASMINE
    MOCHA
    QUNIT
    Wednesday, August 14, 13
    

    View Slide

33. Karma
    DEVE

    View Slide

34. Teste unitário
    EXEMPLO
    Wednesday, August 14, 13
    

    View Slide

35. POR ONDE
    Legal,

    View Slide

36. DOCUMENTACAO
    OFICIAL
    LIVROS
    VIDEO

    View Slide