使用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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
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 和 MySQL 基础教程(三)
2006/10/09 PHP
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
ExtJS 入门
2010/10/29 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
pytorch permute维度转换方法
2018/12/14 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
大学应届毕业生个人求职信
2013/09/23 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
商场营业员岗位职责
2015/04/14 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
一文搞懂Java中的注解和反射
2022/06/21 Java/Android