Angular Walkthrough- Movie Creation

Now it's time to let the user add new movies! We already have a movie creation form, but it doesn't do anything.

In your app.js, let's add a new function to the controller to handle movie creation:

collection.addNewMovie = function() {
  movie = {
            title: collection.newMovie.title,
            description: collection.newMovie.description
  }

  createMovie(movie);
}

We're going to call this function when the user clicks the create movie button. You may have noticed that we call the createMovie(movie) function, but we haven't actually made it yet. Let's create this function by adding the code below to the controller:

    function createMovie(movie) {
        /**
         * Like before, 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',
            data: movie
        }).then(function successCallback(response) {
            //Make sure the response has the data we need
            if(response.data.title != null && response.data.description != null) {
                //Log the data just for reference
                console.log(JSON.stringify(response.data)); //We use JSON.stringify to make the response data human-readable
                collection.newMovie = {}; //Clear the newMovie data to reset the form. 
                collection.movies.push(response.data); //Add the new movie to our movie array
                collection.expandNewMovieEntry = false; //Close the movie creation form
            } else {
                //The response was missing data, something went wrong. 
                console.log("Failed: "+JSON.stringify(response.data)); //We use JSON.stringify to make the response data human-readable
            }
        }, function errorCallback(error) {
            console.log(error);
        });
    }

This function is like the request we made earlier, but this is a POST request. If our request is successful, our server will respond with the new movie data. We will add this new movie to the collection array, which will automatically add it to the html. We also reset the newMovie variable so the form can be re-used. If there was an error, we just print it to the browser's debug menu.

Now let's hook up our form to the addNewMovie function! Find the <!--Add new movie--> comment. In the form tag, we're going to add another angular directive called ng-submit. This directive runs the function we specify when the form submits. In this case, we want to call the addNewMovie function that we just made. Modify our form tag like this:

<form ng-submit='collection.addNewMovie()'>
...
</form>

There are two text fields on the form for title and description. One has an <input> tag and the other has a <textarea> tag. They're both places the user can type text, except that a textarea is bigger. To connect these textboxes to our Angular controller, use the ng-model directive. This directive tells angular to connect whatever is in the textbox to a variable we specify. Update your code with the new tags so it looks like this:

<input class='movie-input' type='text' ng-model='collection.newMovie.title' size='30' placeholder='Title'>

...

<textarea class='movie-input' ng-model='collection.newMovie.description' cols='30'></textarea>

At this point, you should be able to create a new movie using the form you created. After adding a movie, it should show up on your page automatically!

Is the form not working? Here's some common issues:

• Do you see any errors in your browser's debug log? (Control+Shift+J opens the log in Chrome).
• Does the movie appear in the list only after you refresh the page? If so, it means you're not adding the movie to the array. Take a look at the createMovie() function.
• Does your movie not in the list even after a page refresh? It might be a problem with your ng-model tags.