Ionic Part 2

Part 2 of Ionic will focus on cleaning up the default app that gets built with ionic build, and more on running the emulator.

We have our nice shiny app now, sure would be nice if this thing didn’t focus on music, we are of course a chat application. Lets do some cleanup, and hopefully not break anything.

Ionic controllers are located in


If you nano that file or use whatever editor you like you will see all the default page routings, lets clean it up.

Specifially looking at the .config section of js/app.js I made mine look like

.config(function($stateProvider, $urlRouterProvider) {
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    .state('app.main', {
      url: "/main",
      views: {
        'menuContent' :{
          templateUrl: "templates/main.html",
          controller: 'MainCtrl'
  // if none of the above states are matched, use this as the fallback

this will cause main.html to load. But wait, we don’t have a main.html or a MainCtrl, well lets fix that.

cd www
nano templates/main.html
<ion-view title="Playlist">
  <ion-content class="has-header">

Add the controller.

nano js/controller.js

Add this (do it to the bottom of the file).

.controller('MainCtrl',function($scope,$stateParams) {

Now do the emulate..

ionic emulate ios

If you see something like this: iOS Simulator Screen shot Jul 21, 2014, 6.46.04 PM for a long time. Do not fret I do not know what causes it, but it’s not really that important, simply close the emulator (Command + q) and do ionic emulate ios again.

If all went well you should see this..
iOS Simulator Screen shot Jul 21, 2014, 6.57.10 PM

But where is the sidemenu?

Let’s See.

Well if I click and drag the mouse to the right I can see the side menu just fine

iOS Simulator Screen shot Jul 21, 2014, 6.59.57 PM

It’s probably as simple as a missing icon, let’s check it out.

Let’s try to add this

  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

to the main.html file.

<ion-view title="Main">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  <ion-content class="has-header">

Oh that’s looking HOT now.

iOS Simulator Screen shot Jul 21, 2014, 7.03.06 PM

Let’s clean up the menu.html now

nano templates/menu.html

I made mine look like this.

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Left</h1>
    <ion-content class="has-header">

We are all but cleaned up let’s get rid of some other unnecessary things.

nano js/controllers.js

Remove this stuff

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
.controller('PlaylistCtrl', function($scope, $stateParams) {

We don’t need it.

Delete the html files we don’t need as well.

rm templates/browse.html
rm templates/login.html
rm templates/playlist.html
rm templates/playlists.html
rm templates/search.html

That’s it your now clear.

if you do

ionic emulate ios

and you see the exact same thing as before you’re good.

That is all for now, check out part 3 where we start building the interface.

–John “Clean App is Best App” Hass

Leave a Reply

Your email address will not be published. Required fields are marked *