O Poderoso AngularJS

500 views
433 views

Published on

Uma Abordagem bem completa sobre o Framework, passando pelo "O Que é AngularJS, AngularJS?", Alguns Core Concepts, Bootstrap & Runtime, Mitos, Prós, Contras e finalizando com uma abordagem bem completa do que está por vir na versão 2.0 do framework.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

O Poderoso AngularJS

  1. 1. O poderoso AngularJS
  2. 2. Beto MUNIZ Paulo PIRES @obetomuniz @paulo_hp
  3. 3. Agenda O que é AngularJS? Conceitos Bootstrap e Runtime Mitos, prós e contras The future is here Demo Time Referências
  4. 4. O que é AngularJS?
  5. 5. Extende o HTML
  6. 6. two-way data binding
  7. 7. Components Based
  8. 8. Alguns Conceitos
  9. 9. directives
  10. 10. **ngApp
  11. 11. **ngController
  12. 12. **ngModel
  13. 13. **ngRepeat
  14. 14. **ngClick
  15. 15. **ngSrc
  16. 16. Custom Directives
  17. 17. factories, services, providers
  18. 18. **$http
  19. 19. **$location
  20. 20. **$log
  21. 21. **$timeout
  22. 22. **$animate
  23. 23. filters
  24. 24. **filter
  25. 25. **number
  26. 26. **order
  27. 27. routing
  28. 28. **ngRoute
  29. 29. **$routeParams
  30. 30. **$routeProvider
  31. 31. **ngView
  32. 32. $scope
  33. 33. ngResources
  34. 34. ngCookies
  35. 35. ***
  36. 36. Bootstrap & Runtime
  37. 37. Bootstrap
  38. 38. 1. Navegador faz o parse do HTML para o DOM
  39. 39. 2. Carrega o angular.js
  40. 40. 3. Espera pelo evento DOMContentLoaded
  41. 41. 4. O Angular 'procura' pela diretiva ng-app
  42. 42. 5. O $injector é configurado de acordo com as dependências
  43. 43. 6. E cria $compile e o $rootScope
  44. 44. 7. O $compile compila o DOM dinâmico e linka com o $scope
  45. 45. Runtime
  46. 46. 1. Inicia-se com o contexto de execução do angular chamando $scope.$apply(stimulusFn)
  47. 47. 2. Executa a função stimulusFn
  48. 48. 3. Entra no $digest Loop
  49. 49. 4. Agenda a execução com $evalAsync
  50. 50. 5. Confere a $watch list
  51. 51. 6. E renderiza novamente o DOM
  52. 52. Mitos, prós e contras
  53. 53. Mitos
  54. 54. AngularJS não protege o seu sistema de desenvolvedores que escrevem um péssimo código
  55. 55. AngularJS não substitui o jQuery, mas pode evitar o seu uso em alguns casos
  56. 56. AngularJS não é o melhor, porém nunca me deixou na mão
  57. 57. AngularJS não é mágico, tudo depende de você.
  58. 58. Prós
  59. 59. compreensivo
  60. 60. rico em funcionalidades
  61. 61. grande comunidade
  62. 62. Injeção de dependência no sangue.
  63. 63. Testable Friendly
  64. 64. by Google!
  65. 65. Contras (na nossa opinião)
  66. 66. Documentação mais ou menos
  67. 67. Performance
  68. 68. Templates Engessados
  69. 69. The future is here Angular 2.0
  70. 70. Mobile first
  71. 71. Modularização do Framworks
  72. 72. Change Detection
  73. 73. Dependency Injection
  74. 74. Templating
  75. 75. Persistance
  76. 76. Routing
  77. 77. Logging
  78. 78. Annotations
  79. 79. Scaffolding
  80. 80. Reference App
  81. 81. Demo Time
  82. 82. github.com/paulohp/whatsup-google-io
  83. 83. Referências e Links
  84. 84. docs.angularjs.org/api code.angularjs.org/1.2.17/docs/api/ng/directive docs.angularjs.org/api/ng#directive code.angularjs.org/1.2.17/docs/api/ng/filter code.angularjs.org/1.2.17/docs/api/ng/service ng-learn.org/2014/03/AngularJS-2-Status-Preview/ tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ docs.angularjs.org/guide/bootstrap sitepoint.com/understanding-angulars-apply-digest/ mattkruse.com/angular/
  85. 85. The END

×