take the *html fragment* out of the js file, and use *grunt-angular-templates*…

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

.gitignore

 node_modules/
 .idea/
 bower_components/
+temp/
\ No newline at end of file

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 @@
 </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']);
 

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-12 */
+/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-13 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file

package.json

@@ -13,9 +13,11 @@
   ],
   "devDependencies": {
     "grunt": "~0.4.2",
+    "grunt-angular-templates": "^0.5.7",
     "grunt-contrib-mincss": "~0.3.2",
     "grunt-contrib-uglify": "~0.2.2",
     "grunt-recess": "~0.4.0",
+    "grunt-replace": "^0.11.0",
     "recess": "~1.1.9"
   },
   "author": "Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>",

src/rzSliderTpl.html

+<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
+<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
+<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
+<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
+<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
+<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
+<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
+<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
+<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
\ No newline at end of file

src/rzslider.js

@@ -31,20 +31,6 @@
 
 var module = angular.module('rzModule', [])
 
-.run(['$templateCache', function($templateCache) {
-  'use strict';
-  var template = '<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>' + // 0 The slider bar
-              '<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span>' + // 1 Highlight between two handles
-              '<span class="rz-pointer"></span>' + // 2 Left slider handle
-              '<span class="rz-pointer"></span>' + // 3 Right slider handle
-              '<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
-              '<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
-              '<span class="rz-bubble"></span>' + // 6 Label above left slider handle
-              '<span class="rz-bubble"></span>' + // 7 Label above right slider handle
-              '<span class="rz-bubble"></span>'; // 8 Range label when the slider handles are close ex. 15 - 17
-  $templateCache.put('rzSliderTpl.html', template);
-}])
-
 .value('throttle',
   /**
    * throttle
@@ -1335,5 +1321,7 @@ function throttle(func, wait, options) {
  * @property {bool} trailing
  */
 
+  /*templateReplacement*/
+
   return module
 }));