Ionic Framework By Example电子书

Ionic Framework By Example

Table of Contents

Ionic Framework By Example

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. First Look at Ionic

The beginning

The problem

Apache Cordova

Early hybrid apps

What is Ionic?

Short history of Ionic

Features of Ionic

CSS features

JavaScript features

The Ionic CLI

Setting up Ionic

Summary

2. To-Do List App

Creating our first application

Creating our to-do list app

The Ionic workflow

In-depth look at our project

Envisioning our app

Building our todo app

Creating the UI

The code

Wiring things up

Summary

3. Running Ionic Apps

Running our todo app

The ionic serve technique

Emulating with Chrome

Ionic serve labs

The Ionic view

Testing todo app with the Ionic view

Device

Android

iOS

Summary

4. Ionic Components

Creating a new to-do list application

Overview of the Bucket-List app

Breaking down the app

Designing the UI

Implementing the input box

Implementing the ion-list application

Using ion-list for our Bucket-List app

The ion-list component

ion-item

ion-option-button

Writing the Angular code for our Bucket-List app

Coding our input box

Creating the controller

Creating the input box model

Creating an array for the Bucket-List items

Implementing code for the Add button

Implementing the Delete button

Wire it all up

Binding the controller

Binding the input box model

Wiring up the Add button

Binding ion-item

Using ng-repeat to render the list

Wiring up the ion-option-button element

Testing our Bucket-List app

Summary

5. The London Tourist App

Introduction to the London Tourist App

Creating the London Tourist app

The side menu app design

Using the Ionic side menu template

Seeing the LTA side menu app in action

Exploring the LTA side menu app's code

The index.html file

The menu.html file

The <ion-side-menus>element

The <ion-side-menu-content>element

The <ion-side-menu>element

Developing the LTA application

The local JSON database

Creating the local JSON database file

Populating the JSON file

Designing the view

Wiring up the data

Retrieving the data with the $http service

Summary

6. Advanced Ionic Components

The Ionic Popover

Implementing the popover

Adding the menu button

Coding the popover

Adding the $ionicPopover service

Finishing the popover code

Creating the popover.html file

Wiring up the popover

The Ionic Modal

Creating the modal

Implementing the modal

Creating the modal.html file

Wiring up the modal

Summary

7. Customizing the App

Customizing the look and feel of your app

Ionic styles with SASS

Ionic SCSS overview

The ionic.app.scss file

Setting up SCSS

Customizing the SCSS

$ionicConfigProvider

Summary

8. Building a Simple Social App

The Ionic tabs application

Creating an Ionic tabs application

Running the tabs-app application

Overview of the tabs-app application

Overview of the tabs.html file

The <ion-tab> element

Adding tabs to the tabs-app application

Adding the state for the new tab

Creating the tab-wall.html file

Creating the WallController controller

Creating the tab

Summary

9. Connecting to Firebase

Extending our tabs-app Ionic app

Implementing the post wall feature

The backend challenge

Firebase

Setting up a new Firebase account

Integrate Firebase into tabs-app application

Adding Firebase and Angular-Fire scripts

Implementing Firebase to our app

Pulling from database

Adding to database

Summary

10. Roundup

Uncovered features of Ionic

Appcamp.IO

The Ionic documentation

The Ionic creator

The Ionic code pen

Ionic.IO

The Ionic playground

The Ionic community

Useful resources

Summary

Index