Let’s finish up the MEAN Stack application, this week we will continue to work on our Simple MEAN Stack EscapeCharacterHelper application. Last time we got our base project setup, got all the necessary dependencies installed and verified it as working. If you are new to this tutorial series here is the link to the last part. This week we are going to be connecting up AngularJS and show how we can pass data to NodeJS (e.g. sending data from the front-end to the back-end and vice versa). Let’s gets started!
Importing AngularJS (and other libraries) to our project
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> to your html code. In our project open up the index.ejs file and add the following outside the </body> tag:
Let me explain what all these libraries are:
- angular.min.js – AngularJS library
- angular-messages.js – Messaging library we will use for form validation
- jquery.min.js, jquery-ui.js, jquery-easing – jquery libs
- bootstrap.min.js – bootstrap js library
Testing AngularJS is working and posting our first request
Now that we have that boilerplate stuff out of the way lets get into coding. First, let’s test that AngularJS is working and connected correctly. Start by opening up main.js with the following:
If you have never used Angular 1 before it is not that complicated, controllers as described by Tutorial point:
As the comments say we tell angular which is app1 via ng-app, we also tell angular what the search controller is attached to. That all we need to check if angular is working. Let’s fire up our applications via
npm start and navigate to localhost:3000/
Woo! It’s working. If you didn’t see that message more than likely there is a syntax error or angular was badly imported. If you are having issues right click the page and click “inspect” and it should show any errors in the console.
Sending data from the Front-end to the Back-end
ok, great Jason now how do we communicate with NodeJS from Angular? Well you remember we injected $http into our controller in main.js:
app.controller(‘search2’, function($scope,$http)… well we are going to use this to POST and GET the data from the back-end. Let’s create a simple example, in the main.js file we need to add two functions to our controller one for when want to get the data and one for when we want to post the data. Here is what the coded functions look like:
Most of the code is heavily commented, with that let’s move onto how we are going to trigger these functions so open up index.ejs and add the following under where we are outputting the test variable:
We have two buttons, one which will “getData” and the other will “postData”.
Now that we have all the front-end code done we need to add the routes/endpoints so our requests go somewhere. Open routes/index.js, you should already have a route for ‘/’ which will display the index page. We are going to need to add two routes like so:
This code is commented and self-explanatory. Basically when we request /getInformation we send back a simple message and when we post data to /postInformation we output the data to the console and send a 200(OK) response. Let’s fire up the application again and see if it works.
Before clicking the button:
Woo! we successfully got data from the back-end and displayed it on the front-end. Now let’s try POSTing, after clicking the “post data” button open up the inspector console:
Woo! we posted the data and know it has been processed by the post route. Since we are just outputting to the console lets see if it is there:
Yep displayed perfectly.
Alas, we are the end of another tutorial, it may not seem like we made much progress but we just proved our front-end and back-end are communicating perfectly and we can get and send data to them. In the next tutorial, we are going build on this concept and bring in MongoDB to store the data we are getting and receiving. That then allows us to submit queries and display the results in real time with no page reloads! Sounds exciting, doesn’t it?
Part 3 can be found here
Well until next time!