使用角度为js的灰尘模板

时间:2014-08-06 04:57:17

标签: javascript angularjs templates dust.js

我是angularjs环境的新手,我想使用角度使用灰尘模板,因为当前的应用程序有灰尘模板,但我找不到任何关于如何使用我现有的带角度js的灰尘模板。

问题是灰尘模板具有不同的语法,而角度js模板使用它提供的指令。

所以问题是“有没有办法使用我现有的带角度js的灰尘模板”?或者我必须根据angularjs规范重写模板。

5 个答案:

答案 0 :(得分:6)

在大多数情况下,可以工作的一部分没有太多重写。我假设你正在使用Dust和Angular默认值,所以你需要用单个替换双花括号:

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{').endSymbol('}');
});

如果你有一个简单的用例,就像在模板中一样:

Hello Himanshu, the time is now {time}.

如果您通过templateUrl向Angular提供该文件(或使用gulp-angular-templatecache或其他任何内容加载它),您可以这样做:

angular.module('myApp').directive('myTime', ['$scope', function($scope) {
    $scope.time = new Date();
});

这会呈现。但是你需要做很多检查,重命名等等。

对于更复杂的用例,你必须进行一些重命名,搜索和替换等。例如,如果你有一个简单的循环,并希望在那里进行ng-repeat,你必须替换:

<table name="users">
    {#users}
        <tr>
             <td>{name}</td>
        </tr>
    {/users}
</table>

用这个:

<table name="users">
    <tr ng-repeat="user in users">
         <td>{user.name}</td>
    </tr>

</table>

或者,如果您有包含,请更改:

{>details}

<ng-include="details.html">

你绝对可以重用一些组件,但问题是你会得到多少和什么。而且我不确定你可能会带来的其他指令如何对单花括号使用做出反应,它们可能会破坏,所以你可能会更好地搜索和替换它们。

当然,将它们全部重命名为.html,.dust或类似名称,如果它们没有被命名为。

答案 1 :(得分:3)

AngularJS无法使用前端的DustJS模板。您需要重新编写AngularJS的模板。

话虽如此,如果你在AngularJS上设置: 您可以查看Angular-for-server,但仍需要重新编写DustJS模板。

如果您仍在考虑框架: 查看ReactJS

ReactJS允许在客户端和服务器上重复使用模板。此外,它还接管前端的模板(用于数据绑定和事件管理)。这是SEO友好的,因为它呈现服务器本身的第一页。

如果您设置了DustJS模板: 我目前正在使用Dustjs进行开发。我面临的最大障碍之一是在前端设置SPA。一旦页面首次在前端呈现,所有事件管理,路由和数据绑定都必须由开发人员完成。这给了我在客户端和服务器上使用相同模板的优势,并且由于服务器本身的第一页渲染,它也是SEO友好的。

希望这有帮助。

答案 2 :(得分:0)

我同意其他人的观点。我和Handlebars有类似的问题。但是将它迁移到角度很容易。这样做的好处我们很棒。 AngularJs其次有许多有用的指令 - 它与控制器对应。

如果您仍想使用它...指令,控制器有模板道具,您可以在那里插入模板代码。但它必须是有角度友好的:)与我一起使用车把。但过了一段时间我决定把它删除。

答案 3 :(得分:0)

...或者你可以编译Angular模板的花括号,如:

{~lb}{~lb} slide.text{~rb}{~rb}

Issue in the repo of Krakenjs where the solution is commented. Section in Dust.js tutorial

希望它有所帮助!

答案 4 :(得分:0)

此问题可能是最简单的解决方案。只需确保在第一个双支撑后留出空间,灰尘将被忽略,并且角度会将其拾起。

{{variable + func() + 'etc'}} // Dust will process to {}
{{ variable + func() + 'etc'}} // Angular will process