如何從離子應用程序中使用REST API

發送表單數據parse.com MBaaS我非常新離子/角（今天開始自己出於需要），如何從離子應用程序中使用REST API

以教程以及單證的幫助下，

我一直在創建一個將數據提交給Parse.com MBaaS服務的演示/測試應用程序。

但一些地方是哪裏錯了，如何去增加三個表單字段

詳細無言以對：應用程序名稱是TestApp 類/表名是數據

有三列，FNAME， lname和uname（用於名字lastname和用戶名）

下面是我一直關注的代碼。任何幫助都將非常有用。

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="starter"> 



<div> 
    <div> 
     <ion-nav-bar class="bar-stable"> 
      <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">Back</ion-nav-back-button> 
     </ion-nav-bar> 
     <ion-nav-view></ion-nav-view> 
    </div> 
</div> 

    <!-- Center content --> 
    <ion-view title="Add Data"> 
    <ion-content padding="true" scroll="false" class="has-header"> 
     <div class="spacer" style="height: 100px;"></div> 
     <form ng-controller="defaultCtrl"> 
      <ion-list> 
       <label class="item item-input"> 
        <span class="input-label">First Name</span> 
        <input type="text" placeholder="First Name here" name="fname" ng-model="starter.fname"> 
       </label> 
       <label class="item item-input"> 
        <span class="input-label">Last Name</span> 
        <input type="text" placeholder="Surname Here" name="lname" ng-model="starter.lname"> 
       </label> 
       <label class="item item-input"> 
        <span class="input-label">Username</span> 
        <input type="text" placeholder="Username here" name="uname" ng-model="starter.uname"> 
       </label> 
      </ion-list> 
      <button class="button button-calm button-block" type='submit' ng-click="create(starter)">Add data</button> 
     </form> 
    </ion-content> 
</ion-view> 




<script type="text/javascript"> 


angular.module('starter',['ionic']).factory('starter',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){ 
    return { 
     create:function(data){ 
      return $http.post('https://api.parse.com/1/classes/data',data,{ 
       headers:{ 
        'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID, 
        'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY, 
        'Content-Type':'application/json' 
       } 
      }); 
     } 
    } 
}]).value('PARSE_CREDENTIALS',{ 
    APP_ID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
    REST_API_KEY:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
}); 


angular.module('starter', ['ionic']) 
.controller("defaultCtrl", function ($scope) { 
$scope.starter = {}; 
$scope.create=function(){ 
     starter.create({fname:$scope.starter.fname}).success(function(data){ 

     }); 




}); 

</script> 


    </body> 
</html>

來源

2014-11-23 Learner Always

設置認證頭

PARSE_HEADER_CREDENTIALS = { 
    "x-parse-application-id": "PARSE-APPLICATION-ID", 
    "x-parse-rest-api-key": "PARSE-REST-API-KEY" 
};

代碼

addObject: function (_params) { 

    // for POST, we only need to set the authentication header 
    var settings = { 
     headers: PARSE_HEADER_CREDENTIALS, 
    }; 
    // for POST, we need to specify data to add, AND convert it to 
    // a string before passing it in as seperate parameter data 
    var dataObject = { 
     "name": _params.name, 
     "room": _params.room, 
    }; 

    var dataObjectString = JSON.stringify(dataObject); 

    // $http returns a promise, which has a then function 
    return $http.post(baseURL + 'classes/stuff', dataObjectString, settings) 
     .then(function (response) { 
      // In the response resp.data contains the result 
      // check the console to see all of the data returned 
      console.log('addObject', response); 
      return response.data; 
     }); 
},

完整的例子張貼在這裏的項目： https://github.com/aaronksaunders/info-rest-api-ionic-sample

來源

2015-09-28 13:57:07

如何從離子應用程序中使用REST API

回答

相關問題