chore(minification): Moved templates into HTML files

Extracted templates from script files and moved them into separate
HTML files so they can be easily edited and minified during build.

References #27.

.jshintrc

@@ -1,5 +1,5 @@
 {
-    "strict": true,
+    "globalstrict": true,
     "curly": true,
     "eqeqeq": true,
     "immed": true,

Gruntfile.js

@@ -15,6 +15,10 @@ module.exports = function(grunt) {
                 out: 'build/<%= pkg.name %>.css',
                 outMin: 'tmp/<%= pkg.name %>.min.css'
             },
+            html: {
+                src: ['templates/tags-input.html', 'templates/auto-complete.html'],
+                out: 'tmp/templates.js'
+            },
             zip: {
                 unminified: 'build/<%= pkg.name %>.zip',
                 minified: 'build/<%= pkg.name %>.min.zip'
@@ -45,22 +49,38 @@ module.exports = function(grunt) {
             build: ['build/'],
             tmp: ['tmp/']
         },
+        // Compiles the HTML templates into a Javascript file
+        ngtemplates: {
+            'tags-input': {
+                files: {
+                    '<%= files.html.out %>': ['<%= files.html.src %>']
+                },
+                options: {
+                    url: function(url) {
+                        return 'ngTagsInput/' + url.replace('templates/', '');
+                    },
+                    htmlmin: {
+                        collapseWhitespace: true,
+                        removeRedundantAttributes: true
+                    }
+                }
+            }
+        },
         // Concatenates all source files into one JS file and one CSS file
         concat: {
             js: {
                 options: {
                     banner: '(function() {\n\'use strict\';\n\n',
                     footer: '\n}());',
                     process: function(src) {
-                        // Remove all (function() {'use strict'; and }()) from the code and
+                        // Remove all 'use strict'; from the code and
                         // replaces all double blank lines with one
-                        return src.replace(/\(function\(\) \{\n'use strict';\n\s*/g, '')
-                                  .replace(/\n\}\(\)\);/g, '')
+                        return src.replace(/'use strict';\n/g, '')
                                   .replace(/\n\n\s*\n/g, '\n\n');
                     }
                 },
                 files: {
-                    '<%= files.js.out %>': ['<%= files.js.src %>']
+                    '<%= files.js.out %>': ['<%= files.js.src %>', '<%= files.html.out %>']
                 }
             },
             css: {
@@ -140,6 +160,7 @@ module.exports = function(grunt) {
         'jshint',
         'karma',
         'clean',
+        'ngtemplates',
         'concat',
         'ngAnnotate',
         'uglify',

build/ng-tags-input.js

@@ -68,23 +68,7 @@ angular.module('tags-input').directive('tagsInput', ["$timeout","$document","con
         },
         replace: false,
         transclude: true,
-        template: '<div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append>' +
-                  '  <div class="tags" ng-class="{focused: hasFocus}">' +
-                  '    <ul>' +
-                  '      <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
-                  '        <span>{{ tag }}</span>' +
-                  '        <button type="button" ng-click="remove($index)">{{ options.removeTagSymbol }}</button>' +
-                  '      </li>' +
-                  '    </ul>' +
-                  '    <input type="text"' +
-                  '           placeholder="{{ options.placeholder }}"' +
-                  '           size="{{ options.placeholder.length }}"' +
-                  '           maxlength="{{ options.maxLength }}"' +
-                  '           tabindex="{{ options.tabindex }}"' +
-                  '           ng-model="newTag"' +
-                  '           ng-change="newTagChange()">' +
-                  '  </div>' +
-                  '</div>',
+        templateUrl: 'ngTagsInput/tags-input.html',
         controller: ["$scope","$attrs","$element", function($scope, $attrs, $element) {
             var events = new SimplePubSub(),
                 shouldRemoveLastTag;
@@ -356,15 +340,7 @@ angular.module('tags-input').directive('autoComplete', ["$document","$timeout","
         restrict: 'E',
         require: '?^tagsInput',
         scope: { source: '&' },
-        template: '<div class="autocomplete" ng-show="suggestionList.visible">' +
-                  '  <ul class="suggestions">' +
-                  '    <li class="suggestion" ng-repeat="item in suggestionList.items | limitTo:options.maxResultsToShow"' +
-                  '                           ng-class="{selected: item == suggestionList.selected}"' +
-                  '                           ng-click="addSuggestion()"' +
-                  '                           ng-mouseenter="suggestionList.select($index)"' +
-                  '                           ng-bind-html="highlight(item)"></li>' +
-                  '  </ul>' +
-                  '</div>',
+        templateUrl: 'ngTagsInput/auto-complete.html',
         link: function(scope, element, attrs, tagsInputCtrl) {
             var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
                 suggestionList, tagsInput, highlight;
@@ -474,6 +450,7 @@ angular.module('tags-input').directive('autoComplete', ["$document","$timeout","
         }
     };
 }]);
+(function() {
 
 /**
  * @ngdoc directive
@@ -490,6 +467,9 @@ angular.module('tags-input').directive('transcludeAppend', function() {
     };
 });
 
+}());
+(function() {
+
 /**
  * @ngdoc service
  * @name tagsInput.service:configuration
@@ -516,5 +496,18 @@ angular.module('tags-input').service('configuration', ["$interpolate", function(
     };
 }]);
 
+}());
+
+angular.module('tags-input').run(['$templateCache', function($templateCache) {
+
+  $templateCache.put('ngTagsInput/tags-input.html',
+    "<div class=\"ngTagsInput\" tabindex=\"-1\" ng-class=\"options.customClass\" transclude-append=\"\"><div class=\"tags\" ng-class=\"{focused: hasFocus}\"><ul><li ng-repeat=\"tag in tags\" ng-class=\"getCssClass($index)\"><span>{{tag}}</span> <button type=\"button\" ng-click=\"remove($index)\">{{options.removeTagSymbol}}</button></li></ul><input placeholder=\"{{options.placeholder}}\" size=\"{{options.placeholder.length}}\" maxlength=\"{{options.maxLength}}\" tabindex=\"{{options.tabindex}}\" ng-model=\"newTag\" ng-change=\"newTagChange()\"></div></div>"
+  );
+
+  $templateCache.put('ngTagsInput/auto-complete.html',
+    "<div class=\"autocomplete\" ng-show=\"suggestionList.visible\"><ul class=\"suggestions\"><li class=\"suggestion\" ng-repeat=\"item in suggestionList.items | limitTo:options.maxResultsToShow\" ng-class=\"{selected: item == suggestionList.selected}\" ng-click=\"addSuggestion()\" ng-mouseenter=\"suggestionList.select($index)\" ng-bind-html=\"highlight(item)\"></li></ul></div>"
+  );
+
+}]);
 
 }());

karma.conf.js

@@ -21,9 +21,19 @@ module.exports = function(config) {
       'src/tags-input.js',
       'src/auto-complete.js',
       'src/transclude-append.js',
-      'src/configuration.js'
+      'src/configuration.js',
+      'templates/*.html'
     ],
 
+    preprocessors: {
+        'templates/*.html': ['ng-html2js']
+    },
+
+    ngHtml2JsPreprocessor: {
+        stripPrefix: 'templates/',
+        prependPrefix: 'ngTagsInput/',
+        moduleName: 'tags-input'
+    },
 
     // list of files to exclude
     exclude: [

package.json

@@ -25,7 +25,9 @@
         "grunt-contrib-clean": "=0.5.0",
         "grunt-contrib-concat": "=0.3.0",
         "grunt-ng-annotate": "=0.0.4",
+        "grunt-angular-templates": "=0.5.0",
         "grunt-karma": "=0.6.2",
+        "karma-ng-html2js-preprocessor": "=0.1.0",
         "load-grunt-tasks": "=0.2.0"
     }
 }

src/auto-complete.js

@@ -1,4 +1,3 @@
-(function() {
 'use strict';
 
 /**
@@ -93,15 +92,7 @@ angular.module('tags-input').directive('autoComplete', function($document, $time
         restrict: 'E',
         require: '?^tagsInput',
         scope: { source: '&' },
-        template: '<div class="autocomplete" ng-show="suggestionList.visible">' +
-                  '  <ul class="suggestions">' +
-                  '    <li class="suggestion" ng-repeat="item in suggestionList.items | limitTo:options.maxResultsToShow"' +
-                  '                           ng-class="{selected: item == suggestionList.selected}"' +
-                  '                           ng-click="addSuggestion()"' +
-                  '                           ng-mouseenter="suggestionList.select($index)"' +
-                  '                           ng-bind-html="highlight(item)"></li>' +
-                  '  </ul>' +
-                  '</div>',
+        templateUrl: 'ngTagsInput/auto-complete.html',
         link: function(scope, element, attrs, tagsInputCtrl) {
             var hotkeys = [KEYS.enter, KEYS.tab, KEYS.escape, KEYS.up, KEYS.down],
                 suggestionList, tagsInput, highlight;
@@ -210,6 +201,4 @@ angular.module('tags-input').directive('autoComplete', function($document, $time
             });
         }
     };
-});
-
-}());
+});

src/keycodes.js

@@ -7,4 +7,4 @@ var KEYS = {
     up: 38,
     down: 40,
     comma: 188
-};
+};

src/tags-input.js

@@ -1,4 +1,3 @@
-(function() {
 'use strict';
 
 angular.module('tags-input', []);
@@ -57,23 +56,7 @@ angular.module('tags-input').directive('tagsInput', function($timeout, $document
         },
         replace: false,
         transclude: true,
-        template: '<div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append>' +
-                  '  <div class="tags" ng-class="{focused: hasFocus}">' +
-                  '    <ul>' +
-                  '      <li ng-repeat="tag in tags" ng-class="getCssClass($index)">' +
-                  '        <span>{{ tag }}</span>' +
-                  '        <button type="button" ng-click="remove($index)">{{ options.removeTagSymbol }}</button>' +
-                  '      </li>' +
-                  '    </ul>' +
-                  '    <input type="text"' +
-                  '           placeholder="{{ options.placeholder }}"' +
-                  '           size="{{ options.placeholder.length }}"' +
-                  '           maxlength="{{ options.maxLength }}"' +
-                  '           tabindex="{{ options.tabindex }}"' +
-                  '           ng-model="newTag"' +
-                  '           ng-change="newTagChange()">' +
-                  '  </div>' +
-                  '</div>',
+        templateUrl: 'ngTagsInput/tags-input.html',
         controller: function($scope, $attrs, $element) {
             var events = new SimplePubSub(),
                 shouldRemoveLastTag;
@@ -251,6 +234,4 @@ angular.module('tags-input').directive('tagsInput', function($timeout, $document
             });
         }
     };
-});
-
-}());
+});

templates/auto-complete.html

@@ -0,0 +1,10 @@
+<div class="autocomplete" ng-show="suggestionList.visible"> 
+  <ul class="suggestions">
+    <li class="suggestion"
+        ng-repeat="item in suggestionList.items | limitTo:options.maxResultsToShow"
+        ng-class="{selected: item == suggestionList.selected}"
+        ng-click="addSuggestion()"
+        ng-mouseenter="suggestionList.select($index)"
+        ng-bind-html="highlight(item)"></li>
+  </ul>
+</div>

templates/tags-input.html

@@ -0,0 +1,17 @@
+<div class="ngTagsInput" tabindex="-1" ng-class="options.customClass" transclude-append> 
+  <div class="tags" ng-class="{focused: hasFocus}">
+    <ul>
+      <li ng-repeat="tag in tags" ng-class="getCssClass($index)">
+        <span>{{tag}}</span>
+        <button type="button" ng-click="remove($index)">{{options.removeTagSymbol}}</button>
+      </li>
+    </ul>
+    <input type="text"
+           placeholder="{{options.placeholder}}"
+           size="{{options.placeholder.length}}"
+           maxlength="{{options.maxLength}}"
+           tabindex="{{options.tabindex}}"
+           ng-model="newTag"
+           ng-change="newTagChange()">
+  </div>
+</div>

test/auto-complete.spec.js

@@ -1,4 +1,3 @@
-(function() {
 'use strict';
 
 describe('autocomplete-directive', function() {
@@ -37,8 +36,9 @@ describe('autocomplete-directive', function() {
         };
 
         parent = $compile('<tags-input ng-model="whatever"></tags-input>')($scope);
-        parentCtrl = parent.controller('tagsInput');
+        $scope.$digest();
 
+        parentCtrl = parent.controller('tagsInput');
         spyOn(parentCtrl, 'registerAutocomplete').andReturn(tagsInput);
 
         options = jQuery.makeArray(arguments).join(' ');
@@ -726,5 +726,3 @@ describe('autocomplete-directive', function() {
         });
     });
 });
-
-})();

test/tags-input.spec.js

@@ -1,4 +1,3 @@
-(function() {
 'use strict';
 
 describe('tags-input-directive', function() {
@@ -21,8 +20,8 @@ describe('tags-input-directive', function() {
         var template = '<tags-input ng-model="tags" ' + options + '></tags-input>';
 
         element = $compile(template)($scope);
-        isolateScope = element.isolateScope();
         $scope.$digest();
+        isolateScope = element.isolateScope();
     }
 
     function getTags() {
@@ -965,6 +964,4 @@ describe('tags-input-directive', function() {
             expect(autocompleteObj.getTags()).toEqual(['a', 'b', 'c']);
         });
     });
-});
-
-}());
+});

test/transclude-append.spec.js

@@ -1,4 +1,3 @@
-(function() {
 'use strict';
 
 describe('transclude-append-directive', function () {
@@ -55,7 +54,4 @@ describe('transclude-append-directive', function () {
         var content = $.map(element.find('p'), function(e) { return $(e).html(); });
         expect(content).toEqual(['existing content', 'transcluded content']);
     });
-});
-
-
-}());
+});