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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签