ng-Include is very slow with the external template

Question

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 r

Answer 1

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

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

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

And then normally include the template:

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

Answer 2

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

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