Webサイトの再構築-軽量化されたWebサイトアーキテクチャ設計四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),

コードには最後の10のブログを取得するための新しい要素が追加されています.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
' + 'click here
' + 'snippet

'; $scope.deliberatelyTrustDangerousSnippet = function() { return $sce.trustAsHtml($scope.snippet); }; }

およびHTMLセクション
         

## ##
index.html
   
    
    
      
      Phodal's New Homepage
      
      
    
    


      

    {{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);
          };
      });
  });