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.
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.
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:
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:
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:
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:
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 ***
- Take the same course, Multiplatform Mobile App Development with Web Technologies, that I did on Coursera for free* here.
- Read software engineer Rob Ferguson’s post on using UI-router and defining states here.
- Build an App with Navigation and Routing via LearnIonic here.
- Read app developer Andrew McGivery’s post on building controllers within an Ionic app here.
*** Days 31 & 32 Recap ***
- Submitted week 1 assignment for the Mobile App Dev course, started week 2 lectures
- Started week 4 lectures in the Web Design course on handlebars.js
- Created photo_gallery project for the course to practice.
- Added free-use images to subfolder to use within the template data
- Added custom Bootstrap themes to CSS subfolder as options
- Created albums.js file within js subfolder to store data objects, added object data
- Created gallery.js file within js subfolder for handlebars.js source compilation and template configuration
- Added four templates within index.html for showcasing data.