delay including of html files in angularjs ng-include

I have a series of html files I am including into my main controller. These html files are not actually being used for atleast 4 seconds while one html file does its stuff. How would I define to delay loading of rest of the files to improve startup performance of the app.

<div ng-app="myApp" ng-controller="myController" >
    <div ng-include="somefile.html" ></div>
    <!-- More files to include -->
</div>

Answers:

Answer

Another solution(less elegant) could be:

<div ng-app="myApp" ng-controller="myController" >
    <div ng-include="template" ></div>
    <!-- More files to include -->
</div>

In your controller initialize template with

$scope.template = '';

And do

$scope.template = 'somefile.html';

when you need the template to be loaded.

Answer

Load these asynchron with promises. This covers the idea:

var promise = $http.get('someFile.html').success(function (data) {
        htmlContent = data.response;
    });

promise.then(function(result) {
    $scope.model = result;
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.