Added baggage example and docs

WearyMonkey · Mar 7, 2015 · 8463e36 · 8463e36
1 parent 4cecb07
commit 8463e36
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .idea
 test/test.js
-test/npm-debug.log
+test/npm-debug.log
+bundle.js
diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@ or raw-loader. This gives you the flexibility to pick and choose your HTML loade
 ngTemplate loader will export the path of the HTML file, so you can use require directly AngularJS with templateUrl parameters e.g. 
 
 ``` javascript
+require('ngtemplate!html!./test.html');
+
 app.directive('testDirective', function() {
     return {
         restrict: 'E',
@@ -21,6 +23,8 @@ app.directive('testDirective', function() {
 });
 ```
 
+To remove the extra `require`, check out the [Baggage Example](#baggage-example) below.
+
 ngTemplate creates a JS module that initialises the $templateCache with the HTML under the file path e.g. 
 
 ``` javascript
@@ -78,7 +82,7 @@ require("!ngtemplate?module=myTemplates&relativeTo=/projects/test/app!html!file.
 
  Make sure you use the same path separator for the `prefix` and `relativeTo` parameters, all templateUrls and in your webpack.config.js file.
 
-## webpack config
+## Webpack Config
 
 It's recommended to adjust your `webpack.config` so `ngtemplate!html!` is applied automatically on all files ending on `.html`:
 
@@ -97,6 +101,55 @@ module.exports = {
 
 Then you only need to write: `require("file.html")`.
 
+## Baggage Example
+
+ngTemplate loader works well with the [Baggage Loader](https://github.com/deepsweet/baggage-loader) to remove all those 
+extra HTML and CSS requires. See an example of a directive and webpack.config.js below. Or take a look at more complete
+example in the examples/baggage folder.
+
+With a folder structure:
+
+app/
+├── app.js
+├── index.html
+├── webpack.config.js
+└── my-directive/
+    ├── my-directive.js
+    ├── my-directive.css
+    └── my-directive.html
+
+and a webpack.config.js like:
+
+``` javascript
+module.exports = {
+  module: {
+    preLoaders: [
+      { 
+        test: /\.js$/, 
+        loader: 'baggage?[file].html&[file].css' 
+      }
+    ],
+    loaders: [
+      {
+        test: /\.html$/,
+        loader: "ngtemplate?relativeTo=" + __dirname + "/!html"
+      }
+    ]
+  }
+};
+```
+
+You can now skip the initial require of html and css like so:
+
+``` javascript
+app.directive('myDirective', function() {
+    return {
+        restrict: 'E',
+        templateUrl: require('./my-directive.html')
+    }
+});
+```
+
 ## Install
 
 `npm install ngtemplate-loader`

diff --git a/examples/baggage/index.html b/examples/baggage/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
+    <script src="bundle.js"></script>
+</head>
+<body ng-app="baggageExample">
+
+    <my-directive></my-directive>
+
+</body>
+</html>
diff --git a/examples/baggage/my-directive/my-directive.html b/examples/baggage/my-directive/my-directive.html
@@ -0,0 +1 @@
+hello {{foo}}
diff --git a/examples/baggage/my-directive/my-directive.js b/examples/baggage/my-directive/my-directive.js
@@ -0,0 +1,10 @@
+angular.module('baggageExample', [])
+    .directive('myDirective', function() {
+        return {
+            restrict: 'E',
+            templateUrl: require('./my-directive.html'),
+            link: function(scope) {
+                scope.foo = 'world';
+            }
+        }
+    });
diff --git a/examples/baggage/webpack.config.js b/examples/baggage/webpack.config.js
@@ -0,0 +1,23 @@
+var path = require('path');
+require('../../index.js');
+
+module.exports = {
+    entry: {
+        test: path.join(__dirname, "my-directive/my-directive.js")
+    },
+    module: {
+        preLoaders: [
+            { test: /\.js$/, loader: 'baggage?[file].html' }
+        ],
+        loaders: [
+            // replace ../../../index.js with ngtemplate
+            { test: /\.html$/, loader: "../../../index.js?relativeTo=" + __dirname + "!html" }
+        ]
+    },
+    output: {
+        path: __dirname,
+        publicPath: "/",
+        filename: "bundle.js",
+        sourceMapFilename: "bundle.map"
+    }
+};
diff --git a/package.json b/package.json
@@ -24,11 +24,12 @@
   ],
   "dependencies": {
     "jsesc": "^0.5.0",
-    "loader-utils": "~0.2.2"
+    "loader-utils": "~0.2.6"
   },
   "devDependencies": {
+    "baggage-loader": "^0.2.1",
     "html-loader": "^0.2.2",
     "raw-loader": "^0.5.1",
-    "webpack": "^1.2.0"
+    "webpack": "^1.7.0"
   }
 }
diff --git a/test/src/baggage-test/baggage-test.js b/test/src/baggage-test/baggage-test.js
@@ -0,0 +1,9 @@
+angular.module('testModule')
+    .directive('baggage', function() {
+
+        return {
+            restrict: 'E',
+            templateUrl: require('../../index.js!html-loader!')
+        }
+
+    });
diff --git a/test/src/baggage-test/bagge-test.html b/test/src/baggage-test/bagge-test.html