我是 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/