#100DaysOfCode Days 32 & 33 Ionic App Routing and State Configuration

So far, we discussed how to install Ionic and start an app, how to use templates for the app’s UI, and how to design the structure of the app using Ionic directives.  Now, let’s dive more into JavaScript and focus on the inner workings of our app, starting with app configuration.

Please note, that I used the sidemenu template in my app for the course, which comes equipped with a set of HTML views in the “www” folder.  I may reference particular views and code that you may not include in your Ionic app project.  Therefore, today’s post shouldn’t be considered as a how-to guide like the previous ones. It’s more like a show-and-tell walk through of my app structure and code.  As always, if you want a complete description of how Ionic works, seek the source code or the docs.

Initializing the App

Opening the index.html file within www subfolder of the Ionic app, you’ll want to modify the body tag by naming your app. Keep in mind that if the name of your app is case-sensitive, you’ll want to make sure it’s spelled correctly in all dependencies.

<body ng-app="appName">

After naming the app, it must be initialized in the controllers code. Within www, you’ll find a js subfolder, and within that, you’ll find two separate files: app.js and controllers.js.  Open the app.js file and modify the angular module code by inserting the name of your app.

angular.module('appName', ['ionic', 'appName.controllers')]

You’ll want to do a similar task within the controllers.js file code. Find the angular module code and insert the name of your app.

angular.module('appName.controllers', [])

If you’re using a template, there will be code in the controllers.js file that you don’t need (it comes with the starter app). Delete all or what doesn’t pertain to the functionality of your app.  For me, this meant all the controller code since we were converting our web app to mobile in the course.  Because Ionic was built with AngularJS, we were able to use the controllers we created in the AngularJS web app course previously, modified them for Ionic and Cordova, and add them in our controllers.js file, saving a lot of time.

Configuring UI-Router App States

In the sidemenu.html file, there are several list items href links that help the user navigate the app.  Prof. Muppala said we weren’t allowed to share the full app code, so I created a similar code snippet of a navigation list in the sidemenu for explanation purposes:

example of a list within an Ionic app with navigation options

example of a list within an Ionic app with navigation options

Ionic uses Angular UI-router to handle the routing where $stateProvider is injected. In order for the navigation links to work, we have to configure the app states. Each state is configured as an object with key:value paired properties. Properties include the app url, the template view in use, the template url (as a property of view), and the controller used for that template.  This is all done within the app.js file. I created the code snippet below of how the app states are configured as objects:

UI-router states within app.js file

UI-router states within app.js file

There are different UI-router events that you can use for loading, success, and error messages, but I won’t go into that now in order to keep today’s post short and sweet.  If you would like more info on accessing the full capabilities of Angular UI-router in an Ionic app, I listed a few resources at the end of the post for further learning.

Configuring Resolve Objects

Within app state you can include a resolve object. Resolve objects help map the dependencies that should be injected in a controller, such as Angular factories and services.  For those of you who are unfamiliar with Angular, I find that Tyler McGinnis offers one of the best explanations of factories and services.  To save me the time, I suggest you read his definitions of both here if you would like further information on why factories and services are injected as dependencies.

Resolve objects are done before the controller is called for faster UI response. They are listed as key:value pairs within app state as a property of views. The key is the name of the dependency, the value is a function of it. The keys defined within the resolve object are later injected as dependencies in the controller in use.

In our app, we have a template view favorites.html that shows a collection of dishes a user adds as a favorite.  To configure functionality in the app state, I will need a key for dishes queried from the menuFactory using a .query( ) function, and a key for favorites queried from the favoriteFactory using a .getFavorites( ) function.  Therefore, this is what my resolve object within the favorites app state looked like:

the resolve objects define two keys: dishes and favorites

the resolve object define two keys: dishes and favorites

In the FavoritesController, I then inject the dishes and favorites key and define the $scope variable for each one. In adhering to Professor Muppala’s rules, I’m only showing you the code snippet relevant to the example:

FavoritesController code snippet

FavoritesController code snippet

Data related to dishes and favorites are fetched from the json database (db.json) and returned using the functions.

I’m almost done wrapping up the Ionic series for #100DaysOfCode.  I will include a guide on controllers within an Ionic app specifically, and one that discusses Cordova deployment as the last two posts within the series.   Also, please checkout the #100DaysOfCode GitHub repo, especially for days 27-35.  Because I’m not allowed to share all of my Ionic app code, I worked on additional projects that you can check out there.

*** Resources for Further Learning ***

  1. Take the same course, Multiplatform Mobile App Development with Web Technologies, that I did on Coursera for free* here.
  2. Read software engineer Rob Ferguson’s post on using UI-router and defining states here.
  3. Build an App with Navigation and Routing via LearnIonic here.
  4. Read app developer Andrew McGivery’s post on building controllers within an Ionic app here.

*** Days 31 & 32 Recap ***

  1. Submitted week 1 assignment for the Mobile App Dev course, started week 2 lectures
  2. Started week 4 lectures in the Web Design course on handlebars.js
  3. Created photo_gallery project for the course to practice.
  4. Added free-use images to subfolder to use within the template data
  5. Added custom Bootstrap themes to CSS subfolder as options
  6. Created albums.js file within js subfolder to store data objects, added object data
  7. Created gallery.js file within js subfolder for handlebars.js source compilation and template configuration
  8. Added four templates within index.html for showcasing data.
*Note: The course is free for those who don’t want certification. If you want a certificate of completion signed by Hong Kong University, you must enroll and pay for the course. Applying for a scholarship is an option as well.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s