使用AngularJS 应用访问 Android 手机的图片库  更新时间:2015年03月24日 10:34:50   投稿:hebedich   这篇文章主要介绍了使用AngularJS 应用访问 Android 手机的图片库的相关资料,需要的朋友可以参考下 Download angularjs.zip – 4.5 KB 介绍 这篇文章来说明如何使用AngularJs调用android Apps暴露的REST APIS来访问图像库. 背景 Android和IOS 有很多远程访问的app,但是开发者缺少远程访问手机特征的API.因此,myMoKit的开发是用来填补软件解决方案的缺陷的. 使用代码 使用代码是很简单的,你只要通过web URL 引用myMoKit 服务,你就可以看见所有暴露的REST API了 这些在手机里面的API列表和流媒体.通过AngularJs来调用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; }); }; 你可以很方便的通过web 浏览器来展示获取到的一系列图片 Usage – Image Gallery 以上所述就是本文的全部内容了,希望大家能够喜欢。 您可能感兴趣的文章: 《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库 js图片自动轮播代码分享(js图片轮播) 最简单的JavaScript图片轮播代码(两种方法) 原生js和jquery实现图片轮播特效 js实现图片旋转的三种方法 JS实现简易图片轮播效果的方法 Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件 JS简单的图片放大缩小的两种方法 JavaScript学习笔记之图片库案例分析 AngularJS Android 图片库 相关文章 angular中如何绑定iframe中src的方法 这篇文章主要介绍了angular中如何绑定iframe中src的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-02-02 AngularJS控制器controller给模型数据赋初始值的方法 这篇文章主要介绍了AngularJS控制器controller给模型数据赋初始值的方法,涉及AngularJS控制器controller简单赋值操作实现技巧,需要的朋友可以参考下 2017-01-01 对angularjs框架下controller间的传值方法详解 今天小编就为大家分享一篇对angularjs框架下controller间的传值方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 深入理解node exports和module.exports区别 下面小编就为大家带来一篇深入理解node exports和module.exports区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-06-06 浅谈angular2子组件的事件传递(任意组件事件传递) 今天小编就为大家分享一篇浅谈angular2子组件的事件传递(任意组件事件传递),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 AngularJS 将再发布一个重要版本 然后进入长期支持阶段 目前团队正在开发 AngularJS 1.7.0,而 1.7 的开发周期将一直持续到 2018 年 6 月 30 日 2018-01-01 Angular实现较为复杂的表格过滤,删除功能示例 这篇文章主要介绍了Angular实现较为复杂的表格过滤,删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下 2017-12-12 AngularJS实现的2048小游戏功能【附源码下载】 这篇文章主要介绍了AngularJS实现的2048小游戏,可实现通过键盘W、S、A、D键控制上下左右移动进行游戏的功能,涉及AngularJS页面元素动态操作及数值运算等相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下 2018-01-01 angular学习之动态创建表单的方法 这篇文章主要介绍了angular学习之动态创建表单的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 angular4自定义组件非input元素实现ngModel双向数据绑定的方法 这篇文章主要介绍了angular4自定义组件非input元素实现ngModel双向数据绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 最新评论

Download angularjs.zip – 4.5 KB

介绍

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

背景

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

使用代码

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

这些在手机里面的API列表和流媒体.通过AngularJs来调用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;
     });
  };

你可以很方便的通过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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

您可能感兴趣的文章:

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
  • js图片自动轮播代码分享(js图片轮播)
  • 最简单的JavaScript图片轮播代码(两种方法)
  • 原生js和jquery实现图片轮播特效
  • js实现图片旋转的三种方法
  • JS实现简易图片轮播效果的方法
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • JS简单的图片放大缩小的两种方法
  • JavaScript学习笔记之图片库案例分析
张贴在3