diff --git a/README.md b/README.md index faa2c79..d1392ed 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Puts HTML partials in the Angular's $templateCache so directives can use templat ## Webpack and loaders -Webpack is the [webpack](http://webpack.github.io/) and it's module bundler. [Loaders](http://webpack.github.io/docs/using-loaders.html) wrap content in the javascript code that executes in the browser. +Webpack is the [webpack](http://webpack.github.io/) and it's module bundler. [Loaders](http://webpack.github.io/docs/using-loaders.html) wrap content in the javascript code that executes in the browser. # Install @@ -21,7 +21,7 @@ require('ng-cache!./demo/template/myPartial.html'); Partial will be available as `ng-include="'myPartial.html'"` or `templateUrl: 'myPartial.html'`. -Note that the inline require syntax is used in examples for simplicity. +Note that the inline require syntax is used in examples for simplicity. It's recommended to use webpack [config](#webpack-config). ## Named templates @@ -81,21 +81,21 @@ or retrieve the real directory name (use `*` or `[dir]`): ``` javascript require('ng-cache?prefix=public/*/templates!./path/to/myPartial.html') -// => ng-include="'public/path/templates/myPartial.html'" +// => ng-include="'public/path/templates/myPartial.html'" ``` Prefix can strip the real directory name (use `//`): ``` javascript require('ng-cache?prefix=public/*//*/templates!./far/far/away/path/to/myPartial.html') -// => ng-include="'public/far/path/templates/myPartial.html'" +// => ng-include="'public/far/path/templates/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:**`. +You can specify root directory for templates separated by a colon `prefix=root:**`. It is enough to specify a single directory name. Prefix counts real template path from right to left and takes first (rightmost) occurance of the root directory. ``` @@ -121,19 +121,19 @@ It is also possible to combine wildcards in prefix, i.e. `prefix=packman:**/tmpl Use `name` query parameter to strip file extension or add suffix: ``` javascript -// +// require('ng-cache?name=[name].tpl!./field.html') // => ng-include="'field.tpl'" require('ng-cache?name=[name]-foo.[ext]!./field.html') // => ng-include="'field-foo.html'" ``` - + Note. File extension are defined as any char sequence after the last `.`. ## Module -By default, templates will be added to the default AngularJS 'ng' module run() method. +By default, templates will be added to the default AngularJS 'ng' module run() method. Use this parameter to use a different module name: ``` javascript @@ -151,13 +151,13 @@ require('ng-cache?module=moduleName.[root]&prefix=packs:**!./packs/path/to/myPar In such query `[root]` means that first part of `templateId` *(here it is `path/to/myPartial.html`)* will be stripped out and placed as a part of `moduleId`. In current example resulting values: -- `moduleId`: `"moduleName.path"` -- `templateId`: `"to/myPartial.html"` +- `moduleId`: `"moduleName.path"` +- `templateId`: `"to/myPartial.html"` Useful in case you want save few bytes. ## Template id - + To obtain template id use `exportIdOnly` query parameter. Loader exports `id` of a template. ```javascript @@ -191,7 +191,7 @@ module: { } ``` -Note that the inline require syntax is used in examples for simplicity. It's recommended to use webpack config. +Note that the inline require syntax is used in examples for simplicity. It's recommended to use webpack config. Please see this [comment](https://github.com/webpack/webpack/issues/1626#issuecomment-156758230) and the [manual](https://webpack.github.io/docs/using-loaders.html#loaders-in-require). @@ -272,6 +272,8 @@ To switch off url resolving use `-url` query param: require('ng-cache?-url!./myPartial.html') ``` +Supported attributes: `src`, `srcset`, `md-svg-src`. + # License MIT (http://www.opensource.org/licenses/mit-license.php) diff --git a/lib/urlParser.js b/lib/urlParser.js index 9aed416..2f82fca 100644 --- a/lib/urlParser.js +++ b/lib/urlParser.js @@ -10,15 +10,15 @@ Parser = new Parser({ '<[^\\s/>]+': 'tag', }, tag: { - '[\\s\\n](md-svg-)?src[\\s\\n]*=[\\s\\n]*[\'"]': 'srcAttr', + '[\\s\\n](md-svg-)?src(set)?[\\s\\n]*=[\\s\\n]*[\'"]': 'srcAttr', '>': 'root', }, srcAttr: { - '[^\'"]+': function(match, idx) { + '[^\\s\\n\'",]+': function(match, idx) { if (relativeImageUrl.test(match)) { this.urls.push({idx: idx, path: match}); } - return 'tag'; + return 'srcAttr'; }, '[\'"]': 'tag', }, diff --git a/package.json b/package.json index 9570301..052836a 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "chai": "^3.2.0", "eslint": "^2.13.1", "eslint-config-google": "^0.6.0", + "file-loader": "^2.0.0", "mocha": "^2.3.0", + "url-loader": "^1.1.2", "webpack": "^2.4.1" }, "dependencies": { diff --git a/test/public/AngularJS-large.png b/test/public/AngularJS-large.png new file mode 100644 index 0000000..a1037f2 Binary files /dev/null and b/test/public/AngularJS-large.png differ diff --git a/test/public/AngularJS-small.png b/test/public/AngularJS-small.png new file mode 100644 index 0000000..ab5e20f Binary files /dev/null and b/test/public/AngularJS-small.png differ diff --git a/test/src/template.html b/test/src/template.html index f2ff605..1f29ca8 100644 --- a/test/src/template.html +++ b/test/src/template.html @@ -25,4 +25,15 @@