Angular in Jekyll/Github pages blog - blog post routing

Question

I'm trying to incorporate Angular into my Jekyll/Github Pages blog. So far I've been able to set up the basic pages ("About", "Projects", and a list of posts), but the links for each post route to a non-angular page. I know I haven't set up the routes and partial quite right but am having trouble debugging. Any suggestions? Here's my code:

app.js:

'use strict';
var app = angular.module('myBlog', [
  'ngRoute',
  'ngResource',
  'blogService',
  'postService'
]);

app.config(function($routeProvider) {
  $routeProvider
    .when('/index', {
      templateUrl: 'blog_overview.html',
      controller: 'IndexCtrl'})
    .when('/posts', {
      templateUrl: 'blog_posts.html',
      controller: 'BlogPostCtrl'})
    .when('/posts/:link/', {
      templateUrl: 'blog_post.html',
      controller: 'BlogPostCtrl'})
    .otherwise({redirectTo: '/index'});
})
.run();

controllers.js:

app.controller('BlogPostCtrl', ['$scope', '$resource', '$routeParams', 'Posts',
  function($scope, $resource, $routeParams, Posts){
    // $scope.templateUrl = ???
    Posts.getPosts(function(data){
      $scope.posts = data;
    })
}])

directives.js:

'use strict';

angular.module('myBlog.directives', [])
.directive('markdown', function($http){
  var converter = new Showdown.converter();
  return{
    restrict: 'A',
    scope: { link:'@' },
    link: function(scope, element, attrs){
      attrs.$observe('link', function(link){
        $http.get('/posts/' + link).success(function(response){
          var htmlText = converter.makeHtml(response);
          element.html(htmlText);
        });
      });
    }
  };
});

sample from blog_post.json

[
  {
    "title": "first post",
    "slug": "2014-06-25-first-post",
    "file": "app/js/posts/2014-06-25-first-post.md",
    "tags": [
      {"title" : "career"}
    ]
  }]

blog_posts.html partial:

<div ng-controller="BlogPostCtrl">Posts</div>
<div ng-repeat="post in posts">
  <h2><a href="{{post.file}}">{{post.title}}</a></h2>
  <div markdown link=""></div>
</div>

blog_post.html partial:

<div ng-controller="BlogPostCtrl">Posts</div>
<div ng-repeat="post in posts">
  <p>{{post.file}}</p>
  <div markdown link=""></div>
</div>

David Jacquel David Jacquel · Accepted Answer · 2014-09-23T11:40:30

It looks like you're trying to reinvent the wheel. Delegating markdown parsing to client side is counterproductive.

Jekyll tries to remove all the unnecessary work on server side to allow sites to be light and performance oriented.

I understand that your work can be a proof of concept but I really don't get why you're trying to do it this way, because I guess that serving static pages is far more efficient than generating them client side.

Angular in Jekyll/Github pages blog - blog post routing

1 Answers