Hey Angular peeps... I am not totally new to Angular, although I have never actually completed an Angular project as of yet. I am however, quite familiar with jQuery and that way of doing things. So for a particular project I set out to create a metro style UI. I had started initially using jQuery and isotope. Which got off to a decent start, but I really wanted this site to be in Angular. I created the main plumbing for the site, wrote a service to feed images, controllers, etc. I had it just populating div's on the page without isotope at first, and everything was working well.
Then came time to integrate isotope. My initial thought was to write a directive around isotope, but I ran into issues with that. And to be honest, it just didn't seem like the AngularJS "way", and I didn't really want to deal with all of the other complexities and magical black boxy-ness of isotope when I was only using small subset of that functionality. Writing directives around jquery plugins to just seems dirty to me.
I dont need all the fancy automatic re-arragement, or support for multiple tiling options. I just want to have ordered tiles on the screen. The column height,width, and arrangement of the tiles will all be assigned in code before it is displayed. All of the dimensions will be consistent so the tile all light up, it really doesn't seem to me all that complicated. I thought about creating an two dimensional array in memory, and then each tile would define an x,y coordinate in the array and a width and height span. When loading photos for the tiles, it would look at meta data on the photo and determine how to display it based on certain criteria (high res, marked favorite, panorama, etc. It would then just fill out out all the tiles by priority until the array was full, basically filling any left over tiles with single tile photos. This seemed do-able, but a bit over complicated , and I really don't think I have a strong enough grasp of writing directives for this path to become clear to me.
So anyhow, my question for you all is simply; Is there a better way to do this? I am not looking for somebody to code this up for me or anything I am just trying to get a little direction. This is really just a brain storming of sorts. If possible, it would be awesome if anybody could help find any samples of doing something similar so I can get a better idea of how to effectively go about it. I have some ideas about how I could do this in just jQuery and pure JS, but the light is just not coming on, so to speak, when I think about how I would do this in AngularJS.
Any and all suggestions, assistance, links, etc. would be GREATLY appreciated! Thanks everybody! And happy coding! :D