Angular template use non-html language - angularjs

Question

I am using express server and angular client. I use jade to write express template and the code is very clean.
for example, in index.jade
html
head
title!= title
body
h1!= message
Then I can just compile the jade file into html file
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!'});
});
Now I am moving some logic to the client to prevent page loading. The drawback is that angular template is as verbose as normal html code. Files get long and messy soon.
For example, in my profile template, I have this
<div class="my-panel-body">
<table class="my-table">
<!--email-->
<tr>
<th>Email</th>
<td>{{entity.email}}</td>
</tr>
<!--gender-->
<tr>
<th>Gender</th>
<td>{{entity.meta.gender}}</td>
</tr>
<!--dob-->
<tr>
<th>Date of Birth</th>
<td>{{entity.meta.dob}}</td>
</tr>
<!--country-->
<tr>
<th>Country</th>
<td>{{entity.meta.country}}</td>
</tr>
<!--city-->
<tr>
<th>City</th>
<td>{{entity.meta.city}}</td>
</tr>
<!--status-->
<tr>
<th>Status</th>
<td>{{entity.meta.status}}</td>
</tr>
It would be great if I can write things like
div
table
head
tr
th Date of Birth
td {{entity.dob}}
tr
th Email
td {{entity.email}}
It doesn't have to be jade. I am ok with any language as long as its clean and short

Answer 1

Jade runs on the server and Angular runs on the client. When Angular requests the template, it will ask the server and the server will process the Jade template and respond with the generated HTML which is then a valid Angular template.
As long as you're not using any kind of pre-processor to package the Angular templates into a single file, then using Jade on the server to generate Angular templates for the client works fine. If you are using a pre-processor, then you need to run Jade first (which is also possible--Jade is not tied to Express).
Not necessarily related to this question, but it's also useful to note that Angular is not tied to HTML. Any tag based language that the browser supports will work with Angular--SVG, VRML, MathML, etc.

Answer 2

So what you can do is write them how you want and then before angular loads create a module called templates that uses $templateCache. You can put them in there once they're parsed: https://docs.angularjs.org/api/ng/service/$templateCache
If you need it rendered on the fly you'll have to modifiy how $http.get works in your .config and check to see if it's a template and if it is pass it through your renderer.