AngularJS 应用访问 Android 手机图库

• 下载 angularjs.zip - 4.5 KB

引言

本文演示了如何使用 AngularJS 调用 Android 应用暴露的 REST API，以便查看相册。

背景

虽然有许多用于 Android 和 iOS 的远程访问应用，但缺乏供开发者远程访问手机功能的 API。因此，myMobKit 作为我软件解决方案的一部分被开发出来，以填补这一空白。

使用代码

使用代码非常简单，一旦启动 myMobKit 服务，导航到 Web URL，您就可以看到所有暴露的 REST API。

 

 

有 API 可以列出和流式传输手机中的媒体（图像和视频）。使用 AngularJS，使用 $resource 服务调用 REST API 非常容易。

 

您可以创建一个资源，该资源返回您想要的媒体列表

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;

		} ]);

利用创建的模块，您可以轻松检索所有图像和视频。

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;
					});
		};	

使用返回的图像列表，您可以轻松地在 Web 浏览器中显示它们。

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

 

历史

2015年3月7日 - 初始版本