Skip to content

Instantly share code, notes, and snippets.

@marcoslin
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcoslin/014670ab28af6ef054a6 to your computer and use it in GitHub Desktop.
Save marcoslin/014670ab28af6ef054a6 to your computer and use it in GitHub Desktop.
Simple AngulaJS MustacheTemplater
var app = angular.module("webapp", []);
/**
* MustacheTemplater is a simple and small templating designed to
* generate simple text containing mustache quoated params. The template
* is defined using <script> tag with type of "text/ng-template".
*
* It is intentionally kept simple supporting only key value pares. Need
* additional logic? Use the mustache library instead.
*
* Sample usage include error message or SQL generation.
*/
app.service("MustacheTemplater", function ($templateCache, $log) {
var self = this;
/**
* render: Render the text containing mustache parameters. If key mot provided in
* `params`, it will be replaced by an empty string.
*
* @param {string} template_text - Text with mustache variable to be parsed
* @param {Object} [params] - Optional key/value that will be used to populate template.
*/
this.render = function (template_text, params) {
// Default params to an empty object
params = params || {};
// Search for mustache like params with {{...}}
return template_text.replace(/{{\s*[\w\.]+\s*}}/g, function(x) {
// Extract key in the mustache quote
var key = x.match(/[\w\.]+/)[0];
// Return the key from params if exists, or return an empty string
if (typeof params[key] === "undefined") {
return "";
} else {
return params[key];
}
});
}
/*
* generate: retrieve the template using `template_id` and render the result
*
* @param {string} template_id - Text of `id` to retrieve the ngTemplate
* @param {Object} [params] - Optional key/value that will be used to populate template.
*/
this.generate = function (template_id, params) {
// Retrieve
var templ = $templateCache.get(template_id);
return self.render(templ, params);
}
/*
* generate_trimmed: Same as `generate` but remove all extra spaces. Designed to remove
* space based formatting of a SQL statement to be passed as URL.
*
* @param {string} template_id - Text of `id` to retrieve the ngTemplate
* @param {Object} [params] - Optional key/value that will be used to populate template.
*/
this.generate_trimmed = function (template_id, params) {
// Retrieve
var templ = $templateCache.get(template_id).trim(),
// Replace continue white space to a single space
templ_trimmed = templ.replace(/\s+/g, " ");
return self.render(templ_trimmed, params);
}
});
app.controller("TestController", function ($scope, MustacheTemplater, $log) {
$scope.title = "The Value";
var sql = MustacheTemplater.generate("select_data", $scope);
$log.log("sql: ", sql);
var sql_trimmed = MustacheTemplater.generate_trimmed("select_data", $scope);
$log.log("sql:" + sql_trimmed);
$scope.template = sql;
});
<html>
<head>
<title>Angular Template Test</title>
</head>
<body ng-app="webapp">
<h1>Angular Template Test</h1>
<div ng-controller="TestController">
<div>Title: {{title}}</div>
<div>Sql: {{template}}</div>
</div>
<div id="sql"></div>
<script id="select_data" type="text/ng-template">
select *
from main_table
where key = "{{title}}"
and value = "{{title}}"
order by {{order_by}}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment