Making a blog-like single page application using AngularJS and Middleman

Question

I want to create a SPA filled with similar entries: pictures with descriptions. (I won't be the person adding new entries. It has to be as simple as possible without using GUI.)

As far as I understand I won't need a big framework or even a database here, creating a file for every entry should be enough/better. If I didn't want it to be a SPA I would just go with Middleman to generate a bunch of static pages. I tried to understand all of the dependencies between Middleman and AngularJS and how to use everything, but I feel quite lost. Please tell me if I understand correctly all the steps I need to take here.

1. Set up a Middleman app
2. Create a YAML file for every blog entry.
3. Get automatically generated blocks of static HTML content
4. Add AngularJS controllers which will display this blocks in the right place

Or:

1. Set up AngularJS app
2. Create a JSON file for every blog entry
3. Get a SPA from templates and all the JSONs

I just want to be sure that I'm thinking right way and I won't get stuck at some point.

Answer 1

I assume you are not using backend technologies, so the content is entirely static, and you use Angular just to lazy load groups of images meanwhile the user scrolls or clicks. A simple way is just load all of them as a unique static website and hide/show them with some "lazy load" JS library.

However, this approach might not be what you want if the amount of data is big. This brings to the first approach you suggest: to load chunks of HTML through AJAX.

Middleman can pre-generate dynamic pages, so you can have all your data into a unique YAML file with for example an array called "images" and splice the entire set of images into multiple pages. Then with Angular you dynamically load each of your HTML slices on demand.