Ng-include Is Very Slow With The External Template

I have used ng-include as shown below.But it is very slow.In other words it shows tab's heading without the content of it.Later it loads the content.Which is really BAD.But if I us

Solution 1:

Here is the solution.You can use $templateCache service.

app.js

appModule.run(["$templateCache", "$http", function ($templateCache, $http) {
    $http.get('~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml', { cache: $templateCache });

}]);

cshtml page

<divng-include="'~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml'"></div>

Solution 2:

I would recommend using the template cache generator like grunt-html2js

But according angularjs documentation you can cache a template nesting the content as:

<scripttype="text/ng-template"id="templateId.html"><p>This is the content of the template</p></script>

And then normally include the template:

<divng-include=" 'templateId.html' "></div>