sf-wdi-26/intro-angular-lab

Practice using Angular's built-in directives

Intro Angular 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 intro-angular-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. Run budo app.js --open from your Terminal to start your server and open your app in the browser.*
4. Implement solutions to the following challenges. Refer to the solution branch for guidance.

* (You may need to npm install -g budo to do this. Or just fire up your server another way. Budo is a dev tool that serves your code and bundles on the fly.)

Challenges

1. Inside your Angular controller, create an array of objects $scope.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 name 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 $scope.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 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 $scope.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 $scope.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
• Custom Directives Reading

Resources

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