Lately I've been working on my first Ionic based app, I've found that working those 20 minutes I have on the train into London,really helps in getting that consistency that is needed to get a side project going.
The app I'm working on is for martial artists to record short videos of techniques they are shown in class. Then later they can go back review the video of a technique and remind themselves of how it should go before they go to their class. A lot of martial artists I know watch a lot of technique videos on YouTube and spend a lot of time searching for videos that show the current technique they are learning, even if it is being demonstrated by someone other than their instructor. So my idea is to allow them to create their own personal video library that the can refer back to.
The app has two main views, the first is where they can add a title and the date of the video entry they are going to make and the second view is of all the saved videos they've made ordered by date.
The first problem I had when starting development was how to manage the navigation between screens. I was use to the way jQuerymobile handles this by creating complete pages all with a header that is repeated in each separate page. Ionic doesn't do this, and I needed a way to have multiple pages and be able to navigate back and forth between views.
I found some great examples on Codepen.io one of them showed how to use views within Ionic and manage the navigation between view using the ion-view directive.
So my application is made up of a series of templates, each containing a ion-view component that loads into the ion-view component within my main index page. The ion-nav-view component keeps track of the current view and can navigate back to the previous view when the user clicks on the back arrow.
One of the things I love about Ionic is how it uses smooth CSS3 animations for the transitions between views, all that are available by default. Transitions don't need to be set up as they do in jQuerymobile.
No comments:
Post a Comment