add template HTML to $templateCache using grunt-html2js

[prayagverma]

Made grunt-html2js plugin functional. Fetching template from $templateCache rather than getTemplate function

Also added bower_components to gitignore file

[softvar]

Have you verified this change well? .tpl file would go in dist too, right?
I remember there were some path related issues when I tried using html2js.

[prayagverma]

@softvar I have tested the above changes by building & running it via a local server. They work as intended. You can also try it yourself on the html2js branch of my fork. To clear any doubts that might arise, let me explain how I have gone about implementing the html2js grunt task.

Currently, when running the html2js task, it generates a file named templates.js in the src folder which contains the HTML template of the directive inserted into the $templateCache. Previously, as no module option was supplied to the html2js task in Gruntfile, it added the $templateCache to a module named templates-main (By default, module name to which the $templateCache is added, is named templates-TARGET. In our case, the target name was main). As this module was not added as a dependency to main module (aka wingify.timePicker), even if we tried to mention the HTML template in templateURL , it would throw a 404 error (As the $templateCache and the module to which it belonged wasn't included as an dependency, therefore Angular started to look for the actual HTML file at a particular location, which wasn't present there).

To solve this issue, first I explicitly named the module generated by html2js task to html2js (Refer to this). After that, I added that module as a dependency in the main module wingify.timePicker (Refer to this ). Now the template's HTML (required via the templateURL) would be fetched via $templateCache rather than the actual HTML file.

Now the the next step was to make the templates.js file available in the dist folder somehow. To solve this problem, I created the dev target under uglify task (Refer to this) to concatenate templates.js and angular-time-picker.js into angular-time-picker.js (basically I merged the file containing the $templateCache into the file containing the main directive, so that there isn't any problem with main module failing to load because of not finding the module containing $templateCache , on which it depends)

The presence of .tpl in the name of JavaScript file normally indicates that the template HTML (present in $templateCache) is included inside that file. The absence of .tpl from the file name normally means, that the file only includes source code but the template HTML (in form of $templateCache) isn't included in it. What I have done above, is include the directive's template HTML (in form of $templateCache) in angular-time-picker.js directly rather than include it in a file named angular-time-picker.tpl.js

[prayagverma]

@softvar Sorry for bugging you, let me know in case you want anything changed or found something lacking in this PR. Will be happy to do those changes

[softvar]

Hey @pra85
Sorry for reaching out late.

Thanks for the patch. It works perfectly! 👍

[softvar]

https://github.com/wingify/angular-time-picker#contributors 😄