Search code examples
htmlangularjsangular-ui-router

Run controller only first time tab was clicked - AngularJS

I'm developing a website for our company, and one of the pages contains several tabs :

enter image description here

I want the loading operation to be done for each tab only once and not every time I click it, because these tabs have some API calls, and reloading takes time.

What is the best way to do it? I'm using Ui-router and ui-sref to move between each tab :

<div class="col-xs-2">
        <div class="panel panel-default">
            <div class="list-group panel panel-default">

                <a ui-sref="dashboards.firstTab" ui-sref-active="active" class="list-group-item" id="firstTab_button">
                    <i style="color:darkblue" class="fa fa-area-chart"></i>&nbsp; TAB1 </a>

                <a ui-sref="dashboards.secondTab" ui-sref-active="active" class="list-group-item" id="secondTab_button">
                    <i style="color:darkblue" class="fa fa-line-chart"></i>&nbsp; TAB2 </a>

                <a ui-sref="dashboards.thirdTab" ui-sref-active="active" class="list-group-item" id="thirdTab_button">
                    <i style="color:darkblue" class="fa fa-server"></i>&nbsp; TAB3 </a>

            </div>
        </div>
    </div>




<div ui-view class="col-xs-12">

            <div class="row">
                <div class="col-xs-12" ng-if="vm.isTabOneSelected">
                    <div ng-include src="'components/Cards/Tabs/TabOne/TabOne.html'"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12" ng-if="vm.isTabTwoSelected">
                    <div ng-include src="'components/Cards/Tabs/TabTwo/TabTwo.html'"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12" ng-if="vm.isTabThreeSelected">
                    <graph-panel  panel-title="TabThree {{vm.isTabThreeSelected}}" chart-config="vm.charts.TabOneChartSite"></graph-panel>
                </div>
            </div>

        </div>
Solution

  • On Each Controller, You can cache your loaded data in a service, and when you load your controller you will start by checking this service if it does not have the data, then you will request it from your APIs , in this case you only request your data once you access the tab for the first time :

    eg. your service

    app.service('dataService', function() {

    this.firstTabData =  null;

    this.getFirstTabData = function () {
        return this.firstTabData;
    };

    this.setFirstTabData = function (data) {
        this.firstTabData = data;
    };
});

    your controller 

    app.controller('tabOne', function($scope, dataService) {
    $scope.data = {};

    $scope.load = function () {
        if(dataService.getFirstTabData()) {
            $scope.data = dataService.getFirstTabData();
        }
        else {
            $scope.data = getDataFromAPI();
        }

    };

    var getDataFromAPI = function () {
         //get your data 

         dataService.setFirstTabData(dataFromAPI);
    };


});