0

I am minifying my angularjs application and as part of which I used gulp-ng-html2js to minify the partials, that seems really good because it convert all the html partials into a single javascript file, but then I'm not sure how to use/invoke this javascript file from my application to access the partial, I tried to find some kind of documentation but and nothing is available on the web; may be my search terms or keys aren't accurate enough. Please find the code below. Please do help me figure out this, frankly speaking I believe I'm missing something basic out there.

//gulp script for minification of html partials
...
....
....
gulp.task('htmlmin', function () {
    var opts = {
        empty: true,
        spare: true,
        quotes: true
    };

    gulp.src(paths.partialsSrc)
        .pipe(minifyhtml(opts))
        .pipe(ngHtml2Js({
            moduleName: "erentrollinternet",
            prefix: "/partials/"
        }))
        .pipe(concat("partials.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest(paths.partialsDest));
});
....
....


// this is the resulting file
!function(t){
    try
    {
        t=angular.module("modulename")
    }
    catch(e)
    {
        t=angular.module("modulename",[])
    }
    t.run(["$templateCache",
    function(t)
    {
        t.put("/partials/components/building/Buildings.html",
        '<div class="main"><div class="controls">
            .....
            .....
            .....
          </div></div></div>')}])
    }(),
    function(t)
    {
        try{t=angular.module("erentrollinternet")
    }catch(e)
    {
        t=angular.module("erentrollinternet",[])
    }

}])}();
Grandhe
  • 3
  • 2
  • are you asking what you should do aside from including `partials.min.js` in your HTML scripts? – Claies Aug 13 '15 at 20:09
  • Yes you are correct, that's my question – Grandhe Aug 13 '15 at 21:02
  • if you open the partials.min.js, you will see that it adds those in $templateCache. so you dont need to do anything extra to access those html.. angular will take care of those. – harishr Aug 14 '15 at 04:51

1 Answers1

0

the keys used to store templates in $templateCache are the same as the url you would use if the files were still on server.

angular will look in $templateCache any time you set a templateUrl in routing, directive , ng-include etc

If that url is found in cache it will pull the html out of the cache object internally. If not found it will make a server request for the template

In short, you shouldn't have to do anything different in your module code to use them the way they are minified now.

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thank you for the information, I'm now enlightened with that part, but like understand a little more on this since I don't find it working for me, I also read the documentation $templateCache it doesn't give anything more than what you answered. I have the following directory structure 'project-> {appfolder and index.html}->components->account->accountPartial.html' I have the same path in the templateUrl as well as in the min file as key not sure why the application not able to find the partial file when I launch – Grandhe Aug 17 '15 at 17:53
  • any script errors? Any data not resolving? Check dev tools network to see if any clues there – charlietfl Aug 17 '15 at 22:13
  • I did check that, I don't an error except for network 404 file not found. Can you please give me a little more information about this module name in the min.js file, the location key seems to be good but I have a doubt with the module name, what is the significance of the module name while generating the min.js file, I did try both by keeping the module name same as the app module and different name as well. Only thing I see the URL flickering and the network output showing 404 file not found... – Grandhe Aug 18 '15 at 13:46
  • I have another doubt as well, currently my project structure is like this `Project > app.js > index.html > app > > components > > > account (business modules) > > > > Account.html >> > > AccountController.js` for such kind of structure gulp documentation prescribes different gulp script but that didn't work either. – Grandhe Aug 18 '15 at 13:56