I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
Related
Within our application we're trying to achieve (html)templating based on themes. For example, if the specified theme is default, we should use the basic templates, but if the theme is 'coolTheme', all templates postfixed with '-coolTheme.html' should be used instead.
We have considered different solutions, but figured there must be a simple/default way to do this. These are the options we came up with:
Gulp task that puts all html files per theme in a {myTheme}-templates.js. When changing the theme angular resets the $templateCache, loads in the theme file and puts the templates in the $templateCache.
Gulp task that copies over all *-.myTheme.html to where the default templates should be (based on given theme parameter). Disadvantages are that you cannot change the theme on the fly.
Intercepting/decorating the $templateRequest, to check in a list/configuration file if the requested file is marked as 'themed', and then change the request to 'theFile-{myTheme}.html' instead
Which is the best way to handle this? And why? Does anyone have the 'perfect' solution for this?
Brunch works with almost the all template languages and has plugins for them, but I could't work with vanilla HTML. I just want that on every build brunch just copy my html files(wherever they are located) and paste under that appropriate location on public folder. I don't want to use jade, handlebars or whatever I just want to copy clean HTML files without any modification. Is that possible?
Put them in the assets folder like so:
app
assets
something.html
All files in the assets folder simply get copied.
That being said, unless your doing a single page website or don't plan on updating the HTML very often, it seems less than ideal to not use a template language if for nothing else than to avoid repeating yourself.
Also, note that you can use something like jaded-brunch, to have the files compile to static html files rather than JS. This is rather nice when you want the ease of working with HTML files server-side and still enjoy the benefits of using a template engine for development.
There is a plugin exactly for your use-case, which will compile, validate and minify your HTML templates located outside of assets directory, which is a must if you're working with templates in a folders-by-feature structure. The plugin also provides a default optimization, ready to be used in production environment.
I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.
Is it bad style to overload elements.html with CSS and JS imports?
No, there is nothing wrong about including JS and CSS files in the elements.html.
Think of elements.html as a non-ui web-component.
There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.
So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.
More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html
Hope my writing is clear.
I am learning Angular and I need advice on best practice, and a general direction for digging deeper in the subject:
I am trying to create a web app with Angular which is composed of a number of standalone widgets, and I decided to implemented them each as independent custom directives.
I would like to make these custom directives as reusable, movable, replaceable and cohesive as possible, and put all of their related html/css/js files in their own dedicated folders, with a folder structure of something like this:
What is the best practice for loading a separate CSS file for the template partial of a custom directive? (For example, should I load the CSS from the partial.html which will eventually appear in the html body? Should I look into merging my css files with Grunt upon build?)
You should build all of your CSS into a single file you. Without merging you require an additional request to the server and processing of the CSS which adds more time before the page can be rendered.
For additional loading performance you can combine all of your HTML fragments into a single file as well that you load up front.
<script type="text/ng-template" id="temp2.html">
<div class="view">
</div>
</script>
I am a newbie webdeveloper. Though, I understand what html5 boiler-plate brings to the table, I would like to know how can I extend/customize it to use it in all my html files?
As of now, it provides an index.html.
So, what is the convention/method to create a new html file?
Should I create a separate html folder?
How do I inherit the properties of the index.html file?(Copy-paste?) Can't there be something like Django where I can inherit the baseurl?
Though, I have some understanding of dealing with javascript and css, anything else I should take care of while dealing with html5 boiler plate and cross browser compatibility?
In the beginning there is no real rhyme or reason to where you store your html files, because usually its just that plus some css file, or whatever.
However, when you get into real development, as in with a framework for front end + back end code, you will find that there is a need to separate things out as server side and public for the benefit of file access control and naming conventions.
When that is the case, you end up with an "Assets" folder, or "public" or something like that. Boilerplate tends to follow that convention.
In order to make boilerplate be automatically extended to all of your html files, you must develop your view files to be modular.
Main template file
|
----header (contains all the references / includes to boilerplate)
----content
----footer
Also, please note that at that point, your html will no longer be stored as .html file type; you must use a language that is capable of combining files as chunks. PHP does this nicely, and as you know, django can handle that as well. Ruby on rails, etc. you're gonna need to decide what language you want to work in for that. OTHERWISE, the old method of combining html chunks is server side includes (aka SSI or .shtml)
The issue of a base url is solved by having your server side language of choice work with the directives of your web server. For apache, you use mod_rewrite, and then you can pass an arg in the url that targets some classes / models / views, etc. MVC frameworks actually have already solved that problem for you, if you dont mind using one.
"You can override what folders and files you want to operate on in project.properties. All the default configuration is in default.properties." http://html5boilerplate.com/docs/Build-script/
default.properties is in /build/config
You need to add the pages to the line that starts with "file.pages", like this:
file.pages = new-page.html"
The core of HTML5 Boilerplate
HTML — A guide to the default HTML.
CSS — A guide to the default CSS.
JavaScript — A guide to the default JavaScript.
.htaccess — All about the Apache web server config (also see our alternative server configs).
crossdomain.xml — An introduction to making use of crossdomain requests.
Everything else.