AngularJS应用访问Android手机画廊

• 下载angularjs.zip - 4.5 KB

介绍 本文演示了如何使用AngularJS调用Android应用程序公开的REST api来查看图库。 背景 Android和iOS都有相当多的远程访问应用程序，但是开发者却缺乏api来远程访问手机功能。因此，mymobkiti是作为我的软件解决方案的一部分来开发的，以填补这一空白。 使用的代码 使用代码很简单，一旦打开myMobKit服务，导航到web URL，就可以看到所有公开的REST api。 , , 有api来列出和流媒体(图像和视频)在手机上。使用AngularJS，使用$resource服务可以很容易地调用REST api。 , 您可以创建返回所需媒体列表的资源 隐藏,复制Code

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;

		} ]);

利用创建的模块，您可以轻松检索所有图像和视频。 隐藏,复制Code

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浏览器中显示它们。 隐藏,复制Code

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

, 历史 2015年3月7日-初版 本文转载于：http://www.diyabc.com/frontweb/news30626.html