Bare Bones App – A Proof of concept

It’s a pretty exciting time for me. I have my first beta version of my application working. This version is just demonstrating the functionality of the application and not the visual design of the application, also all data and links in this app are only test data the final app will have proper data.

At the start I demonstrate how the app responds to the phone being turned. Then I show the navigation of the application and viewing websites within the app

Now that you have seen the app in action lets look at how it works.

This app is a single page application that pulls data in as its requested using ajax. I used angular.js javascript framework with some html / css to create this app.

How it Works

At the heart of this app is an angular router. This router reads the app’s HTTP header for any changes. When a button in this app is pressed it sends a variable of he button to the HTTP header. Inside the angular router is a group of .when() functions. These functions are waiting for the HTTP header to meet the condition of that .when() function. When the condition is met the router will load a template file and insert it into the html page in between the view  tags.

The Code

Router

Index.html’s view tag

Currently each category , subcategory , service has its own template and controller. The controller binds its data to the template.

each {{ }} tag represents a variable bound to the controller.

Further Development

From here I need to further develop the app and slim it down. Having a controller and template for each “page” of the app isn’t the best practice. I would rather have a controller and template that takes care of all top level categories , all sub categories and all services.

The data is stored as javascript objects , this is fine for small amounts of data but for apps with lots of data it tends to bloat the app a bit. I want to ether incorporate a sqlite database or a json data storage solution.

Advertisement