使用AngularJS 应用访问 Android 手机的图片库


Posted in Javascript onMarch 24, 2015

Download angularjs.zip - 4.5 KB

介绍

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

背景

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

使用代码

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

使用AngularJS 应用访问 Android 手机的图片库使用AngularJS 应用访问 Android 手机的图片库

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

使用AngularJS 应用访问 Android 手机的图片库使用AngularJS 应用访问 Android 手机的图片库

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

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>

使用AngularJS 应用访问 Android 手机的图片库

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

Javascript 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
js函数和this用法实例分析
Mar 13 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
jQuery插件实现控制网页元素动态居中显示
Mar 24 #Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 #Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 #Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 #Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 #Javascript
JavaScript实现找质数代码分享
Mar 24 #Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 #Javascript
You might like
Php注入点构造代码
2008/06/14 PHP
php 显示指定路径下的图片
2009/10/29 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php英文单词统计器
2016/06/23 PHP
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Less 安装及基本用法
2018/05/05 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
利用python获得时间的实例说明
2013/03/25 Python
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
教师实习自我鉴定
2013/12/11 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
司仪主持词两篇
2014/03/22 职场文书
五一口号
2014/06/19 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
盗窃案辩护词
2015/05/21 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript