加载中

Download angularjs.zip - 4.5 KB

Introduction

This articles demonstrates how to use AngularJS to invoke REST APIs exposed by an Android app in order to view the gallery.

Background

There are quite a number of remote access apps for both Android and iOS but lack of APIs to be used by developers to remotely access the phone features. As such, myMobKit is developed as part of my software solution to fill this gap.

Using the code

To use the code is straight-forward, once you bring up the myMobKit service, navigate to the web URL and you can see all the exposed REST APIs.

 

Download angularjs.zip - 4.5 KB

介绍

这篇文章来说明如何使用AngularJs调用android Apps暴露的REST APIS来访问图像库.

背景

Android和IOS 有很多远程访问的app,但是开发者缺少远程访问手机特征的API.因此,myMoKit的开发是用来填补软件解决方案的缺陷的.

使用代码

使用代码是很简单的,你只要通过web URL 引用myMoKit 服务,你就可以看见所有暴露的REST API了

There are APIs to list and stream the media (image and video) in the phone. With AngularJS, to invoke the REST APIs is very easy using the $resource service.

You can create a resource which return the list of media that you want

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;

    } ]);

Leveraging the created module, you can then easily retrieve all the images and videos.

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

With the returned list of images, you can easily display them within the web browser.

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



这些在手机里面的API列表和流媒体.通过AngularJs来调用REST APIS可以很方便的使用$resource 服务。

你可以创建你需要的返回媒体列表的资源

angular.module(&apos;resources.media&apos;, [ &apos;ngResource&apos; ]);
angular.module(&apos;resources.media&apos;).factory(
    &apos;Media&apos;,
    [
        &apos;$rootScope&apos;,
        &apos;$resource&apos;,
        &apos;$location&apos;,
        &apos;$http&apos;,
        function($rootScope, $resource, $location, $http) {
          var mediaServices = {};                  
          mediaServices.getAllMedia = function(media) {              
              var path = $rootScope.host + &apos;/services/api/media/&apos; + media;
              return $resource(path, {},
                  {
                    get : {
                      method : &apos;GET&apos;,
                      isArray : false
                    }
                  });
          };
          return mediaServices;

    } ]);

利用创建过的模块,你可以很轻易的获取到所有的图片和视频

var getAllImages = function(){
      Media.getAllMedia(&apos;image&apos;).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(&apos;video&apos;).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}}?uri={{image.contentUri}}&&id={{image.id}}&kind=1" /></li>
</ul>
</div>

返回顶部
顶部