Create an angular app that manages smurfs.
The purpose of this project is to give you an opportunity to practice what you've learned in Angular to create a fully functional Smurf web application.
This project is a little more open-ended than some of your other projects, primarily because at this point you should be striving to understand on your own how to implement Angular to create an application. The more you do on your own without help, the quicker you'll get better at Angular and the faster you'll learn.
This app encompasses all of the major pieces of Angular we've covered thus far:
- Controllers, views, $scope
- Services
- $http and Promises
Head on over to smurfs.devmounta.in and take a look at the API. It's a fairly basic REST API that shows a list of smurfs. Each smurf has a name. You have the ability post new smurfs. Note: the database resets itself every 10 minutes or so. Don't be alarmed :)
Create our main view that includes the following:
- A layout with a Smurf Station header
- An awesome picture/gif/background of your choice.
- A section for listing smurfs
Spend a half hour or so at least making the layout look good. This should be a project that you can put in your portfolio.
Now start the angular portion:
- Create the controller for the main view and use a service to make the main HTTP call to get your smurf data.
- Display the smurf data in your main view
Add a section into your main view where you can create a new Smurf. Since all you need is a name, this shouldn't be too complicated.
Add the method to your service for creating the Smurf.
Add routing to your app so that when a Smurf is clicked on from the main view, the user is taken to a /smurfs/:smurfId
route unique to each Smurf.
Use a resolve
so that the router can retrieve the individual Smurf data before activating the individual Smurf state.
Create a directive for showing the Smurf's profile picture. The profile should be a smaller (scaled down if needed), square image taken from the img
property of the Smurf's JSON data.
Use the directive in both the main view (next to each Smurf in the list) as well as on the individual Smurf details route.
Make it so that when the profile picture is clicked, the image is opened in a new tab.