网站重构——轻量化的网站架构设计四markdown angular

因为再有的博客基本上是用markdown写的，所以需要将markdown写的博客转为html，再丢给angular处理。

#Markdown

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）和亚伦·斯沃茨（Aaron Swartz）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

安装markdown js

    npm install markdown

简单的用法就是如下面

    var markdown = require( "markdown" ).markdown;
    console.log( markdown.toHTML( "Hello *World*!" ) );

所以我们要做的就是，声明下markdown，再添加到app.js中(转载保留: markdown angular,网站重构四,angularjs insert html

    content:markdown.toHTML(row.content),

代码中添加了一个新的元素用于获取最后的十个博客，用的是underscore为的是以后方便，所以最后的app.js代码如下所示

var restify = require('restify');
var _ = require('underscore')._;
var sqlite3 = require('sqlite3').verbose();
var markdown = require( "markdown" ).markdown;


var db = new sqlite3.Database('sqlite3.db');


var server = restify.createServer();
var content = new Array();


server.use(
  function crossOrigin(req,res,next){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    return next();
  }
);


db.all("SELECT id,content,title,description,slug,created,updated,publish_date,keywords_string FROM blog_blogpost", function(err, rows) {
    rows.forEach(function (row) {
        content.push({
            id:row.id,
            slug:row.slug,
            description:row.description,
            title:row.title,
            content:markdown.toHTML(row.content),
            keywords:row.keywords_string,
            created:row.created,
            updated:row.updated,
            publish_date:row.publish_date
        });
    });


    function respond(req,res,next){
        var data = content[req.params.name-1];
        res.json(data, {'content-type': 'application/json; charset=utf-8'});
    }
    function all(req,res,next){
        var data = {blogposts_sum:rows.length};
        res.json(data, {'content-type': 'application/json; charset=utf-8'});
    }    
    function respages(req,res,next){
        var data = _.last(content,10);
        data = data.reverse();
        res.json(data, {'content-type': 'application/json; charset=utf-8'});        
    }
    server.get ('/blog',all);
    server.get ('/blog/page/:page',respages);
    server.head ('/blog/page/:page',respages);
    server.get ('/blog/:name',respond);
    server.head ('/blog/:name',respond);
    db.close();
});


server.listen(10086, function() {
  console.log('%s listening at %s', server.name, server.url);
});

Angularsjs 插入html

    ng-bind-html

这个指令要引入sanitize 模块


这里似乎需要用到trustAsHtml()这个神奇的东东，看看官方是怎样示例的 $sanitize


The input is sanitized by parsing the html into tokens. All safe tokens (from a whitelist) are then serialized back to properly escaped html string. This means that no unsafe input can make it into the returned string, however, since our parser is more strict than a typical browser parser, it's possible that some obscure input, which would be recognized as valid HTML by a browser, won't make it through the sanitizer. 


看代码:

function Ctrl($scope, $sce) {
    $scope.snippet =
      '
an html\n' +
      'click here\n' +
      'snippet
';
    $scope.deliberatelyTrustDangerousSnippet = function() {
      return $sce.trustAsHtml($scope.snippet);
    };
  }

以及HTML部分

         
 
  
 ##整合## 
  
 index.html部分 
  
 
  
   
    
    
      
      
      
      
    
    


      

        

          

            

              

                
{{post.title}}
                
{{post.description}}
              
            

              

            
            
          
        
      
    
    
 
  
 app.js部分 
  
 
  
 
  
  var blogposts = angular.module('blogposts', []);


  blogposts.controller('postlistCtrl', function($scope, $http, $sce) {
      $http.get('http://0.0.0.0:10086/blog/page/1').success(function(data) {
          $scope.posts = data;
      });
      $http.get('http://0.0.0.0:10086/blog/1').success(function(data) {
          $scope.post1 = data;
          console.log(data.content);
          $scope.deliberatelyTrustDangerousSnippet = function() {
            return $sce.trustAsHtml(data.content);
          };
      });
  });