take the *html fragment* out of the js file, and use *grunt-angular-templates* and *grunt-replace* plugin to generate the templateCache and insert it into the js file

Author: e-cloud

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .idea/
 bower_components/
+temp/

Gruntfile.js

@@ -37,18 +37,63 @@ module.exports = function (grunt)
       rzslider: {
         files: {
           'dist/rzslider.min.js': [
-            'src/rzslider.js'
+            'dist/rzslider.js'
           ]
         }
       }
+    },
+
+    ngtemplates:  {
+      app:        {
+        src:      'src/**.html',
+        dest:     'temp/templates.js',
+        options:  {
+          htmlmin: {
+            collapseBooleanAttributes:      true,
+            collapseWhitespace:             true,
+            removeAttributeQuotes:          true,
+            removeComments:                 true, // Only if you don't use comment directives!
+            removeEmptyAttributes:          true,
+            removeRedundantAttributes:      true,
+            removeScriptTypeAttributes:     true,
+            removeStyleLinkTypeAttributes:  true
+          },
+          module: 'rzModule',
+          url: function(url) {
+	        return url.replace('src/', '');
+          },
+	      bootstrap: function (module, script) {
+		    return 'module.run([\'$templateCache\', function($templateCache) {\n' + script + '\n}]);';
+	      }
+        }
+      }
+    },
+
+    replace: {
+      dist: {
+        options: {
+          patterns: [
+            {
+              match: /\/\*templateReplacement\*\//,
+              replacement: '<%= grunt.file.read("temp/templates.js") %>'
+            }
+          ]
+        },
+        files: [
+          {expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
+        ]
+      }
     }
+    
   });
 
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-recess');
+  grunt.loadNpmTasks('grunt-angular-templates');
+  grunt.loadNpmTasks('grunt-replace');
 
   grunt.registerTask('default', ['css', 'js']);
 
   grunt.registerTask('css', ['recess']);
-  grunt.registerTask('js', ['uglify']);
+  grunt.registerTask('js', ['ngtemplates','replace', 'uglify']);
 };

demo/index.html

@@ -115,7 +115,7 @@ <h2>Toggle slider example</h2>
 </body>
 
 <script src="../bower_components/angular/angular.min.js"></script>
-<script src="../src/rzslider.js"></script>
+<script src="../dist/rzslider.js"></script>
 <script>
     var app = angular.module('plunker', ['rzModule']);