Angular Walkthrough- The Movie List

Now we're ready to connect the frontend to the backend!

Underneath the angular.module() line in your app.js, add this global variable. Replace localhost with your server's URL (the url your server is running on). Make sure you leave the final / at the end!

var API = "http://localhost:8080/api/"; //Your server url goes here

For example, yours might look like: 

var API = "https://my-project-name.c9users.io:8080/api/"; //Your server url goes here

In the function body of the controller, we're going to make a function called init(). It will make a GET request to our server using the $http service when the page loads. Our server will send back a list of all the movies in our database, and we can display them to the user. Add this code inside your controller:

collection = this;

function init() {
  /**
   * Use the $http method to send a GET request to our movie API. 
   * We provide some details in the first paramater. 
   * We use the .then() method to pass in our success and error functions. 
   */
  $http({
       method: 'GET',
       url: API+'movies',
       headers: {
         'Content-Type': undefined
       }
      }).then(function success(response) {
          //If this was successfull, handle the data from the server
          collection.movies = response.data; //Copy the response data into our movie array
      }, function error(error){
          console.log(error);
   });
}

init(); //Dont forget to actually call this function!

The first section is the request header. This is where we specify the type of request (GET or POST) and the API endpoint (the url). The .then section is a callback that gets run after the server responds. If the server responds with a normal (successful) status, then we execute the success function. If the server responds with an error status, we run the error function. After this function runs, the collection.movies will contain a list of all the movies!

Now we need to modify the html to actually display the movies stored in collection.movies. Find the <!--Movie Entry--> comment. Right now, our code would display just one movie. We can use an Angular directive to loop through the movies array and create identical views for each one. You can think of it like a for-loop in Java. Modify the <div> tag to have the ng-repeat directive: 

<!--Movie Entry-->
<div class='card thin-card' ng-repeat='movie in collection.movies'>
    ...
</div>

Another cool thing we can do in Angular is dynamic binding. This means that we can connect our html to a variable, so that when the variable changes the html updates automatically. We use curly brackets to do this. For example, if we wrote {{ myVar }}, then the contents of the myVar variable would be shown. This will allow us to display the movie title and description. Update your movie title and description tags to look like this: 

<!-- Movie Title -->
<h1 class='title movie-title'> {{ movie.title }} </h1>

...

<!-- Movie Description -->
<p class="movie-description"> {{ movie.description }} </p>

This section of the html should now look like:

<!--Movie Entry-->
<div class='card thin-card' ng-repeat='movie in collection.movies'>
  <div>
    <!-- Movie Title -->
    <h1 class='title movie-title'> {{ movie.title }} </h1>

    <!-- Movie Image -->
    <div class="movie-image">
      <img width="200" height="300"/>  
    </div>

    <!-- Movie Description -->
    <p class="movie-description"> {{ movie.description }} </p>

    <!-- Movie Review Icon -->
    <div ng-hide='movie.expandNewReviewEntry' class='form-group center-wrapper'>
      <img ng-click='movie.expandNewReviewEntry = true' class='review-dropdown-icon' src='public/plus.svg' />
    </div>
    ...

Now it's time to test the the frontend and see how it looks, We'll need to install another tool using npm. Run this command: 

npm install http-server -g

This will install a program called http-server. Because we added the -g flag we can run the program from anywhere. Unlike node, we do not need to restart this server every time we make a change. Go ahead and start your server with the following command: 

cd ~/workspace/how-to-api/frontend/
http-server ./ -p 8081

At this point, you should be able to run your app and see the movies appear on the screen. To do this, you'll need to visit the same url your server uses, except on the 8081 port. For example, your url might look like this: 

https://my-project-name.c9users.io:8081/

Don't worry if the images don't load, since we'll add that later. Your page should look something like this: If you're not seeing any movies, you'll want to check a few things:

  • Did you set your API variable to the correct url? Did you forget the / at the end?
  • Is your server.js still running? It should be.
  • Is Mongod still running? It should be.
  • Is your database empty? Have you run seeder.js?