Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic...

86
Chapter 2: Welcome to Ionic What is Apache Cordova?

Transcript of Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic...

Page 1: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 2: Welcome to Ionic

What is Apache Cordova?

Page 2: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Software setup

Install Node.js

Install Git

Install Bower

Install Gulp

Install Cordova and Ionic CLI

2

Page 3: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

3

Page 4: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Hello Ionic

4

Page 5: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

5

Page 6: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The browser developer tools setup

Google Chrome

6

Page 7: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Mozilla Firefox

7

Page 8: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Scaffolding the tabs template

8

Page 9: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Scaffolding the side menu template

9

Page 10: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 3: Ionic CSS Components and Navigation

Ionic CSS components

Ionic grid system

10

Page 11: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

11

Page 12: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Page structure

12

Page 13: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

13

Page 14: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Buttons

14

Page 15: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Lists

15

Page 16: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Cards

16

Page 17: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Form elements

17

Page 18: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

18

Page 19: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

19

Page 20: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

20

Page 21: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Integrating Ionic CSS components with AngularJS

21

Page 22: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

22

Page 23: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

23

Page 24: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The Ionic router

A simple two-page app

24

Page 25: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

25

Page 26: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

26

Page 27: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 4: Ionic and SCSS

Working with Ionic SCSS

Basic swatch

27

Page 28: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

28

Page 29: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Building a swatch

29

Page 30: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

30

Page 31: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

31

Page 32: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 5: Ionic Directives and Services

Ionic Platform service

Headers and footers

32

Page 33: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Content

ion-refresher

33

Page 34: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

34

Page 35: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

35

Page 36: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$ionicScrollDelegate

36

Page 37: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Ionic view events

37

Page 38: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

ion-nav-bar

38

Page 39: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

39

Page 40: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

ion-nav-buttons

40

Page 41: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$ionicHistory

41

Page 42: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

42

Page 43: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Ionic loading

43

Page 44: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The Action Sheet service

Popover and Popup services

44

Page 45: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$ionicPopup

45

Page 46: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

46

Page 47: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

47

Page 48: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The ion-list and ion-item directives

48

Page 49: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

49

Page 50: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Gesture directives and services

50

Page 51: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 6: Building a Bookstore App

Bookstore architecture

51

Page 52: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The server-side API documentation

52

Page 53: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

A Bookstore demo

53

Page 54: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Step 2 – Refactoring the template

54

Page 55: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Refactoring the menu

55

Page 56: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Step 5 – Creating templates and integrating with the controller data

The Login template

56

Page 57: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The Browse template

57

Page 58: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The Book template

58

Page 59: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The Cart template

59

Page 60: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The Purchase template

60

Page 61: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 7: Cordova and ngCordova

Setting up a platform-specific SDK

The Android setup

61

Page 62: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Testing the setup

Testing for Android

62

Page 63: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

63

Page 64: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Testing for iOS

64

Page 65: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Ionic plugin API

Search plugins

65

Page 66: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

66

Page 67: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

ngCordova

Legend

67

Page 68: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$cordovaToast

68

Page 69: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$cordovaDialogs

69

Page 70: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$cordovaFlashlight

70

Page 71: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$cordovaLocalNotification

71

Page 72: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

$cordovaGeolocation

72

Page 73: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 8: Building a Messaging App

The Ionic Chat app

Firebase

Setting up a Firebase account

AngularFire

73

Page 74: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

The application architecture

Previewing the app

74

Page 75: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

75

Page 76: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Testing the application

76

Page 77: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

77

Page 78: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

78

Page 79: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

79

Page 80: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

80

Page 81: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

81

Page 82: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

82

Page 83: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Chapter 9: Releasing the Ionic App

Generating installers using Cordova CLI

Android installer

83

Page 84: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Ionic package

Generating the required keys

84

Page 85: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Appendix: Additional Topics and Tips

Ionic CLI

Ionic server, emulate, and run

85

Page 86: Chapter 2: Welcome to Ionic - Packt Publishing · Install Cordova and Ionic CLI 2. 3. Hello Ionic 4. 5. The browser developer tools setup ... Integrating Ionic CSS components with

Ionic Creator

86