无服务器Jade与Angularjs的模板

Question

我了解客户端模板渲染是一个有争议的主题，但是在进行编码以与所有Web服务器兼容时，这是必须的。

我正在寻找一个使用angularjs渲染玉器模板的简单解决方案...这是一个过于简化的示例： http : //jsfiddle.net/BqnR6/

angular.bootstrap(document)

该示例呈现单个页面并引导角度来评估元素。 我所需要的是一个使用路由调用玉石文件，渲染它们然后使用angularjs进行评估的解决方案。

是否有方法或解决方法来实现此功能？

请注意，模板的呈现必须是无服务器的（即没有nodejs）。

Answer 1

您可以将所有模板都嵌入有角ng-template脚本标签的解决方案：

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

为此的角度约定是type="text/ng-template"的ID，是有效的模板URL，如果找到了angular，它将在尝试通过Ajax获取之前从脚本标记中提取

在自举这些脚本标记的angular编译innerHtml之前

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

使用ng-view进行路由的示例应用程序：

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