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

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签