Angular loading template inline

Question

In an angular js 1.2.22 version code, I saw this in the HTML

<div class="mainContent" ng-include="content"> </div>

and in its corresponding controller, I see this.

$scope.content = 'templates/contents/home.html';

I see its making an Ajax call to load the template.

I am working on improving the speed of the content display and I did some optimizations like minifying the javascript code and minifying css

My doubt is how to make this inline - without making the Ajax call. So, that I could check if there is visible difference in speed of the content showing up for this template?

I tried the gulp-angular-templatecache to cache templates but, it did not work. Is there any workaround for this so that I can make this template inline ?

xsh.7 · Accepted Answer · 2015-04-26 16:09:28Z

1

What you're looking for is Angular's $templateCache.

Depending on your task runner, you might want to give gulp-angular-templatecache or grunt-angular-templatecache a try.

answered Apr 26, 2015 at 16:09

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ajeesh Joshy Over a year ago

I used the template cache, but, its still loading the template from Ajax response. I see that, it uses this <div class="mainContent" ng-include="content"> </div> and in its corresponding controller code, its written like this $scope.content = 'templates/contents/home.html'; Is there any way I can make this template inline ?

xsh.7 Over a year ago

Check your dist js file, if the templates are put in the $templateCache using the correct path. If not, they may not be included in your build process or use the wrong path.

Ajeesh Joshy Over a year ago

I can see the new template.js file was generated and it was placed in the js folder - as I given in the gulp configuration. And I concatenated this template.js file to create the app.min.js file to create the single js file using gulp. Still its making Ajax call to load template. I tested this on a normal simple Angular js app, and it worked. In this case, I wonder, if using ng-include="content" is the problem.

xsh.7 Over a year ago

ngInclude is not the problem. This should work fine. Check the content of your template.js file and see, if the paths in $tempalteCache.put() (e.g. templates/contents/home.html) are correct. If that's the case, make sure the options standalone and module for angular-templatecache task are correct.

Collectives™ on Stack Overflow

Angular loading template inline

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest