最后效果见 Phodal's New Homepage

这里依赖于angularjs，以及angular route，当然后台是由nodejs+Restify强力驱动~~。

官方示例

先看看模板是怎样子的

Blog Lists

我们将注意力放到blogController上，这样的话我们就知道要在下面放些什么。

<div class="content pure-u-1 pure-u-med-3-4" ng-controller="blogController">
    <div class="posts" ng-repeat="post in posts">
        <h1 class="content-subhead">Post</h1>
        <section class="post">
            <header class="post-header">
                <h2 class="post-title"><a href="#/blog/{{post.slug}}">{{post.title}}</a></h2>
                <p class="post-meta" >
                    By 
                    <a href="http://www.phodal.com/" class="post-author">Phodal Huang</a>
                    on
                    <span class="pure-button pure-button-primary">{{post.created }}</span>
                    under
                    <!-- <a class="post-category" ng-class="randomcolors()" href="#" ng-repeat="keyword in post.keywords track by $index">{{keyword}}</a>  -->
                    <a class="post-category" href="#" ng-repeat="keyword in post.keywords track by $index">{{keyword}}</a>
                </p>
            </header>
            <div class="post-description">
                <p>{{post.description}}</p>
            </div>
        </section>
    </div>
</div>

Blog Details

这个就是细节页

<div class="content pure-u-1 pure-u-med-3-4" ng-controller="blogController">
        <div>
            <div class="posts">
                <h1 class="content-subhead">Post</h1>
                <section class="post">
                    <header class="post-header">
                        <h2 class="post-title">{{post1.title}}</h2>
                        <p class="post-meta" ng-bind-html="deliberatelyTrustDangerousSnippet()">

                        </p>
                    </header>
                </section>
            </div>
        </div>
    </div>
</div>

添加路由

     var blogposts = angular.module('blogposts', ['ngRoute']);
      blogposts.config(function($routeProvider, $locationProvider) {
        $routeProvider
        .when('/', {
          templateUrl: 'blogslist.html',
          controller: 'postlistCtrl'
        }).
        when('/blog/:slug', {
          templateUrl: 'blogsdetails.html',
          controller: 'blogController'
        });
       });