AngularJS 애플리케이션을 사용하여 Android 휴대폰의 사진 라이브러리에 액세스하세요_AngularJS

angularjs.zip 다운로드 - 4.5KB

소개

이 문서에서는 AngularJ를 사용하여 Android 앱에서 노출된 REST APIS를 호출하여 이미지 라이브러리에 액세스하는 방법을 설명합니다.

배경

Android, IOS용 원격접속 앱은 많지만 개발자들이 휴대폰 기능에 원격접속할 수 있는 API가 부족합니다. 따라서 myMoKit은 소프트웨어 솔루션의 단점을 보완하기 위해 개발되었습니다.

코드 사용

코드 사용법은 매우 간단합니다. 웹 URL을 통해 myMoKit 서비스를 참조하기만 하면 노출된 REST API를 모두 볼 수 있습니다

이러한 API 목록과 휴대폰의 스트리밍 미디어는 AngularJ를 통해 REST APIS를 호출하면 $resource 서비스를 쉽게 사용할 수 있습니다.

미디어 목록을 반환하는 데 필요한 리소스를 생성할 수 있습니다

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

웹 브라우저를 통해 얻은 일련의 이미지를 쉽게 표시할 수 있습니다

<div class="alert alert-info">
<p> </p>
 
<h4 class="alert-heading">Usage - <i>Image Gallery</i></h4>
 
<p> </p>
 
 
<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}}&#63;uri={{image.contentUri}}&&id={{image.id}}&kind=1" /></li>
</ul>
</div>

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.