Angular Walkthrough- Reviews!

Now it's time to add Reviews!

We need to make 2 more functions in our controller. The code will be like what we made for addNewMovie, except this time we're going to create a review. Remember that reviews are saved as an array inside a movie.

We're going to make a POST request to our server which adds the review to the movie. If the server responds with a success message, we add the new review to the movie array. If there was an error, we print the error. Add this code to your controller:

/**
 * Again, we use the $http method to send a POST request to our movie API. 
 * Because its a POST request we provide the data we want to send.
 * We use the .then() method to pass in our success and error functions. 
 */
collection.addReview = function(movie) {
     review = {
          score: movie.review.score,
          body: movie.review.body
      }

      addReviewToMovie(movie, review);
};

function addReviewToMovie(movie, review) {
        /**
         * Again, we use the $http method to send a POST request to our movie API. 
         * Because its a POST request we provide the data we want to send.
         * We use the .then() method to pass in our success and error functions. 
         */
        $http({
            method: 'POST',
            url: API+'movies/' + movie._id + '/reviews',
            data: {
                score: movie.review.score,
                body: movie.review.body
            }
        }).then(function successCallback(response) {
            //Make sure the response data is okay
            if(response.data.score != null && response.data.body != null) {
                movie.review = {}; //Clear the review data to reset the form
                movie.reviews.push(response.data); //Add this review to this movie's array
            } else {
                console.log("Failed: "+JSON.stringify(response.data)); //We use JSON.stringify to make the response data human-readable
            }
        }, function errorCallback(error) {
            console.log(error); //Something was wrong with our request, print the error
        });
    }

Now we need to update our html to support this feature. You know the drill by now! In the <!--Movie Review--> section, add the following ng-submit directive and ng-model directives:

<!-- Movie Review Section -->
<div ng-show='movie.expandNewReviewEntry'>
  <!-- New Review Form -->
  <h3 class='title'>New Review</h3>
  <form ng-submit='collection.addReview(movie)'>
    <div class='form-group'>
      <label class='movie-label'>Score:</label>
      <input class="movie-input" type='text' ng-model='movie.review.score' placeholder='Score'>
    </div>
    <div class='form-group'>
      <label class='movie-label'>Review:</label>
      <input class="movie-input" type='text' ng-model='movie.review.body' placeholder='Review'>
    </div>
    <input class='movie-submit' type='submit' value='Add'>
  </form>
  ...

We only want to show our review section if the user has opened the review section. We also want to display a list of reviews, but only if there is at least one review. To do this, we can use the ng-show directive. This directive automatically hides its content if the condition we pass is false. In this example, we only show the section if there is at least one review. Update your code to look like this:

<!-- List of Existing Reviews -->
<div ng-show='movie.reviews.length > 0'>
...
</div>

Finally, add the ng-repeat directive and the review score and body. The reviews section should look like this:

<div ng-show='movie.reviews.length > 0'>
    <h3 class="title review-header">Reviews</h3>
    <div ng-repeat='review in movie.reviews'>
    <h5 class="review-score"> Score: {{ review.score }} </h5>
    <p> {{ review.body }} </p>
</div>

At this point, you should be able to view and add reviews! You can click on the arrow icon below any movie to open the review section. Try leaving a review under a movie you like!

Now all our main functionality is here, so we just need to add the finishing touches...