AngularJS Jumpstart is a sample repository for a workshop to help understand the basics of AngularJS.
The application demo is based off tweets from @dog_rates
- Copy the starter files into a folder on your machine, or clone the repository and work out of the starter folder
- You will need to run a localhost environment for the last part of the demo to make the AJAX calls function properly. If you don't know how to do this, follow the guides below
Two of the easiest ways to set up a localhost server environment are via Node.js or Python.
- Node.js
- Install Node.js
- Install http-server via npm
$ npm install http-server -g
- From the directory with your starter files, run the following:
$ http-server
- Visit http://localhost:8080 in your browser
- Python
- Install Python
- From the directory with your starter files, run the following:
$ python -m SimpleHTTPServer 8080
- Visit http://localhost:8080 in your browser
Here are some additional features you could add to the application:
- Add a user rating item to the Details tab that displays the average user submitted rating.
- Build a sorting mechanism that would allow a user to sort the dogs by different criterias.
- What would happen if there were no user reviews for a dog? Add an empty state when no reviews have been submitted.
- Build a form to let people submit their own dogs for review.
There are a lot of resources out there to help you learn more about AngularJS as well as HTML/CSS/JS. Some are free and some are not (and some have free trials!), but I encourage you to work through multiple courses on different sites to see what suits you best when learning to code.
Here are a couple of my favorites: