Angular template use non-html language

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

have you tested the example you posted? why wouldn't it work? — Claies
– Claies, Commented Jul 20, 2015 at 14:41

Samuel Neff · Accepted Answer · 2015-10-06 15:53:10Z

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.

edited Oct 6, 2015 at 15:53

answered Jul 20, 2015 at 15:43

Samuel Neff

75.4k18 gold badges144 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathew Berg · Accepted Answer · 2015-07-20 15:34:55Z

0

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.

answered Jul 20, 2015 at 15:34

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

3 Comments

Samuel Neff Over a year ago

Why does he need to do any of this? Angular will request the template from the web server, if the web server does the conversion from Jade to HTML, then Angular won't even know the difference.

Mathew Berg Over a year ago

Depends if they want to compile the template server side or client side.

Samuel Neff Over a year ago

He said in the question he's compiling the Jade template server side. "I use jade to write express template."

Collectives™ on Stack Overflow

Angular template use non-html language

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related