AngularJS アプリケーションを使用して Android Phone の画像ライブラリにアクセスする_AngularJS

angularjs.zip をダウンロード - 4.5 KB

はじめに

この記事では、AngularJs を使用して Android アプリによって公開されている REST API を呼び出し、画像ライブラリにアクセスする方法を説明します。

背景

Android および IOS 用のリモート アクセス アプリは数多くありますが、開発者には携帯電話の機能にリモート アクセスするための API が不足しているため、ソフトウェア ソリューションの欠点を補うために myMoKit が開発されました。

コードを使用

コードの使用は非常に簡単です。Web URL を通じて myMoKit サービスを参照するだけで、公開されているすべての REST API を確認できます

携帯電話でこれらの API リストとストリーミング メディアを呼び出すと、AngularJs を通じて簡単に $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;
     });
  };

Webブラウザで取得した一連の画像を簡単に表示できます

<div class="alert alert-info">
<p> </p>
 
<h4 id="Usage-i-Image-Gallery-i">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 lazy"  src="/static/imghwm/default1.png"  data-src="{{streamImageLink}}&#63;uri={{image.contentUri}}&&id={{image.id}}&kind=1"  ng-click="showImage($index)" ng- / alt="AngularJS アプリケーションを使用して Android Phone の画像ライブラリにアクセスする_AngularJS" ></li>
</ul>
</div>

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。