Jekyll/Github 页面中的 Angular 博客 - 博客文章路由答案

【问题标题】：Angular in Jekyll/Github pages blog - blog post routingJekyll/Github 页面中的 Angular 博客 - 博客文章路由
【发布时间】：2014-09-23 09:05:50
【问题描述】：

我正在尝试将 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 部分：

<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 部分：

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

【问题讨论】：

标签： javascript angularjs jekyll github-pages

【解决方案1】：

您似乎正在尝试重新发明轮子。将 Markdown 解析委托给客户端会适得其反。

Jekyll 尝试删除服务器端所有不必要的工作，以使网站更轻量级并以性能为导向。

我知道您的工作可以作为概念验证，但我真的不明白您为什么要这样做，因为我想提供静态页面比在客户端生成它们更有效。

【讨论】：