CODEWITHSUNDEEP
javascriptangularjs
Enio Carvalho
Enio Carvalho

Reputation: 153

Load several templates from a single file

I have a project containing several sections. Each section (inside a dropdown item menu) requires specifics templates. I want group these templates in a file and cache them when the user make click on the menu item that show the dropdown menu. This way, when selecting a specific option from the dropdown menu, the respective template will be already loaded. The same for the other sections. I don't want put all the templates inside the index file, nor use a script that load all templates, because the user will not navigate to all sections of the system. Any suggestions?

Upvotes: 0

Views: 67

Answers (3)

Enio Carvalho
Enio Carvalho

Reputation: 153

My solution: I create a folder partials and inside folders named by sections containing the templates in separated files. So, no problem when using ui-router and user hit F5 or navigate direct to a specific url. After that, I used grunt to concatenate all those files in one and grab it in partial folders, naming it section+'Templates.html'. Now, when the user click to open the dropdown menu, this method is invocated with the contextual section. 

    $scope.tempGroupLoaded=[];
    $scope.loadTemplates = function(section) {
        if ($scope.tempGroupLoaded.indexOf(section)>-1) return;
        $scope.tempGroupLoaded.push(section);
        $http.get('partials/'+section+'Templates.html').success(function(data) {
            $(data).filter('script,.myTemplates').each(function() {
                $templateCache.put('partials/'+section+'/'+$(this).attr('id'), $(this).html());
            });
        });
    }

Upvotes: 0

Ben
Ben

Reputation: 391

As TheHippo said, you can using $templateCache.

But you may want to try grunt angular templates. So, you can develop in multi template html files, then combine these template into a single js file, and deploy it.

https://npmjs.org/package/grunt-angular-templates

Upvotes: 0

TheHippo
TheHippo

Reputation: 63139

Sound like you could leverage $templateCache.

The loading of the files has to be done by yourself, but once the templates are in the cache you could use them as usual.

Upvotes: 1

Related Questions