Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

AngularJS App to access Android Phone Gallery

3.50/5 (7 votes)
6 Mar 2015CPOL 26.7K   394  
Develop an AngularJS application to view photos stored in Android phone.

Introduction

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

Background

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

C++
angular.module('resources.media', [ 'ngResource' ]);
angular.module('resources.media').factory(
		'Media',
		[
				'$rootScope',
				'$resource',
				'$location',
				'$http',
				function($rootScope, $resource, $location, $http) {
					var mediaServices = {};									
					mediaServices.getAllMedia = function(media) {							
							var path = $rootScope.host + '/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.

C++
var getAllImages = function(){
			Media.getAllMedia('image').get().$promise.then(
					function success(resp, headers) {						
						$scope.allImages = resp;
						$scope.images = $scope.allImages.images;	
					}, function err(httpResponse) {
						$scope.errorMsg = httpResponse.status;
					});
		};	
		
		var getAllVideos = function(){
			Media.getAllMedia('video').get().$promise.then(
					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">
<p>&nbsp;</p>

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

<p>&nbsp;</p>
&nbsp;

<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={{image.id}}&amp;kind=1" /></li>
</ul>
</div>

 

Image 5

History

March 7th 2015 - Initial version

License

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