Angular templates are very cool and all, there's jsut one thing im used to that im missing:
This is only about building/packaging your JS for prod
When i require a handlebars template with require.js:
require(["hbs!my-template"], function(tmpl) {
//use the template in here
});
HBS can parse the template, find dependencies and subdependencies, and include all those. Further, with require.js i can automatically get all the dependencies included in my build, just by asking for my-template
They all seem to work more or less the same way:
- Scan directory for all files named "*.mysuffix", for example
templates/dashboard/**/*.html
- Concat all those and add them to template cache, when your one single angular app starts
- I have more than one angular app on a page
- I have several different pages, where some reuses widgets from each other The angular community seems to favor folder structures like this
app
/directives
/dashboard
/settings
/controllers
/dashboard
/settings
/templates
/dashboard
/settings
My opinion is that that stuff only works for small apps. For larger apps you need smth like this:
app
/widgets
/account
/other-thing
/pages
/dashboard
/settings
A widget can be used on both dashboard/settings, and that folder contains a controller it needs, a template it needs and so. All code concerning one unit on the page is in one folder.
i think its a great idea like you say, to compile each template as its own module, and then use require.js, browserify, or what have you this month to put it all together.
also, on the level "tab 'page-A' uses template 'page-A.tmpl' ", its not very complicated, there we're all good i think
What i wanna do is to have something that, when i load 'page-A.tmpl', reads that that page loads 'my-widget.tmpl' via ng-include, and load my-widget.tmpl as well
Use the angular compiler to parse out the ng-include directives in the build, so basically:
findDeps("page-A.tmpl"), and then finding subdeps in turn from that..
good discussion, the journey continues :)