Angular in Jekyll / Github pages blog - blog post routing

时间:2014-09-23 09:05:51

标签: javascript angularjs jekyll github-pages

我正在尝试将Angular合并到我的Jekyll / Github Pages博客中。到目前为止,我已经能够设置基本页面(“关于”,“项目”和帖子列表),但是每个帖子路由到非角度页面的链接。我知道我没有设置路线,部分路线很正确,但调试有问题。有什么建议?这是我的代码:

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);
        });
      });
    }
  };
});

来自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>

1 个答案:

答案 0 :(得分:0)

看起来你正试图重新发明轮子。将markdown解析委托给客户端会产生反作用。

Jekyll尝试删除服务器端所有不必要的工作,以使网站轻松且以性能为导向。

我知道你的工作可以成为一个概念证明,但我真的不明白为什么你会这样做,因为我觉得服务静态页面比生成它们更有效率客户方。