Month: December 2015

Using SQLite instead of LocalStorage with Ionic

For the last few Ionic apps I’ve built I’ve used Local Storage to save data, usually app settings or a list of names. Generally a small amount of data so it was fine in local storage.

Now on the app I’m building for myself I need to use a better data storage solution, one of the possible options is SQLite. Searching on the internet I found Nic Raboy’s great introduction on how to set up and insert data into an SQLite database in your Ionic app.

Use SQLite Instead of Local Storage in Ionicframework

This is a great intro, the one thing I did find was I was running my app in the Chrome emulator and the SQLite database wasn’t being created. So I have to build my app and get it running the iOS emulator, which with the power of the Ionic framework takes only 3 lines to do:

  1. $ ionic platform add ios
  2. $ ionic build ios
  3. $ ionic emulate ios

This launches the iOS emulator loading your Ionic app. Then if you open Safari and go to the developer tools you can use the inspector to look at what your app is doing  (Develop > Simulator) any console logs you have in your code will appear in the console.

With a combination of Nic’s article and using the Web Developer tools in Safari I’m able to get SQLite up and running in my app and move away from local storage.

Adding Buttons to Sidemenu Ionic Template

I’m working on a new Ionic app, one of my own ideas. For the layout of the app I’m using the Sidemenu template instead of the Tabs template, which I’ve used a few times before.

In this app I wanted to have a New button in the top right corner of the app. So you can add a new item to the app from anywhere within the app.

Now I wasn’t to sure how to add this in the Sidemenu template. It looks as though all the views load into <ion-nav-view> which is in the main index.html page. So adding the new button in <ion-nav-buttons> in the index.html page doesn’t work.

In order to add this New button I needed to add it to the menu.html page where the toggle menu button is. This view is displayed all the time, so my New button is available either in a list view or the details view.

To position the button to the right of the app I simply added the side attribute as ‘right’. This is how my page was set up:

 

<ion-side-menu-content>
<ion-nav-bar class=”bar-stable”>
<ion-nav-back-button>
</ion-nav-back-button>

<ion-nav-buttons side=”left”>
<button class=”button button-icon button-clear ion-navicon” menu-toggle=”left”>
</button>
</ion-nav-buttons>
<ion-nav-buttons side=”right”>
<button class=”button”>New</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name=”menuContent”></ion-nav-view>
</ion-side-menu-content>

The Learn Ionic site

I’m working on Ionic app and I need to open a modal in order to record some information. Pretty standard stuff, but sometimes you forget these type of things. Thankfully the Ionic team have the Learn Ionic site.

This great site gives you a sort of cookbook of Ionic recipes of some of the things you may need to have in your Ionic apps.

 

Loading a service at startup in a Ionic app

This is more a note to myself than a full on tutorial.

Some of the Ionic apps I create need to create add something to local storage during startup of my app. The way I’ve been doing this recently is to run a service in the Run function of my app. Something like this:

.run(function(MyService){
MyService.appStartup();
})

I’ve used this a couple of times to load something in local storage, usually app settings. Then in my service (MyService.js) I can check what is stored in my settings, and if there is nothing there I can load them in via the same service.