Resolves are how angular fetches data before a page is loaded so that it can be passed to a controller. They're set up in the state definition, and usually perform http requests to fetch data. for our details page, we will set up a resolve called image, and for our main and search pages, we'll set up a resolve called images

You can read up on how to set up a resolves here. It has some great code examples.

Page controllers are where we put any required logic for a page. This could be things like sorting/filtering data, handling what to do when things are clicked, or just getting the $scope object set up when we come to the page. In this case, the Details page probably doesn't do a whole lot just yet, so we're probably fine adding the image object (that will be passed in via the resolve) to the controller object and calling it a day.

For reference, the $scope and controller are how the templates and the controllers communicate.

This one will be a tad tricky, but we'll stick with the basics for now. We want to make a <app-header> directive that will load up a template for us. This is a great, comprehensive guide on angular directives, but we can just look at the first little bit under "template expanding" to get a header that we can include in multiple pages.

This template will assume that it's been given an image object, and display the title, author and image, Along with any other info we deem interesting.