Uma introdução a Angular 2

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

Transcript

1. http://angular.io/
2. Felipe Sousa felipesousa.github.io
5. 1.3 Millhões ANGULAR 1.X ANG 2 COMUNIDADE MAIO/16
6. ?
7. WEB EVOLUIU
9. Criar padrões
11. Custom Elements Templates HTML Imports Shadow DOM
12. Custom Elements
13. <my-tag> <!– content --> </my-tag>
14. COMPONENTIZAÇÃO
16. Frameworks
18. ?
19. Diretivas
21. Modules Directives Controllers Services
22. NG-EUROPE ANGULAR2
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
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
47. ANGULAR2 E O TYPESCRIPT
48. ES5 ES6 TYPESCRIPT ANGULAR2 E O TYPESCRIPT
49. Classes Interfaces Tipos Módulos Validadores ANGULAR2 E O TYPESCRIPT ....
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 *
62. https://augury.angular.io
63. https://cli.angular.io/
64. PERGUNTAS?
65. OBRIG DO! felipesousa.github.io