Click here to Skip to main content
13,634,012 members
Click here to Skip to main content
Add your own
alternative version

Stats

17.9K views
318 downloads
8 bookmarked
Posted 6 Mar 2015
Licenced CPOL

AngularJS App to access Android Phone Gallery

, 6 Mar 2015
Rate this:
Please Sign up or sign in to vote.
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.

 

 

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.

 

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

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.

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>

 

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)

Share

About the Author

mengwangk
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.

https://mengwangk.github.io/

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03-2016 | 2.8.180712.1 | Last Updated 7 Mar 2015
Article Copyright 2015 by mengwangk
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid