ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJS アプリケーションを使用して Android Phone の画像ライブラリにアクセスする_AngularJS

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

WBOY
リリース: 2016-05-16 16:07:59
オリジナル
1842 人が閲覧しました

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 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>
ログイン後にコピー

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート