Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started with Angular.JS

Cirdes
August 14, 2013

Getting Started with Angular.JS

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

Cirdes

August 14, 2013
Tweet

More Decks by Cirdes

Other Decks in Technology

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. 29

    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