无服务器Jade与Angularjs的模板

Question

I understand client-side template rendering is a controversial subject, but when coding for compatibility with all web servers, it's a necessity.

I'm after a simple solution for rendering jade templates using angularjs... Here is a over-simplified example: http://jsfiddle.net/BqnR6/

angular.bootstrap(document)

The example renders a single page and bootstraps angular to evaluate the elements. What I'm after is a solution that uses routing to call up jade files, render them and then evaluate with angularjs.

Is there a way or a workaround to achieve this functionality?

Please note that the rendering of the templates needs to be serverless (ie no nodejs).

Answer 1

Here's a solution that you embed all your templates into angular ng-template script tags:

<script type="text/ng-template" id="myTemplate.html" class="angular-template">
       <!-- jade template --></script>

The angular convention for this is the ID of type="text/ng-template" is a valid template URL and if found angular will pull from script tag before it would attempt to get via ajax

Before bootstrapping angular compile innerHtml of these script tags

var templates = document.querySelectorAll('.angular-template')
for (i = 0; i < templates.length; i++) {
  templates[i].innerHTML = jade.compile(templates[i].innerHTML.trim())()
}

Example app using ng-view for routing:

var app = angular.module('plunker', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider.
  when('/', {
    templateUrl: 'myTemplate.html' /* note is same as script tag ID above*/
  });

});

app.controller('testApp', function($scope){
  $scope.title="See script tag for template";
   $scope.numbers = [1,2,3,4,5]
})

angular.bootstrap(document, ['plunker'])

DEMO