Maison > interface Web > js tutoriel > le corps du texte

Utilisez l'application AngularJS pour accéder à la bibliothèque d'images du téléphone Android_AngularJS

WBOY
Libérer: 2016-05-16 16:07:59
original
1833 Les gens l'ont consulté

Télécharger angulairejs.zip - 4,5 Ko

Présentation

Cet article explique comment utiliser AngularJs pour appeler les API REST exposées par les applications Android afin d'accéder à la bibliothèque d'images.

Contexte

Il existe de nombreuses applications d'accès à distance pour Android et IOS, mais les développeurs manquent d'API pour l'accès à distance aux fonctionnalités du téléphone mobile. C'est pourquoi myMoKit a été développé pour combler les lacunes des solutions logicielles.

Utiliser le code

L'utilisation du code est très simple, il vous suffit de référencer le service myMoKit via l'URL web, et vous pouvez voir toutes les API REST exposées

Ces listes d'API et streaming multimédia sur les téléphones mobiles. L'appel des API REST via AngularJs peut facilement utiliser le service $resource.

Vous pouvez créer les ressources dont vous avez besoin pour renvoyer la liste des médias

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;
 
  } ]);
Copier après la connexion

Grâce au module créé, vous pouvez facilement obtenir toutes les photos et vidéos

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;
     });
  };
Copier après la connexion


Vous pouvez facilement afficher une série d'images obtenues via un navigateur 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}}&#63;uri={{image.contentUri}}&&id={{image.id}}&kind=1" /></li>
</ul>
</div>
Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal