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

Uma introdução a Angular 2

Uma introdução a Angular 2

Uma introdução ao Angular 2 - GDG I/O Extended Fortaleza

9deaa23e028758d7bcbc64c4141da328?s=128

Felipe Sousa

May 18, 2016
Tweet

More Decks by Felipe Sousa

Other Decks in Programming

Transcript

  1. http://angular.io/

  2. Felipe Sousa felipesousa.github.io

  3. None
  4. None
  5. 1.3 Millhões ANGULAR 1.X ANG 2 COMUNIDADE MAIO/16

  6. ?

  7. WEB EVOLUIU

  8. None
  9. Criar padrões

  10. None
  11. Custom Elements Templates HTML Imports Shadow DOM

  12. Custom Elements

  13. <my-tag> <!– content --> </my-tag>

  14. COMPONENTIZAÇÃO

  15. None
  16. Frameworks

  17. None
  18. ?

  19. Diretivas

  20. None
  21. Modules Directives Controllers Services

  22. NG-EUROPE ANGULAR2

  23. None
  24. NOVO CONCEITO DE COMPORTAMENTO NOVA USUABILIDADE DE DIRETIVAS ANGULAR2 E

    O TYPESCRIPT A1 TO A2
  25. Comportamento

  26. Components @ Comportamento

  27. Component Methods Directives Services View CSS’s Comportamento

  28. Aplicação no Angular 1.X Comportamento

  29. LOGIN CADASTRO PERFIL MODULE APP Comportamento

  30. Aplicação no Angular 2 Comportamento

  31. APP COMPONENT HEADER COMPONENT SIDEBAR COMPONENT CONTENT COMPONENT

  32. Diretivas

  33. 40+ Diretivas removidas Diretivas

  34. None
  35. ng-click ng-app ng-src ng-bind ng-blur ng-hidden ng-show .... Diretivas

  36. )[ NOVO CONCEITO DE DIRETIVAS! * * Diretivas

  37. <img ng-src=“{{myImg}}” ng-click=“log(‘click’)”> <a ng-href=‘{{link}}’></a> <img [src]=“myImg” (click)=“log(‘click’)”> <a [href]=“link”></a>

  38. [ ] – Diretivas responsáveis por troca de dados. Diretivas

  39. <img [src]="imagePath" [alt]="alterText"> Diretivas <a [href]="link">whatever</a>

  40. ( ) – Diretivas responsáveis por event binding Diretivas

  41. Diretivas <img [src]="imagePath" (mouseover)="log('mouseover')" (mousedown)="log('mousedown')" (mouseleave)="log('mouseleave')" (mouseup)="log('mouseup')" (click)="log('click')" >

  42. * - Diretivas próprias Diretivas

  43. Diretivas <ul *ngFor=‘let pessoa of pessoas’> <li>{{pessoa.name}}</li> </ul> <p *ngIf=‘data’>

    {{data}} </p>
  44. Diretivas <div [ngClass]=’{class: condition}'> ... </div>

  45. ANGULAR2 E O TYPESCRIPT

  46. None
  47. ANGULAR2 E O TYPESCRIPT

  48. ES5 ES6 TYPESCRIPT ANGULAR2 E O TYPESCRIPT

  49. Classes Interfaces Tipos Módulos Validadores ANGULAR2 E O TYPESCRIPT ....

  50. None
  51. ANGULAR2 E O TYPESCRIPT

  52. ANGULAR2 E O TYPESCRIPT Cenário

  53. ANGULAR2 E O TYPESCRIPT

  54. We love TypeScript for many things… With TypeScript, several of

    our team members have said things like 'I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks.” — Brad Green, Engineering Director - AngularJS
  55. A1 TO A2

  56. Bootstrap Component Service Controller

  57. Bootstrap*

  58. Components*

  59. Controllers*

  60. Services *

  61. None
  62. https://augury.angular.io

  63. https://cli.angular.io/

  64. PERGUNTAS?

  65. OBRIG DO! felipesousa.github.io