Angular Template loader for webpack
Puts HTML partials in the Angular's $templateCache so directives can use templates without initial downloading.
Webpack and loaders
Webpack is the webpack and it's module bundler. Loaders wrap content in the javascript code that executes in the browser.
Install
npm install ng-cache-loader
Usage
You can require html partials via ng-cache-loader
:
require('ng-cache!./demo/template/myPartial.html');
Partial will be available as ng-include="'myPartial.html'"
or templateUrl: 'myPartial.html'
.
Named templates
You can wrap template in the script
tag:
<script type ="text/ng-template" id="myFirstTemplate">
</script>
You can have multiple templates in one file:
<script type ="text/ng-template" id="myFirstTemplate">
</script>
<script type ="text/ng-template" id="mySecondTemplate">
</script>
You can mix named templates and simple markup:
<script type ="text/ng-template" id="myFirstTemplate">
</script>
<div ng-include="'myFirstTemplate'">...</div>
<script type ="text/ng-template" id="mySecondTemplate">
</script>
Prefix
Prefix adds path left of template name:
require('ng-cache?prefix=public/templates!./path/to/myPartial.html')
Prefix can mask the real directory with the explicit value
or retrieve the real directory name (use *
or [dir]
):
require('ng-cache?prefix=public/*/templates!./path/to/myPartial.html')
Prefix can strip the real directory name (use //
):
require('ng-cache?prefix=public/*//*/templates!./far/far/away/path/to/myPartial.html')
Prefix can be extended through a directory tree (use **
or [dirs]
). See the next section.
Root
You can specify root directory for templates separated by a colon prefix=root:**
.
It is enough to specify a single directory. Prefix counts directories from right to left and takes rightmost occurance of the specified directory.
/User/packman/Projects/packman/
├─ app/tmpls/field.html
└─ components/skins/tmpls/yellow.html
In above example you require templates by relative path from the inside of app/tmpls
and components/skins/tmpls
,
and you get a prefix relative to the root:
require('ng-cache?prefix=packman:**!./field.html')
require('ng-cache?prefix=packman:**!./yellow.html')
It is also possible to combine wildcards in prefix, i.e. prefix=packman:**/tmpls//*
.
Module
By default, templates will be added to the default AngularJS 'ng' module run() method.
Use this parameter to use a different module name:
require('ng-cache?module=moduleName!./path/to/myPartial.html')
If the module does not exist it is created.
webpack config
Match .html
extension with loader:
module: {
loaders: [
{
test: /\.html$/,
loader: "ng-cache?prefix=[dir]/[dir]"
}
]
},
URL resolve
Relative links to the local images are resolved by default.
<img src="../img/logo.png"></img>
<img src="data:image/png;base64,..."></img>
Use this in conjunction with url-loader. For instance:
require('url?name=img/[name].[ext]!ng-cache!./templates/myPartial.html')
Using webpack config is more convenience:
module: {
loaders: [
{ test: /\.html$/, loader: "ng-cache?prefix=[dir]/[dir]" },
{ test: /\.png$/, loader: 'url?name=img/[name].[ext]&mimetype=image/png' },
{ test: /\.gif$/, loader: 'url?name=img/[name].[ext]&mimetype=image/gif' }
]
},
To switch off url resolving use -url
query param:
require('ng-cache?-url!./myPartial.html')
License
MIT (http://www.opensource.org/licenses/mit-license.php)