使用 Dustjs 进行角度模板

Question

我是 AngularJS 环境的初学者。为了我公司的利益，我想将 Angular 框架的强大功能与 Dustjs 模板引擎结合起来。

问题是：Dustsjs 正在将文件编译为 .js 文件（我有一个 Grunt task 在我的公共文件夹中为我执行此操作），而不是在 .html 中。而且，在 $routeProvider 的文档中，'templateUrl' 或 'template' 参数正在寻找 .html 模板。

我的 app.js：

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

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/', {
    template: 'views/myView.js',
    controller: 'HomeController'
  });
}]);

你可以想象，我有一个奇怪的结果，因为我的 .js 被注入而没有被解析。 http://i.stack.imgur.com/5JkRx.jpg

所以，我的两个问题是：
- 我将.js文件路径放在routeProvider的模板中是否正确，还是有另一种方法来获取并正确显示视图？简而言之，我做错了什么？
- 有没有将这两种技术结合起来的最佳实践？

Answer 1

• 我将.js文件路径放在routeProvider的模板中是否正确，或者是否有其他方法可以获取并正确显示 风景？简而言之，我做错了什么？

不，您不正确放置 .js 文件路径。 Angular 期望它是一个 HTML 标记。

template: '<div>content</div>',

和

templateUrl : 'views/myview.html'

将是可接受的值。

• 有没有将这两种技术结合起来的最佳做法？

其中一种方法是使用灰尘模板作为外部模板，让 angular routeProvider 负责渲染动态内容以通过 angular 解析。例如，

家.尘

<html>
  <head>
    <title>{page_title}</title>
  </head>
  <body ng-app="myApp">
    {>header/}
    <div ng-view></div>
    {>footer/}
  </body>
</html>

header.dust

<div id="menu">Menu</div>

footer.dust

<div id="copyright">Footer</div>

查看/myView.html

<div id="content">Hi ((username))</div>

app.js

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

app.config(['$routeProvider', '$interpolateProvider', function ($routeProvider, $interpolateProvider) {
  //This is required as dust templates also '{' and '}' for interpolation
  $interpolateProvider.startSymbol('((').endSymbol('))');
  $routeProvider.when('/', {
    templateUrl: 'views/myView.html',
    controller: 'HomeController'
  });
}])
.controller('HomeController', function($scope){
$scope.username = "John Doe";
});