9. Saving and Loading Data Using Firebase | Ionic Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Ionic Cookbook

By : Hoc Phan

4.2 (20)

Ionic Cookbook

4.2 (20)

By: Hoc Phan

Overview of this book

The world of mobile development is extremely fragmented with many platforms, frameworks, and technologies available. Ionic is intended to fill that gap, by enabling developers to build apps that have a native feel to them, using web technologies such as HTML, CSS, and AngularJS. Ionic makes it easy for front-end developers to become app developers. The framework provides superior performance with deep Cordova integration and a comprehensive set of tools for prototyping, backend support, and deployment. Ionic Cookbook takes you through the process of developing a cross-platform mobile app using just HTML5 and the JavaScript-based Ionic. You will start with an introduction to the CLI and then move on to building and running an app. You will explore common features of real-world mobile apps such as authenticating a user, and getting and saving data using either Firebase or Local Storage. Next, the book covers how Ionic integrates with Cordova to support native device features using ngCordova, and you will discover how to take advantage of existing modules around its ecosystem. You will also delve into advanced topics, including how to extend Ionic to create new components. Finally, the book will walk you through customizing the Ionic theme and building the app so that it can be deployed to all platforms.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Free Chapter

1. Creating Our First App with Ionic

1. Creating Our First App with Ionic

Introduction

Setting up a development environment

Creating a HelloWorld app via CLI

Creating a HelloWorld app via Ionic Creator

Copying examples from Ionic Codepen Demos

Viewing the app using your web browser

Viewing the app using iOS Simulator

Viewing the app using Xcode for iOS

Viewing the app using Genymotion for Android

Viewing the app using Ionic View

Customizing the app folder structure

2. Managing States and Navigation

2. Managing States and Navigation

Introduction

Creating a tab interface with nested views

Creating a multistep form with validation

3. Adding Device Features Support

3. Adding Device Features Support

Introduction

Taking a photo using the device camera

Capturing video and allowing playback

Composing an email with an attachment from an app

Picking and adding a contact

Adding Google Maps with geocoding support

4. Offline Data Storage

4. Offline Data Storage

Introduction

Creating a to-do app using ngStorage for Local Storage

Creating a social networking app using SQLite

5. Handling Gestures and Events

5. Handling Gestures and Events

Introduction

Detecting drag events with a gesture coordinate

Communication between a view, controller, and directive using events

6. App Theme Customization

6. App Theme Customization

Introduction

Customizing themes for specific platforms

Creating an introduction screen with a custom header

7. Extending Ionic with Your Own Components

7. Extending Ionic with Your Own Components

Introduction

Creating a scroll progress bar directive

Creating a custom filter

Animating an app using requestAnimationFrame with event binding

8. User Registration and Authentication

8. User Registration and Authentication

Introduction

Configuring a Facebook app with Firebase authentication

Configuring a Twitter app with Firebase authentication

Configuring a Google+ project with Firebase authentication

Creating an Ionic social authentication project for Facebook using $firebaseAuth

Creating a LinkedIn app and configuring authentication in Auth0

Integrating Auth0's LinkedIn authentication in an Ionic project

9. Saving and Loading Data Using Firebase

9. Saving and Loading Data Using Firebase

Introduction

Saving array data to Firebase

Rendering a large Firebase data set using collection-repeat

Saving form data to Firebase

10. Finalizing Your Apps for Different Platforms

10. Finalizing Your Apps for Different Platforms

Introduction

Building and publishing an app for iOS

Building and publishing an app for Android

Using PhoneGap Build for cross-platform applications

Index

Index

Rendering a large Firebase data set using collection-repeat

When your app grows, the size of the database also grows. Typically, there are many ways to handle large datasets such as paging, caching, and filtering. However, there is a very useful feature in Ionic that allows you to repeat through a large list of items without sacrificing performance. Ionic's collection-repeat is similar to AngularJs' ng-repeat. The main difference is its rendering mechanism. Most of the time, the app does not need to render thousands of items at once. So, collection-repeat accesses only a subset of the data and binds it to the current page, where it is visible to the user.

Getting ready

You will continue to work on the previous app. There are some modifications in index.html and app.js.

How to do it...

Here is how you can retrieve data and add, edit, and delete items:

Open index.html to edit it.

Insert the following code within <body>:

<ion-pane ng-controller="ItemCtrl">
  <ion-header-bar class="bar...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Ionic Cookbook

Search

Your notes and bookmarks