javascript - 使用 Dustjs 进行 Angular 模板化

标签 javascript angularjs templates angularjs-routing dust.js

我是 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 是在没有被解析的情况下注入(inject)的。 http://i.stack.imgur.com/5JkRx.jpg

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

最佳答案

  • Am I doing it right to put the .js file path inside the template of routeProvider, or is there another way to get and correctly display the view? In short, what did I do wrong?

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

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

templateUrl : 'views/myview.html'

将是可接受的值。

  • Are there any best practices for combining these two technologies?

其中一种方法是使用 dust 模板作为外部模板,并让 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>

应用程序.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";
});

关于javascript - 使用 Dustjs 进行 Angular 模板化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23790057/

相关文章:

javascript - 如何将现有回调 API 转换为 Promise?

javascript - 无法让我的 Javascript 添加或删除类

javascript - 使用 AngularJS 指令创建单个正确答案调查

javascript - 如何使用 Angular 的 $resource 取消正在进行的 REST 调用?

javascript - 使用 JSON 在 Django 模板中呈现表格

c++ - Const 和非常量访问解析为不同的重载?

javascript - 如何制作一个忽略页内跳转的JS后退按钮

javascript - page.evaluate() 不打印控制台消息

angularjs - Angular UI 路由器 : Access state parameters outside ui-view

python - Django-CMS 模板 block