lazy loading - ng-include

[chri...@googlemail.com]

Hi,

I have implemented tabbing using ng-include and ng-show. For every content of the tabs I have a seperate div that fetches it's content via ng-include.
So at initial pageload every tabcontent is loaded into the dom. I am using ng-show on the tab contents div to only show 1 tab.

As this is not ressource efficient with many tabs I would like to switch to a lazy loading approach.
The only way I found out to stop ng-include's from eager fetching is to wrap it in a ng-switch statement. 

This comes with a problem for my use case:

Lets say I have 2 conditions (A, B) in the ng-switch which reference to Tab A and B. 

When I hit condition A, it will evaluate the ng-include of tab A and load its content into the DOM. 

After that I hit condition B which results in that the DOM of A is beeing replaced by B.
So if I go back and hit condition A again, I lost all the UI state of the first step.(filled out forms etc) 

So my goal is the following scenario:
1. When a user clicks a tab, the content should be loaded (lazy-loading, as it loads on deman when the user clicks).
2. When the user switches to another tab and then comes back, he should find the exact same state as he left. (leave the dom from step 1 as it is, just hide it).

Have you got any idea how to implement this with angular? Is there a way to do this with jquery dom manipulation? 

(the html files which I load for the tabcontents contain angular expressions as well)

Thanks,
Chris

[chri...@googlemail.com]

Hi all,

I found a way how to do it.
The trick is to use ng-include with the "src" attribute not initially set.
At the point where you want the (lazy) loading to occur, you set it to the corresponding url.

In combination with ng-show you can then easily realize lazy loaded tabs, which keep their ui state even when switching between.

Here is some sample code:

<div ng-controller="Ctrl">

    <div ng-repeat="tab in tabs">

         <div ng-show="currentTab==tab">

                   <ng-include src="tab.lazyurl"></ng-include>

          </div>

    </div>

</div>

function Ctrl($scope) {

    $scope.setTab = function(tab) {

          tab.lazyurl = tab.url;

          $scope.currentTab = tab;

    };

    $scope.loadurl = '';

    

    $scope.tabs = [ 

        { title: 'tab1', url: 'tab1.html'}, 

        { title: 'tab2', url: 'tab2.html'},

        { title: 'tab3', url: 'tab3.html'}

    ];

    $scope.setTab($scope.tabs[0]);

}

Regards,
Chris

[Chetan Revankar]

Chris,

I am using ng-if and ng-include to solve lazy loading issue.  on click of event the ng-if condition is set true.  let me know if you see an issue with the approach.

check the code snippedt;http://bootply.com/89516 

<div ng-app="">

    <div ng-model="tabExample">

        <ul id="myTab" class="nav nav-tabs">

            <li class="active"><a href="#home" data-toggle="tab">Home</a>

            </li>

            <li><a href="#profile" data-toggle="tab" ng-click="tabExample.profile.loaded=true">Profile</a>

            </li>

        </ul>

        <div id="myTabContent" class="tab-content">

            <div class="tab-pane fade in active" id="home">

                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt

                    tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,

                    williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh

                    dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson

                    ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan

                    american apparel, butcher voluptate nisi qui.</p>

            </div>

            <div class="tab-pane fade" id="profile">

                <div>Tab clicked {{tabExample.profile.loaded}}</div>

              <div ng-include="'/replacemyserver/foo'" ng-if="tabExample.profile.loaded">

            </div>

        </div>

    </div>

</div></div>

Chetan