CODEWITHSUNDEEP
javascriptangularjstemplatesangularjs-routingdust.js
Jeremy Grancher
Jeremy Grancher

Reputation: 13

Angular templating with Dustjs

I'm a beginner in the AngularJS environmnent. In the interest of my company, I would like to combine the power of the Angular framework with the Dustjs templating engine.

The problem is : Dustsjs is compiling files to .js files (I have a Grunt task which is doing that for me in my public folder), not in .html. And, in the documentation of $routeProvider, the 'templateUrl' or 'template' parameters are looking for .html templates.

My app.js :

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

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


As you can imagine, I have a weird result since my .js is injected without being parsed. https://i.sstatic.net/5JkRx.jpg

So, my two questions are :
- 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?
- Are there any best practices for combining these two technologies?

Upvotes: 1

Views: 600

Answers (1)

Chetan
Chetan

Reputation: 56

  • 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?

No you are not right in putting the .js file path. Angular expects it to a HTML markup. 

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

and

templateUrl : 'views/myview.html'

would be acceptable values.

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

One of the ways to go would be to use dust templates as the outer template and let angular routeProvider take care of rendering the dynamic content to be parsed by angular. For example,

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>

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

Upvotes: 2

Related Questions