The document discusses the significant changes from version 1 to version 2 of the Ionic Framework, emphasizing new components and features such as action sheets, alerts, and gestures. It covers the transition to Angular 2, highlighting differences in architecture and the use of TypeScript. Additionally, it provides installation instructions and resources for getting started with Ionic 2 applications.

1. Globalcode – Open4education
Ionic Framework 2 - O que mudou?
Tatiane Aguirres Nogueira
Trilha Mobile

2. Globalcode – Open4education
TATIANE AGUIRRES NOGUEIRA
Desenvolvedora Front End e Mobile
aguirres.tati@gmail.com
linkedin.com/in/tatiane-aguirres-nogueira-555b28bb
tatianeaguirres.blogspot.com.br
github.com/tatianeaguirres
@tatianeaguirres

3. Globalcode – Open4education

4. Globalcode – Open4education
O que mudou da V1 para a V2?
Quase tudo mesmo 

5. Globalcode – Open4education
Windows phone

6. Globalcode – Open4education
HTML

7. Globalcode – Open4education
Cores

8. Globalcode – Open4education
Theming your App

9. Globalcode – Open4education
Componentes novos
Action Sheets

10. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts

11. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts

12. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts

13. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts

14. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts

15. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts
Badges

16. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts
Badges
Card Background Images

17. Globalcode – Open4education
Componentes novos
Action Sheets
Alerts
Basic Alerts
Prompt Alerts
Confirmation Alerts
Radio Alerts
Checkbox Alerts
Badges
Card Background Images
DateTime

18. Globalcode – Open4education
Componentes novos
FABs

19. Globalcode – Open4education
Componentes novos
FABs
Loading

20. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals

21. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover

22. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar

23. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment

24. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment
Slides

25. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment
Slides
Toast

26. Globalcode – Open4education
Componentes novos
FABs
Loading
Modals
Popover
Searchbar
Segment
Slides
Toast
Icons
http://ionicframework.com/docs/v2/ionicons/

27. Globalcode – Open4education
Componentes novos
Gestures
tap

28. Globalcode – Open4education
Componentes novos
Gestures
tap
press

29. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan

30. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan
swipe

31. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan
swipe
rotate

32. Globalcode – Open4education
Componentes novos
Gestures
tap
press
pan
swipe
rotate
pinch

33. Globalcode – Open4education

34. Globalcode – Open4education
Angular 2
Utiliza:
Components
Decorators
Typescript

35. Globalcode – Open4education
Angular 2
Utiliza:
Components
Decorators
Typescript
Não utiliza mais:
Controlers
Scope

36. Globalcode – Open4education
Angular 2
Utiliza:
Components
Decorators
Typescript
Não utiliza mais:
Controlers
Scope
Curso de Angular 2 gratuito em http://loiane.training

37. Globalcode – Open4education
Angular 2
Angular 1
app.js
Angular 2
app.ts

38. Globalcode – Open4education
Angular 2
app.component.ts

39. Globalcode – Open4education
Typescript
Linguagem “tipada”
Usa orientação a objetos
Está presente no Angular 2
Compila para JavaScript
Dica para testar o Typescript:
http://www.typescriptlang.org/Playground

40. Globalcode – Open4education
Playground Typescript

41. Globalcode – Open4education
Navegação

42. Globalcode – Open4education
Navegação
Ionic 1 Ionic 2

43. Globalcode – Open4education
Ionic Native
Os plugins mais populares do Cordova/PhoneGap
agora estão presentes na lib do Ionic 2:
Ex: Geolocation, Camera, Push, Bluetooh, SQLite,
Facebook, Calendar, Contacts, Google Maps, etc.
Instalação:
$ npm install ionic-native --save
http://ionicframework.com/docs/v2/native/

44. Globalcode – Open4education
Ionic Native

45. Globalcode – Open4education
Dica: utilize Atom
Editor de texto desenvolvido pelo GitHub
https://atom.io/
Package: Ionic Preview
https://atom.io/packages/ionic-preview
Package: Atom TypeScript
https://atom.io/packages/atom-typescript

46. Globalcode – Open4education
Ionic Preview

47. Globalcode – Open4education
Atom TypeScript

48. Globalcode – Open4education
Instalando e iniciando uma App

49. Globalcode – Open4education
Instalando e iniciando a app
$ npm install -g ionic cordova
$ ionic start [nomeDoApp] blank --v2 --ts
Templates Ionic 2: tutorial, tabs, sidemenu, super,
blank.

50. Globalcode – Open4education
$ ionic serve --lab

51. Globalcode – Open4education
Ionic Generate
Cria páginas para sua aplicação (html, scss e ts)
$ ionic g page [nomeDaPágina]

52. Globalcode – Open4education
Tatiane Aguirres Nogueira
OBRIGADA!