alvinashcraft
shared this story
from 
Tuts+ Code.
In the previous part of this series, we saw how to get started with Eve, a Python REST API framework, and create some APIs. In this part of the series, we'll make use of those APIs to create an application powered by Node.js and AngularJS.
We'll be implementing the sign-up functionality using Node.js, and adding other functionalities by calling the REST APIs from AngularJS.
Getting Started
To get started, clone the source code of the previous tutorial and run the APIs.
Once you have cloned the source code, make sure you have MongoDB running. Navigate to the REST_API_EVE_Part-1 directory and run the app:
Now, you should have your API running on http://localhost:5000/.
Creating the NodeJS App
Step 1: Creating the Basic App
Create a project folder called AngularNodeApp. We'll be using Express, a minimalistic web application framework for creating Node.js applications. So let's install express into our project.
Once express has been installed, create a file called app.js. Inside app.js we'll create our express application and define the routes for the application.
Let's start by importing express into app.js and creating an express app.
We just created an express app and defined a route, /, which will return welcome when requested. Start the server.
Point your browser to http://localhost:3000/ and you should have the message welcome !!.
Let's create a home page for our application. Navigate to the project folder and create a new directory called public. Inside public/index create a file called index.html. Add the following HTML code to index.html.
Next, let's modify the existing / request handler to show index.html. Define the path to the public folder in app.js.
Modify the / request handler as shown:
Save the changes and restart the server. Point your browser to http://localhost:3000/ and you should be able to see the application page.
Next create a page called signin/signin.html and add the following HTML code:
In app.js add a request handler called /SignIn which will render the signin.html page.
Similarly, add a signup.html to the public/signup folder with the following HTML code:
Add a request handler called signUp in app.js.
Save the changes and restart the server. Point your browser to http://localhost:3000 and you should have the application running. Click on the sign-in and sign-up links on the page, and the respective pages should be displayed.
Step 2: Implementing the Sign-Up Functionality
To implement the sign-up functionality, we'll be calling the Python Eve REST API. We'll be calling this API from the Node.js back end since it requires passing the service authentication username and password. So, to prevent exposing the authentication username and password from the scripts, we'll make this call from Node.js.
Let's first create a register request handler to handle the sign-up functionality.
We'll require body-parser to parse the data posted from the form. Install body-parser using NPM package manager.
Once body-parser has been installed, require that inside app.js.
To use body-parser to parse the posted form data, we need to use it in our app.
Inside the /register handler we can parse the form data as shown:
We'll be using request to make the call to the Eve APIs. So, install request into the application.
Require request in app.py.
Create the options for calling the API as shown:
We have specified the details for the POST request in the options. admin_username and admin_password are the authentication username and password required to access the Eve user creation API.
Next, let's use request to make the call.
Save the changes and restart the server. Point your browser to http://localhost:3000 and navigate to the sign-up screen. Enter the details and click on the sign-up button. Check the terminal window for the response and user creation details returned from the API call.
Step 3: Handling Sign-Up Error
When an error occurs during the sign-up process, we'll pass the error message to the sign-up page. We'll be using a template engine called EJS. First, let's install EJS.
Once done with installation of EJS, add the following line of code to set the view folder and the view engine.
Rename signup.html to signup.ejs and add a span to display an error after the submit button.
Also, modify the signUp request handler.
Next, if any error occurs in the sign-up response, we'll pass it to the sign-up page. If the sign-up process returns no error, we'll redirect the user to the sign-in page.
Save all the changes and restart the server. Point your browser to http://localhost:3000/signUp and try to register using an existing username. Since the username already exists, you should get an error.
Creating the AngularJS App
Implementing the Sign-In Functionality
AngularJS provides a service called $http which helps in making REST API calls. From the AngularJS docs,
The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.
Copy the body content of index.html and create a new file called public/home/home.html.
In the home folder, create a file called home.js and define the home module and routes config as shown:
Similarly, replace the HTML code of signin.html with the body content of signin.html. We'll handle sign-in page routing through the AngularJS app.
Inside the signin folder, create a file called signin.js and add the following route config details.
In index.html we'll use ngView and route the AngularJS application views. Here is how index.html will look:
Inside the index folder, create a file called index.js which will serve as the root file. In index.js we'll inject the different modules created into the myApp app. Here is the index.js file:
Install angular-route using bower and include the reference in index.html.
We'll also need to convert the username and password to base64, so install angular-base64.
Once installed, add a reference to angular-base64 in index.html.
Set the static path to bower_components in app.js.
Inside signin.js, let's create a controller called SignInCtrl.
We just created a controller called SignInCtrl in signin.js. We have injected the base64 module to the SignInCtrl.
On sign-in button click, we'll call the above signIn function to authenticate the user. So, first let's add the ngModel directive to the username and password field in the sign-in page.
Add the ngClick directive to the Sign In button in signin.html.
Inside the signIn function read the username and password from $scope. Once we have the username and password, we'll create the base64 string using angular-base64.
Before making a call to the REST APIs, we need to set the necessary headers. We need to set the Access-Control-Request-Headers and Access-Control-Expose-Headers.
We'll also need to set the Authorization header in the $http. Using the base64 authData created using username and password, set the authorization header.
Next, make the $http GET call to the Python Eve REST APIs.
Save all the changes and restart the server. Point your browser to http://localhost:3000/signin. Try to sign in using a valid username and password. Check browser console and you should have the user data. If the authentication fails, you should have an authentication failure error.
Conclusion
In this tutorial, we saw how to use the REST APIs created in the previous tutorial in our AngularJS and Node.js app. We implemented the sign-in and sign-up functionality in this tutorial.
In the next part of this series, we'll use the other APIs to complete our AngularJS app.
Source code from this tutorial is available on GitHub.
