Running AngularJS on Jekyll

2015-01-01-template.txt

---
title: Template
comments: true
tags:
- tag1
- tag2
---

This is my template file

_config.yml

permalink: :year-:month-:day-:title

app.js

angular
    .module("app")
    .factory("engine", function ($http) {

        return {
            getPosts: function () {
                return $http.get("/api/posts/list.json")
                    .then(function (posts) {
                        return posts.map(function (post) {
                            /* Convert date into Date */
                            post.date = new Date(post.date);
                            /* Remove starting slash from URL */
                            post.url = post.url.replace(/^\//, "");
                            return post;
                        });
                    });
            }
        };

 });

list.txt

---
---
[
    {% for post in site.posts %}
    {
        "title" : {{ post.title | jsonify }},
        "category" : {{ post.category | jsonify }},
        "tags" : {{ post.tags | jsonify }},
        "url" : {{ post.url | prepend: site.baseurl | jsonify }},
        "date" : "{{ post.date | date: '%Y-%m-%dT00:00:00Z' }}",
        "excerpt" : {{ post.excerpt | jsonify }},
        "content" : {{ post.content | jsonify }},
        "comments" : {{ post.comments | jsonify }}
    } {% unless forloop.last %},{% endunless %}
    {% endfor %}
]

structure.sh

.
 ├── _config.yml // Jekyll config
 ├── bower.json // Optional, if using bower
 ├── index.html
 ├── package.json // Optional, if using npm
 ├── _posts
 | └── // Jekyll posts
 ├── _sass
 | └── // SASS files for Jekyll to generate
 ├── api
 | └── // Jekyll generated JSON files for Angular to consume
 ├── bower_components
 | └── // Bower depedencies
 ├── css
 | └── main.css
 ├── img
 | └── // Image files
 ├── js
 | └── // Angular app
 ├── node_modules
 | └── // npm dependencies
 └── views
 └── // Angular view files