O poderoso AngularJS

O poderoso AngularJS

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.

Fff7258836f20ea66b061b49a51fe8dd?s=128

Beto Muniz

July 02, 2014
Tweet

Transcript

  1. O poderoso AngularJS

  2. Beto MUNIZ Paulo PIRES @obetomuniz @paulo_hp

  3. None
  4. Agenda O que é AngularJS? Conceitos Bootstrap e Runtime Mitos,

    prós e contras The future is here Demo Time Referências
  5. O que é AngularJS?

  6. Extende o HTML

  7. two-way data binding

  8. Components Based

  9. Alguns Conceitos

  10. directives

  11. **ngApp

  12. **ngController

  13. **ngModel

  14. **ngRepeat

  15. **ngClick

  16. **ngSrc

  17. Custom Directives

  18. factories, services, providers

  19. **$http

  20. **$location

  21. **$log

  22. **$timeout

  23. **$animate

  24. filters

  25. **filter

  26. **number

  27. **order

  28. routing

  29. **ngRoute

  30. **$routeParams

  31. **$routeProvider

  32. **ngView

  33. $scope

  34. ngResources

  35. ngCookies

  36. ***

  37. Bootstrap & Runtime

  38. Bootstrap

  39. 1. Navegador faz o parse do HTML para o DOM

  40. 2. Carrega o angular.js

  41. 3. Espera pelo evento DOMContentLoaded

  42. 4. O Angular 'procura' pela diretiva ng-app

  43. 5. O $injector é configurado de acordo com as dependências

  44. 6. E cria $compile e o $rootScope

  45. 7. O $compile compila o DOM dinâmico e linka com

    o $scope
  46. Runtime

  47. 1. Inicia-se com o contexto de execução do angular chamando

    $scope.$apply(stimulusFn)
  48. 2. Executa a função stimulusFn

  49. 3. Entra no $digest Loop

  50. 4. Agenda a execução com $evalAsync

  51. 5. Confere a $watch list

  52. 6. E renderiza novamente o DOM

  53. Mitos, prós e contras

  54. Mitos

  55. AngularJS não protege o seu sistema de desenvolvedores que escrevem

    um péssimo código
  56. AngularJS não substitui o jQuery, mas pode evitar o seu

    uso em alguns casos
  57. AngularJS não é o melhor, porém nunca me deixou na

    mão
  58. AngularJS não é mágico, tudo depende de você.

  59. Prós

  60. compreensivo

  61. rico em funcionalidades

  62. grande comunidade

  63. Injeção de dependência no sangue.

  64. Testable Friendly

  65. by Google!

  66. Contras (na nossa opinião)

  67. Documentação mais ou menos

  68. Performance

  69. Templates Engessados

  70. The future is here Angular 2.0

  71. Mobile first

  72. Modularização do Framworks

  73. Change Detection

  74. Dependency Injection

  75. Templating

  76. Persistance

  77. Routing

  78. Logging

  79. Annotations

  80. Scaffolding

  81. Reference App

  82. Demo Time

  83. github.com/paulohp/whatsup-google-io

  84. Referências e Links

  85. 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/

  86. The END