使用AngularJS 應用訪問 Android 手機的圖片庫

更新時間：2015年03月24日 10:34:50 投稿：hebedich

這篇文章主要介紹了使用AngularJS 應用訪問 Android 手機的圖片庫的相關資料,需要的朋友可以參考下

Download angularjs.zip - 4.5 KB

介紹

這篇文章來說明如何使用AngularJs調(diào)用android Apps暴露的REST APIS來訪問圖像庫.

背景

Android和IOS 有很多遠程訪問的app,但是開發(fā)者缺少遠程訪問手機特征的API.因此,myMoKit的開發(fā)是用來填補軟件解決方案的缺陷的.

使用代碼

使用代碼是很簡單的,你只要通過web URL 引用myMoKit 服務,你就可以看見所有暴露的REST API了

這些在手機里面的API列表和流媒體.通過AngularJs來調(diào)用REST APIS可以很方便的使用$resource 服務。

你可以創(chuàng)建你需要的返回媒體列表的資源

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

利用創(chuàng)建過的模塊,你可以很輕易的獲取到所有的圖片和視頻

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>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

AngularJS輔助庫browserTrigger用法示例
這篇文章主要介紹了AngularJS輔助庫browserTrigger用法,結(jié)合實例形式分析了輔助庫browserTrigger的功能及單元測試中的使用技巧,需要的朋友可以參考下
2016-11-11
AngularJS入門教程之模塊化操作用法示例
這篇文章主要介紹了AngularJS模塊化操作用法,結(jié)合實例形式分析了AngularJS基于模塊化操作避免命名沖突的相關操作技巧,需要的朋友可以參考下
2016-11-11
解決angular2 獲取到的數(shù)據(jù)無法實時更新的問題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無法實時更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關資料，需要的朋友可以參考下。
2017-07-07
AngularJS入門教程二：在路由中傳遞參數(shù)的方法分析
這篇文章主要介紹了AngularJS在路由中傳遞參數(shù)的方法,結(jié)合實例形式分析了AngularJS實現(xiàn)路由中傳遞參數(shù)的相關技巧,并總結(jié)了相關操作步驟與注意事項,需要的朋友可以參考下
2017-05-05
利用Angularjs和bootstrap實現(xiàn)購物車功能
在學習了如何簡單開始一個Angular程序之后，跟著網(wǎng)上的教程我也來實現(xiàn)一個購物車功能，為了減少頁面樣式設計我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。
2016-08-08
使用JavaScript的AngularJS庫編寫hello world的方法
這篇文章主要介紹了使用JavaScript的AngularJS庫編寫hello world的方法,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下
2015-06-06
AngularJS指令中的綁定策略實例分析
這篇文章主要介紹了AngularJS指令中的綁定策略,結(jié)合實例形式分析了scope綁定策略的分類與具體實現(xiàn)方法,需要的朋友可以參考下
2016-12-12
Angular的Bootstrap(引導)和Compiler(編譯)機制
這篇文章主要介紹了Angular的Bootstrap(引導)和Compiler(編譯)機制的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
Angularjs為ng-click事件傳遞參數(shù)
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06