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
js/app.js |
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) { $stateProvider .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 $urlRouterProvider.otherwise('/app/main'); }); |
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"> <h1>Playlist</h1> </ion-content> </ion-view> |
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: 
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..
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
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> </ion-nav-buttons> |
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-nav-buttons> <ion-content class="has-header"> <h1>Main</h1> </ion-content> </ion-view> |
Oh that’s looking HOT now.
Let’s clean up the menu.html now
nano templates/menu.html |
I made mine look like this.
<ion-side-menus> <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-bar> <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> </ion-pane> <ion-side-menu side="left"> <header class="bar bar-header bar-stable"> <h1 class="title">Left</h1> </header> <ion-content class="has-header"> </ion-content> </ion-side-menu> </ion-side-menus> |
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