Search code examples
htmlgruntjstemplate-engine

Using angular .tpl.html files to build a static .html file

I'm not sure if I'm going about this the right way, however this is what I need to do. I have common .tpl.html files that I want to use both for an angular template and a template to generate a static .html file. What I want is a system (grunt-related) that will take the junk in .tpl.html and insert it in a outer .html file and create a static .html file.

For example, say I have:

stuff.tpl.html

<div> I want this stuff in my overall template </div>

stuff2.tpl.html

<div> I want this stuff in my overall template to create another html</div>

outer.html

 <head>
   stuff
 </head>
 <body>
      {{insert}}
 </body>

where I can make stuff.html (or stuff2.html) by inserting stuff.tpl.html (or stuff2.tpl.html) into outer.html.

I know how to do the angular side, just not the static side.

Solution

  • If I'm not mistaken you need to concatenate multiple static files in to a one single file.

    You can use grunt-contrib-concat to do the job. See the below link grunt-contrib-concat

    If you need to implement the template with angularJs, you can use grunt-html2js which will convert your static html to angular template. Then you can use grunt-contrib-concat to concat all the angular template and create one js which you can add to your index.html subequently.

    Hope this might help you.