Search code examples
angularjsngboilerplate

AngularJS HTML template/snippet management


I'm an Angular noob coming from Backbone+Marionette+Require.

If you have an app with a bunch of views and a bunch of directives each with their own HTML where are you putting all the HTML snippets? Most of the examples I see are storing them either inline, in their own script tags, or loaded asynchronously. One thing I love about RequireJS is that templates can live in their own files but can be compiled into the main JS file for production. I assume there's a grunt task or something similar? Maybe one that takes HTML from individual files and embeds them into individual script tags in a consolidated HTML file at build time?

Thanks.


Solution

  • There is indeed a Grunt task to do this! Originally created by the Angular-UI Bootstrap team, the html2js task will take your templates and compile them into a JavaScript file (using angular's $templateCache) that can be concatenated with the rest of your scripts to form a single payload.

    I haven't released it yet as I am still adding documentation, but take a look at ngBoilerplate, an AngularJS project kickstarter, to see it in context.

    Update (28 Feb 2013): I just made a release of ngBoilerplate. You can check out the official site here: http://bit.ly/ngBoilerplate.