Click here to Skip to main content
15,881,779 members
Articles / Web Development / HTML

AngularJS App to access Android Phone Gallery

Rate me:
Please Sign up or sign in to vote.
3.50/5 (7 votes)
6 Mar 2015CPOL 26.3K   393   10  
Develop an AngularJS application to view photos stored in Android phone.


This articles demonstrates how to use AngularJS to invoke REST APIs exposed by an Android app in order to view the gallery.


There are quite a number of remote access apps for both Android and iOS but lack of APIs to be used by developers to remotely access the phone features. As such, myMobKit is developed as part of my software solution to fill this gap.

Using the code

To use the code is straight-forward, once you bring up the myMobKit service, navigate to the web URL and you can see all the exposed REST APIs.


Image 1

Image 2


There are APIs to list and stream the media (image and video) in the phone. With AngularJS, to invoke the REST APIs is very easy using the $resource service.

Image 3


Image 4

You can create a resource which return the list of media that you want

angular.module('', [ 'ngResource' ]);
				function($rootScope, $resource, $location, $http) {
					var mediaServices = {};									
					mediaServices.getAllMedia = function(media) {							
							var path = $ + '/services/api/media/' + media;
							return $resource(path, {},
										get : {
											method : 'GET',
											isArray : false
					return mediaServices;

		} ]);

Leveraging the created module, you can then easily retrieve all the images and videos.

var getAllImages = function(){
					function success(resp, headers) {						
						$scope.allImages = resp;
						$scope.images = $scope.allImages.images;	
					}, function err(httpResponse) {
						$scope.errorMsg = httpResponse.status;
		var getAllVideos = function(){
					function success(resp, headers) {						
						$scope.allVideos = resp;
						$scope.videos = $scope.allVideos.videos;	
					}, function err(httpResponse) {
						$scope.errorMsg = httpResponse.status;

With the returned list of images, you can easily display them within the web browser.

<div class="alert alert-info">

<h4 class="alert-heading">Usage - <i>Image Gallery</i></h4>


<ul class="row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ng-repeat="image in images" style="margin-bottom:25px"><img class="img-responsive" ng-click="showImage($index)" ng-src="{{streamImageLink}}?uri={{image.contentUri}}&amp;&amp;id={{}}&amp;kind=1" /></li>


Image 5


March 7th 2015 - Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior)
Malaysia Malaysia
A programmer for a long time, and still learning everyday.

A supporter for open source solutions, and have written quite a few open source software both in .NET and Java.

Comments and Discussions

-- There are no messages in this forum --