Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Ionic 2 - O que mudou?

374 vues

Publié le

Nesta palestra veremos o que há de novo no Ionic Framework 2, essa poderosa ferramenta para criação de aplicações mobile híbridas para iOS, Android e Windows Phone. Falaremos sobre o que há de novo no Ionic 2 e veremos códigos de exemplo para demonstrar as diferenças e o que mudou entre a versão 1 e 2.

Publié dans : Technologie
  • Soyez le premier à commenter

Ionic 2 - O que mudou?

  1. 1. Globalcode – Open4education Ionic Framework 2 - O que mudou? Tatiane Aguirres Nogueira Trilha Mobile
  2. 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. 3. Globalcode – Open4education
  4. 4. Globalcode – Open4education O que mudou da V1 para a V2? Quase tudo mesmo 
  5. 5. Globalcode – Open4education Windows phone
  6. 6. Globalcode – Open4education HTML
  7. 7. Globalcode – Open4education Cores
  8. 8. Globalcode – Open4education Theming your App
  9. 9. Globalcode – Open4education Componentes novos Action Sheets
  10. 10. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts
  11. 11. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts
  12. 12. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts
  13. 13. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts
  14. 14. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts
  15. 15. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts Badges
  16. 16. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts Badges Card Background Images
  17. 17. Globalcode – Open4education Componentes novos Action Sheets Alerts Basic Alerts Prompt Alerts Confirmation Alerts Radio Alerts Checkbox Alerts Badges Card Background Images DateTime
  18. 18. Globalcode – Open4education Componentes novos FABs
  19. 19. Globalcode – Open4education Componentes novos FABs Loading
  20. 20. Globalcode – Open4education Componentes novos FABs Loading Modals
  21. 21. Globalcode – Open4education Componentes novos FABs Loading Modals Popover
  22. 22. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar
  23. 23. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment
  24. 24. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment Slides
  25. 25. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment Slides Toast
  26. 26. Globalcode – Open4education Componentes novos FABs Loading Modals Popover Searchbar Segment Slides Toast Icons http://ionicframework.com/docs/v2/ionicons/
  27. 27. Globalcode – Open4education Componentes novos Gestures tap
  28. 28. Globalcode – Open4education Componentes novos Gestures tap press
  29. 29. Globalcode – Open4education Componentes novos Gestures tap press pan
  30. 30. Globalcode – Open4education Componentes novos Gestures tap press pan swipe
  31. 31. Globalcode – Open4education Componentes novos Gestures tap press pan swipe rotate
  32. 32. Globalcode – Open4education Componentes novos Gestures tap press pan swipe rotate pinch
  33. 33. Globalcode – Open4education
  34. 34. Globalcode – Open4education Angular 2 Utiliza: Components Decorators Typescript
  35. 35. Globalcode – Open4education Angular 2 Utiliza: Components Decorators Typescript Não utiliza mais: Controlers Scope
  36. 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. 37. Globalcode – Open4education Angular 2 Angular 1 app.js Angular 2 app.ts
  38. 38. Globalcode – Open4education Angular 2 app.component.ts
  39. 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. 40. Globalcode – Open4education Playground Typescript
  41. 41. Globalcode – Open4education Navegação
  42. 42. Globalcode – Open4education Navegação Ionic 1 Ionic 2
  43. 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. 44. Globalcode – Open4education Ionic Native
  45. 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. 46. Globalcode – Open4education Ionic Preview
  47. 47. Globalcode – Open4education Atom TypeScript
  48. 48. Globalcode – Open4education Instalando e iniciando uma App
  49. 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. 50. Globalcode – Open4education $ ionic serve --lab
  51. 51. Globalcode – Open4education Ionic Generate Cria páginas para sua aplicação (html, scss e ts) $ ionic g page [nomeDaPágina]
  52. 52. Globalcode – Open4education Tatiane Aguirres Nogueira OBRIGADA!

×