AngularJS For Mobile Application Development

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.

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.

• tab-suppliers.html
• suppliers-detail.html
• stocklocation.html

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”]