AngularJS For Mobile Application Development

3 min read

I have recently started using AngularJS for building hybrid mobile applications. I want to share my experience about how Angular is helpful for creating hybrid mobile apps.
First, lets discuss about what is AngularJS?

AngularJS is a client side JavaScript framework with MVC capability. Developed By Brat Tech LLC, Google and the community. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, testable and quick to develop.

Why AngularJS is great to create mobile applications?
AngularJS provides us with really good ways to interact with our backend services which is crucial in case of mobile applications where we need to talk to our backend APIs to drive the application. AngularJS provides concepts like two-way data biding that help us to write better and more maintainable JavaScript based applications. AngularJS also provides a good structure to our code and helps in keeping our code clean.
In this blog I would like to demonstrate how you can create a hybrid mobile app using the Ionic framework which is a cross platform hybrid mobile application development framework.
You can easily setup Ionic by following the instructions here. Ionic is really good and has got some nice UI components and also integrates well with the Angular framework.
1. Create the Ionic app
[source]
$ ionic start myapp
[/source]
This statement pulls a base ionic app from here for you to build on.
Lets navigate into the folder and see the files generated by Ionic for us.
[source]
$ cd myapp
[/source]
The base ionic app has the following folders and files.
Also you can see that Angular has been included in the app by default so that you can make use of it.
Screen Shot 2014-11-13 at 11.45.57 AM
2. Run the app
[source]
$ ionic serve
[/source]
This starts serving the Ionic app at localhost:8100 by default. It also watches for changes in the project’s files and reloads the server.
Then automatically run the app in browser. Ionic app has automatically created 3 tabs. One is dashboard, second one friends tab and another tab called account tab.
Now lets customize the app and add two new tabs for Stock location and Supplier and removing the existing tabs.
1. Lets add routes to support these new tabs in app.js
[source language=”JavaScript”]
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state(‘tab’, {
url: ‘/tab’;,
abstract: true,
templateUrl: ‘templates/tabs.html’;
})
.state(‘tab.dash’, {
url: ‘/dash’,
views: {
‘tab-dash’: {
templateUrl: ‘templates/tab-dash.html’,
controller: ‘DashCtrl’
}
}
})
.state(‘tab.suppliers’, {
url: ‘/suppliers’,
views: {
‘tab-suppliers’: {
templateUrl: ‘templates/tab-suppliers.html’,
controller: ‘SuppliersCtrl’
}
}
})
.state(‘tab.supplier-detail’, {
url: ‘/supplier/:supplierId’,
views: {
‘tab-suppliers’: {
templateUrl: ‘templates/suppliers-detail.html’,
controller: ‘SupplierDetailCtrl’
}
}
})
.state(‘tab.stock_location’, {
url: ‘/stocklocation’,
views: {
‘stocklocation’: {
templateUrl: ‘templates/stocklocation.html’,
controller: ‘stocklocationCtrl’
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(‘/tab/dash’);
});
[/source]
In each of the state method calls we pass the tab identifier along with a JavaScript object that tells the URL of the tab and which controller to call and which template file to render.
2.Create a controller for stock location in controller.js
[source language=”JavaScript”]
.controller(‘stocklocationCtrl’, function($scope, $http, $ionicPopup, popupAlert) {
$http.get(“data/location.json”)
.success(function(data) {
$scope.baseData = data;
})
$scope.search={};
$scope.search.location=””;
$scope.submitFilter = function() {
if($scope.search.location == “”)
{
$scope.showStock = false;
popupAlert.show(‘Alert’, “Please Select Location”);
return;
}
$scope.showStock = true;
$http.get(“data/stock.json”)
.success(function(data) {
$scope.allstock = data.stocks;
})
}
});
[/source]
For this controller we in addition to other dependencies we also inject Ionic’s popupAlert service. Inside the controller we fetch the stock locations and store it in $scope.baseData. We also create a JavaScript object to hold the search string using which we will be fetching the stock. We also write a handler for search while will be bound to a form in the view and inside this handler we do the search API call.
If the search string is empty we use Ionic’s popupAlert to show a very good looking popup.
3. Lets add some sample data as JSON files for our app.
[source language=”JavaScript”]
{
“stocks”:[
{
“Stock”:”Machine DM500″,
“Location”:”Project site”
},
{
“Stock”:”Crawler Machine DM505″,
“Location”:”store”
},
{
“Stock”:”Marina Machine PM008″,
“Location”:”store”
},
{
“Stock”:”Machine TH9876″,
“Location”:”Project site”
}
]
}
[/source]
Location and stock detail JSON files are available in the www/data directory. Here, for simplicity I have shown only the Stock JSON file.
4. Create three pages inside the templates folder.

The first two pages – tab-suppliers and suppliers-detail have information about the suppliers. Their controllers are very simple and you can view them here.
Here let me explain the stocklocation.html template.
[source language=”JavaScript”]

{{stock[“Stock”]}}
{{key}}
{{value}}



[/source]
In this template first we are building a select box to choose the location. This select field is bound to the $scope.search.location model. And the options are created using $scope.baseData that we fetched using the API in the controller and we use ng-repeat directive to iterate through the locations and generate the options. Then we create a submit button which will call the $scope.submitFilter method.
Secondly we have a part where we show the stock items again using ng-repeat on $scope.allstock if $scope.showStock is true (accomplished using ng-if) and also we apply a filter on these items using Angular filter inside ng-repeat.
I have explained using this app how you can make use of the various Angular directives and also services from the Ionic Framework.
Here are some screenshots from the app
supplier-pagestock-page
The entire source code is available at Github..
Hope you found this post useful. Please do leave comments.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *