ITS381B: Deep Dive to Ionic Creator Instruction to use


For example an application such as chat room, binds an Angular view is bind to a Firebase backend, synchronizing a list of messages between the DOM, Angular, and Firebase in realtime.

How to use Firebase

Login to, create project.

Project overview (upper-left)-> project setting.

Click the pink </> button which says “Add firebase to your web app.”

Then the window below opens.

Database -> indicate there are “Cloud Firestore” and “Realtime database”.

You need to select “Realtime database”.

Then set both value ‘true’ in order to use the db.

Todos App the code:


finished video 1 and 2 of Ionic

How to Design (UI, UX, Aesthetics, Underlying Mechanizms-Front and Back Architecture in Consideration)


  1. Custom themes
  2. Mockup design + layout
  3. List backed Angular service -integrate firebase
  4. Route parameters

finished video 1 : Simple app

video 2 : T-shirt order app


Firebase/AngularFire Installation and Use

Goto -> docs-> libralies -> angularfire

copy the path of firebase and angularfire. – has all library functions to populate data to user managements.

Firebase/AngularFire Guide for documentation.

To install required script files:

<!-- Angular -->
<script src=""></script>

<!-- Firebase -->
<script src=""></script>

<!-- AngularFire -->
<script src=""></script>

To initialize database

ionic Modal open


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s