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负责渲染要通过角度解析的动态内容。例如，

home.dust

<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";
});

用Dustjs进行角度模板化

1 个答案: