#Introduction
Today we are going to be building a queue app similar to the one we use during class. Instead of a Firebase backend though, we will be using Parse.
Sign up for an account at Parse: http://parse.com
Then once logged into Parse, create a new app. After the app is created you will be shown your API keys. Don't leave this page until you have set up your keys.
Throughout this project, don't hesitate to check out the Parse API documentation. Being able to get answers from someone's documentation is an important skill.
View it here: https://parse.com/docs/rest
To do that create a file in your js folder called 'defaultHeaders.js'. Then copy your Application id and REST API key into the following code:
var app = angular.module('parseQ');
app.factory('httpRequestInterceptor', function () {
return {
request: function (config) {
config.headers = {'X-Parse-Application-Id': 'INSERT-YOUR-APPLICATION-ID', 'X-Parse-REST-API-Key': 'INSERT-YOUR-REST-API-KEY'}
return config;
}
};
});
Parse is good because it encourages us to create a RESTful API. We will learn how to make the 4 HTTP requests with AgularJS:
- GET - retrieve data
- POST - create data
- PUT - edit data
- DELETE - delete data
#Step 1 - Set Up Application
The first thing we need to do is create and link all of our files. The AngularJS CDN is already loaded into the app, no need to look for outside code.
- Create MainController.js in the controllers folder and link it in the index
- Create parseService.js in the *services* folder and link it in the index
- Link the main.css file in the index
- Link the app.js file in the index
We next want to ensure angular is working correctly, first connect your view and controller:
- Create your angular module and palce it in all of your JavaScript files. remember: var app = angular.module('parseQ', [])
- Place the ng-app into your index
- Create your MainController and place it in your index using ng-controller
Then, create a test:
- In your MainController create a $scope.test object and give it a value
- Call the $scope.test object in view to ensure it's pulling the value from the controller.
#Step 2 - Creating Questions
We will begin by making it possible to create questions, primarily because this is the most important feature of our queue.
Let's start with our service as it will be where our data begins and ends.
- Go to your parse service and create a POST method, that takes in a question as a parameter. *Don't hesitate to refer to the chat app we made last week.*
##SIDENOTE
As a reminder, here is the anatomy of a POST GET PUT and DELETE request in AngularJS:
###POST: https://parse.com/docs/rest#objects-creating
- A Deferred variable for your promises
- An $http request:
- The *method* of the request
- The data object you're passing in
- the URL of the reqest
- An appended promise object
- lastly return the promise object
###GET: https://parse.com/docs/rest#objects-retrieving
- A Deferred variable for your promises
- An $http request:
- The *method* of the request
- the URL of the reqest
- An appended promise object
- lastly return the promise object
###PUT: https://parse.com/docs/rest#objects-updating
- A Deferred variable for your promises
- An $http request:
- The *method* of the request
- The data object you're editing
- the URL of the reqest
- An appended promise object
- lastly return the promise object
###DELETE: https://parse.com/docs/rest#objects-deleting
- A Deferred variable for your promises
- An $http request:
- The *method* of the request
- The data object you're deleting
- the URL of the reqest
- An appended promise object
- lastly return the promise object
After creating our POST request, we need to head over to the controller so that our users can create data on their own from the view.
In the controller create a postData function. This function will take in our question from the view and pass it into the service. Refer to the chat app, it will have a very similar function.
Now that our service is opening a connection from our app to Parse, and our controller is ready to take data in from the view and pass it to the service, we need to get our view set up!
In the index file we need:
- An input field that takes in the actual question (ng-model)
- A button that submits our question into postData function in our controller (ng-click)
Once everything is in place, we should be able to ask a question from our browser and then see that question in our Parse dashboard.
#Step 3 - Retrieving Questions
Once we