Webサイトの再構築-軽量化されたWebサイトアーキテクチャ設計四markdown angular
5283 ワード
またあるブログは基本的にmarkdownで書かれているので、markdownが書いたブログをhtmlに変換してangularに捨てる必要があります.
簡単な使い方は以下の通りです.
だから私たちがしなければならないのはmarkdownを宣言してappに追加することです.js中(転載保留:markdown angular,ウェブサイト再構築四,angularjs insert html
コードには最後の10のブログを取得するための新しい要素が追加されています.underscoreは後で便利なので、最後のappです.jsコードは以下の通りです
ここでは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.
コードを見てください:
およびHTMLセクション
#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);
};
});
});