REST API Testing using Kinvey & AngularJS

Developer
Aaron K Saunders
Size
3,303 Kb
Views
28,336
  1. REST API Testing using Kinvey & AngularJS Previews
  2. REST API Testing using Kinvey & AngularJS HTML Codes
  3. REST API Testing using Kinvey & AngularJS JS Codes

How do I make an rest api testing using kinvey & angularjs?

Sample app built with #angularjs #Bootstrap and @Kinvey to show the use $http in REST based API for CS class @howardU #kinvey. What is a rest api testing using kinvey & angularjs? How do you make a rest api testing using kinvey & angularjs? This script and codes were developed by Aaron K Saunders on 25 September 2022, Sunday.

REST API Testing using Kinvey & AngularJS Previews
IQ Test

REST API Testing using Kinvey & AngularJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>REST API Testing using Kinvey & AngularJS</title>
</head>
<body> <html ng-app="kinveyRestAPIApp">
<head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script src="//code.jquery.com/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container" ng-controller="KinveyRestAPICtrl"> <div class="page-header lead">This is a REST API Sample using Kinvey as the data storage</div> <div class="page-header"> <p> To make the demo work, you need to create an Account in Kinvey at <a href="https://console.kinvey.com/">https://console.kinvey.com/</a>. After the account is created, you can get the following values from the API Console </p> <pre>
.value( 'KINVEY_AUTH' , 'Basic a2lkXy1KZWlDTFpNNTphMGFkOTliY2RhMDE0YzFkYWQyNDAwMGQ5ZDBmNjY2OA==')
.value( 'KINVEY_APP_URL' , 'https://baas.kinvey.com/appdata/kid_-JeiCLZM5/')</pre> <p> The credentials will be specific to your account. This demo shows using the http REST verbs to manipulate the user object. </p> </div> <!-- see https://getbootstrap.com/css/#forms-horizontal for information on how these forms were constructed using bootstrap --> <form class="form-horizontal"> <!-- get model based on Id --> <div class="form-group "> <label for="get-input" class="col-sm-4 control-label"> Get a specific object using the REST verb GET, if an id is specified return single element else return the list of objects </label> <div class="col-sm-6"> <br> <input type="text" class="form-control" id="get-input" ng-model="getData.id" placeholder="model id"> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-10"> <button class="btn btn-primary" ng-click="doGet()">GET - GET </button> </div> </div> <!-- create model based json data --> <hr> <div class="form-group"> <label for="post-input" class="col-sm-4 control-label"> Create an object using the REST verb POST and specify the model data using JSON format </label> <div class="col-sm-6"> <br> <textarea class="form-control" id="post-input" ng-model="postData.data" placeholder="json formatted updates"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-10"> <button class="btn btn-primary" ng-click="doPost()">POST - CREATE</button> </div> </div> <!-- update model based on Id --> <hr> <div class="form-group"> <label for="put-input" class="col-sm-4 control-label"> Update the object using REST verb PUT and specify the model id and any updates required using JSON format </label> <div class="col-sm-6"> <span></span> <br> <input type="text" class="form-control" id="put-input-id" ng-model="putData.id" placeholder="model id"> <br> <textarea class="form-control" id="put-input" ng-model="putData.data" placeholder="json formatted updates"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-10"> <button class="btn btn-primary" ng-click="doPut()">PUT - UPDATE</button> </div> </div> <!-- delete model based on Id --> <hr> <div class="form-group "> <label for="delete-input" class="col-sm-4 control-label"> Get a delete object using the REST verb DELETE and specify the model id </label> <div class="col-sm-6"> <br> <input type="text" class="form-control" id="delete-input" ng-model="deleteData.id" placeholder="model id"> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-10"> <button class="btn btn-primary" ng-click="doDelete()">DELETE - REMOVE </button> </div> </div> </form> <pre>{{response | json}} </body>
</html> <script src="js/index.js"></script>
</body>
</html>

REST API Testing using Kinvey & AngularJS - Script Codes JS Codes

/**
* @see - https://egghead.io/lessons/angularjs-http
*/
angular.module('kinveyRestAPIApp',[])
/**
*
* Application values
*/
.value( 'KINVEY_AUTH' , 'Basic a2lkXy1KZWlDTFpNNTphMGFkOTliY2RhMDE0YzFkYWQyNDAwMGQ5ZDBmNjY2OA==')
.value( 'KINVEY_APP_URL' , 'https://baas.kinvey.com/appdata/kid_-JeiCLZM5/')
/**
*
* Main controller for the application
*/
.controller('KinveyRestAPICtrl', function($scope, $http, KINVEY_AUTH, KINVEY_APP_URL) { $scope.getData ={}; $scope.putData ={}; $scope.postData ={}; $scope.deleteData ={}; var baseURL = KINVEY_APP_URL + "users/"; $scope.doDelete = function() { var id = ""; id = $scope.deleteData.id; // // delete a specific user // https://baas.kinvey.com/appdata/kid_-JeiCLZM5/users/{id} $http.delete(baseURL + id, { headers : { Authorization: KINVEY_AUTH } }) .success(function(data) { $scope.response = data; }) .error(function(data) { $scope.response = data; }) }; $scope.doGet = function() { var id = ""; // see if an id was specified, if so, use it for the query if ($scope.getData.id) { id = $scope.getData.id; } else { id = ""; } // // return all users // https://baas.kinvey.com/appdata/kid_-JeiCLZM5/users/ // // get a specific user // https://baas.kinvey.com/appdata/kid_-JeiCLZM5/users/{id} $http.get(baseURL + id, { headers : { Authorization: KINVEY_AUTH } }) .success(function(data) { // process the successful results of the $http method $scope.response = data; }) .error(function(data) { // process the error results of the $http method $scope.response = data; }) }; $scope.doPost = function() { // // save the object, all data is passed as the BODY of the POST // https://baas.kinvey.com/appdata/kid_-JeiCLZM5/users/ // $http.post(baseURL, $scope.postData.data, { headers : { Authorization: KINVEY_AUTH } }) .success(function(data) { $scope.response = data; }) .error(function(data) { $scope.response = data; }) }; $scope.doPut = function() { var id = ""; // see if an id was specified, if so, use it for the query if ($scope.putData.id) { id = $scope.putData.id; } else { id = ""; } // // save the object, all data is passed as the BODY of the POST // https://baas.kinvey.com/appdata/kid_-JeiCLZM5/users/ // $http.put(baseURL + id, $scope.putData.data, { headers : { Authorization: KINVEY_AUTH } }) .success(function(data) { $scope.response = data; }) .error(function(data) { $scope.response = data; }) };
});
REST API Testing using Kinvey & AngularJS - Script Codes
REST API Testing using Kinvey & AngularJS - Script Codes
Home Page Home
Developer Aaron K Saunders
Username aaronksaunders
Uploaded September 25, 2022
Rating 3
Size 3,303 Kb
Views 28,336
Do you need developer help for REST API Testing using Kinvey & AngularJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron K Saunders (aaronksaunders) Script Codes
Name
Proper way to manage ng-options selections
Firebase Login Example
Angular2 Http Example
A Pen by aaron k saunders
Leaflet Map Directive in Ionic
Google Map Directive in Ionic
Using ui-router to control application flow
Demo ui-router basic state change
A Pen by aaron k saunders
Nested ng-repeat in AngularJS with Checkboxes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!