IONIC Stuff

Some stuff are different on mobile development than desktop development as we are accustomed. On this file you'll see some Ionic tips.

Here you'll see:

Some useful codes

Starting

To start, run ionic serve
To start and see both iOS and Android screens, run ionic serve -l

Using Google Maps

Instead of using Google Maps code - google.maps.event.addDomListener(window, 'load', initialize); - to call the initialize function, we need to use the own ionic way of call the function:

ionic.Platform.ready(initialize)

Zoom

As we do with overflow: scroll to web development, with Ionic there is something called <ion-scroll></ion-scroll>. An example:

<ion-scroll zooming="true" direction="xy" class="localmap-box">
</ion-scroll>

Side Menus

All the content of a menu goes to <ion-nav-view> tag, adding a name="someNameHere". An example:

<ion-nav-view name="menuContent"></ion-nav-view>

To define what/who will fill this content area out, we need to say which HTML file goes to which page.

.state('app.playlist' , {
      url : '/playlist',
      views: {
            'menuContent': {
                  templateUrl: 'templates/playlist.html'
            }
      }
})

And we need to define who is the menu:

.state('app' , {
url : '/app',
abstract: true,
templateUrl : '/templates/menu.html'
})

So, explaining what happened on a simple way: we've defined who is the menu - which HTML file it is - and where the page contents goes to, then we built a page called playlist, and the content of this page goes to menu Content area of the menu.

Menu bonus

To close the menu on a item click, put the option menu-close inside of the tag. An example:

<ion-item menu-close ng-click="login()">
      Login
</ion-item>

Links

On web development, we are always using something like href="/assets/images/image.png" when we're using links, right? We are always working with relative links, but on mobile development is different: every link that does not starts with #/ or path/... will be broken, so we need to use the absolute links. An example of it:

<a href="#/app/playlists"></a>
<img src="images/image.png" />

Emulating

We can emulate the ionic app on both iOS and Android.

iOS

Run ionic platform add ios to add this option
Then run ionic build ios
And to emulate, run ionic emulate ios

The 3rd option will emulate your app on the latest iPhone's version - on the moment that I'm writing this, it's on iPhone 6. If you wanna try with other version, first check which versions there are:

ios-sim showdevicetypes

After that, you can choose and run it. An example:

ionic emulate ios --target="iPhone-5"

Now imagine if you could update your codes in the same time its running on emulator. Impossible? No. Just add -cls at the final of your code:

ionic emulate ios --target="iPhone-5" -cls

nncl/IONIC Stuff.md