Jade templates for Angular directives

Question

In my MEAN app, I use jade as my template engine. My problem is, when I call an angular directive, jade code is not working but html code is working. My code is given below:

index.jade

div(ng-repeat="num in addDir")
  admin-collection

directive.js

var formDir = angular.module("formDirective", []);

formDir.directive('adminCollection', function()  {
    return {
       restrict: 'E',
       transclude: true,    
       // call jade template url   
       templateUrl: '../_template/_formTemplate/_adminCollection.jade'
    };
});

_adminCollection.jade

h1 from _adminCollection templateUrl

If I use jade format code in _adminCollection.jade , it just show a plain text, not text inside h1 tag

But following code is working:

directive.js

var formDir = angular.module("formDirective", []);

formDir.directive('adminCollection', function()  {
    return {
       restrict: 'E',
       transclude: true,    
       // call jade template url   
       templateUrl: '../_template/_formTemplate/_adminCollection.html'
    };
});

_adminCollection.html code::

<h1> from _adminCollection templateUrl </h1>

How can I solve this problem?

Answer 1

Jade is a template engine. Browser has only built-in html parser, so it does not understand what jade code means and treats it as plaintext.

To make it work you need to convert it to html. You can use some task manager to do it. Two most popular task managers for node.js are gulp and grunt. Each of them has a working jade plugin which you can use right away.

Answer 2

Jade is something like less - it must be convert to another format, because browser can't understand that. When you use less, you have to transform it to css. And if you use jade - to html. If you use grunt, you should look on it: https://github.com/gruntjs/grunt-contrib-jade Otherwise you can check if your IDE can transform jade to html. For example PhpStorm can do this in automatic way.

Then in your directives you should specify path to html template, no jade.

You can use following directory structure:

app/
   src/
      js/
      less/
      jade/
   dist/
      templates/  <-- here you can put your htmls
      styles/     <-- and here put css
      js/         <-- if you want, you can put this minimalized app.js 
                      that will contain all of your project, 
                      see grunt-contrib-uglify for more info

EDIT: here is really great article about grunt: http://anthonydel.com/my-personal-gruntfile-for-front-end-experiments/ There is much more then you need, but maybe it will help you

Answer 3

.... Or you can to use webpack to do the work.

then you can load the template like this:

angular.module('app').component('myComponent', {
  bindings: {},
  template: require('./mytemplate.jade')()
});

You can to note that I'm invoking the returned function.

Answer 4

Another option is to keep the HTML templates in your DOM, but hidden:

div(ng-non-bindable, style="display: none")

  #adminCollectionTemplate
    div(ng-repeat="num in addDir")
      admin-collection

  #anotherTemplate
    //- Alternatively, pull in the template from another file
    include ./_formTemplate/_adminCollection.jade

and then use jQuery to fetch the HTML out of the DOM, and give it to angular:

formDir.directive('adminCollection', function()  {
    return {
       restrict: 'E',
       transclude: true,    
       // fetch template from DOM   
       template: $('#adminCollectionTemplate').html()
    };
});

This will just work, without any Ajax or any task runners. But it will clutter up the DOM with templates that could otherwise be hidden away in the JS. And it is an extra step to place every new template into that div.

ng-non-bindable is needed to tell Angular to leave the template elements alone (don't manipulate them or bind to them), until their clones are actually used by the directive.