Gallery App Made With Angular
Previously I made a small gallery app using React, so why not make the same thing with Angular? Well, I did! And it only took me one afternoon (I already had the design and functionality worked out with the React version, which helped).
Be sure to check out the React Version.
Other Stuff I Made With Angular
I've also created a couple of full site examples with Angular, including v2 of this Portfolio Site and a HTML5 Games Arcade.
Check It Out!
You can click through the images with the arrow buttons on either side, see more info about the image by rolling over the title and also access a thumbnail view by clicking the button at the bottom right.
Obviously there are improvements that could be made. A nice transition between images and views wouldn't go amiss and I did originally have the idea to add in an image uploader, allowing anybody to upload images, but decided against it.
It's running in an iframe because I actually broke the local copy of my site and I've not had time to fix it, so I had to come up with another way to get it on here quickly, while that's not working.
So, how does it work?
It uses a CodeIgniter back-end and I can upload images using my CMS system which also automatically generates the thumbnails.
The front end was built using Angular. It's pretty straight forward really so I wont go in to too much detail. There is a main gallery component that has a state that holds the current view mode (image or thumbs) and some other stuff, a current image component and a HUD component (the buttons). The thumbnail view is it's own component and each thumbnail is another component and that's it. There is a service that handles communication with the back-end api, you can see the communication with the back-end if you have debug tools available. A bigger app would probably make use of Angular's Router module.
All the transition effects (fading buttons) and the drop-down extra info are all done with CSS.