Blog

Blog

PHODAL

网站重构,用angularjs做simple app page博客

最后效果见 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'
        });
       });


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签