html - What steps do I need to take to use the Ionic Framework with trigger.io?

Question

I unsuccessfully searched for some documentation of how to integrate the Ionic Framework with trigger.io, but I don't see any.

If anyone knows or has some, I'd love to see them. If not, I'll venture forward and post my steps here :)

Answer 1

Including Ionic Framework

Ionic Framework provides CSS and JavaScript libraries that you would include in your HTML. There are two methods for including Ionic Framework in your trigger.io app:

1. Store the Files Locally (development/production):

• You can download the Ionic CSS and JavaScript files from the Ionic CDN.
• Add the JS, CSS, and fonts folders to your src folder.
• Reference ionic.min.css and ionic.bundle.js in your index.html file like so:

<link href="/css/ionic.min.css" rel="stylesheet"></link>
<script src="/js/ionic.bundle.js"></script>

• This is the same as including any other libraries in your HTML.
• Note that AngularJS is included in ionic.bundle.js, so I would suggest checking out the AngularJS API documentation.

2. Use a CDN (development only):

A content delivery network (CDN) is a system of servers that delivers files to a client efficiently based on location.

You can include Ionic files in your project by linking them from the Ionic CDN:

<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>

While Ionic is still in the beta stages you should make sure to always change your CDN link or download the new files whenever they release a new version.

I'd avoid using the CDN if possible, as it can cause problems if the phone loses internet connection. It also means that you are re-downloading the files every time the app runs.

Firebase

I'd also suggest checking out Firebase, a great backend solution for mobile apps. It can also handle user authentication.

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.2/angularfire.min.js"></script>