cittaliu / angular-movie-lab

Practice using Angular's built-in directives

Angular & Directives Lab

Objective: Set up a new Angular app and apply your knowledge of Angular's built-in directives.

Getting Started

1. Fork this repo, and clone it into your develop folder on your local machine.
2. Change directories into angular-movie-lab, and follow the instructions from this morning's module to set up a new Angular app. You will need:
   • index.html with links to the Angular CDN and app.js.
   • ng-app and ng-controller directives in the HTML.
   • app.js that initializes your Angular app and adds a controller.
3. Implement solutions to the following challenges. Refer to the solution branch for guidance.

Challenges

1. Inside your Angular controller, create an array of objects vm.moviesToWatch, and use the ngRepeat directive to iterate over your list of movies and display them in the view.

2. Use the orderBy filter to sort the list of movies by title in descending order.

3. Include the text "{{moviesToWatch.length}} movies to watch", and use the ngPluralize directive so that the text displays "movie" when there is one movie and "movies" in all other cases.

4. Create a form on the page for a user to add a new movie to the list. Write a function called addMovie and use the ngSubmit directive to add the new movie to vm.moviesToWatch when the user submits the form.

5. Use the limitTo filter to limit the number of movies displayed to five. Bonus: Add a link for the user to "View More". Clicking the link should allow the user to view the entire list of movies.

6. Put an icon next to each movie that resembles an "X" or a trash can. When the user clicks the icon, delete the movie from the list. Hint: Write a function called deleteMovie, and use the ngClick directive.

Bonus

1. Implement a way for the user to mark a movie as "watched". Use the ngStyle or ngClass directive to strikethrough the text of the movie if it's been "watched".

2. Give each movie in vm.moviesToWatch an image. Make a button in the view for the user to change the background. When the user clicks the button, set the app's background to a random movie image from vm.moviesToWatch. Every time the user clicks the button, they should see a different background image.

Submission

• As you make code changes, frequently commit and push to GitHub.
• Once you've finished the assignment and pushed your work to GitHub, make a pull request from your fork to the original repo.

Optional Practice

• Shaping up with Angular.js - Code School Tutorial

Resources

• AngularJS Developer Guide - Directives
• AngularJS API Reference - Directives
• AngularJS API Reference - Filter Components